# 설치 및 기본 사용법

- Human documentation: [https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation.md](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [sheets/getting-started/installation/index.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/getting-started/installation/index.ko-KR.mdx)

---

Univer는 플러그인 기반 설계 철학을 채택하여 개발자에게 유연하고 확장 가능한 전자 문서 애플리케이션 프레임워크를 제공하는 것을 목표로 합니다. 이러한 설계를 통해 다양한 기능 모듈을 손쉽게 통합하여 여러 사용자의 요구를 충족할 수 있습니다. 다만 플러그인 기반 설계는 애플리케이션의 복잡성을 높이며, 특히 Univer를 처음 접하는 개발자에게는 어려울 수 있습니다.

이를 위해 Univer는 빠르게 통합하고 사용할 수 있도록 **플러그인 모드**와 **프리셋 모드**라는 두 가지 방식을 제공합니다. **프리셋**은 미리 구성된 플러그인의 조합이므로, 복잡한 확장을 사용하지 않는다면 두 모드가 제공하는 기능은 동일합니다.

> [!WARNING: 주의]
> * **종속성 버전 통일**: 프리셋 모드와 플러그인 모드 중 어느 것을 사용하든 모든 종속성의 버전 번호가 일치해야 합니다.
> * **플러그인과 프리셋 혼용 시 주의**: 프리셋에 이미 포함된 플러그인은 프리셋을 사용할 때 별도로 가져올 필요가 없습니다. 별도로 가져오면 플러그인 충돌이나 기능 이상이 발생할 수 있습니다.

프리셋 모드와 플러그인 모드의 차이점은 다음과 같습니다.

| 플러그인 모드                         | 프리셋 모드                         |
| ------------------------------- | ------------------------------ |
| 해당 Facade 패키지를 직접 가져와야 함        | Facade 패키지를 직접 가져올 필요 없음       |
| 같은 기능을 제공하는 플러그인의 등록 순서에 주의해야 함 | 프리셋에 포함된 기능의 등록 순서를 신경 쓸 필요 없음 |
| 필요할 때 지연 로딩 가능                  | 구성된 프리셋을 초기화할 때 동기식으로 로드함      |

Univer는 *프리셋 모드*와 *플러그인 모드*의 두 가지 통합 방식을 제공합니다. 프리셋 모드는 미리 구성된 플러그인 묶음으로 설정을 간소화하여 쉽게 시작할 수 있습니다. **심층적인 커스터마이징이나 확장**이 필요하다면 플러그인을 개별적으로 조합하고 설정할 수 있는 플러그인 모드를 권장합니다.

## 플러그인 모드로 설정하기

Univer는 여러 기능을 플러그인 형태로 제공합니다. 제품에 필수적인 일부 핵심 플러그인 외에는 필요에 따라 원하는 플러그인만 선택적으로 추가할 수 있습니다. 여기서는 가장 기본적인 Univer Sheets 애플리케이션을 예로 들어 플러그인을 직접 조합하고 설치하는 방법을 소개합니다.

프리셋 모드와 달리 플러그인 모드에는 Facade API[^facade-entry]가 기본으로 포함되지 않습니다. 다음 코드 예제에서 Facade API와 관련된 부분은 선택 사항이므로 필요에 따라 제거할 수 있습니다.

### 패키지 관리자 사용

#### 설치

뷰 개발에는 React를 사용하고(Vue 또는 Angular에서 Univer를 사용하는 데는 영향을 주지 않음), 데이터 스트림 처리에는 Rxjs를 사용합니다. 이 두 라이브러리는 최신 프런트엔드 개발에서 널리 사용되므로 peerDependencies[^peer-dependency]로 취급합니다. 다만 패키지 관리 도구마다 peerDependencies를 처리하는 방식이 다르므로 몇 가지 사항에 주의해야 합니다.

> [!NOTE]
> * npm을 사용한다면 npm\@7 이상인지 확인하세요. npm\@3 \~ npm\@6은 `peerDependencies`를 올바르게 설치하지 않기 때문입니다[^1].
> * pnpm을 사용한다면 pnpm\@8 이상인지 확인하세요. pnpm\@6 \~ pnpm\@7을 사용한다면 `auto-install-peers=true` [^2]를 설정하여 종속성 설치 문제를 해결할 수 있습니다.
> * yarn을 사용한다면 누락된 `peerDependencies`를 직접 설치해야 합니다[^3]. 아래 설치 명령에는 이러한 종속성이 이미 포함되어 있습니다.

#### pnpm

```shell
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui
```

#### npm

```shell
npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui
```

#### yarn

```shell
yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui react react-dom rxjs
```

#### bun

```shell
bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui
```

#### 사용법

> [!WARNING: 주의]
> * 모든 플러그인에 Facade 패키지, 언어 팩, 스타일 파일이 포함되는 것은 아닙니다. 각 기능의 문서에서 해당 여부를 안내합니다.
> * 스타일 파일을 가져오는 순서는 중요합니다. 다른 플러그인의 스타일보다 먼저 `@univerjs/design`과 `@univerjs/ui`의 CSS 스타일을 가져오세요.

1.
   프로젝트에서 Univer 스타일 파일, 언어 팩, 필수 플러그인 몇 가지를 가져와야 합니다.
   
   ```typescript
   import { LocaleType, mergeLocales, Univer, UniverInstanceType } 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 { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
   import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
   import { UniverSheetsPlugin } from '@univerjs/sheets'
   import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
   import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'
   import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US'
   import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
   import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'
   import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US'
   import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
   import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US'
   import SheetsEnUS from '@univerjs/sheets/locale/en-US'
   import { UniverUIPlugin } from '@univerjs/ui'
   import UIEnUS from '@univerjs/ui/locale/en-US'
   
   import '@univerjs/design/lib/index.css'
   import '@univerjs/ui/lib/index.css'
   import '@univerjs/docs-ui/lib/index.css'
   import '@univerjs/sheets-ui/lib/index.css'
   import '@univerjs/sheets-formula-ui/lib/index.css'
   import '@univerjs/sheets-numfmt-ui/lib/index.css'
   ```

1.
   Facade API가 필요하다면 여기서 관련 Facade 패키지를 가져올 수 있습니다. 선택 사항이지만 권장합니다.
   
   ```typescript
   import '@univerjs/engine-formula/facade'
   import '@univerjs/ui/facade'
   import '@univerjs/docs-ui/facade'
   import '@univerjs/sheets/facade'
   import '@univerjs/sheets-ui/facade'
   import '@univerjs/sheets-formula/facade'
   import '@univerjs/sheets-numfmt/facade'
   ```

1.
   그런 다음 Univer 인스턴스를 만들고 플러그인을 등록합니다.
   
   ```typescript
   const univer = new Univer({
     locale: LocaleType.EN_US,
     locales: {
       [LocaleType.EN_US]: mergeLocales(
         DesignEnUS,
         UIEnUS,
         DocsUIEnUS,
         SheetsEnUS,
         SheetsUIEnUS,
         SheetsFormulaUIEnUS,
         SheetsNumfmtUIEnUS,
       ),
     },
   })
   
   univer.registerPlugin(UniverRenderEnginePlugin)
   univer.registerPlugin(UniverFormulaEnginePlugin)
   
   univer.registerPlugin(UniverUIPlugin, {
     container: 'app',
   })
   
   univer.registerPlugin(UniverDocsPlugin)
   univer.registerPlugin(UniverDocsUIPlugin)
   
   univer.registerPlugin(UniverSheetsPlugin)
   univer.registerPlugin(UniverSheetsUIPlugin)
   univer.registerPlugin(UniverSheetsFormulaPlugin)
   univer.registerPlugin(UniverSheetsFormulaUIPlugin)
   univer.registerPlugin(UniverSheetsNumfmtPlugin)
   univer.registerPlugin(UniverSheetsNumfmtUIPlugin)
   
   univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})
   
   const univerAPI = FUniver.newAPI(univer)
   ```

> Interactive example: [Open the playground](/playground/sheets/slim-via-plugin)

#### `univer.registerPlugin` 및 `univer.registerPlugins` 메서드

\`\`univer.registerPlugin\` 메서드는 Univer 인스턴스에 플러그인을 등록하는 데 사용합니다. Univer 인스턴스를 만든 뒤 이 메서드를 호출하여 플러그인을 등록할 수 있습니다.

`univer.registerPlugin(Plugin, options)` 메서드로 플러그인을 등록할 수 있습니다. 여기서 `Plugin`은 등록할 플러그인이고, `options`는 선택적 구성 항목입니다. 플러그인마다 구성 항목은 다를 수 있습니다.

`univer.registerPlugins`에 배열을 전달하여 여러 플러그인을 한 번에 등록할 수도 있습니다. 플러그인을 중앙에서 관리해야 할 때 유용합니다.

```typescript
univer.registerPlugins([
  UniverRenderEnginePlugin,
  UniverFormulaEnginePlugin,
  [UniverUIPlugin, {
    container: 'app',
  }],
  UniverDocsPlugin,
  UniverDocsUIPlugin,
  UniverSheetsPlugin,
  UniverSheetsUIPlugin,
  UniverSheetsFormulaPlugin,
  UniverSheetsFormulaUIPlugin,
  UniverSheetsNumfmtPlugin,
  UniverSheetsNumfmtUIPlugin,
])
```

#### 플러그인 지연 로딩

플러그인 모드의 대표적인 장점은 플러그인 로딩 시점을 더 유연하게 제어할 수 있다는 것입니다. 일반적으로 애플리케이션 초기화 중에는 필수 플러그인만 로드하고, 일부 플러그인은 첫 렌더링이 완료된 뒤로 로딩을 미룹니다.

```typescript
// ...

univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})

