# 핵심 기능

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

#### Package metadata

```json
{
  "preset": [
    {
      "client": "@univerjs/preset-docs-core",
      "locale": "@univerjs/preset-docs-core/locales/en-US",
      "style": "@univerjs/preset-docs-core/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/core"
    },
    {
      "client": "@univerjs/engine-formula"
    },
    {
      "client": "@univerjs/engine-render"
    },
    {
      "client": "@univerjs/design",
      "locale": "@univerjs/design/locale/en-US",
      "style": "@univerjs/design/lib/index.css"
    },
    {
      "client": "@univerjs/ui",
      "locale": "@univerjs/ui/locale/en-US",
      "style": "@univerjs/ui/lib/index.css"
    },
    {
      "client": "@univerjs/docs"
    },
    {
      "client": "@univerjs/docs-ui",
      "locale": "@univerjs/docs-ui/locale/en-US",
      "style": "@univerjs/docs-ui/lib/index.css",
      "facade": "@univerjs/docs-ui/facade"
    }
  ],
  "server": false
}
```

Univer Docs는 문서 편집기, 수식 엔진, 렌더링 엔진, 디자인 시스템, UI 컴포넌트 라이브러리 등의 핵심 기능을 제공합니다. 이러한 기능이 결합되어 다양한 문서 형식과 복잡한 작업을 지원하는 강력한 문서 처리 플랫폼을 구성합니다.

## 기능

Univer Docs의 핵심 기능은 다음과 같습니다.

* **문서 렌더링**: 커서와 선택 영역을 포함하여 Univer Docs 문서를 렌더링합니다.
* **문서 조판**: 단락 설정, 단락 앞뒤 간격, 단락 정렬, 들여쓰기, 내어쓰기 등 전체 텍스트 조판을 지원합니다. 문장 부호 압축, 문장 부호 내어쓰기, 문자 간격, 서양어 단어 줄바꿈 등 단락 내부의 조판 기능도 제공합니다.
* **수식 계산**: Univer 수식을 추가하고 계산할 수 있습니다(개발 중).
* **표 기능**: 기본 표를 삽입하고 편집할 수 있으며, 행 추가 및 삭제와 셀 편집 등을 지원합니다.
* **문서 스타일**: Univer Docs는 Microsoft Word와 유사한 *전통적인 문서 스타일*(페이지 구분, 머리글, 바닥글 포함)과 Notion과 유사한 *현대적인 문서 스타일*을 모두 지원합니다. 현대적인 문서 스타일에서는 페이지를 구분할 필요 없이 콘텐츠를 무한히 확장할 수 있으며, 텍스트, 이미지, 표 등 공식 또는 서드 파티의 다양한 블록 수준 요소를 함께 조판할 수 있습니다(예정).
* **머리글 및 바닥글**: 머리글과 바닥글을 삽입하고 내용을 편집할 수 있으며 첫 페이지와 홀수/짝수 페이지를 구분할 수 있습니다(전통적인 문서에서만 지원).
* **목록 기능**: 순서 있는 목록, 순서 없는 목록, 작업 목록을 삽입하고 편집할 수 있으며 목록의 들여쓰기와 내어쓰기를 지원합니다.
* **이모지와 기호**: Docs 리본에서 이모지와 기호를 삽입할 수 있습니다.
* **플러그인 시스템**: 수식 플러그인, 이미지 플러그인, 차트 플러그인 등의 사용자 지정 플러그인을 사용할 수 있는 플러그인 시스템을 지원합니다. 이는 Univer의 핵심 아키텍처 기능 중 하나이기도 합니다.

## 플러그인 모드

### 설치

#### npm

```bash
npm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

#### pnpm

```bash
pnpm add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

#### yarn

```bash
yarn add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

#### bun

```bash
bun add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

### 사용법

```typescript
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/lib/locale/en-US'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'
import '@univerjs/docs/facade'
import '@univerjs/docs-ui/facade'
import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'

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

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)

const univerAPI = FUniver.newAPI(univer)

univerAPI.createDocument({})
```

### 플러그인 및 구성

#### @univerjs/core

이 플러그인은 Univer의 핵심 라이브러리로, Univer 인스턴스 생성, 테마, 언어 등의 기본 기능을 제공합니다.

```typescript
interface UniverParameter {
  // Univer instance theme, default is `defaultTheme`
  theme: IStyleSheet
  // Whether to use dark mode, default is false
  darkMode?: boolean
  // The locale of the Univer instance
  locale: LocaleType
  // The locale objects to use, with keys as locale types and values as corresponding locale objects
  locales: ILocales
  // The log level of the Univer instance
  logLevel?: LogLevel
}
```

