React 기반 Programmatic Video Engine으로 데모 영상 제작 공정 자동화

Context

전통적인 화면 녹화 방식은 UI 변경 시마다 전체 재촬영 및 편집이 필요한 정적 아티팩트 생성의 한계 보유. 고비용의 모션 디자인 외주 방식 또한 신속한 제품 업데이트 주기를 반영하지 못하는 유지보수 병목 발생.

Technical Solution

• Remotion 기반의 React 구성을 통한 Intent 중심의 영상 렌더링 체계 구축
• Prop-driven Choreography 설계를 통해 코드 수정 없이 레이아웃 및 애니메이션 제어 가능 구조 구현
• DOM ID 기반의 Geometry-aware Cursor 시스템으로 UI 요소와 커서 움직임의 정밀한 동기화 달성
• 절대 프레임 번호 대신 Scene Name 기반의 상대적 타이밍 참조 방식을 적용하여 씬 변경 시의 정합성 유지
• JSON Descriptor 포맷 및 Figma API 연동을 통한 디자인-코드 간의 자동 UI 생성 파이프라인 구축
• Engine(모션), Primitives(컴포넌트), Editor(제어층)를 분리하여 렌더링 성능 최적화 및 편집 효율 증대