Figma의 멀티플레이어 편집 (새 탭에서 열림)
Figma는 파일을 내려받아 로컬에서 편집한 뒤 전체 문서를 저장하는 방식이 협업 환경과 근본적으로 맞지 않는다는 문제를 해결하기 위해 실시간 멀티플레이어 편집을 도입했다. 사용자의 변경 사항을 서버에 전송하고 실시간으로 다른 사용자에게 브로드캐스트함으로써 최신 버전 보장, 덮어쓰기 방지, 원격 협업과 리뷰 개선을实现했다. 구현 과정에서는 실행 취소·다시 실행, 충돌 해결, 성능과 파일 형식 개선 등 복잡한 기술적 과제를 해결해야 했다. ## 기존 저장 방식의 한계 - 초기 Figma는 문서를 브라우저로 내려받아 로컬에서 편집하고, 일정 주기마다 전체 문서를 다시 업로드했다. - 개인 사용자에게는 구현과 이해가 쉬웠고, Dropbox 같은 동기화 서비스와도 유사해 익숙한 방식이었다. - 하지만 팀 기능이 추가되면서 다음 문제가 발생했다. - 여러 사용자가 서로의 작업을 모르고 저장해 변경 사항을 덮어씀 - 저장이 완료되기 전에 공유한 링크를 열면 이전 버전이 표시됨 - 버전 기록에는 모든 저장이 남았지만, 협업 중 발생하는 혼란 자체를 막지는 못함 - 한 명씩 편집권을 넘기는 ‘baton-passing’ 방식도 검토했지만, 동시 편집만큼 단순하고 자연스럽지는 않았다. ## 실시간 멀티플레이어 모델 - 각 사용자의 변경 사항을 서버로 보내고, 서버가 이를 다른 사용자에게 실시간으로 전달한다. - 서로 다른 객체나 속성에 대한 변경은 독립적으로 처리한다. - 동일 객체의 동일 속성을 동시에 수정하면 최신 변경을 적용하는 방식으로 충돌을 해결한다. - 이 구조를 통해 사용자는 항상 최신 문서를 보고, 편집 중인 파일 버전을 따로 확인하거나 충돌을 조정할 필요가 줄어든다. - Figma는 이 기능이 협동 멀티플레이어 게임과 비슷하다는 점에서 “multiplayer”라는 이름을 붙였다. ## 멀티플레이어 실행 취소와 다시 실행 - 단일 사용자 환경에서는 실행 취소가 “내가 방금 한 작업을 되돌리는 것”으로 정의되지만, 여러 사용자가 같은 객체를 수정하면 의미가 복잡해진다. - 다른 사용자의 변경 이후 실행 취소를 수행할 때 자신의 과거 변경을 다시 덮어써서는 안 된다. - Figma는 다음 원칙을 기준으로 동작을 설계했다. - 사용자가 여러 작업을 실행 취소한다. - 중간 상태에서 무언가를 복사한다. - 다시 실행해 현재 상태로 돌아온다. - 이 과정만으로 문서 내용이 달라져서는 안 된다. - 단순히 과거 상태를 복원하는 방식이 아니라, 다른 사용자의 후속 변경을 보존하는 방향으로 redo를 설계해야 했다. ## 충돌 해결의 복잡성 - 한 객체의 여러 속성이 함께 변경되어야 하는 경우, 특정 속성 하나의 변경만으로 전체 상태를 덮어쓰지 않도록 세밀한 병합이 필요했다. - 겉보기에는 한 객체만 수정하는 작업이 실제로는 다른 객체에도 영향을 줄 수 있었다. - 이 때문에 서로 무관해 보이는 객체를 두 사용자가 동시에 편집해도 충돌이 발생할 수 있었다. - 일부 레이아웃 기능은 이러한 협업 상황에 맞게 동작 방식을 수정해야 했다. - 단순한 “최신 변경 우선”만으로는 충분하지 않고, 작업 간 의존성과 여러 객체에 걸친 부수 효과까지 고려해야 했다. ## 성능과 파일 형식 개선 - 전문 디자인 도구 수준의 실시간 협업을 위해 지속적인 측정과 성능 튜닝이 필요했다. - 기존 파일 형식은 작은 변경 사항을 효율적으로 표현하기에 적합하지 않아 파일 포맷 자체를 개편했다. - 전체 문서를 반복해서 전송하는 대신, 작은 변경 메시지를 빠르게 전달하고 처리하는 것이 중요했다. - 멀티플레이어 기능은 에디터의 핵심 구조에 영향을 주는 대규모 기술 투자였지만, 향후 협업 기능을 위한 기반이 되었다. ## 협업 경험을 단순하게 만든 UI - 멀티플레이어는 기능을 추가했지만, 기존에 사용자들이 협업을 위해 사용하던 복잡한 우회 절차를 없애 UX를 오히려 단순하게 만들었다. - 현재 문서에 참여 중인 사용자의 마우스 커서와 선택 영역을 표시한다. - 누가 문서에 있는지 확인할 수 있다. - 다른 사람이 어느 부분을 작업 중인지 알 수 있다. - 커서를 특정 객체 옆에 두어 다른 사람의 주의를 끌거나 대상을 가리킬 수 있다. - 모든 사용자는 화면 오른쪽 위에 아바타로 표시된다. - 아바타는 참여자 확인뿐 아니라 프레젠테이션에도 활용된다. - Figma는 한 명의 발표자를 강제하고 모두가 그 사람을 따라가게 하는 방식을 시험했지만, 사용자의 선택권을 제한한다고 판단했다. - 대신 다른 사용자의 아바타를 클릭해 발표를 따라가는 선택적 방식이 더 자연스럽다고 보았다. ## 실용적인 결론 실시간 협업 기능은 단순히 변경 사항을 동기화하는 문제가 아니라, 실행 취소·충돌 병합·파일 포맷·레이아웃 모델·사용자 인터페이스까지 함께 설계해야 하는 시스템 문제다. 협업 제품을 만들 때는 기존의 개인용 저장 모델에 기능을 덧붙이기보다, 처음부터 동시 편집과 사용자 간 맥락 공유를 핵심 구조로 고려하는 것이 바람직하다.