피그마의 멀티플레이어 (새 탭에서 열림)

피그마(Figma)는 여러 사용자가 하나의 디자인 파일에서 동시에 작업할 수 있는 '멀티플레이어(Multiplayer)' 편집 환경을 구축하여 협업의 패러다임을 바꿨습니다. 이를 위해 피그마는 모든 사용자가 실시간으로 동일한 상태를 공유하면서도 로컬에서의 반응성을 유지할 수 있는 독자적인 동기화 엔진을 설계했습니다. 결과적으로 복잡한 동시성 문제를 해결하고, 충돌을 최소화하며 데이터 일관성을 보장하는 고성능 실시간 편집 시스템을 구현해 냈습니다.

실시간 협업을 위한 데이터 모델과 동기화 방식

  • 피그마의 문서는 계층적인 트리 구조로 이루어져 있으며, 각 객체는 고유한 ID와 속성(색상, 위치 등)을 가집니다.
  • 사용자가 디자인을 수정하면 문서 전체를 다시 전송하는 대신, 변경된 속성값만 추출한 '델타(Delta)'를 서버로 전송하여 네트워크 부하를 줄입니다.
  • 클라이언트는 서버의 응답을 기다리지 않고 로컬에서 즉시 변경 사항을 반영하여 지연 없는 사용자 경험을 제공하며, 이후 서버를 통해 다른 사용자들과 상태를 동기화합니다.

중앙 집중형 서버를 통한 충돌 해결

  • 피그마는 분산형 시스템인 CRDT(Conflict-free Replicated Data Types)의 아이디어를 차용하되, 최종적인 일관성을 위해 중앙 서버를 '진실의 원천(Source of Truth)'으로 활용합니다.
  • 여러 사용자가 동일한 속성을 동시에 수정할 경우, 서버에 먼저 도착한 요청을 기준으로 처리하는 '최종 작성자 승리(Last Writer Wins)' 원칙을 적용하여 단순하면서도 명확한 충돌 해결 방식을 채택했습니다.
  • 서버는 각 클라이언트로부터 받은 작업의 순서를 결정하고 이를 다른 모든 클라이언트에게 전파함으로써, 모든 참여자가 결국 동일한 화면을 보게 만듭니다.

복잡한 트리 구조의 무결성 유지

  • 단순한 속성 변경 외에 객체를 다른 프레임으로 이동시키는 '리페어런팅(Reparenting)' 작업 시 발생할 수 있는 순환 참조 문제를 방지하는 로직이 포함되어 있습니다.
  • 예를 들어, A가 객체 1을 객체 2의 자식으로 옮기고, 동시에 B가 객체 2를 객체 1의 자식으로 옮기는 경우 발생할 수 있는 데이터 구조의 붕괴를 서버 측의 유효성 검사를 통해 차단합니다.
  • 이러한 엄격한 트리 구조 관리를 통해 수많은 사용자가 동시에 레이어를 편집하더라도 문서 데이터가 깨지지 않고 안정적으로 유지됩니다.

피그마의 멀티플레이어 시스템은 실시간 협업의 기술적 난제를 '중앙 서버 기반의 동기화'와 '속성 단위의 데이터 관리'를 통해 효율적으로 해결했습니다. 협업 도구를 설계할 때 모든 상태를 완벽하게 일치시키려 하기보다, 데이터 구조의 특성에 맞는 합리적인 충돌 해결 전략을 선택하는 것이 성능과 사용자 경험 측면에서 얼마나 중요한지 잘 보여주는 사례입니다.