Product Motion Ad (Remotion + ElevenLabs)

최종 결과: MP4 1920×1080 30fps, 30~45초, 강력한 훅, 타겟 언어의 인간적인 VO, 전문적인 SFX, 참고 영상 스타일의 빠른 전환, 그리고 실제 제품 사용 흐름을 따르는 구성. SendUserFile로 사용자에게 전송합니다.

검증된 템플릿은 template/ 폴더(이 스킬의 폴더)에 있습니다. 실제 프로젝트의 13개 장면 전체 예제는 references/example-scenes-threads-automation.tsx.txt와 references/example-promo-threads-automation.tsx.txt에 있습니다. 대본을 작성하기 전에 references/script-and-storyboard.md를, 오디오를 만들기 전에 references/elevenlabs.md를 읽으세요.

절대 위반하지 말아야 할 원칙

첫 8초 안에 제품이 명확히 드러나야 함: 제품 이름 + "누구를 위해 무엇을 하는가".
장면 순서 = 제품 사용 흐름 순서 (등록/로그인 → 설정 → 핵심 프로세스 → 결과 → 고급 기능 → 결과 증명 → CTA). 순서를 섞지 마세요.
한 문장의 VO = 한 장면 = 하나의 장점 + 시각적 증거(움직이는 UI: 폼이 채워지고, 버튼이 클릭되고, 결과 카드가 나타나고, 숫자가 올라감). 텍스트만 보여주지 마세요.
제품 출처의 사실, 지어낸 내용 금지: 코드/랜딩 페이지/온보딩/"작동 방식" 페이지를 읽으세요. 예시 수치(조회수, 점수)는 그림일 뿐이며, 사용자에게 그림임을 알리세요.
참고 영상처럼 빠른 템포: 전환 10프레임(T = 10), 장면 내 애니메이션은 speed 1.5~3으로 가속. 느린 VO에 맞추기 위해 장면을 늘리지 마세요. VO를 개선하세요.
인간적인 VO: 한 번에 녹음, 대화체, 빠른 템포, 각 줄에 감정 태그 없음. 문장별로 분리된 클립이 아님 (그것이 어색함을 만듦).
성능 규칙 준수: 시작과 끝에서 한 번만 측정, 이유 없이 반복 렌더링 금지.

작업 흐름

1. 자료 수집 (가능하면 병렬로)

제품: 저장소 내에서 랜딩 페이지 텍스트, 온보딩, 작동 방식/기능 페이지, UI 기능 이름(Grep으로 UI 문자열 검색)을 찾습니다. 저장소 외부: 설명/URL을 요청합니다. 흐름-장점 표를 작성하세요: 단계 | 사용자 행동 | 장점 | 시각적 증거 (표시되는 UI).
브랜드: CSS(globals.css, Tailwind 테마, 랜딩 CSS)에서 색상과 폰트를, public/에서 로고를 찾습니다. template/src/theme.ts (C, GRADIENT, 폰트, BRAND)를 채웁니다.
스타일 참고 영상 (영상이 있는 경우): Remotion 내장 ffmpeg로 프레임을 추출한 후 연속 썸네일을 확인합니다: npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png (참고: Remotion ffmpeg에는 fps=/tile 필터가 없으므로 -r과 scripts/contact-sheet.cjs를 사용하세요). 기록할 사항: 배경(흐린 블롭/점 격자), 텍스트 등장 방식, 하드 컷, 3D UI, 커서 클릭, 글로우, 리듬.

2. 대본 & 스토리보드

references/script-and-storyboard.md를 따르세요: 호기심을 유발하는 3단계 훅, 장면당 한 줄(10단어 이하), 대화체, 첫 문장은 시작 단어("자,")로 시작하여 0초에 키워드가 잘못 발음되지 않도록 함, 짧은 CTA. 사용자 브리핑이 모호한 경우에만 대본 + 간단한 장면 순서를 사용자에게 보여주고, 그 외에는 바로 작업합니다.

3. Remotion 프로젝트

