# UI 개요

> PDF 캔버스, 편집 컨트롤, 로캘 및 썸네일 워커를 설정합니다.

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

`@univerjs-pro/pdfs-ui`는 PDF 유닛을 Univer 표준 워크벤치에 마운트하며 Univer Office SDK 라이선스로 제공됩니다.

## 패키지 역할

| 패키지                         | 역할                                                               |
| --------------------------- | ---------------------------------------------------------------- |
| `@univerjs-pro/pdfs`        | `UNIVER_PDF` 유닛, 문서 모델 및 영속 PDF 명령을 등록합니다.                       |
| `@univerjs-pro/pdfs-ui`     | 브라우저 캔버스, 썸네일 레일 및 푸터를 마운트합니다. 로컬 편집 컨트롤은 기본적으로 활성화됩니다.          |
| `@univerjs-pro/pdfs-editor` | 협업 편집기 쪽 의존성을 선언합니다. PDF UI를 마운트하거나 `editor.enabled`를 제어하지 않습니다. |

`UniverPdfsUIPlugin`은 `UniverLicensePlugin`과 `UniverPdfsPlugin`에 의존합니다. 라이선스를 포함한 PDF 기본 설정을 마친 뒤 UI 플러그인을 등록하세요.

## UI 플러그인 등록

```ts
import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'
import PdfsUIKoKR from '@univerjs-pro/pdfs-ui/locale/ko-KR'

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

univer.registerPlugin(UniverPdfsUIPlugin)
```

`PdfsUIKoKR`을 `new Univer(...)`에 전달하는 로캘에 병합하세요. 이 로캘 팩은 PDF 리본, 검사기, 컨텍스트 메뉴 및 페이지 레일의 문구를 제공합니다.

## 뷰어 및 편집기 모드

플러그인은 항상 페이지 썸네일 레일, PDF 캔버스 및 푸터를 마운트합니다. 편집은 기본적으로 활성화되며 리본, 컨텍스트 메뉴, 검사기, 클립보드, 삽입 명령 및 편집 작업과 컨트롤러도 등록합니다.

애플리케이션에서 편집 컨트롤을 노출하지 않아야 한다면 뷰어 전용 모드를 사용하세요.

```ts
univer.registerPlugin(UniverPdfsUIPlugin, {
  editor: { enabled: false },
})
```

이 옵션은 마운트되는 UI와 편집 전용 컨트롤러 및 서비스만 변경합니다. 권한 정책이 아니며 저장된 PDF 스냅샷도 바꾸지 않습니다.

## 썸네일 워커

`thumbnailWorkerURL`에는 문자열, `URL` 또는 기존 `Worker`를 지정할 수 있습니다. 대상 모듈은 패키지가 내보내는 워커 런타임을 시작해야 합니다.

```ts title="pdf-thumbnail-worker.ts"
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'

startPdfPageThumbnailWorker()
```

```ts
univer.registerPlugin(UniverPdfsUIPlugin, {
  thumbnailWorkerURL: new URL('./pdf-thumbnail-worker.js', import.meta.url),
})
```

워커는 전용 Worker 범위에서 실행해야 합니다. 워커를 설정하지 않았거나 브라우저에 필요한 API가 없거나 페이지가 메인 스레드 전용 리소스를 필요로 하면 썸네일은 메인 스레드에서 렌더링됩니다.

## 공개 API 경계

UI는 내부적으로 PDF 명령과 서비스를 호출합니다. 리본 버튼이 있다고 해서 같은 이름의 공개 메서드가 있는 것은 아닙니다. 지원되는 프로그래밍 방식 편집은 [PDF Facade 가이드](https://docs.univer.ai/ko-KR/guides/pdfs/getting-started/facade.md), 변환은 [가져오기 및 내보내기](https://docs.univer.ai/ko-KR/guides/pdfs/features/import-export.md), 브라우저 인쇄는 [인쇄](https://docs.univer.ai/ko-KR/guides/pdfs/features/print.md)를 참고하세요.

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

[`order`, `gridLayout`, `updateMenuConfig()`](https://docs.univer.ai/ko-KR/guides/pdfs/features/core.md#menu-order-and-grid-layout)로 탭·그룹·항목의 순서, 그리드 배치와 실행 중 업데이트를 설정할 수 있습니다. 가이드에서 사용자 정의 메뉴의 Facade 옵션도 확인할 수 있습니다.