Deterministic Frame Capture를 통한 고화질 MP4 익스포트 시스템 구현

Context

Claude Design의 애니메이션이 React 기반 라이브 코드로 렌더링되어 비디오 파일로 직접 추출할 수 없는 구조적 한계 존재. 기존의 Screen Recording 방식은 GPU Compositing 및 모니터 프로파일 영향으로 인해 Color Banding과 Frame Drop이 발생하는 품질 저하 문제 직면.

Technical Solution

• Playwright와 Headless Chromium을 활용한 브라우저 제어 기반의 렌더링 파이프라인 구축
• 실시간 시간 흐름을 배제하고 Backend에서 Animation Clock을 수동으로 제어하는 Deterministic Frame Capture 방식 도입
• React Fiber Tree 분석을 통한 Stage 컴포넌트 식별 및 내부 Time Hook의 직접 호출로 60fps(16.6ms 단위) 정밀 프레임 생성
• DOM 업데이트와 Compositor Paint 시간을 보장하기 위해 두 번의 requestAnimationFrame 사이클 대기 로직 적용
• Raw Canvas 기반 애니메이션 대응을 위해 window.requestAnimationFrame을 Stub으로 교체하여 Render 함수를 직접 호출하는 폴백 전략 설계
• 캡처된 Raw PNG 시퀀스를 ffmpeg로 스트리밍하여 H.264 코덱 기반 고화질 MP4로 인코딩