template/를 사용자 저장소의 새 폴더(예: promo-video/)로 복사하고 npm install을 실행합니다.
다른 Next.js/TS 저장소 내부인 경우: 해당 폴더를 루트 tsconfig.json의 exclude와 ESLint의 globalIgnores에 추가합니다. 폴더에는 이미 .gitignore(node_modules, out)가 있습니다.
로고를 promo-video/public/에 복사하고 BRAND.logo를 설정합니다.
제품별 장면을 src/scenes.tsx에 작성합니다(예제의 패턴 사용: useFrame(), useRise/rise, glass/white, StepTag, Words, typed+Caret, Cursor, BlurFilter). 제네릭 makeFeature 장면은 프로토타입용입니다.
src/Promo.tsx의 DEFS를 채웁니다: 장면 순서, cue(VO 문장의 시작 구절), beats(훅), speed, 전환, dark, sfx.

4. ElevenLabs 오디오 (`references/elevenlabs.md` 참고)

VO 한 번 녹음 → public/vo/full.mp3; 단어별 Scribe 전사 → public/vo/words.json. 전사를 확인하세요 (잘못 발음된 단어? 누락된 줄?).
SFX 팩 10개 파일 → public/sfx/*.mp3.
타임라인 자동 생성: 장면은 해당 cue 구절이 발화되기 6프레임 전에 시작하며, SFX는 장면 설계 시간에 배치됩니다(speed로 나누기).

5. 렌더링 및 검증

npm run typecheck 후 npm run render 실행 (포트 3456 사용 — 포트 3000은 Next 개발 서버에서 자주 사용되며 렌더링이 "not a valid Remotion project" 오류로 실패합니다).
2분 이상 걸리면 백그라운드에서 렌더링을 실행합니다.
시각 확인: node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chk 후 시트를 읽습니다. 특정 초를 확인하려면 초 목록을 제공합니다. (ffmpeg -r 샘플은 가끔 빈 초기 프레임을 보여주므로, 의심스러우면 특정 초를 확인하세요.)
확인할 사항: 텍스트가 지속적으로 흐리지 않은지, 잘리거나 줄바꿈되지 않았는지, 단계 레이블이 패널에 가려지지 않았는지, 주요 애니메이션이 장면 전환 전에 완료되었는지, 화면 텍스트가 VO 단어와 일치하는지.
SendUserFile로 전송하고(표시 render), 지속 시간, 크기, 확인되지 않은 사항(예: 오디오 레벨을 직접 듣지 않음)을 보고합니다.

이미 발생한 함정 (피하세요)

문제	원인	해결책
훅 텍스트가 계속 흐림	이전 단계의 블러 값(`out1`)이 1로 남아 있음	단계별 블러 계산: 들어오기/나가기만
영상이 느려짐	느린 VO에 맞춰 장면이 늘어남	VO를 더 빠르게, 대본을 더 짧게; `speed` 유지
VO가 어색함	문장별 클립 + 각 줄에 `[excited]` 태그 + 격식체	한 번 녹음, 대화체, 반복 태그 없음
첫 단어 잘못 발음("계정"→"게정")	v3가 첫 단어에서 자주 실수	"자," / "음,"으로 시작하고 Scribe 전사 확인
"getStaticCompositions undefined" 렌더링 실패	포트 3000이 Next dev에서 사용 중	`--port=3456` 사용
`fps=`/`tile` 오류	Remotion ffmpeg가 제한적임	`-r` + `contact-sheet.cjs`(sharp) 사용
문장이 2줄로 줄바꿈되고 아바타 잘림	flex 아이템이 축소됨	`flexWrap: "nowrap"`, 폰트 크기 축소
패널이 단계 레이블을 가림	카메라 translateY가 너무 큼	카메라 이동 제한, `scale(0.92)` 적용
칩/카드 충돌	극좌표 위치가 너무 가까움	연속 썸네일 확인, 각도/반지름 조정
`url(#id)`에서 `useId()` 손상	id에 `:` 포함	`useFilterId()`(살균) 사용
로그인 후 ElevenLabs MCP가 로드되지 않음	새 세션에서 새 도구가 나타남	도구가 있으면 직접 사용; 없으면 `claude -p` 헤드리스 (참고 참조)
"Protected resource ... does not match" MCP 실패	호스트 리전	`claude mcp add -s user --transport http elevenlabs https://api.us.elevenlabs.io/v1/mcp` 실행

product-motion-ad