Figma는 웹 브라우저라는 제한적인 환경에서 고성능 그래픽 도구를 구현하기 위해 전통적인 웹 개발 방식을 넘어선 혁신적인 엔지니어링 접근법을 취하고 있습니다. 핵심은 C++ 엔진과 WebAssembly를 활용한 저수준 최적화, 그리고 독자적인 데이터 구조를 통해 데스크톱 애플리케이션에 필적하는 속도와 안정성을 확보한 것입니다. 이러한 성능 최적화는 단순한 기능 개선을 넘어 수만 개의 레이어가 포함된 대규모 협업 환경에서도 지연 없는 사용자 경험을 제공하는 Figma의 핵심 경쟁력이 되었습니다.

WebAssembly와 C++ 기반의 핵심 엔진

브라우저의 JavaScript 엔진이 가진 가비지 컬렉션(GC) 성능 저하와 예측 불가능한 실행 속도를 극복하기 위해, 서비스의 핵심 로직을 C++로 작성했습니다.
작성된 C++ 코드를 WebAssembly(Wasm)로 컴파일하여 브라우저에서 실행함으로써, 네이티브 앱에 가까운 실행 속도를 확보하고 메모리 레이아웃을 직접 정밀하게 제어합니다.
이를 통해 복잡한 벡터 연산이나 대량의 객체 렌더링 시에도 일정한 프레임 레이트를 유지하며, 대규모 디자인 파일 로딩 성능을 비약적으로 향상시켰습니다.

고성능 렌더링 파이프라인 및 GPU 활용

웹 표준 렌더링 방식의 한계를 넘기 위해 Skia 기반의 독자적인 렌더링 엔진을 구축하고, GPU 가속을 적극적으로 활용합니다.
화면의 변경된 부분만 효율적으로 업데이트하는 '더티 렉트(Dirty Rect)' 알고리즘과 타일링 기법을 적용하여 불필요한 연산을 최소화합니다.
고해상도 디스플레이 환경에서도 줌인/줌아웃 및 패닝(Panning) 시 끊김 없는 부드러운 화면 전환을 위해 픽셀당 연산 과정을 최적화했습니다.

실시간 협업을 위한 데이터 동기화 아키텍처

여러 사용자가 동시에 편집하는 환경에서 데이터 충돌을 방지하고 일관성을 유지하기 위해 CRDT(Conflict-free Replicated Data Types) 개념을 응용한 동기화 엔진을 운용합니다.
전체 파일 데이터를 다시 전송하는 대신, 변경된 속성(Diff)만을 최소 단위로 패키징하여 전송함으로써 네트워크 대역폭 사용량을 획기적으로 줄였습니다.
사용자의 조작을 로컬에서 즉각 반영하는 '낙관적 업데이트'와 서버와의 비동기 통신을 정교하게 결합하여, 네트워크 지연 시간이 있는 상황에서도 체감 속도를 높였습니다.

대규모 프로젝트를 위한 메모리 관리 전략

브라우저의 메모리 제한(특히 32비트 환경의 한계)을 극복하기 위해 64비트 WebAssembly를 도입하고 메모리 파티셔닝 기술을 적용했습니다.
파일 내의 수많은 레이어와 에셋을 한꺼번에 불러오지 않고, 화면에 보이는 요소나 필요한 데이터만 우선적으로 로드하는 지연 로딩(Lazy Loading) 기법을 사용합니다.
지속적인 성능 프로파일링을 통해 메모리 누수를 감지하고, 불필요한 객체를 즉각 해제하는 엄격한 리소스 관리 체계를 구축하여 장시간 작업 시에도 안정성을 유지합니다.

Figma의 사례는 웹 기술의 한계를 탓하기보다 WebAssembly와 GPU 가속 같은 최신 표준을 밑바닥부터 활용하여 문제를 해결하는 방식의 중요성을 보여줍니다. 성능 최적화는 단기적인 작업이 아니라 제품의 설계 단계부터 고려되어야 하는 핵심 원칙이며, 특히 협업 툴에서는 성능이 곧 사용자의 생산성과 직결된다는 점을 명심해야 합니다. 최신 웹 기술 스택을 고려 중인 엔지니어라면 성능 병목 지점을 해결하기 위해 저수준 제어권을 확보하는 전략을 검토해 볼 필요가 있습니다.