# 핵심 기능

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

#### Package metadata

```json
{
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/boards",
      "facade": "@univerjs-pro/boards/facade"
    },
    {
      "client": "@univerjs-pro/boards-ui",
      "locale": "@univerjs-pro/boards-ui/locale/ko-KR",
      "style": "@univerjs-pro/boards-ui/lib/index.css",
      "facade": "@univerjs-pro/boards-ui/facade"
    }
  ],
  "license": true,
  "server": false
}
```

Univer Boards 핵심 기능은 페이지 및 요소 모델과 대화형 브라우저 캔버스를 결합합니다. 모델과 UI는 두 개의 Web SDK 패키지로 제공되며 독립적인 `UNIVER_BOARD` 단위로 동작합니다.

## 기능

* **페이지와 요소 순서**: 페이지는 `pages`에, 그릴 수 있는 객체는 각 페이지의 `elements`에 저장하며 두 계층 모두 명시적인 순서 배열을 사용합니다.
* **캔버스 요소**: 텍스트, 도형, 이미지, 연결선, 그룹, 컨테이너, 스윔레인을 다룹니다.
* **명령 기반 편집**: 요소 변경, 순서, 상하위 관계를 하나의 명령 계층으로 전달하고 권한 및 선택적 기록·협업 통합용 훅을 제공합니다.
* **브라우저 캔버스**: 요소를 렌더링하고 선택, 변형, 클립보드, 텍스트 편집, 뷰포트 제어, 패널을 제공합니다.
* **확장 가능한 어댑터**: 표, 마인드맵, 차트, 리소스, 인쇄, 교환과 같은 선택적 Boards 기능을 추가합니다.
* **영속화**: 페이지, 리소스, 테마, 활성 페이지 상태를 포함한 `IBoardData` 스냅샷을 생성하고 복원하고 저장합니다.

## 플러그인 모드

### 설치

[설치 및 기본 사용법](https://docs.univer.ai/ko-KR/guides/boards/getting-started/installation.md)에 설명된 Univer 런타임에 두 Boards 제품 패키지를 추가합니다.

#### npm

```bash
npm install @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### pnpm

```bash
pnpm add @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### yarn

```bash
yarn add @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### bun

```bash
bun add @univerjs-pro/boards @univerjs-pro/boards-ui
```

### 제품 플러그인 등록

설치 가이드에 따라 공유 렌더링, 문서, 드로잉, 잉크, 도형 편집 종속성과 라이선스를 먼저 등록한 다음 Boards 플러그인을 등록합니다.

```ts
import { UniverBoardsPlugin } from '@univerjs-pro/boards'
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'

import '@univerjs-pro/boards-ui/lib/index.css'

univer.registerPlugin(UniverBoardsPlugin)
univer.registerPlugin(UniverBoardsUIPlugin)
```

`UniverBoardsPlugin`은 Board 모델, 명령, 요소 서비스, 어댑터, 권한을 등록합니다. `UniverBoardsUIPlugin`은 렌더링된 캔버스와 브라우저 상호작용을 추가합니다.

## 프리셋 모드

현재 Univer Boards 전용 프리셋은 없습니다. 모델과 브라우저 UI 모두 플러그인 모드를 사용하세요.

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

Boards 컨텍스트 메뉴는 공통 [`MenuConfig`](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/ui.md#menuconfig)를 사용합니다. `menu`는 `UniverBoardsUIPlugin`이 아니라 기존 `UniverUIPlugin` 등록 설정에 추가합니다. 다음 예제는 복제 항목을 해당 메뉴 그룹의 맨 앞으로 옮깁니다.

### 초기 설정

```ts
import type { MenuConfig } from '@univerjs/ui'
import { UniverUIPlugin } from '@univerjs/ui'

const menu: MenuConfig = {
  'board.menu.duplicate-selection': { order: -1 },
}

univer.registerPlugin(UniverUIPlugin, { container: 'app', menu })
```

`order`는 같은 계층의 탭, 그룹 또는 메뉴 항목을 오름차순으로 정렬하며 항목을 다른 그룹으로 옮기지는 않습니다. 메뉴 항목 ID는 `data-u-command` 속성에서 확인할 수 있습니다. 명령 ID와 같다고 가정하지 마세요.

### 실행 중 업데이트

`@univerjs/ui/facade`를 가져온 후 `FUniver.newAPI(univer)`로 `univerAPI`를 생성합니다. [`updateMenuConfig()`](https://docs.univer.ai/ko-KR/reference/facade/univer.md#updatemenuconfig)는 변경 사항을 병합하고 지정하지 않은 필드를 유지하며 메뉴를 갱신합니다. 이후 등록되는 메뉴에도 설정이 적용됩니다.

```ts
import '@univerjs/ui/facade'

univerAPI.updateMenuConfig({
  'board.menu.duplicate-selection': { order: 5 },
})
```

### 캔버스 도구 모음

Boards는 별도의 캔버스 도구 모음을 사용하며 표준 제품 Ribbon을 등록하지 않습니다. `gridLayout`은 공통 그리드 Ribbon만 제어하며 캔버스 도구 모음이나 컨텍스트 메뉴를 재배치하지 않습니다. 캔버스 도구는 `UniverBoardsUIPlugin.toolbar.tools`로 설정합니다. 다음은 기존 플러그인 등록에서 펜 도구를 비활성화하는 예제입니다.

```ts
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'

univer.registerPlugin(UniverBoardsUIPlugin, {
  toolbar: { tools: { pen: false } },
})
```

`toolbar.tools`는 도구 사용 가능 여부를 제어하며 순서나 그리드 위치를 설정하지 않습니다. 캔버스 컨트롤과 공통 메뉴의 차이는 [Boards UI 참조](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs-pro/boards-ui.md)를 참고하세요.