버전 컨트롤: Figma Make로 지역 (새 탭에서 열림)
Figma는 사내 해커톤인 'Figma Make'를 통해 프로토타입 내 비디오 재생 기능을 구현하는 과정에서 겪은 기술적 난제들을 해결했습니다. 특히 웹 어셈블리(Wasm) 기반의 자체 렌더링 엔진과 브라우저의 네이티브 비디오 API 간의 간극을 좁히는 것이 핵심 과제였습니다. 결과적으로 이 과정을 통해 고성능 비디오 렌더링을 유지하면서도 협업 환경에 최적화된 재생 시스템을 구축할 수 있었습니다. ### 브라우저 네이티브 API와 WASM 엔진의 통합 * Figma의 렌더링 엔진은 C++로 작성되어 웹 어셈블리(Wasm) 환경에서 구동되지만, 비디오 디코딩은 브라우저의 네이티브 비디오 엘리먼트에 의존해야 하는 구조적 한계가 있었습니다. * 단순히 HTML 비디오 태그를 캔버스 위에 띄우는 방식은 Figma의 복잡한 레이어 구조와 효과(블렌딩 모드, 마스크 등)를 지원하기 어려웠습니다. * 이를 해결하기 위해 브라우저에서 디코딩된 비디오 프레임을 매 프레임마다 추출하여 Figma 엔진의 GPU 텍스처로 업로드하는 방식을 채택했습니다. ### Figma Make를 통한 기술적 가설 검증 * 'Figma Make'라는 24시간 해커톤 형식을 빌려, 기존 코드 베이스의 제약에서 벗어나 비디오 기능의 기술적 실현 가능성을 빠르게 테스트했습니다. * 비디오를 일반적인 '이미지 채우기(Image Fill)'의 확장판으로 간주하고, 비디오의 각 프레임을 실시간으로 갱신되는 텍스처로 처리하는 프로토타입을 제작했습니다. * 이 단기 집중 과정을 통해 비디오가 단순한 미디어가 아닌, 프로토타입 내의 동적인 속성으로서 어떻게 동작해야 하는지에 대한 설계 방향을 확립했습니다. ### 프레임 동기화 및 성능 최적화 * 비디오 프레임과 Figma 렌더링 루프의 주사율이 일치하지 않을 때 발생하는 저더(Judder) 현상을 방지하기 위해 `requestVideoFrameCallback` API를 활용했습니다. * 이를 통해 새로운 비디오 프레임이 준비된 시점에만 정확히 GPU로 텍스처를 전송하여 불필요한 리소스 소모를 줄이고 재생 부드러움을 극대화했습니다. * 다수의 비디오가 동시에 재생되는 환경에서도 메모리 점유율을 제어하기 위해 뷰포트에 보이는 비디오만 활성화하는 가시성 기반 최적화 전략을 도입했습니다. ### 협업을 고려한 비디오 상태 관리 * 여러 사용자가 동시에 프로토타입을 볼 때 비디오 재생 시점(Current Time)을 동기화하는 것이 중요했습니다. * 재생, 일시정지, 탐색(Seeking)과 같은 제어 명령을 멀티플레이어 서버를 통해 전파하여 모든 관찰자가 동일한 화면을 볼 수 있도록 구현했습니다. * 대용량 비디오 파일의 로딩 속도를 개선하기 위해 비디오 스트리밍 최적화와 점진적 로딩 방식을 적용하여 사용자 경험을 개선했습니다. 복잡한 기술적 문제를 해결할 때 Figma Make와 같은 사내 해커톤은 기존 시스템의 제약 없이 혁신적인 아키텍처를 실험할 수 있는 훌륭한 창구가 됩니다. 특히 비디오와 같이 렌더링 엔진 깊숙이 관여해야 하는 기능은 초기 단계에서 성능 한계치를 명확히 파악하고, 이를 바탕으로 점진적인 최적화를 진행하는 접근 방식이 유효합니다.