# SpreadJS Sheets Collaboration

## Content

SpreadJS는 [동시 편집 프레임워크](/spreadjs/docs/v19/spreadjs-collaboration-server/collaboration-framework)와 확장 패키지 `spread-sheets-collaboration`, 그리고 SpreadJS 플러그인 `spread-sheets-collaboration-addon`을 통합하여 로컬 동기화와 원격 동시 작업 모두에서 매끄러운 사용 경험을 제공합니다. 이를 통해 실시간 다중 사용자 동시 작업 편집이 가능합니다.

## 아키텍처 설계

### 전체 프로세스

![overview.0c39e3.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/overview.0c39e3-20260107.808ebc.png)

### 핵심 구성 요소

* **[동시 편집 프레임워크](/spreadjs/docs/v19/spreadjs-collaboration-server/collaboration-framework)**: 실시간 동시 작업을 위한 기반 프레임워크로, 클라이언트와 서버 간의 통신 및 작업 동기화를 처리합니다.
* **[SpreadJS Sheets Collaboration](/spreadjs/docs/v19/spreadjs-collaboration-server/spreadjs-sheets-collaboration/spreadjs-sheets-collaboration-packages)**: Collaboration Service용 확장 패키지로, 워크북을 위한 전용 **OT(Operational Transformation)** 타입을 제공합니다. 동시 편집 중 데이터 일관성을 보장하기 위해 **Reducer** 및 **Transform** 로직을 포함합니다.
* **[SpreadJS Sheets Collaboration Add-on](/spreadjs/docs/v19/spreadjs-collaboration-server/spreadjs-sheets-collaboration/spreadjs-sheets-collaboration-add-on)**: 워크북용 플러그인으로, 데이터 모델 변경을 감지하고 작업(op)을 생성하여 **ChangeSets**로 통합한 뒤 서버와 연동합니다. 또한 서버에서 전달된 **ChangeSets**를 로컬 데이터 모델에 적용합니다.

## 동작 메커니즘

* **로컬 동기화**: `spread-sheets-collaboration-addon` 플러그인만 사용하며, 데이터 모델 변경을 감시하여 서버 개입 없이 동일 페이지 내 여러 워크북 인스턴스 간 동기화를 수행합니다.
* **원격 동시 작업**: `spread-sheets-collaboration-addon`이 워크북 데이터 모델 변경을 감지하고 해당 작업을 생성해 **ChangeSets**로 통합합니다. 이는 **Collaboration Service** 프레임워크를 통해 서버로 전송됩니다. 서버는 **Collaboration Service**의 통신 및 처리 기능과 `spread-sheets-collaboration`에 등록된 OT 타입(**Transform**, **Reducer** 로직 포함)을 결합해 작업을 처리한 후, 모든 연결된 클라이언트에 브로드캐스트하여 사용자 간 실시간 동시 작업을 구현합니다.

## 사용 사례

* **단일 사용자 다중 뷰**: `spread-sheets-collaboration-addon`을 사용하면 동일 페이지 내 여러 워크북 인스턴스가 하나의 문서를 동시에 사용할 수 있어, 다양한 보기 또는 편집 관점이 필요한 시나리오에 적합합니다.
* **팀 동시 작업**: `spread-sheets-collaboration`과 함께 사용하면 실시간 다중 사용자 편집을 지원하여 팀 단위 공유 및 동시 작업 처리에 적합합니다.
* **권한 제어**: 사용자별로 편집 또는 읽기 전용 권한을 부여할 수 있어 동시 작업의 유연성과 보안을 강화합니다.

## 기능 개요

**실시간 동시 작업**

* **다중 사용자 편집**: 여러 사용자가 동일한 워크북 문서를 동시에 편집하며, 모든 작업이 실시간으로 동기화됩니다.
* **OT(Operational Transformation)**: 셀 업데이트, 행 삽입 등 동시 작업의 일관성과 정확성을 보장하기 위해 사용자 정의 OT 타입을 사용합니다.

**온라인 Presence**

* **사용자 식별**: 다른 동시 작업 사용자의 선택 영역과 이름의 이니셜을 표시하여 각 사용자의 작업 위치를 쉽게 식별할 수 있습니다.
* **사용자 정의 색상**: 사용자별 색상을 설정할 수 있어 각 동시 작업 사용자의 선택 영역 가시성을 향상시킵니다.

**권한 관리**

* **편집 모드**: 문서 내용을 직접 수정할 수 있습니다.
* **보기 모드**: 편집 없이 문서 보기만 가능합니다.

**로컬 동기화**

* **다중 인스턴스 동기화**: 동일 페이지 내 여러 워크북 인스턴스가 실시간으로 업데이트를 동기화하여, 단일 사용자 다중 뷰 시나리오에 적합합니다.

**동시 작업 편집 상태**

* **실시간 편집 상태 반영**: 행 추가, 열 숨김 등 충돌 가능 작업이 현재 사용자 편집 상태에 영향을 미칠 경우, 편집 상태를 업데이트하고 UI 표시를 일관되게 유지합니다.

## 현재 제한 사항

동시 작업에서 지원되지 않는 기능:

* 모든 바인딩 관련 기능(테이블 수준 바인딩, 시트 수준 바인딩, 셀 수준 바인딩)
* 모든 데이터 매니저 관련 기능(데이터 차트, 간트 시트, 테이블 시트, 리포트 시트)
* FloatingObject 및 LegacyCharts

**사용자 정의 기능**(cellType, custom function)은 **제품 직렬화 정책**을 따릅니다.

* 사용자 정의 cellType을 등록하고 모든 클라이언트에 배포하면 동시 작업이 가능합니다.
* 일부 클라이언트 환경에만 사용자 정의 함수를 등록한 경우, 해당 함수가 없는 클라이언트에서는 `#NAME!`이 표시됩니다.

## SpreadJS 동시 작업 정책

SpreadJS의 동시 작업 사용 사례에서는 기본 동시 작업 메커니즘의 차이로 인해 일부 API 사용 시 새로운 정책을 따라야 합니다. 자세한 내용은 다음을 참조하십시오:
[SpreadJS 동시 작업 정책](/spreadjs/docs/v19/spreadjs-collaboration-server/spreadjs-sheets-collaboration/spreadjs-collaboration-policy)

보다 상세한 기술 구현이나 예제 코드는 각 기능 단위의 문서를 참조하십시오.