파일 로드 속도 개선: (새 탭에서 열림)
Figma는 파일 전체를 한꺼번에 불러오는 대신 사용자가 현재 보고 있는 페이지만 동적으로 로드해 파일 로딩 속도를 개선했다. 파일이 커져도 실제 사용자가 접근하는 콘텐츠의 복잡도에 비례해 로드하도록 설계한 결과, 가장 느린 5%의 페이지 로드 시간이 33% 감소했다. 핵심 과제는 페이지 간 컴포넌트·스타일·변수 참조 같은 의존성을 정확히 추적하면서 필요한 데이터만 전송하는 것이었다. ## 사용자 체감 복잡도에 맞춘 로딩 - Figma 파일은 여러 페이지, 컴포넌트, 라이브러리, 프로토타입 화면을 포함해 매우 커질 수 있다. - 하지만 사용자는 한 세션에서 파일의 모든 페이지를 탐색하지 않는 경우가 많다. - 따라서 파일 크기 전체가 아니라 현재 열어 본 페이지의 복잡도에 따라 로딩 시간이 결정되어야 한다. - 선택한 페이지만 먼저 표시하고, 다른 페이지는 사용자가 접근할 때 불러오면 초기 로딩 시간과 메모리 사용량을 줄일 수 있다. - Figma는 파일이 계속 커지더라도 로딩 성능은 지속적으로 개선되는 것을 목표로 삼았다. ## 페이지 간 읽기 의존성 - Figma 파일은 각 레이어와 속성을 가진 노드들의 트리 구조로 구성된다. - 노드는 다른 페이지에 있는 노드를 참조할 수 있으며, 이를 **읽기 의존성(read dependency)**이라고 부른다. - 예를 들어 인스턴스는 다른 페이지에 있는 원본 컴포넌트를 가리키므로, 올바르게 렌더링하려면 해당 컴포넌트 노드도 먼저 받아야 한다. - 스타일 역시 내부적으로 노드로 구현된다. - 특정 프레임이 `BrandPrimary` 색상 스타일을 사용하면 해당 스타일 노드를 로드해야 실제 색상값을 해석할 수 있다. - 변수도 같은 방식으로 동작한다. - 텍스트 크기에 `text-subheader` 변수를 적용했다면, 클라이언트는 변수 노드를 조회해 실제 값인 `16` 같은 원시 값을 확인해야 한다. - 따라서 단순히 현재 페이지만 로드해서는 부족하며, 렌더링에 필요한 다른 페이지의 참조 데이터까지 함께 찾아야 한다. ## QueryGraph 기반 동적 로딩 - Figma는 읽기 의존성을 메모리 내 그래프로 관리하는 **QueryGraph**를 구축했다. - QueryGraph는 의존 노드 간 연결을 추적하고, Figma의 멀티플레이어 시스템이 클라이언트에 어떤 데이터를 전송할지 결정하는 기반이 됐다. - 이 구조는 기존에 보기 전용 파일과 프로토타입의 동적 로딩을 구현하는 데 활용됐다. - 동적으로 불러오는 단위는 콘텐츠 유형에 따라 달라진다. - **Figma 캔버스:** 선택한 페이지를 먼저 로드하고, 추가 페이지는 필요할 때 요청한다. - **프로토타입 뷰어:** 한 번에 하나의 프레임을 표시하고, 사용자가 이동할 가능성이 있는 인접 프레임을 미리 로드한다. - 페이지를 로드할 때는 해당 페이지 자체뿐 아니라 다른 페이지에 존재하는 필수 컴포넌트·스타일·변수 노드도 QueryGraph를 통해 함께 전송한다. ## 동적 로딩의 효과 - 모든 페이지와 노드를 초기화하는 방식보다 불필요한 데이터 전송을 줄일 수 있다. - 사용자가 실제로 접근하지 않는 페이지를 메모리에 올리지 않아 메모리 사용량도 감소한다. - 큰 파일이라도 현재 작업 중인 페이지가 단순하다면 빠르게 캔버스를 표시할 수 있다. - 가장 느린 5%의 페이지 로드 시간이 33% 줄어드는 성과를 거뒀다. ## 실용적인 시사점 대규모 웹 애플리케이션에서는 전체 데이터를 일괄 로드하기보다 사용자의 현재 화면과 실제 접근 경로를 기준으로 로딩 단위를 정하는 것이 효과적이다. 다만 페이지 단위 지연 로딩을 적용할 때는 컴포넌트, 스타일, 변수처럼 화면 밖에 존재하는 참조 데이터까지 의존성 그래프로 추적해야 하며, 필요한 의존성만 정확히 함께 로드하는 설계가 중요하다.