참고: [`Univer`](https://docs.univer.ai/ko-KR/reference/classes/univer.md)

#### @univerjs/engine-render

이 플러그인은 Univer의 렌더링 엔진으로, 렌더링과 스크롤바, 커서 및 선택 영역 렌더링을 담당합니다. `UniverRenderEnginePlugin`을 제공합니다.

참고: [@univerjs/engine-render](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/engine-render.md)

#### @univerjs/engine-formula

이 플러그인은 Univer의 수식 엔진으로, 수식을 계산하고 처리합니다. `UniverFormulaEnginePlugin`을 제공합니다.

참고: [@univerjs/engine-formula](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/engine-formula.md)

#### @univerjs/design

이 플러그인은 Univer의 디자인 시스템으로, 모든 기본 컴포넌트와 스타일을 제공합니다.

참고: [UI 장](https://docs.univer.ai/ko-KR/guides/docs/ui/overview.md)

#### @univerjs/ui

이 플러그인은 Univer의 UI 기반입니다. `UniverUIPlugin`을 제공합니다.

`UniverUIPlugin`은 기본 레이아웃 구성에 사용할 수 있는 몇 가지 구성 옵션을 제공합니다.

```typescript
interface IUniverUIConfig {
  // Container element, can be a string or a DOM element
  container?: string | HTMLElement
  // Whether to show the header
  header?: boolean
  // Whether to show the header toolbar
  toolbar?: boolean
  // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode
  ribbonType?: RibbonType
  // Whether to show the context menu
  contextMenu?: boolean
  // Whether to disable auto focus
  disableAutoFocus?: true
  // Dependency injection override configuration
  override?: DependencyOverride
  // Menu configuration
  menu?: MenuConfig
}
```

`menu` 구성 옵션을 사용하면 특정 메뉴 항목의 표시 또는 숨김 상태를 간단히 설정할 수 있습니다.

```typescript
univer.registerPlugin(UniverDocsUIPlugin, {
  menu: {
    'doc.command.set-inline-format-bold': {
      hidden: true,
    },
    'doc.command.set-inline-format-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

여기서 `'doc.command.set-inline-format-bold'`와 `'doc.command.set-inline-format-italic'`는 각 메뉴 항목에 해당하는 명령의 이름입니다.

참고: [@univerjs/docs-ui](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs-ui.md)

#### @univerjs/docs

이 플러그인은 Univer Docs의 핵심 플러그인입니다. `UniverDocsPlugin`을 제공합니다.

참고: [@univerjs/docs](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs.md)

#### @univerjs/docs-ui

이 플러그인은 Univer Docs의 UI 플러그인으로, 문서 편집기의 UI 컴포넌트와 상호작용을 포함합니다. `UniverDocsUIPlugin`을 제공합니다.

참고: [@univerjs/docs-ui](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs-ui.md)

## 프리셋 모드

### 설치

#### npm

```bash
npm install @univerjs/presets @univerjs/preset-docs-core
```

#### pnpm

```bash
pnpm add @univerjs/presets @univerjs/preset-docs-core
```

#### yarn

```bash
yarn add @univerjs/presets @univerjs/preset-docs-core
```

#### bun

```bash
bun add @univerjs/presets @univerjs/preset-docs-core
```

### 사용법

```typescript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
import '@univerjs/preset-docs-core/lib/index.css'

const { univer, univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(UniverPresetDocsCoreEnUS),
  },
  presets: [UniverDocsCorePreset()],
})

univerAPI.createDocument({})
```

### 프리셋 및 구성

#### @univerjs/presets

이 프리셋은 Univer 애플리케이션을 만드는 `createUniver` 메서드를 제공하며 **@univerjs/core**와 **@univerjs/design**의 모든 메서드 및 객체를 노출합니다.

`createUniver` 메서드는 테마, 언어, 프리셋 등의 옵션이 포함된 구성 객체를 받습니다. 이 메서드는 `Univer` 인스턴스인 `univer`와 Facade API 호출에 사용하는 `FUniver` 인스턴스인 `univerAPI`를 반환합니다.

```typescript
interface ICreateUniverParameter {
  // Univer instance theme, default is `defaultTheme`
  theme: IStyleSheet
  // Whether to use dark mode, default is false
  darkMode?: boolean
  // The locale of the Univer instance
  locale: LocaleType
  region?: LocaleType
  // The locale objects to use, with keys as locale types and values as corresponding locale objects
  locales: ILocales
  // The log level of the Univer instance
  logLevel?: LogLevel
  // The list of presets to use.
  presets: IPresets[]
  // The list of plugins to use.
  plugins: IPlugins[]
}
```

참고: [`createUniver`](https://docs.univer.ai/ko-KR/reference/methods/create-univer.md)

#### @univerjs/preset-docs-core

이 프리셋은 Univer Docs의 핵심 프리셋으로, 문서 편집기, 수식 엔진, 렌더링 엔진 등 전자 문서에 필요한 핵심 기능을 포함합니다.

```typescript
interface IUniverDocsCorePresetConfig {
  // Container element, can be a string or a DOM element
  container?: string | HTMLElement
  // Whether to show the header
  header?: boolean
  // Whether to show the header toolbar
  toolbar?: boolean
  // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode
  ribbonType?: RibbonType
  // Whether to show the footer
  footer?: boolean
  // Whether to show the context menu
  contextMenu?: boolean
  // Whether to disable auto focus
  disableAutoFocus?: true
  // Menu configuration
  menu?: MenuConfig

