# 공동 편집 통합

> Univer 편집기를 공동 편집 서비스에 연결해 사용자들이 같은 문서를 편집하도록 합니다.

- Human documentation: [https://docs.univer.ai/ko-KR/server/collaboration/browser-integration](https://docs.univer.ai/ko-KR/server/collaboration/browser-integration)

- Agent Markdown: [https://docs.univer.ai/ko-KR/server/collaboration/browser-integration.md](https://docs.univer.ai/ko-KR/server/collaboration/browser-integration.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [collaboration/browser-integration.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/server/collaboration/browser-integration.ko-KR.mdx)

---

공동 편집은 브라우저 편집기를 공유 문서 서비스에 연결합니다. 예를 들어 두 사용자가 같은 스프레드시트를 열면 한 브라우저의 수정 내용이 다른 브라우저에도 나타납니다.

[서버 통합](https://docs.univer.ai/ko-KR/server.md)으로 백엔드를 준비한 뒤 아래의 편집기와 문서 로드를 설정하세요. [협업 빠른 시작](https://docs.univer.ai/ko-KR/server/collaboration/quick-start.md)의 Server와 Web 코드를 함께 참고하세요.

```mermaid
flowchart LR; A["사용자 A 편집기"] <-->|변경 교환| S["공동 편집 서비스"]; S <-->|변경 교환| B["사용자 B 편집기"]; S --> D[("문서 저장")];
```

## 기존 편집기 연결

기존 Web SDK 편집기는 유지하세요. [빠른 시작의 브라우저 설정](https://docs.univer.ai/ko-KR/server/collaboration/quick-start.md)에 따라 공동 편집 플러그인을 추가하고 문서 로드, 변경 제출, WebSocket 주소를 설정하세요. 브라우저와 서버 패키지 버전을 호환되게 유지하세요.

예제의 고정 사용자와 기본 권한은 시연용입니다. 실제 요청에는 로그인 자격 증명을 포함하여 백엔드가 신원과 문서 접근을 검증하도록 하세요. 라이선스는 [라이선스 설정](https://docs.univer.ai/ko-KR/server/license.md)을 참고하세요.

## 같은 문서 생성 및 열기

생성과 열기는 별개 작업입니다.

1. 사용자가 문서를 생성하면 백엔드가 저장하고 ID를 반환합니다.
2. 브라우저가 해당 ID를 로드합니다. 다시 열거나 다른 사용자와 공유할 때도 같은 ID를 사용합니다.

API의 `unitId`가 이 문서 ID입니다. 방문할 때마다 새로운 로컬 빈 문서를 만들지 마세요.

예를 들어 Sheets와 공동 편집 플러그인 등록 후 서버 스프레드시트를 로드합니다.

```ts
import '@univerjs-pro/collaboration-client/facade'

const workbook = await univerAPI.getCollaboration().loadSheetAsync('your-document-id')
if (!workbook) throw new Error('Document could not be loaded')
```

제품별 로드는 [Sheets](https://docs.univer.ai/ko-KR/guides/sheets/features/collaboration.md), [Docs](https://docs.univer.ai/ko-KR/guides/docs/features/collaboration.md), [Slides](https://docs.univer.ai/ko-KR/guides/slides/features/collaboration.md), [Boards](https://docs.univer.ai/ko-KR/guides/boards/features/collaboration.md), [Bases](https://docs.univer.ai/ko-KR/guides/bases/features/collaboration.md), [PDFs](https://docs.univer.ai/ko-KR/guides/pdfs/features/collaboration.md) 가이드를 참고하세요. 제품과 대상 백엔드 릴리스의 지원 여부를 확인하세요.

## 동기화, 저장 및 권한 확인

일반 창과 시크릿 창처럼 독립된 두 브라우저 세션에서 같은 문서를 여세요. 한쪽에서 수정하고 다른 쪽을 확인하세요. 새로 고침, 재연결, 서버 재시작 후에도 내용을 검증하세요.

편집자, 보기 전용 사용자, 권한이 없는 사용자로 테스트하세요. 읽기 전용 UI 설정은 페이지 상호작용만 제어하며, 서버는 여전히 허용되지 않은 읽기와 변경을 거부해야 합니다.

문서는 로드되지만 수정이 동기화되지 않으면 WebSocket 연결을 확인하세요. 재시작 후 내용이 사라지면 백엔드 저장소를 확인하세요. 설정은 [서버 통합](https://docs.univer.ai/ko-KR/server.md)을 참고하세요.

## 파일 교환, 댓글 또는 기록 추가

가져온 파일을 공동 편집하려면 변환된 데이터로 공동 편집 문서를 생성하세요. [파일 교환 통합](https://docs.univer.ai/ko-KR/server/import-export.md)을 참고하세요. 댓글과 기록에는 각각 플러그인, 서비스, 권한이 필요합니다. [Office 확장 모듈](https://docs.univer.ai/ko-KR/server/collaboration/extensions.md)을 따르세요.

기록 패널 설정은 [Sheets](https://docs.univer.ai/ko-KR/guides/sheets/features/edit-history.md), [Docs](https://docs.univer.ai/ko-KR/guides/docs/features/edit-history.md), [Slides](https://docs.univer.ai/ko-KR/guides/slides/features/edit-history.md), [Boards](https://docs.univer.ai/ko-KR/guides/boards/features/edit-history.md), [Bases](https://docs.univer.ai/ko-KR/guides/bases/features/edit-history.md)를 참고하세요. PDFs의 현재 범위는 [PDFs 기록](https://docs.univer.ai/ko-KR/guides/pdfs/features/edit-history.md)에서 확인하세요.