파일 로딩, 드래
Figma는 디자인 도구가 사용자의 사고와 손동작을 즉시 따라가려면 성능이 핵심이라고 강조한다. 문서 렌더러 재구성, WebAssembly 최적화 등을 통해 대용량 파일 로딩과 줌·드래그 성능을 최대 3배 개선했으며, 실제 사용자 문서와 프레임 시간 지표를 기반으로 효과를 측정했다. 특히 단순한 평균 속도뿐 아니라 화면 피드백의 끊김까지 함께 줄이는 것을 목표로 삼았다. ## 성능이 창작 경험을 좌우하는 이유 - 디자인 도구의 지연은 사용자의 사고와 화면 조작 사이에 간극을 만든다. - Figma는 제품이 사용자의 창의적 사고와 신체 움직임을 자연스럽게 확장해야 한다고 본다. - 따라서 기능을 추가하는 것뿐 아니라, 실제 사용 문서에서 성능 병목을 지속적으로 찾아 개선하는 과정이 필요하다. - 이번 작업에서는 문서 렌더러 구조를 재설계하고 WebAssembly 관련 문제를 해결해 큰 폭의 성능 향상을 얻었다. ## WebAssembly와 렌더러 최적화로 파일 로딩 개선 - 대규모 조직에서는 여러 겹으로 중첩된 컴포넌트와 다양한 상태를 하나의 복잡한 문서에 담는다. - Microsoft Fluent Design 팀은 Windows 기본 컨트롤의 모든 상태와 조합을 하나의 Figma 파일에 구성해 로딩 성능의 한계를 시험했다. - 실제 대형 문서의 로딩 시간이 **29초에서 8초 이하**로 감소했다. - WebAssembly 최적화와 여러 렌더링 관련 변경 사항이 약 두 달 동안 적용됐다. - WebAssembly는 macOS·Windows의 데스크톱 앱과 Chrome, Firefox, Safari 등 주요 환경에 활성화됐다. - 결과적으로 복잡한 파일의 로딩뿐 아니라 전반적인 문서 처리 성능도 향상됐다. ## 줌과 드래그의 연속적인 상호작용 - 파일을 연 뒤에도 줌인·줌아웃과 레이어 드래그처럼 반복적으로 수행하는 작업의 반응성이 중요하다. - Figma는 화면이 순간적으로 멈추는 ‘hitch’를 줄이는 데 집중했다. - 줌 성능과 드래그 성능이 모두 최대 **3배** 개선됐다. - 이미지가 많이 포함된 복잡한 파일을 사용하는 N3TWORK는 새 렌더러 적용 후 컴포넌트 게시와 파일 로딩 속도의 변화를 즉시 체감했다. - 이 사례는 일반적인 벤치마크뿐 아니라 특정 사용자의 실제 문서와 작업 방식에 맞춘 최적화도 큰 효과를 낼 수 있음을 보여준다. ## 평균 프레임 시간과 최대 프레임 시간을 함께 측정하는 이유 - 연속적인 조작에서는 작업이 끝나는 총 시간보다 조작 중 화면이 얼마나 부드럽게 갱신되는지가 중요하다. - 같은 500ms가 걸리는 작업이라도 매 순간 화면을 보여주는 경우와 끝날 때까지 아무 피드백이 없는 경우의 체감 품질은 크게 다르다. - Figma는 직접 조작감을 중시하기 때문에 다음 두 지표를 함께 추적한다. - **평균 프레임 시간**: 전반적인 화면 갱신 속도와 부드러움을 나타낸다. - **최대 프레임 시간**: 특정 순간에 발생하는 긴 지연과 끊김을 나타낸다. - 최대 프레임 시간이 커지면 드래그 중 갑자기 멈추는 듯한 ‘걸림’이 발생한다. - 평균 프레임 시간이 커지면 화면 전체가 낮은 프레임 레이트로 동작해 지속적으로 버벅거린다. - 예를 들어 평균 프레임 레이트가 같아도 일부 프레임만 200ms 또는 367ms 지연되면 움직임이 불규칙하게 끊긴다. - 반대로 최대 지연 시간이 같더라도 긴 프레임 지연이 자주 발생하면 전체 화면이 더 심하게 끊겨 보인다. - 이상적으로는 항상 60fps 이상을 유지해야 하지만, 현실적인 개선 과정에서는 두 지표를 시간에 따라 추적하는 것이 유용하다. ## 실제 사용자 문서를 기준으로 한 성능 개선 - Figma는 인위적인 테스트 파일만이 아니라 사용자가 공유한 실제 문서를 분석해 최적화 대상을 찾았다. - 문서의 컴포넌트 중첩 수준, 비트맵 이미지 수, 디자인 시스템의 복잡도 등 현실적인 조건을 반영했다. - 사용자와 직접 문제를 진단하고 새 렌더러를 적용해 즉각적인 성능 변화를 확인하는 방식도 활용했다. - 이는 성능 최적화가 단일 벤치마크 수치를 높이는 작업이 아니라, 실제 작업 흐름에서 지연과 불연속적인 피드백을 제거하는 과정임을 보여준다. 복잡한 디자인 문서를 주로 다룬다면 파일 크기 자체보다 컴포넌트 중첩, 이미지 밀도, 렌더링 구조가 성능에 미치는 영향을 살펴보는 것이 중요하다. 성능을 평가할 때도 평균 속도만 보지 말고, 순간적인 프레임 지연과 사용자 조작 중 발생하는 끊김을 함께 측정해야 한다.
원문 읽기(새 탭에서 열림)