launch-video
코드로 제품 런칭 비디오를 생성합니다 (Remotion → MP4). 이 스킬은 장면 라이브러리 + 워크플로우이지, 고정된 템플릿이 아닙니다. 제품마다 다른 이야기를 전달합니다 — CLI 도구의 이야기는 터미널에서, SaaS 앱의 이야기는 브라우저에서, 모바일 앱의 이야기는 휴대폰에서, 라이브러리의 이야기는 에디터에서 펼쳐집니다. 이 제품에 맞는 아크를 먼저 설계한 다음, 장면 팔레트에서 조립하세요. 제품을 examples/tdoc 예제의 모양에 억지로 맞추지 마십시오.
절대 규칙
코드를 작성하기 전에 스토리 아크를 설계하세요. 질문: 이 제품은 무엇을 하는가, 사용자는 누구인가, 단 하나의 "아하" 순간은 무엇인가? 비트 리스트를 작성하세요 (5–9개 비트, 각각 24fps 기준 프레임 지속 시간) 그리고 사용자와 확인하세요. 그런 다음에만 장면을 조립하세요. 런칭 비디오는 스토리이지, 기능 투어가 아닙니다.
워크플로우
- 제품 이해. 무엇인가? 사용자는 어디에서 상호작용하는가 (터미널 / 브라우저 / 휴대폰 / 에디터 / 혼합)? 이전 → 이후는 무엇인가? 누군가가 원하게 만드는 단 한 순간은 무엇인가?
- 비트 리스트 작성. 각 비트: 이름, 화면에 표시될 내용, 프레임 단위 지속 시간. 총 ≈ 30–45초 (720–1080 프레임). AskUserQuestion을 통해 사용자와 확인하세요.
- 팔레트에서 장면 선택 (아래). 대부분의 비디오는 1–3가지 장면 유형 + 선택적 아웃트로를 사용합니다. 모든 유형이 필요한 것은 아닙니다.
- 에셋 수집. 실제 스크린샷 > 모형.
<project>/public/디렉토리에 저장하세요. 스크린샷이 저해상도이거나 1:1로 애니메이션이 필요할 때만 UI를 깔끔한 컴포넌트로 재현하세요. - 프로젝트 스캐폴딩 (저장소 아래
examples/tdoc를 시작 스켈레톤으로 복사 — 내용이 아닌 구조) 또는 형제 디렉토리에 생성하세요. 비트 지속 시간의 합을 지속 시간으로 하는 단일<Composition>을 연결하고, 각 비트마다 하나의<Sequence>를 추가하세요. - 비트 구축, 이어 SFX 추가 (
scripts/make-sfx.sh <public>), 렌더링, 그런 다음 변경된 각 비트를 시각적으로 확인하고 반복하세요. - 확인 루프 통과 후에만 MP4를 전달하세요.
장면 팔레트 (src/)
라이브러리에서 임포트하고, 스토리에 필요한 것만 조립하세요.
| 장면 | 용도 | 주요 속성 |
|---|---|---|
Terminal | CLI 도구, 에이전트, 개발 도구 — 셸 안의 스토리 | lines (입력된 프롬프트, 도구 호출, 결과, 경고, url), spinner, title. 입력된 프롬프트의 선두 /슬래시-명령어는 자동으로 굵은 악센트로 강조 표시됩니다. |
BrowserWindow | 웹 앱, 문서, 대시보드, SaaS | 스크린샷/HTML을 children으로, `chrome="bar" |
MobileFrame | 모바일 앱 | 휴대폰 셸; 스크린샷/UI를 children으로 |
CodeEditor | 라이브러리, SDK — "이것을 작성 → 저것을 얻음" | code 라인, 입력식 공개 |
Outro / LogoCard | 마무리 (선택 사항) | 헤드라인/서브헤드, 또는 회전 로고 + 워드마크 |
WaveBackground | 모든 창 뒤의 차분한 브랜드 배경 | 색상 |
Cursor | 아티팩트/링크/버튼 클릭 | from/to 좌표, clickAt |
PixelPet | 창 위의 친근한 마스코트 | crown/base 픽셀 행, color; 눈이 위아래로 움직임 (눈 흰자 없음 — 작은 크기에서 깔끔하게 읽힘) |
Caption | 창 아래 한 줄 캡션 | at, text |
이들은 독립적입니다. 라이브러리 런칭은 CodeEditor + Terminal + LogoCard만으로 충분할 수 있습니다. SaaS 런칭은 BrowserWindow + Outro일 수 있습니다.
페이싱 및 전환 규칙 (어렵게 배운 교훈)
- @24fps. 비트 지속 시간은 프레임 단위입니다. 전체를 빡빡하게 유지하세요: 정적 홀드를 줄이고, 액션은 유지하세요. 비트가 대부분 정지된 프레임이라면, 그것을 줄이세요.
- 날카로운 전환. 장면 간 크로스 디졸브 ≤ 5 프레임; 비트 페이드 인 ≈ 4 프레임. 창이 "스냅"하며 열리는 애니메이션 (스케일 0.35→1, 약 12 프레임)은 느린 30+ 프레임 스케일보다 더 잘 읽힙니다.
- 가능한 한 하나의 연속 비트. "입력 → 클릭 → 결과"를 하나의 Sequence로 병합하여 중간에 깜빡임이나 컷이 없도록 하세요.
- 커서는 이동하고 누르는 것. 순간이동하지 말고; 대상으로 애니메이션하고, 클릭 시 스케일 다운하세요. 모든 클릭에는 누름 프레임에 클릭 SFX가 있어야 합니다.
- 이중 크롬 금지. 스크린샷에 이미 헤더가 있으면
chrome="none"을 사용하세요. 미리 포함된 창 막대 위에 또 다른 창 막대를 쌓지 마세요. - 브랜드 카드 서문/맺음말. 하나의 브랜드 카드 (로고/마스코트 + 제품명 + 한 줄 가치 제안)을 시작 프레임과 끝 프레임 모두에 재사용하세요 (각각 약 1.5–2.5초). 이는 스토리를 감싸주며, 별도의 애니메이션 로고 엔드 카드보다 저렴합니다. 모든 비트 오프셋을
at()누산기로 구동하여 시작 카드를 추가하면 자동으로 모든 것 (SFX 포함)이 아래로 이동합니다.
오디오 규칙
scripts/make-sfx.sh <project>/public을 실행하여sfx-typing.mp3+sfx-click.mp3을 합성하세요. 이것들은 git 무시 생성 아티팩트입니다 — 항상 (재)생성하세요; 새 클론 후에 존재한다고 가정하지 마십시오.- 타이핑 SFX는 사람이 타이핑하는 동안에만 재생됩니다 (프롬프트, 주석). 자동 스트리밍/에이전트 출력 위에서는 절대 재생되지 않습니다.
- 클릭 SFX는 각 커서 클릭의 누름 프레임에 발생합니다 (링크, 버튼, 아티팩트).
<Sequence from>을 클릭 프레임과 일치시키세요. - 정확한 프레임 윈도우로 범위가 지정된 짧은
<Sequence>내부에<Audio src={staticFile(...)} volume={0.3}>로 오디오를 레이어하세요.
확인 루프 (전달 전 필수)
PNG를 읽는 이미지 프록시는 OCR 노이즈가 있습니다 — 정렬/색상 확인은 텍스트 설명이 아닌 픽셀 측정 (Python/PIL/numpy)을 신뢰하세요.
scripts/verify.sh <entry> <CompId> <public-dir> <frame> ...는 스틸을 캡처하고 오디오 윈도우를 출력합니다. 프로젝트의public/을<public-dir>로 전달하세요 (또는 없으면-) —--public-dir규칙은 렌더와 동일합니다; 그렇지 않으면 스틸의 에셋이 404가 됩니다.- 각 스틸을 읽으세요. 변경된 모든 비트에 대해 다음을 확인하세요: 내용이 올바른지,
overflow:hidden으로 잘리지 않았는지, 전환이 제대로 적용되었는지, 커서가 대상에 있는지, SFX 윈도우가 보이는 클릭/타이핑 프레임과 일치하는지. - 수정 → 재렌더링 → 재확인. 의도에서 "완료"를 보고하지 말고; 실제 프레임을 확인하세요.
렌더링
npx remotion render <entry> <CompId> out/<name>.mp4 \
--public-dir=<project>/public
# 스틸: npx remotion still <entry> <CompId> out/x.png --frame=N \
# --public-dir=<project>/public
<entry>는 프로젝트의 src/index.ts입니다 (registerRoot 호출). 항상 --public-dir을 전달하세요 — 엔트리가 서브디렉토리에 있을 때; 그렇지 않으면 staticFile()이 저장소 루트 public/을 기준으로 해석되어 에셋이 404가 됩니다.
참고 예제
examples/tdoc/는 표준 작업 예제입니다 (약 39초): 브랜드 카드 인트로, 엔지니어가 에이전트에게 /tdoc … 프롬프트를 입력하고 (Terminal, 슬래시 명령어 자동 강조 표시), 링크를 받고, 문서가 열리고 (BrowserWindow), 팀원이 댓글을 달고, 에이전트가 v2를 배포한 다음, 동일한 브랜드 카드로 마무리됩니다 — 실제 타이핑 및 클릭 SFX가 적용되고 눈이 움직이는 PixelPet가 포함되어 있습니다. 라이브러리 사용법을 보려면 읽어보세요; 스토리를 복제하지 마세요. 새 제품의 고유한 아크를 구축하세요.