코드로 만드는 제품 광고 영상

비디오 편집기 없이 15~20초 분량의 제품 광고를 제작하는 파이프라인입니다. 모든 프레임, 사운드, 음성 대사가 스크립트로 생성되므로 전체 결과물을 재현하고 텍스트로 편집할 수 있습니다.

프로젝트 사실 ─► 브리프 + 스토리보드 ─► 시각 자료 ─────────────► Remotion 렌더 ─► MP4
                                           ├ 2D: React (Remotion)       ▲
                                           └ 3D: Blender (headless) ─► JPG 프레임
                                           사운드: scripts/score.py ─► WAV ┘
                                           음성: scripts/kokoro_tts.py ─┘

작동 예시 (GhostCommits, 실제 파일): examples/ghostcommits/.

1단계 — 제품 이해, 브리프 작성

README, 랜딩 페이지, 코드를 읽으세요. 다음을 추출합니다: 한 줄짜리 피치(pitch), 3~4개의 구체적인 증거 포인트 (형용사보다 숫자: "파일 1개", "로그인 0회"), CSS에서 브랜드 색상, 로고 SVG, URL. 주장해서는 안 되는 사항을 기록하세요 (예: "테스트넷 전용", "익명 아님", 사용자 수 없음). 화면에 표시되는 모든 텍스트와 음성 대사는 이 목록과 대조하여 검증됩니다. 브랜드에서 이미 팔레트/스타일을 정의하지 않은 경우에만 사용자에게 선택을 요청하세요.

2단계 — 스토리보드 (제작 전 .md 파일로 작성)

18초, 30fps = 540프레임. 5~~6개의 쇼트, 각 약 2.5초 (75프레임 = 96 BPM에서 한 마디, 따라서 컷이 비트에 맞춰짐). 각 쇼트: 프레임, 카메라/모션, 화면 텍스트, 사운드. 3~~4초짜리 엔드 카드로 종료 (이름, 태그라인, URL). 템플릿: references/storyboard.md.

3a단계 — 2D 스타일 (Remotion)

움직이는 타이포그래피 + 평면 도형, "Spotify Wrapped" 느낌. references/remotion-2d.md 참고. npx create-video@latest --yes --blank --no-tailwind video 명령어로 시작한 다음, 광고당 하나의 컴포넌트를 만들고 useCurrentFrame() + interpolate와 이징(easing)만으로 구동합니다. CSS 전환은 사용하지 않습니다.

3b단계 — 3D 스타일 (Blender, headless)

검은 공간 속 광택 있는 히어로 오브젝트, 매크로 클로즈업, 표면을 가로지르는 빛의 줄무늬, 하드 컷(hard cuts), 큰 숫자와 작은 캡션을 좌측 하단에 배치. references/blender-3d.md 참고. 하나의 Python 스크립트가 씬을 구성하고, 모든 쇼트의 키프레임을 설정하며 프레임을 렌더링합니다: blender -b --factory-startup -P scene.py -- anim ../public/frames. Remotion이 프레임 위에 텍스트를 오버레이합니다 (examples/ghostcommits/GhostAdV2.tsx). 전체 애니메이션 전에 스틸 컷 2~3장을 먼저 렌더링하여 확인하세요.

4단계 — 사운드 (scripts/score.py)

JSON 큐 시트(Cue Sheet)를 작성합니다: 애니메이션 코드에서 가져온 프레임 번호를 키로 사용하여 시각적 이벤트별로 하나씩 항목을 만듭니다 (컷 → cut_hit, 오브젝트 날아옴 → whoosh, 착지 → click/lock, 빛 줄무늬 → glint, 엔드 카드 → impact, 빌드업 → riser). 그런 다음 python scripts/score.py cues.json을 실행합니다. 이 스크립트는 모든 것을 합성하고 (샘플, 라이선스 불필요), break_frame에서 드롭되고 end_frame에서 해소되는 96 BPM 배경 음악을 추가하며, 초당 음량(loudness)을 출력하여 듣지 않고도 수치적으로 확인할 수 있게 합니다. 세부 사항 및 게인(gain) 가이드: references/sound.md.

5단계 — 음성 해설 (선택 사항)

짧은 대사, ≤ 6단어, 쇼트당 하나씩, 화면 텍스트와 일치시킵니다. 최고의 무료 옵션: python scripts/kokoro_tts.py lines.txt vo/ (호스팅된 Kokoro, 비교용 3개 음성). 파일을 큐 시트의 voiceover 리스트에 추가하고 시작 시간을 해당 쇼트의 텍스트가 나타나는 시간으로 설정합니다; score.py는 무음을 자르고 음성 아래의 음악을 덕킹(ducking)합니다. 각 대사의 길이를 측정하고 다음 대사가 시작되기 전에 끝나는지 확인하세요. 옵션 및 교훈: references/voiceover.md.

6단계 — 렌더링 및 전달

컴포지션(Composition)에 <Html5Audio src={staticFile("audio/soundtrack.wav")} />를 추가한 다음, npx remotion render <CompositionId> out/ad.mp4를 실행합니다. MP4를 사용자에게 보냅니다. 오디오를 들을 수 없다고 명확히 말합니다: 레벨과 타이밍은 청취가 아닌 수치적으로 확인되었습니다.

중요한 규칙

정직한 카피: 제품이 뒷받침할 수 없는 주장은 금지; 주의 사항(베타, 테스트넷)을 화면에 유지.
특정 브랜드의 광고를 재현하지 말 것 (로고, 음악, 캐릭터) — 스타일만 차용.
텍스트: 1080p 기준 48px 이상, 화면 표시 시간 1.2초 이상, 좌측 하단 또는 중앙 정렬, 히어로 얼굴 위에 절대 배치 금지.
전체 렌더 전에 스틸 컷을 렌더링; 모든 쇼트에서 한 프레임씩 확인.
생성된 프레임/오디오는 git에 포함 금지 (.gitignore); 스크립트 + 스토리보드는 커밋.

제품 광고 영상