빌 맥더멋, 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) 검증 과정을 거치며, 클라우드 저장소와 클라이언트 메모리 사이의 데이터 일관성을 엄격하게 감시합니다. 전통적인 소프트웨어가 로컬 파일 시스템에 의존했다면, 피그마는 "파일이 곧 데이터베이스"라는 관점에서 접근하여 협업의 패러다임을 바꿨습니다. 대규모 협업 프로젝트를 운영하는 팀이라면 데이터 직렬화 효율성과 중앙 집중식 동기화 전략이 시스템 성능에 미치는 영향을 피그마의 사례를 통해 참고할 수 있습니다.