UI 개요

아키텍처

Univer의 UI 기반은 다음 다이어그램을 바탕으로 설계되었습니다.

서로 다른 플러그인을 조합해 기반에 다양한 기능과 뷰를 추가하고, 최종적으로 완전한 애플리케이션을 구성합니다.

디자인 시스템

Univer의 디자인 시스템은 Tailwind CSS를 기반으로 구축되며, 렌더링 엔진에서 재사용하는 일련의 디자인 토큰을 만들어 렌더링 엔진과 뷰 계층의 스타일을 일관되게 유지합니다. @univerjs/themes 패키지에 저장된 이 토큰을 수정해 애플리케이션의 스타일을 맞춤 설정할 수 있습니다.

컴포넌트

Univer는 React 컴포넌트로 뷰 계층을 구성합니다. 따라서 React를 사용하는 개발자는 Univer의 컴포넌트를 사용하거나 사용자 지정 컴포넌트를 매우 쉽게 등록할 수 있습니다. 그렇다고 사용자 지정 컴포넌트를 React로만 만들 수 있는 것은 아닙니다. Univer는 Vue(3.x 버전), Web Components 등의 다른 프레임워크도 지원합니다.

모든 기본 컴포넌트는 @univerjs/design 패키지에, 아이콘 컴포넌트는 @univerjs/icons 패키지에 들어 있습니다. 이 컴포넌트들은 Univer와 별개로 사용할 수도 있습니다.

사용자 지정 컴포넌트는 주로 다음과 같은 경우에 사용합니다.

• Ribbon / Context Menu에 사용자 지정 버튼 추가
• Sidebar / Popup 등에 사용자 지정 컴포넌트 통합
• 기본 제공 컴포넌트 교체

이어지는 장에서 사용자 지정 컴포넌트를 등록하고 사용하는 방법을 자세히 설명합니다.

메뉴 순서와 그리드 레이아웃

order, gridLayout, updateMenuConfig()로 탭·그룹·항목의 순서, 그리드 배치와 실행 중 업데이트를 설정할 수 있습니다. 가이드에서 사용자 정의 메뉴의 Facade 옵션도 확인할 수 있습니다.