Figma의 CRDT 기반 실시간 멀티플레이어 기술

배경

Figma는 브라우저 기반 디자인 도구로, 여러 사용자가 동시에 같은 파일을 실시간으로 편집합니다. Google Docs와 유사하지만, 2D 그래픽 요소의 동시 편집이라는 더 복잡한 문제를 해결해야 합니다.

도전 과제

여러 사용자가 동시에 같은 디자인 요소를 수정할 때 충돌을 해결해야 합니다. OT(Operational Transformation)는 서버 의존성이 높고, CRDT는 메모리 사용량이 큽니다. 브라우저 환경의 메모리 제한, 네트워크 지연, 오프라인 지원까지 고려해야 합니다.

해결 방안

OT에서 영감을 받은 커스텀 충돌 해결 알고리즘을 개발했습니다. 서버가 변경 사항의 순서를 결정하고, 각 클라이언트가 낙관적으로 로컬 변경을 적용한 후 서버의 정규화된 순서에 맞게 리베이스합니다. 이후 Eg-walker 알고리즘(CRDT만큼 빠르면서 OT만큼 메모리 효율적)으로 진화했습니다.

결과

수백 명이 동시 편집해도 지연 감지 불가 수준의 실시간 경험 제공. TypeScript → Rust로 서버 전환하여 10배 성능 향상.

핵심 인사이트

• 1.OT와 CRDT의 하이브리드 접근이 실용적
• 2.Eg-walker: CRDT의 성능 + OT의 메모리 효율
• 3.낙관적 로컬 적용 + 서버 리베이스 패턴
• 4.Rust 전환으로 동시 편집 서버 10배 성능 향상