Univer Boards 소개

Univer Boards란?

Univer Boards는 Univer Office SDK의 캔버스 제품입니다. 문서가 더 이상 그리드나 페이지, 슬라이드 덱이 아니라 자유 형식의 작업 공간이어야 할 때 사용합니다. 화이트보드, 다이어그램, 스티커 메모, 연결선, 임베드된 표, 마인드 맵을 모두 이곳에서 다룰 수 있습니다.

Univer Office SDK는 임베디드 편집기와 헤드리스 콘텐츠 처리를 제공하는 Web SDK, 협업과 파일 가져오기·내보내기를 제공하는 Server SDK, 에이전트 워크플로를 제공하는 AI SDK로 구성됩니다.

Boards는 독립적인 Web SDK 유닛 유형으로 구현됩니다. 런타임에서 UniverInstanceType.UNIVER_BOARD 유닛을 생성한 다음, 지원하려는 요소에 필요한 모델 및 UI 플러그인을 등록합니다.

브라우저 호환성

Web SDK는 Chrome 88을 대상으로 컴파일되지만, 이것이 모든 주요 환경을 완벽하게 지원한다는 의미는 아닙니다. Web SDK가 다음 브라우저 및 Node.js 환경에서 원활하게 작동하도록 최선을 다하고 있습니다.

호환성 문제가 발생하면 먼저 적절한 polyfill을 사용해 해결해 보세요. 문제가 계속되면 언제든지 이슈를 제출해 주세요.

Node.js 호환성

Web SDK는 Node.js 환경에서 실행할 수 있으며 v18.17.0 이상 버전을 지원합니다.

주요 기능

• 페이지와 요소 순서: 페이지는 pages에, 그릴 수 있는 객체는 각 페이지의 elements에 저장하며 두 계층 모두 명시적인 순서 배열을 사용합니다.
• 캔버스 요소: 텍스트, 도형, 이미지, 연결선, 그룹, 컨테이너, 스윔레인을 다룹니다.
• 명령 기반 편집: 요소 변경, 순서, 상하위 관계를 하나의 명령 계층으로 전달하고 권한 및 선택적 기록·협업 통합용 훅을 제공합니다.
• 브라우저 캔버스: 요소를 렌더링하고 선택, 변형, 클립보드, 텍스트 편집, 뷰포트 제어, 패널을 제공합니다.
• 확장 가능한 어댑터: 표, 마인드맵, 차트, 리소스, 인쇄, 교환과 같은 선택적 Boards 기능을 추가합니다.
• 영속화: 페이지, 리소스, 테마, 활성 페이지 상태를 포함한 IBoardData 스냅샷을 생성하고 복원하고 저장합니다.

문서 읽는 방법

화면 왼쪽에는 문서 탐색 메뉴가 있습니다. 문서 페이지는 기초부터 고급 내용까지 순서대로 구성되어 있어 애플리케이션을 만들 때 단계별로 따라갈 수 있습니다. 필요에 따라 원하는 순서로 읽거나 사용 사례에 해당하는 페이지로 바로 이동해도 됩니다. 사이드바 상단에서 Univer Boards를 확인할 수도 있습니다.

화면 오른쪽에는 페이지의 각 섹션으로 쉽게 이동할 수 있는 목차가 있습니다. 페이지를 빠르게 찾으려면 상단 검색창이나 검색 단축키(Ctrl+K 또는 Cmd+K)를 사용하세요.

시작하려면 빠른 시작 가이드를 확인하세요.

사전 지식

이 문서는 초보자도 쉽게 읽을 수 있도록 작성했지만, Web SDK에 집중해 설명하려면 몇 가지 기본 지식이 필요합니다.

문서를 최대한 활용하려면 JavaScript와 관련 생태계에 대한 기본적인 이해가 있는 것이 좋습니다.

Node.js에서 Web SDK를 실행하려면 Node.js에 대한 기본적인 이해도 필요합니다.

협업 편집, 공유 기록이나 댓글, 파일 변환이 필요하면 Univer Server SDK의 필요한 모듈을 애플리케이션 백엔드에 조합하세요. 인증, 권한, 저장소와 배포는 앱에서 담당합니다. 브라우저 편집만 사용할 때는 이러한 서비스가 필요하지 않습니다.

Univer Boards 확장하기

Web SDK는 필요에 맞게 구성할 수 있도록 높은 확장성을 갖추어 설계되었습니다.