피그마(Figma)는 웹 브라우저라는 제한된 환경에서 복합적인 그래픽 작업과 실시간 협업을 동시에 구현하기 위해 독자적인 인프라 아키텍처를 구축했습니다. 이들은 성능 한계를 극복하기 위해 C++ 엔진을 웹어셈블리(WebAssembly)로 컴파일하여 사용하며, 모든 사용자가 동일한 상태를 공유할 수 있도록 '파일별 단일 프로세스' 모델 기반의 멀티플레이어 서버를 운영합니다. 결과적으로 피그마는 웹의 접근성과 데이티브 앱의 고성능, 그리고 실시간 동기화라는 세 가지 요소를 성공적으로 결합해냈습니다.

웹 기반 고성능 렌더링을 위한 C++와 WebAssembly 활용

피그마의 핵심 편집기 엔진은 자바스크립트가 아닌 C++로 작성되었으며, 이를 웹어셈블리(Wasm)로 컴파일하여 브라우저에서 실행합니다.
이는 복잡한 벡터 계산과 대용량 그래픽 데이터 처리를 네이티브 앱에 가까운 속도로 수행하기 위함이며, 브라우저의 가비지 컬렉션으로 인한 성능 저하 문제를 방지합니다.
단일 코드베이스를 유지함으로써 웹, 데스크톱 앱(Electron), 모바일 앱 등 다양한 플랫폼에서 동일한 렌더링 결과와 비즈니스 로직을 보장합니다.

멀티플레이어 서버와 실시간 상태 동기화

피그마의 실시간 협업 엔진은 '중앙 집중식 권한 서버' 모델을 따릅니다. 각 피그마 파일은 멀티플레이어 서버의 특정 프로세스에 할당되어 해당 파일의 유일한 진실 공급원(Source of Truth) 역할을 합니다.
사용자가 수정을 하면 클라이언트는 변경 사항(Operation)을 서버로 보내고, 서버는 이를 검증한 뒤 파일의 현재 상태에 적용하고 다른 사용자들에게 즉시 전파합니다.
일반적인 CRDT(Conflict-free Replicated Data Type) 방식의 복잡성을 피하기 위해, 서버가 작업 순서를 결정하는 방식을 채택하여 데이터 정합성을 엄격하게 유지합니다.

LiveGraph를 통한 효율적인 데이터 구독

기존의 REST API 방식은 빈번하게 변하는 디자인 데이터의 업데이트를 실시간으로 반영하기에 비효율적이었습니다.
이를 해결하기 위해 피그마는 'LiveGraph'라는 커스텀 리액티브 데이터 시스템을 구축했습니다.
클라이언트가 필요한 데이터의 쿼리를 서버에 등록하면, 데이터베이스에 변경이 발생할 때마다 LiveGraph가 해당 변경 사항을 감지하여 관련 클라이언트에만 실시간으로 업데이트를 푸시합니다.

안정성과 확장성을 위한 인프라 계층 구조

피그마의 백엔드는 초기 Ruby on Rails 모놀리스에서 시작하여, 현재는 성능이 중요한 서비스들을 Go와 Rust 기반의 마이크로서비스로 점진적으로 분리하고 있습니다.
데이터 저장소로는 AWS RDS(PostgreSQL)와 S3를 주로 사용하며, 전 세계 사용자에게 낮은 지연 시간을 제공하기 위해 에지 로케이션(PoP)을 활용하여 네트워크 경로를 최적화합니다.
대규모 트래픽과 복잡한 파일 처리를 위해 수천 개의 멀티플레이어 서버 노드를 동적으로 스케일링하며, 특정 노드 장애 시에도 사용자의 작업을 보호할 수 있는 복구 메커니즘을 갖추고 있습니다.

피그마의 사례는 웹 기술의 한계를 넘기 위해 표준 기술(JS/HTML)에 안주하지 않고, 문제의 본질에 맞는 맞춤형 엔진과 프로토콜을 직접 설계하는 것이 중요하다는 것을 보여줍니다. 고성능 실시간 협업 서비스를 설계한다면 피그마처럼 "단일 소유권 기반의 동기화"와 "플랫폼 중립적인 고성능 코어 엔진"의 조합을 고려해 보는 것이 좋습니다.