import('@univerjs/watermark').then(({ UniverWatermarkPlugin }) => {
  univer.registerPlugin(UniverWatermarkPlugin, {
    textWatermarkSettings: {
      content: 'Hello, Univer!',
      fontSize: 36,
    },
  })
})
```

[공식 데모](https://github.com/dream-num/univer/blob/0d849012594882307186f33734b8b89d80a729e9/examples/src/sheets/main.ts)에서도 이 최적화 기법을 사용하므로 참고할 수 있습니다.

### 모바일 지원

> [!WARNING]
> 아래 모바일 플러그인을 내보내는 SDK 패키지가 필요합니다. 모든 `@univerjs/*` 및 `@univerjs-pro/*` 의존성을 **같은 버전**으로 맞추세요.

Univer Sheets에서 터치 조작을 제공하려면 **모바일 UI 플러그인**을 사용합니다.[^mobile-ui-mode] 에디터를 만들기 전에 UI 모드를 선택하세요.

Sheets 모바일 지원은 아직 **실험적**입니다. 대상 기기에서 앱에 필요한 기능을 검증하세요.

위 플러그인 모드 예제에서 다음 UI 가져오기와 등록을 `createUnit()` 전에 **교체**하세요. 이미 초기화한 데스크톱 에디터에 추가하지 마세요. 모델 플러그인, 엔진, 언어 파일, CSS 및 Facade 가져오기는 유지합니다. 두 클래스는 **동일한 패키지 진입점**의 서로 다른 이름으로 내보내집니다.

```typescript
import { UniverSheetsFormulaMobileUIPlugin } from '@univerjs/sheets-formula-ui'
import { UniverSheetsNumfmtMobileUIPlugin } from '@univerjs/sheets-numfmt-ui'
import { UniverSheetsMobileUIPlugin } from '@univerjs/sheets-ui'
import { UniverMobileUIPlugin } from '@univerjs/ui'

univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' })
univer.registerPlugin(UniverSheetsMobileUIPlugin)
univer.registerPlugin(UniverSheetsFormulaMobileUIPlugin)
univer.registerPlugin(UniverSheetsNumfmtMobileUIPlugin)
```

**Sheets에서는 `UniverDocsUIPlugin`을 유지하세요.** `UniverSheetsMobileUIPlugin`이 셀 내부 문서 편집에 이 플러그인을 사용합니다. 독립된 Docs 에디터에서는 `UniverDocsMobileUIPlugin`을 사용합니다.

현재 `UniverSheetsCorePreset`과 `UniverDocsCorePreset`은 데스크톱 UI를 등록하며 `mobile: true` 옵션이 없습니다. 모바일에서는 플러그인을 직접 구성하세요. 데스크톱 프리셋 뒤에 모바일 플러그인을 추가해도 기존 UI가 교체되지 않습니다.

#### 플러그인 대응표

사용할 기능만 등록하고 모델 플러그인과 필수 의존성을 유지하세요. 모바일 UI가 있다고 해서 양쪽 화면의 조작 기능이 모두 같은 것은 아닙니다. Pro 기능에는 해당 라이선스가 필요합니다. 백엔드가 필요한 기능은 앱에 [Univer Server SDK](https://docs.univer.ai/ko-KR/server.md)로 해당 기능을 통합하세요.

| 패키지                                          | 데스크톱 등록                                     | 모바일 등록                                            |
| -------------------------------------------- | ------------------------------------------- | ------------------------------------------------- |
| `@univerjs/ui`                               | `UniverUIPlugin`                            | `UniverMobileUIPlugin`                            |
| `@univerjs/sheets-ui`                        | `UniverSheetsUIPlugin`                      | `UniverSheetsMobileUIPlugin`                      |
| `@univerjs/sheets-formula-ui`                | `UniverSheetsFormulaUIPlugin`               | `UniverSheetsFormulaMobileUIPlugin`               |
| `@univerjs/sheets-numfmt-ui`                 | `UniverSheetsNumfmtUIPlugin`                | `UniverSheetsNumfmtMobileUIPlugin`                |
| `@univerjs/drawing-ui`                       | `UniverDrawingUIPlugin`                     | `UniverDrawingMobileUIPlugin`                     |
| `@univerjs/thread-comment-ui`                | `UniverThreadCommentUIPlugin`               | `UniverThreadCommentMobileUIPlugin`               |
| `@univerjs-pro/shape-editor-ui`              | `UniverShapeEditorUIPlugin`                 | `UniverShapeEditorMobileUIPlugin`                 |
| `@univerjs-pro/chart-ui`                     | `UniverChartUIPlugin`                       | `UniverChartMobileUIPlugin`                       |
| `@univerjs-pro/exchange-client`              | `UniverExchangeClientPlugin`                | `UniverExchangeClientMobileUIPlugin`              |
| `@univerjs/sheets-conditional-formatting-ui` | `UniverSheetsConditionalFormattingUIPlugin` | `UniverSheetsConditionalFormattingMobileUIPlugin` |
| `@univerjs/sheets-crosshair-highlight`       | `UniverSheetsCrosshairHighlightPlugin`      | `UniverSheetsCrosshairHighlightMobileUIPlugin`    |
| `@univerjs/sheets-data-validation-ui`        | `UniverSheetsDataValidationUIPlugin`        | `UniverSheetsDataValidationMobileUIPlugin`        |
| `@univerjs/sheets-drawing-ui`                | `UniverSheetsDrawingUIPlugin`               | `UniverSheetsDrawingMobileUIPlugin`               |
| `@univerjs/sheets-filter-ui`                 | `UniverSheetsFilterUIPlugin`                | `UniverSheetsFilterMobileUIPlugin`                |
| `@univerjs/sheets-find-replace`              | `UniverSheetsFindReplacePlugin`             | `UniverSheetsFindReplaceMobileUIPlugin`           |
| `@univerjs/sheets-hyper-link-ui`             | `UniverSheetsHyperLinkUIPlugin`             | `UniverSheetsHyperLinkMobileUIPlugin`             |
| `@univerjs/sheets-sort-ui`                   | `UniverSheetsSortUIPlugin`                  | `UniverSheetsSortMobileUIPlugin`                  |
| `@univerjs/sheets-table-ui`                  | `UniverSheetsTableUIPlugin`                 | `UniverSheetsTableMobileUIPlugin`                 |
| `@univerjs/sheets-thread-comment-ui`         | `UniverSheetsThreadCommentUIPlugin`         | `UniverSheetsThreadCommentMobileUIPlugin`         |
| `@univerjs-pro/sheets-chart-ui`              | `UniverSheetsChartUIPlugin`                 | `UniverSheetsChartMobileUIPlugin`                 |
| `@univerjs-pro/sheets-exchange-client`       | `UniverSheetsExchangeClientPlugin`          | `UniverSheetsExchangeClientMobileUIPlugin`        |
| `@univerjs-pro/sheets-history-ui`            | `UniverSheetsHistoryUIPlugin`               | `UniverSheetsHistoryMobileUIPlugin`               |
| `@univerjs-pro/sheets-outline-ui`            | `UniverSheetsOutlineUIPlugin`               | `UniverSheetsOutlineMobileUIPlugin`               |
| `@univerjs-pro/sheets-pivot-ui`              | `UniverSheetsPivotTableUIPlugin`            | `UniverSheetsPivotTableMobileUIPlugin`            |
| `@univerjs-pro/sheets-print`                 | `UniverSheetsPrintPlugin`                   | `UniverSheetsPrintMobileUIPlugin`                 |
| `@univerjs-pro/sheets-shape-ui`              | `UniverSheetsShapeUIPlugin`                 | `UniverSheetsShapeMobileUIPlugin`                 |
| `@univerjs-pro/sheets-sparkline-ui`          | `UniverSheetSparklineUIPlugin`              | `UniverSheetSparklineMobileUIPlugin`              |
| `@univerjs/find-replace`                     | `UniverFindReplacePlugin`                   | `UniverFindReplaceMobileUIPlugin`                 |

#### 컨테이너와 터치 조작

컨테이너 높이를 명시하고 페이지 viewport를 설정하세요. `100dvh`는 동적 뷰포트 높이를 따릅니다. 대상 모바일 브라우저에서 스크롤, 핀치 확대/축소, 텍스트 선택, 클립보드 및 화면 키보드 표시 후 배치를 확인하세요. 데스크톱 에디터의 폭만 줄여서는 모바일 플러그인으로 전환되지 않습니다.

`UniverMobileUIPlugin`은 기본적으로 `disableAutoFocus: true`를 사용하여 초기화 시 에디터가 자동으로 포커스를 가져오지 않도록 합니다.

```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div id="app" style="height: 100dvh"></div>
```

> Interactive example: [Open the playground](/playground/sheets/mobile-via-plugin)

### CDN에서 가져오기

패키지 관리자를 사용하고 싶지 않거나 Univer의 기능을 빠르게 체험하려면 CDN을 통해 관련 리소스를 가져올 수 있습니다. 자세한 내용은 [CDN으로 Univer 사용하기](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation/cdn.md#plugin-mode)를 참고하세요.

## 프리셋 모드로 설정하기

여기서는 20줄 미만의 코드로 Univer Sheets 애플리케이션을 빠르게 구축하는 방법을 간단히 소개합니다.

### 패키지 관리자 사용

프로젝트에서 이미 최신 프런트엔드 개발 도구를 사용하고 있다면 Univer를 매우 간단하게 통합할 수 있습니다. Univer 애플리케이션을 빌드할 때는 ES Modules를 잘 지원하는 [Vite](https://vitejs.dev/), [esbuild](https://esbuild.github.io/), [Webpack 5](https://webpack.js.org/) 같은 빌드 도구를 권장합니다. 다른 빌드 도구(예: Webpack 4)를 사용한다면 추가 설정이 필요할 수 있습니다.

#### 설치

사용하는 패키지 관리자로 `@univerjs/presets`를 설치하세요.

#### npm

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

#### pnpm

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

#### yarn

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

#### bun

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

#### 사용법

> [!WARNING]
> 빌드 도구가 package.json의 `exports` 필드를 지원하지 않는 경우(Webpack 4에서 흔함), 매핑된 경로를 실제 경로로 직접 변경해야 합니다.

다음 코드로 Univer Sheets 애플리케이션을 시작할 수 있습니다.

```html title="index.html"
<div id="app" style="height: 600px"></div>
```

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'

const { univer, univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
    ),
  },
  presets: [
    UniverSheetsCorePreset({
      container: 'app',
    }),
  ],
})

univerAPI.createWorkbook({})
```

여기서 반환되는 `univerAPI` 객체를 Univer Facade API라고 하며, 이를 통해 Univer가 제공하는 다양한 기능을 호출할 수 있습니다.

> Interactive example: [Open the playground](/playground/sheets/slim-via-preset)

> [!WARNING]
> `UniverSheetsCorePreset`을 `@univerjs/presets/preset-sheets-core`에서 가져올 수도 있지만, 빌드 도구가 package.json의 `exports` 필드를 지원하는지 확인해야 합니다.

#### `createUniver` 메서드

`createUniver` 메서드는 언어, 테마, 플러그인 등 Univer의 설정 정보가 담긴 구성 객체를 받습니다. 이 메서드는 Univer 인스턴스와 Univer Facade API 인스턴스를 포함하는 객체를 반환합니다.

구성 객체의 주요 속성은 다음과 같습니다.

* `locale`: 언어 환경입니다. `LocaleType` 열거형 값을 사용할 수 있습니다.
* `locales`: 로케일 객체입니다. 키는 언어 환경이고 값은 언어 팩 객체입니다.
* `theme`: 선택 사항인 테마 객체입니다.
* `presets`: `UniverSheetsCorePreset`처럼 등록할 프리셋을 담은 배열입니다.
* `plugins`: 추가로 등록할 플러그인을 담은 배열입니다.

프리셋 패키지에 포함되지 않은 플러그인을 사용하거나 자체 플러그인을 구현한 경우 `plugins` 속성을 통해 등록할 수 있습니다. Univer 인스턴스를 얻은 뒤 `univer.registerPlugin` 메서드로 등록할 수도 있습니다.

> [!NOTE]
> `createUniver` 메서드에 대한 자세한 내용은 [API 참조 / createUniver](https://docs.univer.ai/ko-KR/reference/methods/create-univer.md)에서 확인할 수 있습니다.

### CDN에서 가져오기

패키지 관리자를 사용하고 싶지 않거나 Univer의 기능을 빠르게 체험하려면 CDN을 통해 관련 리소스를 가져올 수 있습니다. 자세한 내용은 [CDN으로 Univer 사용하기](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation/cdn.md#plugin-mode)를 참고하세요.

## 기타 릴리스

Univer는 안정 릴리스 외에도 alpha / beta 및 nightly 채널을 제공합니다. 이러한 버전에서는 아직 정식 출시되지 않은 최신 기능을 미리 사용할 수 있습니다. 하지만 기능이 많아지는 만큼 위험도 커진다는 점에 유의하세요. 버그, 미완성 기능 또는 불안정한 기능이 포함될 수 있으므로 가능한 한 프로덕션 환경에서는 사용하지 마세요.

### Alpha / Beta 릴리스

Univer 개발팀이 새 기능이나 중요한 변경을 완료하면 alpha 또는 beta 채널에 사전 출시할 수 있습니다. 다음 명령으로 Univer 패키지의 alpha / beta 버전을 설치할 수 있습니다.

#### npm

```bash
npm install @univerjs/<package-name>@alpha # Alpha version
npm install @univerjs/<package-name>@beta # Beta version
```

#### pnpm

```bash
pnpm add @univerjs/<package-name>@alpha # Alpha version
pnpm add @univerjs/<package-name>@beta # Beta version
```

#### yarn

```bash
yarn add @univerjs/<package-name>@alpha # Alpha version
yarn add @univerjs/<package-name>@beta # Beta version
```

#### bun

```bash
bun add @univerjs/<package-name>@alpha # Alpha version
bun add @univerjs/<package-name>@beta # Beta version
```

alpha / beta 버전을 사용하면서 문제가 발생하거나 의견이 있다면 [GitHub Issues](https://github.com/dream-num/univer/issues)를 통해 Univer 개발팀에 알려 주세요.

이러한 초기 릴리스에 대한 의견을 환영합니다.

## 다음 단계

* [기본 개념](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/quickstart.md#basic-concepts) - Univer의 기본 개념을 알아봅니다.
* [기능](https://docs.univer.ai/ko-KR/guides/sheets/features/core.md) - Univer의 기능과 데이터 조작 방법을 알아봅니다.

***

[^1]: [https://blog.npmjs.org/post/110924823920/npm-weekly-5](https://blog.npmjs.org/post/110924823920/npm-weekly-5)

[^2]: [https://pnpm.io/npmrc#auto-install-peers](https://pnpm.io/npmrc#auto-install-peers)

[^3]: [https://github.com/yarnpkg/yarn/issues/1503](https://github.com/yarnpkg/yarn/issues/1503)

[^facade-entry]: Facade는 등록된 플러그인의 기능을 애플리케이션에서 사용하는 API입니다. Facade 진입점을 가져오면 API 메서드가 추가되지만 기능 플러그인 자체가 등록되지는 않습니다.

[^peer-dependency]: `peerDependencies`는 호스트 프로젝트가 호환되는 버전으로 제공해야 하는 의존성입니다. 이를 통해 Univer와 애플리케이션이 React 같은 라이브러리를 공유합니다.

[^mobile-ui-mode]: 모바일 UI 플러그인은 초기화할 때 터치 컨트롤과 모바일 서비스를 선택합니다. 기기를 자동 감지하거나 창 크기 변경 시 기존 인스턴스의 모드를 바꾸지 않습니다. 모드를 변경하려면 문서 상태를 보존하고 기존 인스턴스를 폐기한 뒤 선택한 플러그인 조합으로 초기화하세요.