코드로만 제작한 비디오의 제작 과정

요약

이 비디오는 Figma 디자인을 Claude Code와 스크립트를 이용해 SVG로 변환하고, Remotion과 React를 활용하여 코드로만 제작된 사례입니다. 드로잉 애니메이션, CSS 3D 카메라 워크 등 복잡한 시각 효과가 구현되었으며, Python/NumPy를 사용해 영상 타이밍에 기반한 사운드까지 생성했습니다.

핵심 포인트

• Figma 디자인을 Claude Code와 스크립트로 SVG로 변환하여 애니메이션화 가능.
• Remotion과 React 조합으로 복잡한 드로잉 및 레이어별 개별 애니메이션 구현.
• CSS 3D를 활용해 낮은 각도의 사선 카메라 워크와 얕은 심도 효과 적용.
• Python과 NumPy를 이용해 영상 이벤트 타이밍에 맞춰 사운드를 생성함.