# UI 개요

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

`@univerjs-pro/boards-ui`는 라이선스가 필요한 Univer Boards 브라우저 캔버스를 제공합니다. 장면, 선택 및 뷰포트 상호 작용, 도구 모음, 컨텍스트 메뉴, 텍스트, 도형, 커넥터와 지원되는 Board 요소의 편집 UI를 렌더링합니다.

## Board UI 등록

Board 플러그인보다 먼저 `UniverLicensePlugin`을 구성합니다. Docs, Drawing, Ink, Shape Editor는 기술적 렌더링 및 편집 종속성이므로 해당 제품을 미리 알 필요가 없습니다.

```ts
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})
univer.registerPlugin(UniverBoardsPlugin)
univer.registerPlugin(UniverBoardsUIPlugin, {
  workbench: {
    content: true,
    header: false,
    headerMenu: false,
    toolbar: false,
    footer: false,
  },
  interaction: {
    minZoomRatio: 0.1,
    maxZoomRatio: 4,
    wheelZoomWithModifier: true,
    trackpadPanEnabled: true,
  },
})
```

전체 종속성, 스타일, 로케일 등록 순서는 [설치 및 기본 사용법](https://docs.univer.ai/ko-KR/guides/boards/getting-started/installation.md)을 참고하세요.

## 캔버스 옵션

`IUniverBoardsUIConfig`는 그리드, 삽입 기본값, 도형과 스티커 메모 색상, 도구, 뷰포트 바, 렌더 어댑터, 빠른 추가, 정밀 선택, 치수 표시, 공동 작업 커서도 제어합니다.

## 메뉴 설정과 캔버스 도구 모음

컨텍스트 메뉴 재정의에는 [`menu`와 `updateMenuConfig()`](https://docs.univer.ai/ko-KR/guides/boards/features/core.md#menu-order-and-grid-layout)를 사용합니다. Boards의 독립적인 캔버스 도구 모음은 `toolbar.tools`로 설정하며 Ribbon의 `gridLayout`으로 제어하지 않습니다.