빌 맥더멋, Figma 이사회 (새 탭에서 열림)
피그마는 기존 데스크톱 디자인 도구의 정적인 파일 개념을 탈피하여, 클라우드 네이티브 환경에 최적화된 동적 데이터베이스 중심의 아키텍처를 구축했습니다. 이 글은 피그마 파일의 내부 구조가 어떻게 실시간 협업과 고성능 렌더링을 동시에 달성하는지 기술적인 관점에서 상세히 설명합니다. 결과적으로 피그마의 성공은 바이너리 포맷의 효율성과 중앙 집중식 동기화 엔진의 조화로운 설계에 기반하고 있음을 보여줍니다.
데이터 모델: 씬 그래프와 프로토콜 버퍼
- 피그마의 모든 문서는 계층적인 '씬 그래프(Scene Graph)' 구조로 관리되며, 각 요소는 노드(Node) 형태로 존재합니다.
- 데이터 직렬화를 위해 구글의 프로토콜 버퍼(Protocol Buffers, Protobuf)를 사용합니다. 이는 JSON 대비 크기가 작고 파싱 속도가 매우 빨라, 네트워크 대역폭을 절약하고 대용량 파일을 신속하게 로드하는 데 핵심적인 역할을 합니다.
- 스키마 버전 관리를 통해 하위 호환성을 유지하며, 새로운 기능이 추가되어도 이전 버전의 클라이언트에서 데이터가 손상되지 않도록 설계되었습니다.
실시간 협업을 위한 동기화 엔진
- 피그마는 전체 파일을 매번 저장하는 방식이 아니라, 변경된 '작업(Operation)'만을 서버로 전송하는 증분 업데이트 방식을 채택했습니다.
- 중앙 서버는 모든 클라이언트로부터 들어오는 편집 요청의 순서를 결정하는 '권위 있는 소스(Source of Truth)' 역할을 수행합니다.
- 충돌 해결을 위해 각 변경 사항에는 타임스탬프와 고유 ID가 부여되며, 이를 통해 여러 사용자가 동시에 같은 요소를 수정하더라도 최종적으로 동일한 상태에 도달하도록 보장합니다.
고성능 렌더링과 WebGL 엔진
- 브라우저의 한계를 극복하기 위해 HTML/CSS가 아닌 WebGL 기반의 자체 렌더링 엔진을 사용합니다.
- C++로 작성된 렌더링 코드를 WebAssembly(Wasm)로 컴파일하여 실행함으로써, 수만 개의 객체가 포함된 복잡한 디자인도 60fps의 부드러운 속도로 화면에 그려냅니다.
- GPU 가속을 적극 활용하여 텍스트 렌더링, 벡터 패스 계산, 이미지 필터링 등의 무거운 연산을 효율적으로 처리합니다.
불변 스냅샷을 통한 버전 관리
- 피그마의 버전 히스토리는 파일의 특정 시점 상태를 '불변 스냅샷(Immutable Snapshot)'으로 저장하여 관리합니다.
- 사용자가 명시적으로 저장하지 않아도 시스템은 주기적으로 체크포인트를 생성하며, 이를 통해 언제든지 과거의 특정 상태로 안전하게 되돌릴 수 있습니다.
- 데이터의 무결성을 유지하기 위해 체크섬(Checksum) 검증 과정을 거치며, 클라우드 저장소와 클라이언트 메모리 사이의 데이터 일관성을 엄격하게 감시합니다.
전통적인 소프트웨어가 로컬 파일 시스템에 의존했다면, 피그마는 "파일이 곧 데이터베이스"라는 관점에서 접근하여 협업의 패러다임을 바꿨습니다. 대규모 협업 프로젝트를 운영하는 팀이라면 데이터 직렬화 효율성과 중앙 집중식 동기화 전략이 시스템 성능에 미치는 영향을 피그마의 사례를 통해 참고할 수 있습니다.