Launch Video (런칭 비디오)
스크롤을 멈추고 전환을 유도하는 프리미엄 고에너지 15~60초 런칭 필름을 제작합니다. 클래식 아크 — 훅 → 티즈 → 리빌 → 피처 몽타주 → 엔드카드 CTA — 를 음악에 맞춰 컷팅하고 모든 플랫폼 화면비로 내보냅니다.
사용 시기
- 제품 드롭, 기능 발표, 트레일러, 홍보 릴 (15~60초)
- 랜딩 페이지를 위한 "시즐" 히어로 비디오
- 비트에 동기화된 리빌로 브랜드 순간이 드롭에 맞춰지는 영상
아크
| 비트 | 역할 | 일반적인 비율 (30초 기준) |
|---|---|---|
| 훅 (0~3초) | 스크롤을 멈추는 눈에 띄는 프레임/움직임 | 0~3초 |
| 티즈 | 제품 암시; 호기심 유발, 비트 동기화 | 3~9초 |
| 리빌 | 음악 드롭에 맞춰 제품/로고 등장 | 9~13초 |
| 피처 몽타주 | 빠르고 역동적, 한 컷에 하나의 이점 | 13~25초 |
| 엔드카드 | 로고 + 태그라인 + CTA, 깔끔하게 홀드 | 25~30초 |
동일한 비율을 15초(더 타이트하게) 또는 60초(더 긴 몽타주, 절대 더 긴 훅 아님)로 확장합니다.
반드시 지켜야 할 두 가지 규칙
- 사운드 디자인이 영상을 이끈다. 트랙을 먼저 고정하고, 비트와 드롭을 마킹한 후, 그 마크에 맞춰 비주얼을 컷팅합니다. 완성된 컷에 점수를 매기지 마세요 — 리빌은 드롭에 정확히, '근처'가 아닌 '그 시점에' 이루어집니다.
- 양보다 질. 완벽한 몇 개의 샷이 수많은 평범한 샷을 이깁니다. 프리미엄이 아닌 샷은 모두 잘라냅니다.
드롭에 맞춘 비트 동기화 리빌
오디오에서 드롭의 정확한 타임코드를 찾은 후, 브랜드 마크가 해당 프레임에 완전히 나타나도록 리빌 타이밍을 조정하고, 임팩트를 위해 마이크로 오버슈트를 추가합니다.
import gsap from "gsap";
const DROP = 9.0; // 초, 트랙에서 측정
const tl = gsap.timeline({ paused: true });
// 티즈는 드롭까지 긴장감을 조성
// 드롭 프레임에서 리빌이 '딸깍' 하고 나타남
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
.set(".logo", { opacity: 1 }, DROP)
.fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
.fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // 화이트 히트
audio.addEventListener("play", () => tl.play());
고정 그리드가 아닌 트랜지언트(순간음)에 맞춰 컷팅합니다. 가장 강한 컷은 킥/스네어 히트에 맞추고, 드롭 앞에서 속도를 높인 후(타임리맵) 드롭에서 하드 컷합니다.
키네틱 피처 몽타주
한 컷에 하나의 이점, 각각 약 0.6~1.0초, 비트에 맞춰 하드 컷. 각 컷 = 대담한 키워드 + 하나의 지지하는 비주얼.
.feature { opacity:0; }
.feature.in .kw { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.feature.in .word { display:inline-block; }
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
// 트랙에서 측정된 비트 마크에 따라 샷 구동
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // 초
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));
몽타주 전체에서 하나의 모션 언어를 유지하세요(동일한 진입 곡선, 동일한 종료). 속도가 혼란이 아닌 자신감으로 읽힙니다.
엔드카드
로고 + 태그라인 + CTA를 2초 이상 깔끔하게 홀드합니다. CTA와 경쟁하는 복잡한 움직임 없음; 브랜드가 자리잡게 합니다. 가장 강력한 남은 비트에 브랜드 순간을 안착시킨 후, 깔끔한 버튼/URL을 배치합니다.
다중 화면비 내보내기
하나의 마스터가 모든 화면비로 깔끔하게 크롭될 수 있도록 중앙 안전 영역을 두고 컴포지션합니다.
| 화면비 | 용도 | 해상도 | 안전 영역 |
|---|---|---|---|
| 16:9 | YouTube, 랜딩 히어로, X | 1920×1080 | 주요 콘텐츠를 중앙 90% 이내 유지 |
| 9:16 | Reels, TikTok, Shorts, Stories | 1080×1920 | 텍스트를 중앙 80% 높이 이내; 상단 12% / 하단 18% (UI) 피함 |
| 1:1 | 피드 게시물 | 1080×1080 | 16:9 프레임의 중앙 정사각형 |
히어로/로고/CTA를 1:1 중앙 정사각형 안에 디자인하여 모든 크롭에서 살아남도록 합니다. 16:9 마스터를 렌더링한 후, 동일한 프로젝트에서 9:16과 1:1을 (레터박스가 아닌) 리프레임합니다.
출력 체크리스트
- 트랙이 먼저 고정됨; 리빌이 드롭에 정확히 맞춰짐.
- 훅이 처음 3초를 장악함.
- 몽타주: 한 컷에 하나의 이점, 비트에 맞춘 하드 컷, 일관된 모션 언어.
- 엔드카드가 2초 이상 홀드되며 하나의 명확한 CTA 포함.
- 16:9 + 9:16 + 1:1 내보내기, 주요 콘텐츠가 중앙 안전 영역에 위치.
- 프리미엄 샷만 사용 — 평범한 것은 컷에서 살아남지 못함.
전달 및 검증 (렌더링된 스틸 → MP4)
패키지된 헬퍼 (
scripts/):scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png로 스틸을 타일링한 후,scripts/probe-mp4.sh out.mp4 [WxH] [fps]로 인코딩을 확인합니다.scripts/README.md를 참조하세요.
런칭 필름이 Remotion으로 빌드/렌더링된 경우, 이를 무거운 계층으로 취급합니다: <Composition> (+ zod schema + defaultProps) 등록, 모든 값을 useCurrentFrame()으로 구동 — 렌더링 시 GSAP 타임라인 / 오디오 이벤트 콜백 / Date.now() / Math.random() 없음 (비트 및 드롭 타임코드를 props에 고정). 결과물 = 화면비별 렌더링된 out/*.mp4 (프로젝트 포함).
검증 루프 — 스틸 렌더링 → 검사 → 인코딩. 아크를 샘플링하되, 실제 출시 props(실제 헤드라인/태그라인/CTA)로, defaultProps만으로는 안 됩니다.
# 훅 → 리빌 → 엔드카드에 걸친 프레임 정확 스틸
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # 훅이 처음 3초 장악
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # 로고가 드롭 프레임에 '딸깍'하고 나타남
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # 엔드카드: 로고+태그라인+CTA, 깔끔한 홀드
# 각각 검사: 충실도(제품/로고, 태그라인, CTA 텍스트 정확, 브랜드 색상 올바름, 드롭 프레임에 리빌)
# 및 아티팩트(텍스트 오버플로우, 캔버스 밖, CTA가 9:16 하단 1/3에, 누락된 폰트, 깜빡임 프레임 멈춤)
다중 화면비 — 모든 화면비를 인코딩하기 전에 각 화면비에서 마스터를 검증합니다. 리프레임 버그(히어로가 안전 영역 밖으로 밀려남)는 모든 화면비에서 반복됩니다; 한 번 잡으세요.
for ar in 16x9 9x16 1x1; do # 화면비별 리빌 + 엔드카드 확인
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# 모든 화면비에서 스틸 깔끔? → 각각 인코딩:
for ar in 16x9 9x16 1x1; do
npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json # README 데모
마치기 전에:
npx remotion still이 훅/리빌/엔드카드에서 오류 없이 깔끔하게 렌더링됨 — 누락된 폰트/에셋 없음.- 로고/태그라인/CTA 텍스트 정확, 브랜드 색상 올바름; 리빌이 드롭 프레임에 맞춰짐; 주요 콘텐츠가 중앙 안전 영역 내부, 9:16 하단 1/3에서 명확함.
- 프레임 기반만 사용 — GSAP/오디오 콜백 타이밍,
Date.now(), 또는Math.random()없음 (비트/드롭을 props에 고정). - 출시 props가 올바르게 렌더링됨 (
defaultProps만이 아님); 엔드카드가 2초 이상 홀드되며 하나의 CTA 포함. - 인코딩 전에 16:9 + 9:16 + 1:1에서 마스터 검증됨; MP4가 재생됨; (선택 사항) README용 GIF.
참고 파일
references/launch-structure.md— 30초 필름(15~60초로 확장 가능)을 위한 샷별 타임코드 템플릿, 비트 동기화 리빌 타이밍, 키네틱 몽타주 샷 레시피, 사운드 디자인 리드 픽쳐 워크플로우, 16:9 / 9:16 / 1:1을 위한 상세 다중 화면비 안전 영역 맵을 포함합니다.