Velt와 CRDT로 구현한 실시간 협업 AI 화이트보드 설계

Context

다수 사용자의 동시 편집 시 발생하는 상태 충돌 및 동기화 유지의 어려움. 단순 렌더링보다 일관성 있는 공유 상태 관리와 실시간 존재감(Presence) 구현이 핵심 과제.

Technical Solution

• Velt의 CRDT 기반 동기화 엔진을 도입하여 편집 내용을 교체 방식이 아닌 연산 기록 방식으로 처리하는 충돌 방지 설계
• Yjs 라이브러리를 활용한 VeltProvider 래퍼 구조로 노드 위치, 텍스트, 커서, 댓글 등 모든 공유 상태의 즉각적인 동기화 구현
• ReactFlow 기반의 무한 캔버스 위에 커스텀 노드 타입을 정의하고 Zustand를 통해 로컬 상태와 공유 상태를 분리 관리
• MiniMax M2.5 모델을 연동하여 캔버스 데이터를 분석하고 노드 생성 및 수정 액션을 반환하는 AI 사이드바 구축
• AI 로직과 렌더링 레이어를 분리하여 AI가 상태를 직접 수정하지 않고 순수 함수 형태로 데이터만 반환하는 단방향 데이터 흐름 설계
• Velt MCP 서버와 Agent Skills를 활용하여 API 레퍼런스 기반의 인프라 설정 및 기능 구현 자동화 공정 도입

Key Takeaway

실시간 협업 시스템 설계 시 상태의 완전 교체가 아닌 연산의 병합(CRDT)을 통해 분산 환경의 데이터 일관성을 확보하는 것이 필수적임. AI 기능을 통합할 때 상태 관리 로직과 AI 추론 로직을 엄격히 분리해야 캔버스 렌더링의 안정성을 유지할 수 있음.