  // ... More configuration options
}
```

`menu` 구성 옵션을 사용하면 특정 메뉴 항목의 표시 또는 숨김 상태를 간단히 설정할 수 있습니다.

```typescript
UniverDocsCorePreset({
  menu: {
    'doc.command.set-inline-format-bold': {
      hidden: true,
    },
    'doc.command.set-inline-format-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

여기서 `'doc.command.set-inline-format-bold'`와 `'doc.command.set-inline-format-italic'`는 각 메뉴 항목에 해당하는 명령의 이름입니다.

참고: [@univerjs/preset-docs-core](https://docs.univer.ai/ko-KR/reference/packages/presets/univerjs/preset-docs-core.md)

## 메뉴 순서와 그리드 배치

Docs 메뉴 ID로 공통 [`MenuConfig`](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/ui.md#menuconfig)를 정의한 다음 사용 중인 모드로 적용하세요:

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

const menu: MenuConfig = {
  'ribbon.start.format': { order: -1 },
  'doc.command.set-inline-format-bold': {
    order: 0,
    gridLayout: { row: 2, column: 2 },
  },
  'doc.command.set-inline-format-italic': {
    gridLayout: { row: 2, column: 1 },
  },
}
```

사용 중인 모드를 선택하고 기존 초기화 설정에 아래 옵션을 병합하세요. 다른 플러그인, 언어, 테마 및 컨테이너 설정은 유지하고 같은 플러그인을 중복 등록하지 마세요.

#### 플러그인 모드

```typescript
import { UniverUIPlugin } from '@univerjs/ui'

univer.registerPlugin(UniverUIPlugin, {
  ribbonType: 'grid',
  menu,
})
```

#### 프리셋 모드

```typescript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import { createUniver } from '@univerjs/presets'

const { univerAPI } = createUniver({
  presets: [
    UniverDocsCorePreset({
      ribbonType: 'grid',
      menu,
    }),
  ],
})
```

초기화 후에는 [`updateMenuConfig()`](https://docs.univer.ai/ko-KR/reference/facade/univer.md#updatemenuconfig)으로 기존 인스턴스를 업데이트하세요:

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

univerAPI.updateMenuConfig(menu)
```

`order`는 같은 수준의 항목을 오름차순으로 정렬합니다. `gridLayout`은 그리드 Ribbon에만 적용되며 각 두 행 그룹의 좌표는 1부터 시작합니다. 런타임 업데이트는 지정하지 않은 속성을 유지하고 UI를 즉시 갱신합니다. 플러그인 모드에서는 `UniverUIPlugin`에 `menu`를 전달하고 Facade를 사용하기 전에 `@univerjs/ui/facade`를 가져오세요. 필드와 사용자 정의 버튼 예제는 [메뉴 배치 가이드](https://docs.univer.ai/ko-KR/guides/sheets/features/core.md#menu-order-and-grid-layout)를 참고하세요.

## 붙여넣기 옵션

Docs는 원본 서식 유지, 대상 서식에 맞추기, 텍스트만 유지 모드를 제공합니다. 대상 모드는 굵게·기울임 등 지원되는 강조를 보존하면서 대상 글자 및 문단 스타일을 사용합니다. 텍스트 전용 모드는 그림과 링크를 제거하고 표를 탭으로 구분된 텍스트로 변환합니다. 붙여넣기 후 옵션으로 최근 작업의 모드를 바꿀 수 있습니다. 브라우저가 클립보드 읽기를 막으면 키보드 또는 시스템 붙여넣기를 사용하세요.

데스크톱 Ribbon의 **붙여넣기** 드롭다운은 실행 취소 및 다시 실행 옆에 있으며 도형 텍스트를 편집할 때 숨겨집니다. 데스크톱과 모바일 컨텍스트 메뉴의 **선택하여 붙여넣기**는 서식 그룹에 있습니다.

## 머리글과 바닥글 필드

전통 문서의 머리글이나 바닥글을 편집하면 삽입, 탐색, 첫 페이지 및 홀수/짝수 페이지 옵션과 위치 설정을 위한 컨텍스트 Ribbon이 표시됩니다. 현재 페이지 번호, 전체 페이지 수, 현지화된 날짜와 시간을 삽입할 수 있습니다. 페이지 필드는 각 페이지에 맞는 값을 표시합니다. 날짜/시간의 자동 업데이트를 켜면 필드로, 끄면 고정 텍스트로 삽입됩니다. 날짜/시간 필드는 문서를 열거나 필드 업데이트를 실행할 때 갱신되며 시계처럼 계속 바뀌지는 않습니다. 현대 문서는 페이지 머리글과 바닥글을 사용하지 않습니다.