# UI 개요

- Human documentation: [https://docs.univer.ai/ko-KR/guides/slides/ui/overview](https://docs.univer.ai/ko-KR/guides/slides/ui/overview)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/slides/ui/overview.md](https://docs.univer.ai/ko-KR/guides/slides/ui/overview.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [slides/ui/overview.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/ui/overview.ko-KR.mdx)

---

## 아키텍처

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



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

## 디자인 시스템

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

- [테마 및 다크 모드](https://docs.univer.ai/ko-KR/guides/fundamentals/ui/themes.md)

## 컴포넌트

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

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

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

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

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

- [사용자 정의 컴포넌트](https://docs.univer.ai/ko-KR/guides/slides/ui/components.md)

- [아이콘](https://docs.univer.ai/ko-KR/guides/icons.md)

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

[`order`, `gridLayout`, `updateMenuConfig()`](https://docs.univer.ai/ko-KR/guides/slides/features/core.md#menu-order-and-grid-layout)로 탭·그룹·항목의 순서, 그리드 배치와 실행 중 업데이트를 설정할 수 있습니다. 가이드에서 사용자 정의 메뉴의 Facade 옵션도 확인할 수 있습니다.