# 핵심 기능

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

#### Package metadata

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

Univer Slides 핵심 기능은 프레젠테이션 모델과 브라우저 편집 UI로 구성됩니다. 모델은 프레젠테이션을 `ISlideData` 스냅샷으로 저장하고, UI는 Univer 명령을 통해 해당 모델을 렌더링하고 편집합니다.

## 기능

* **프레젠테이션 모델**: 프레젠테이션 ID, 페이지 크기, 슬라이드 순서, 슬라이드, 마스터, 레이아웃, 테마, 전환 효과 및 리소스를 관리합니다.
* **렌더링 및 편집**: 슬라이드 캔버스, 미리 보기, 선택, 클립보드, 텍스트와 도형 편집, 맞춤 안내선 및 슬라이드 쇼를 제공합니다.
* **명령 파이프라인**: 페이지와 요소 변경을 명령과 변형으로 적용하여 모델, 렌더링, 실행 취소 및 다시 실행을 동기화합니다.
* **Facade API**: 애플리케이션용 객체를 통해 프레젠테이션을 생성, 조회, 저장하고 슬라이드와 요소를 조작합니다.
* **플러그인 아키텍처**: 표, 차트, 인쇄, 가져오기 및 내보내기 같은 선택 기능을 핵심 스택과 분리합니다.

## 플러그인 모드

### 설치

#### npm

```bash
npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### pnpm

```bash
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### yarn

```bash
yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### bun

```bash
bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

### 사용법

```ts
import { UniverLicensePlugin } from '@univerjs-pro/license'
import { UniverSlidesPlugin } from '@univerjs-pro/slides'
import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'
import SlidesUIEnUS from '@univerjs-pro/slides-ui/locale/en-US'
import SlidesEnUS from '@univerjs-pro/slides/locale/en-US'
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { FUniver } from '@univerjs/core/facade'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'
import { UniverDrawingPlugin } from '@univerjs/drawing'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'

import '@univerjs-pro/slides/facade'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs-pro/slides-ui/lib/index.css'

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS, SlidesEnUS, SlidesUIEnUS),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverUIPlugin, { container: 'app' })
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)
univer.registerPlugin(UniverDrawingPlugin)
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})
univer.registerPlugin(UniverSlidesPlugin)
univer.registerPlugin(UniverSlidesUIPlugin)

const univerAPI = FUniver.newAPI(univer)
const presentation = univerAPI.createPresentation({ name: 'Quarterly review' })
```

편집 컨트롤 없이 브라우저에서 프레젠테이션을 렌더링하려면 `UniverSlidesUIPlugin`에 `{ editor: { enabled: false } }`를 전달하세요. Node.js에서는 UI 플러그인 없이 `UniverSlidesPlugin`만 등록합니다.

## 프리셋 모드

Univer Slides는 현재 프리셋 패키지를 제공하지 않습니다. 모델 전용 런타임과 브라우저 편집기 모두 플러그인 모드를 사용하세요.

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

기존 `UniverUIPlugin` 등록에서 `menu`와 `ribbonType`을 설정합니다. 공통 UI 옵션이므로 `UniverSlidesUIPlugin`에 전달하지 않습니다. 다음 예제는 Slides의 실제 메뉴 항목 ID를 사용합니다.

### 초기 설정

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

const menu: MenuConfig = {
  'ribbon.view': { order: -1 },
  'ribbon.start.layout': { order: -1 },
  'slide.menu.insert.text': {
    order: 1,
    gridLayout: { row: 1, column: 2, rowSpan: 2, showLabel: true, width: 96 },
  },
  'slide.menu.insert.shape': {
    order: 0,
    gridLayout: { row: 1, column: 1, rowSpan: 2, showLabel: true },
  },
}

univer.registerPlugin(UniverUIPlugin, { container: 'app', ribbonType: 'grid', 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({
  'slide.menu.insert.text': { gridLayout: { row: 1, column: 2, width: 120 } },
})
```

`gridLayout`은 그리드 Ribbon에만 적용됩니다. 각 그룹은 두 행이며 `row`와 `column`은 1부터 시작합니다. 명시적 좌표가 위치를 결정하므로 사용 중인 셀을 교환할 때는 `order`만 바꾸지 말고 두 항목을 함께 업데이트하세요. 지정하지 않은 선택 필드는 기존 설정이나 Schema를 유지합니다. 행·열 확장, 레이블, 너비와 아이콘 크기는 [`IRibbonGridLayout`](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/ui.md#iribbongridlayout)을 참고하세요.

`UniverSlidesUIPlugin`의 편집 기능을 활성화하세요. `editor.enabled: false`이면 해당 제품의 Ribbon을 등록하지 않습니다. 메뉴 재정의 설정은 등록되지 않은 버튼을 생성하지 않습니다.

사용자 정의 버튼과 하위 메뉴 진입점도 [`createMenu()`, `createSubmenu()`](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/ui.md#ifacademenuitem)에 `order`와 `gridLayout`을 전달하고 `appendTo()`로 등록할 수 있습니다. 팝업 내부에는 Ribbon 그리드 레이아웃이 적용되지 않습니다.