프로모션 광고 동영상
일반 언어로 작성된 비즈니스 설명으로부터 바로 게시 가능한 세로형 광고 동영상을 생성합니다. 당신(Claude)은 카피라이터, 모션 디자이너, 편집자 역할을 수행합니다: 광고 대본을 작성하고, 간결한 JSON으로 변환한 후, 번들된 template/ 내 Remotion 템플릿을 사용하여 렌더링합니다.
출력: MP4 (기본 1080×1920) 및 미리보기 스틸 이미지, 코드로 제작되며 편집 소프트웨어가 필요 없습니다.
요구 사항
- Node.js 18+ 및 npm (템플릿이 첫 실행 시 Remotion을 설치합니다)
- ffmpeg는 선택 사항입니다 (사용자가 제공한 오디오 트리밍/변환에만 필요)
- 첫 번째 렌더링 시 헤드리스 Chrome(~100 MB)을 자동으로 다운로드합니다. 다운로드가 차단된 경우
REMOTION_BROWSER=/path/to/chrome을 설정하세요. - 라이선싱: Remotion은 개인, 직원 3인 이하 기업 및 비영리 단체에 무료입니다; 대규모 영리 기업은 Remotion 기업 라이선스(remotion.dev/license)가 필요합니다. 사용자가 대기업을 위해 렌더링하는 것으로 보이면 이 사실을 한 번 언급하세요. 번들된 폰트는 SIL OFL 라이선스입니다 (
template/public/fonts/OFL.txt참조).
워크플로우
다음 단계를 순서대로 따르세요. 5단계의 미리보기 확인을 건너뛰지 마세요.
1. 브리프 수집
필요한 정보: 비즈니스 이름, 판매 중인 제품, 제안/가격, 대상 고객, 구매 방법 (WhatsApp 번호, IG 핸들, 웹사이트, 위치). 있으면 좋은 정보: 브랜드 색상, 로고, 제품 사진, 실제 고객 후기, 실제 수치 (고객 수, 업력).
누락된 필수 정보는 한 번의 짧은 메시지(최대 3개 질문)로 물어보세요. 스스로 잘 선택할 수 있는 사항(색상, 장면 순서, 표현)에 대해서는 묻지 마세요. 사용자가 응답할 수 없는 경우 합리적인 선택을 하고 가정한 내용을 알려주세요.
2. 대본 작성
references/ad-scriptwriting.md를 읽고 구조를 선택하세요. 대본을 짧은 장면 목록으로 작성하여 렌더링 전에 사용자에게 몇 줄로 보여주세요. 단, 사용자가 바로 진행하도록 요청한 경우는 제외합니다. 가장 중요한 규칙:
- 처음 2초 안에 훅을 넣고, 최대 7단어로 작성하세요. 스크롤을 멈추게 해야 하며, 브랜드가 아닌 시청자에 초점을 맞추세요.
- 총 15
30초, 58개 장면. - 고객 후기, 고객 수, 평점 또는 가격을 절대 지어내지 마세요. 사용자가 제공한 사실이 있는 경우에만
testimonial및stat장면을 사용하세요. 그렇지 않으면 해당 장면을 생략하세요. - 가격, 전화번호, 핸들은 정확히 그대로 복사하세요.
3. 작업 공간 설정 (프로젝트당 한 번)
cp -r <skill-dir>/template ./promo-ads # ./promo-ads가 이미 존재하면 건너뜀
cd promo-ads && npm install
<skill-dir>은 이 SKILL.md 파일이 위치한 폴더입니다(스킬의 기본 디렉토리, 스킬 로드 시 표시됨). 플러그인 캐시 또는 ~/.claude/skills/ 내에 있을 수 있습니다; 해당 파일을 절대 편집하지 말고 항상 템플릿을 먼저 복사하세요.
사용자가 제공한 로고, 제품 사진 및 오디오는 promo-ads/public/assets/에 넣으세요. 깔끔한 배경의 정사각형 또는 4:5 비율 제품 사진이 가장 좋습니다.
4. 브리프 JSON 작성
promo-ads/briefs/<business-slug>.json을 생성하세요. 전체 필드 참조: references/brief-schema.md. template/briefs/example.json에서 시작하세요.
주요 사항:
- 색상은 6자리 16진수여야 합니다.
background, 강력한primary(버튼, 강조 마커),accent(레이블, 가격 강조, 배지), 그리고 배경과 대비가 강한text를 선택하세요. - 줄당 1~2개의 키워드를
*별표*로 감싸 강조하세요. 예:"Too tired to *cook* tonight?" - 장면 유형:
hook,problem,product,benefits,stat,price,testimonial,cta. 각각 선택적seconds를 가집니다. - 사용 가능한 아이콘: check, star, truck, clock, shield, phone, chat, globe, tag, spark, heart, location, cash, bolt, gift, x.
5. 스틸 미리보기 및 확인
scripts/render.sh briefs/<slug>.json stills
이 명령은 브리프의 유효성을 검사한 후 각 장면별 PNG 파일을 out/<slug>-frames/에 작성합니다. 모든 스틸을 열어서 확인하세요:
- 텍스트가 잘리거나 어색하게 줄 바꿈되지 않았는지 (한 단어가 혼자 줄에 있는 경우 → 텍스트를 줄이세요)
- 텍스트가 배경에서 명확하게 읽히는지
- 상단 15% 또는 하단 22% 근처에 중요한 내용이 없는지 (플랫폼 버튼이 이 영역을 덮습니다; 템플릿이 이미 콘텐츠를 안전 영역에 유지하므로, 긴 텍스트의 경우 주로 중요합니다)
- 철자, 가격, 연락처가 정확한지
브리프를 수정하고 스틸이 깔끔해질 때까지 다시 실행하세요. 이 과정은 빠르며(약 1분), 전체 렌더링은 그렇지 않습니다.
6. 동영상 렌더링
scripts/render.sh briefs/<slug>.json
out/<slug>.mp4 파일을 생성합니다 (30초 기준 약 24분). 길이가 1530초인지 확인하세요.
7. 전달
사용자에게 MP4 파일과 함께 동영상에 대한 한 줄 설명을 제공하세요. 유용한 다음 단계를 하나 제안하세요. 예:
- A/B 테스트용 2~3개의 대체 훅 (브리프를 복사하고 훅 장면만 변경)
- 다른 형식:
"format": "1:1"또는"4:5"(피드 게시물용),"16:9"(YouTube/웹사이트용) - 나레이션 버전 (
references/voiceover.md참조)
오디오
- 효과음(whoosh, pop, ding, impact)은 장면 전환 및 목록 항목에서 자동으로 재생됩니다.
"audio": {"sfx": false}로 비활성화하세요. - 로열티 프리 시작 비트가 기본으로 재생됩니다. 사용자 고유 트랙을 사용하려면
"audio": {"music": "assets/song.mp3"}로 설정하고, 음악 없이 하려면false로 설정하세요. 저작권이 있는 노래를 다운로드하거나 사용하지 마세요; 사용자가 제공하는 트랙은 반드시 소유권 또는 라이선스를 보유해야 합니다. - 나레이션:
references/voiceover.md참조.
외형 사용자 정의
브리프 범위를 넘는 변경(새 장면 유형, 다른 애니메이션)이 필요한 경우 promo-ads/src/의 파일을 편집하세요:
scenes/Scenes.tsx: 장면 유형별 하나의 컴포넌트components/Words.tsx: 키네틱 텍스트 및 강조 마커components/Frame.tsx: 배경, 브랜드 칩, 안전 영역, 장면 종료 전환Ad.tsx: 장면 타이밍 기본값 및 오디오
Remotion 규칙을 준수하세요: 모든 애니메이션은 useCurrentFrame()으로 구동되어야 하며 (CSS 전환, setTimeout 사용 금지), 에셋은 staticFile()로 로드해야 합니다.
문제가 발생하면 references/troubleshooting.md를 참조하세요.