점진적 프레임 로 (새 탭에서 열림)

Figma는 프로토타입 전체를 메모리에 올리던 기존 방식을 버리고, 현재 화면과 곧 이동할 수 있는 화면만 단계적으로 불러오는 ‘증분 프레임 로딩’을 도입했습니다. 이를 통해 대형 프로토타입의 초기 로딩 시간을 줄이고, 특히 메모리가 제한된 모바일 환경에서 발생하던 앱 종료와 충돌을 완화했습니다. 핵심은 필요한 문서 트리 일부만 실시간으로 구독하고, 사용자의 탐색에 따라 구독 범위를 확장하는 것입니다.

전체 프로토타입 로딩의 한계

• 초기 프로토타이핑 기능은 프로토타입이 포함된 문서 전체를 메모리에 로드한 뒤 첫 화면을 표시했습니다.
• Figma 문서가 커지면서 페이지, 디자인 시스템, 컴포넌트 변형 수가 급증했고 프로토타입도 함께 대형화되었습니다.
• iPhone을 비롯한 모바일 기기는 데스크톱보다 메모리 여유가 적습니다.
• 운영체제가 애플리케이션의 메모리 사용량 증가를 허용하지 않고 프로세스를 종료하면서 모바일 프로토타입 충돌이 잦아졌습니다.
• 전체 데이터를 다운로드하고 메모리에 보관하는 방식은 로딩 시간과 메모리 사용량을 동시에 악화시켰습니다.

증분 프레임 로딩 전략

• 증분 로딩은 파일 전체가 아니라 새로 필요하거나 변경된 데이터 일부만 로드하는 방식입니다.
• Figma는 이 개념을 프로토타입 화면 단위에 적용해 ‘증분 프레임 로딩’이라고 명명했습니다.
• 현재 화면을 표시하는 데 필요한 데이터만 내려받고 메모리에 유지합니다.
• 사용자가 처음 보는 화면과 해당 화면에서 프로토타입 인터랙션으로 바로 이동할 수 있는 인접 화면을 우선 로드합니다.
• 사용자가 다음 화면으로 이동하면 새 화면과 그 화면에서 접근 가능한 인접 화면을 추가로 로드합니다.
• 이미 본 화면은 사용자가 뒤로 이동할 수 있으므로 메모리에 계속 유지합니다.

Time to Interactive 최적화

• 목표는 페이지 전체가 완전히 로드되는 시간이 아니라, 사용자가 유용한 화면을 보고 빠르게 클릭·탐색할 수 있게 되는 시간인 TTI(Time to Interactive)를 줄이는 것입니다.
• 첫 화면과 즉시 이동 가능한 화면만 준비하면 사용자는 전체 프로토타입이 로드되기 전에 상호작용을 시작할 수 있습니다.
• 이후 화면은 사용자의 탐색 흐름에 맞춰 지연 로딩되므로 초기 표시를 위해 기다려야 하는 데이터 양이 줄어듭니다.

실시간 공동 편집과 부분 동기화

• Figma 파일은 다른 사용자가 편집할 때 변경 사항이 활성 사용자에게 실시간으로 동기화되어야 합니다.
• 기존 시스템은 파일 전체를 서버의 실시간 데이터 저장소와 연결해 업데이트를 전달했습니다.
• 부분 로딩을 지원하기 위해 Figma는 파일의 특정 부분만 조회할 수 있는 기능을 추가했습니다.
• 클라이언트는 문서 트리에서 구독할 하위 트리를 query 메시지로 요청합니다.
• 서버는 해당 하위 트리의 현재 상태를 reply 메시지로 전달하고 요청이 처리되었음을 확인합니다.
• 이후 구독 범위 안에서 변경이 발생하면 서버는 changes 메시지를 통해 업데이트를 전송합니다.

문서 트리 구독 프로토콜

• 특정 노드 a를 구독하면 해당 노드뿐 아니라 조상 노드와 모든 자손 노드도 구독 대상으로 취급됩니다.
• 클라이언트가 a를 요청하면 서버는 a의 현재 콘텐츠와 함께 요청 완료 응답을 보냅니다.
• 구독한 노드의 속성이 변경되면 변경 사항이 클라이언트로 전달됩니다.
• 다른 노드 y가 a 아래로 이동하면 서버는 a의 구독 범위에 새로 들어온 y의 존재를 전달합니다.
• 반대로 c가 x 아래로 이동하고 클라이언트가 x의 자손을 구독하지 않는다면, 클라이언트에는 c가 구독 범위에서 제거되었다는 변경 사항이 전달됩니다.
• 따라서 클라이언트는 파일 전체가 아니라 현재 관심 영역에 해당하는 문서 트리만 유지하면서도 실시간 상태를 일관되게 관리할 수 있습니다.

실용적인 결론

대규모 문서나 프로토타입을 다루는 애플리케이션에서는 전체 데이터 선로드보다 사용자 행동을 기준으로 한 부분 로딩이 효과적입니다. 특히 초기 상호작용에 필요한 최소 데이터만 먼저 제공하고, 탐색 경로에 따라 인접 데이터를 미리 가져오며, 실시간 동기화 역시 구독 단위로 제한하는 설계가 로딩 성능과 메모리 안정성을 함께 개선할 수 있습니다.