커피, Claude, 그리고 Remotion만 있으면 런칭 영상 제작은 끝
Coffee, Claude, and Remotion is all you need to make launch videos.
핵심 요약
Claude Code와 Remotion을 활용해 디자인 툴 없이도 고퀄리티 런칭 영상을 제작하는 방법 공유.
- Remotion 활용 — React로 비디오를 코딩하여 영상 제작 효율 극대화.
- Claude Code 연동 — 영상의 애니메이션과 타이밍을 코드로 제어하여 반복 작업 수행.
- 영상 제작 팁 — 크로스페이드, 이징 커브, 사운드 레이어링 등 디테일로 완성도 향상.
- 비용 절감 — 유료 툴 없이 무료 티어와 오픈 소스 라이브러리만으로 제작.
몇 시간, Claude Code + Remotion, 블랙커피 4잔, 디자인 툴 없음, After Effects 없음, 편집자 없음.
핵심 비결: Remotion은 비디오를 위한 React임. JSX를 작성하면 mp4가 나옴. 모든 애니메이션은 interpolate(frame, [start, end], [from, to])임. 즉, Claude Code가 영상 전체를 대신 작성해 줄 수 있음 — 이미 React를 알고 있고, 애니메이션은 그냥 숫자일 뿐이니까. 랜딩 페이지 수정하듯이 똑같이 반복 작업하면 됨. 값을 바꾸고, 다시 렌더링하고, 결과를 확인하는 것. 이 피드백 루프가 핵심임.
원하는 장면을 설명하면 Claude가 작성해 줬고, 나는 타이밍을 조정하고 느린 부분은 잘라냈음.
개발자가 만든 것처럼 보이지 않게 만드는 5가지 작은 팁:
- 모든 컷에 크로스페이드 적용. 장면 전환을 딱딱 끊지 마셈. 겹치게 하고 블러 페이드를 넣으셈. 슬라이드쇼 같은 느낌이 바로 사라짐.
- 모든 곳에 동일한 이징 커브 적용. 모든 애니메이션에
cubic-bezier(0.22, 1, 0.36, 1)(expo-out)을 쓰셈. 움직임의 일관성이 "디자인된 느낌"의 80%를 차지함. - 필름 그레인 + 비네트 오버레이. 모든 것 위에 두 개의 단순한 컴포넌트를 올리셈 — 2% 불투명도의 SVG 노이즈, 부드러운 어두운 비네트. 세상에서 가장 저렴한 영화 같은 업그레이드임.
- 오디오 레이어링, 단일 트랙 아님. 배경 음악은 낮게 깔고, 타겟팅된 SFX를 넣으셈 - 챕터 전환 시 '슈욱' 소리, 훅 부분에 타이핑 소리, CTA에 '팝' 소리. SFX 과용은 아마추어라는 가장 큰 증거임.
- 무자비하게 잘라내기. 3초 안에 제값을 못 하는 장면은 죽이셈. 첫 번째 컷은 항상 너무 김.
스택: Remotion, React, TypeScript, Claude Code, Google Fonts (DM Sans + Crimson Pro), freesound.org에서 가져온 몇 가지 SFX, 로열티 프리 배경 음악 한 곡. 툴 비용 $0.
보너스 메타 정보: 이 영상은 내 제품의 화면 녹화가 아님. 내 제품의 실제 영상 출력물(Cultured AF 데크 영상)을 포함하는 Remotion으로 만든 런칭 영상임. 그래서 InkMotion을 사용해 런칭 영상 안에 데모 영상을 만들었음. 그냥 처음부터 InkMotion으로 런칭 영상 전체를 만들어서 커피 4잔 값 아낄 걸 그랬음. 다음엔 그렇게 해야지.
댓글로 구체적인 질문 환영함.
