Claude Code와 Remotion을 사용해 0달러로 하룻밤 만에 런칭 영상 제작하기

스타트업 런칭 영상이 필요했다. After Effects를 쓰거나 편집자를 고용하는 대신, Claude Code가 Remotion으로 전체 영상을 작성하게 했다.

각 장면을 설명하면 Claude가 React 컴포넌트를 작성했고, 나는 타이밍을 조정하고 느린 부분은 잘라냈다. 영상 전체가 JSX다. 모든 애니메이션은 단순히 interpolate(frame, [start, end], [from, to])를 사용한다. Claude는 이미 React를 잘 알고 있어서 큰 도움 없이도 장면 구성, 전환, 오디오 타이밍을 처리했다. 피드백 루프가 빨랐다. 값을 바꾸고, 다시 렌더링하고, 결과를 확인하면 됐다.

개발자가 만든 것처럼 보이지 않게 만든 5가지 비결:

1. 모든 컷에 크로스페이드 적용. 장면 간에 딱딱 끊기는 컷은 없다. 겹치고 흐릿하게 페이드 처리하면 슬라이드쇼 같은 느낌이 즉시 사라진다.
2. 모든 곳에 동일한 이징 곡선 사용. 모든 애니메이션에 cubic-bezier(0.22, 1, 0.36, 1)를 적용했다. 움직임의 일관성이 '디자인된 느낌'의 80%를 차지한다.
3. 필름 그레인과 비네팅. 2% 불투명도의 SVG 노이즈와 위에 부드러운 어두운 비네팅을 씌웠다. 세상에서 가장 저렴한 영화 같은 연출 기법이다.
4. 레이어드 오디오. 배경 음악은 낮게 깔고, 챕터 전환과 CTA(행동 유도)에만 타겟팅된 SFX를 넣었다. SFX를 과하게 넣는 건 아마추어라는 가장 큰 증거다.
5. 가차 없이 잘라내기. 3초 안에 제값을 못 하는 장면은 과감히 삭제한다.

스택: Remotion, React, TypeScript, Claude Code, Google Fonts, SFX용 freesound.org.

이 영상에는 내 제품인 InkMotion의 실제 결과물이 포함되어 있다. 그냥 처음부터 InkMotion으로 전체를 만들 걸 그랬나 보다. 다음에는 그렇게 해야지.

Claude Code 워크플로우에 대해 궁금한 점 있으면 댓글로 물어봐 줘.