Building Real-Time Collaborative Apps with CRDTs and Y.js

Context

Operational Transformation이나 last-write-wins 같은 기존 협업 접근 방식은 경쟁 조건(race condition)과 손실된 업데이트를 야기하며, 서버 측 충돌 해결 로직이 복잡해진다. Figma, Notion, Google Docs 같은 현대 애플리케이션에서 요구하는 실시간 협업 기능을 안정적으로 구현하기 어렵다.

Technical Solution

• CRDT(Conflict-free Replicated Data Types) 도입: 수학적으로 교환 법칙이 성립하는 데이터 구조로 설계하여 작업 순서에 관계없이 모든 피어가 동일한 최종 상태로 수렴
• Y.js 라이브러리 활용: Y.Text, Y.Array, Y.Map, Y.XmlFragment 같은 CRDT 기반 공유 타입 제공
• 하이브리드 동기화 방식 구현: 상태 벡터를 통한 작은 페이로드 크기와 작업 기반 동기화의 안정성을 결합
• WebSocket 기반 멀티피어 동기화: WebsocketProvider를 통해 라우터 이름을 기반으로 같은 방에 속한 모든 피어가 자동으로 문서 동기화
• TipTap 에디터 바인딩: Collaboration 확장과 Collaboration Cursor 확장으로 협업 텍스트 에디터 및 사용자 커서 표시 기능 구현
• UndoManager를 통한 사용자별 실행 취소/재실행: 사용자가 Ctrl+Z를 눌렀을 때 자신의 변경사항만 되돌리는 기능

Impact

• Y.js 문서에서 100,000자 협업 텍스트를 약 200KB 이하로 인코딩
• 수천 개의 동시 작업(concurrent operation)을 1밀리초 이하에서 병합

Key Takeaway

CRDT는 중앙 집중식 권한 없이 수학적 수렴을 보장하므로, 실시간 협업 애플리케이션에서 복잡한 서버 측 충돌 해결 로직을 제거할 수 있다. Y.js의 성숙한 생태계와 엣지 케이스 처리로 인해 프로덕션 협업 기능을 최소한의 코드로 구현 가능하다.