설치 및 기본 사용법

이 장에서는 Univer Slides의 설치 방법과 기본 사용법을 소개합니다. 이 가이드에서는 Web SDK의 Slides 패키지를 사용합니다. 현재 Slides preset은 제공되지 않으므로 애플리케이션을 plugin mode로 만드세요.

Univer의 핵심 개념에 익숙하지 않다면 먼저 빠른 시작을 읽어 보세요.

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

플러그인 모드로 설정하기

Univer는 Slides 기능을 플러그인 세트로 제공합니다. 브라우저 편집기에서는 일반적으로 공용 Univer runtime, 라이선스 플러그인, Docs 및 Drawing 의존성을 먼저 등록한 다음 Slides 모델과 UI 플러그인을 등록합니다.

패키지 관리자 사용

ES Modules와 package.json의 exports 필드를 지원하는 빌드 도구를 사용하세요.

설치

Univer는 UI에 React를, 데이터 스트림에 RxJS를 사용하며 Vue나 Angular 앱에도 통합할 수 있습니다. peer dependencies¹인 react, react-dom, rxjs가 설치되어 있는지 확인하세요. 아래 Yarn 명령에는 이 패키지들이 명시적으로 포함되어 있습니다.

모든 @univerjs/* 및 @univerjs-pro/* 패키지의 버전을 동일하게 유지하세요.

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

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

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 react react-dom rxjs

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

사용법

Univer를 초기화하기 전에 컨테이너를 만들고 높이를 명시하세요:

<div id="app" style="height: 600px"></div>

FUniver.newAPI(univer)를 호출하기 전에 아래 예제에서 사용하는 facade 진입점을 가져오세요. CSS는 @univerjs/design, @univerjs/ui, 제품 CSS 순서로 가져오세요.

1. 스타일, locale pack, 필수 플러그인을 가져옵니다.

   TypeScript

   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, UniverInstanceType } from '@univerjs/core'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/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'

2. Facade API²를 사용하려면 관련 facade 진입점을 가져옵니다.

   TypeScript

   import { FUniver } from '@univerjs/core/facade'import '@univerjs-pro/slides/facade'

3. Univer 인스턴스를 만들고 플러그인을 등록한 다음 Slides unit을 만듭니다.

   TypeScript

   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)univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})const univerAPI = FUniver.newAPI(univer)

   코드 펼치기

FUniver.newAPI(univer)가 반환하는 univerAPI 객체는 Univer의 Facade API입니다. 이 객체로 프레젠테이션을 만들고 Slides API를 호출할 수 있습니다.

univer.registerPlugin 및 univer.registerPlugins 메서드

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

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

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

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

선택적 기능 패키지

편집기에 해당 기능이 필요할 때 기능 패키지를 추가합니다.

pnpm add @univerjs-pro/slides-printpnpm add @univerjs-pro/slides-table @univerjs-pro/slides-table-uipnpm add @univerjs-pro/chart-ui @univerjs-pro/slides-chart @univerjs-pro/slides-chart-uipnpm add @univerjs-pro/slides-exchange-client

기능 등록 예제는 인쇄, 표, 차트, 가져오기 및 내보내기를 참조하세요.

선택적 플러그인 지연 로드

plugin mode에서는 제품에 실제로 필요할 때까지 기능 플러그인의 로드를 미룰 수 있습니다.

univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})import('@univerjs-pro/slides-chart').then(({ UniverSlidesChartPlugin }) => {  univer.registerPlugin(UniverSlidesChartPlugin)})

서버 측 사용법

Node.js에서는 모델 플러그인을 등록하고 브라우저 UI 플러그인은 등록하지 않습니다.

univer.registerPlugin(UniverSlidesPlugin)

모델 플러그인은 헤드리스 스냅샷 처리에 사용됩니다. 협업이나 파일 변환 API를 제공하려면 해당 Server SDK 모듈을 별도로 통합하세요. 이 플러그인 등록만으로 해당 서비스가 생성되지는 않습니다.

모바일 지원

Univer Slides에서 터치 조작을 제공하려면 모바일 UI 플러그인을 사용합니다.³ 에디터를 만들기 전에 UI 모드를 선택하세요.

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

import { UniverSlidesMobileUIPlugin } from '@univerjs-pro/slides-ui'import { UniverDocsMobileUIPlugin } from '@univerjs/docs-ui'import { UniverMobileUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' })univer.registerPlugin(UniverDocsMobileUIPlugin)univer.registerPlugin(UniverSlidesMobileUIPlugin)

플러그인 대응표

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

컨테이너와 터치 조작

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

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

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

기타 릴리스

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

Alpha / Beta 릴리스

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

pnpm add @univerjs-pro/slides@alpha # Alpha version
pnpm add @univerjs-pro/slides@beta # Beta version

npm install @univerjs-pro/slides@alpha # Alpha version
npm install @univerjs-pro/slides@beta # Beta version

yarn add @univerjs-pro/slides@alpha # Alpha version
yarn add @univerjs-pro/slides@beta # Beta version

bun add @univerjs-pro/slides@alpha # Alpha version
bun add @univerjs-pro/slides@beta # Beta version

alpha / beta 버전을 사용하면서 문제가 발생하거나 의견이 있다면 GitHub Issues를 통해 Univer 개발팀에 알려 주세요.

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

다음 단계

• Facade API 사용법을 알아보세요.
• 라이선스 설정
• Server SDK 통합
• 기능 섹션에서 필요한 기능 플러그인을 추가하세요.