코드로 만드는 출시 영상

비디오 실행하기

작은 모션 스튜디오처럼 실행 비디오를 제작하세요. 먼저 비디오가 무엇을 해야 하는지 결정하고 박자별로 계획합니다. 그런 다음 모든 프레임을 코드로 구축하여 어떤 부분이라도 변경할 수 있고 1분 안에 다시 렌더링할 수 있습니다.

결과는 실제 제품에 대한 단편 영화입니다. 즉, HTML로 재구축된 UI가 비트 그리드 위에서 움직이고, 음악에 맞춰 컷 편집되며, 모션 블러가 적용된 60fps로 재생됩니다.

필요 사항

• Node 18+, libx264가 포함된 ffmpeg, Python 3.9+. Python 스크립트는 표준 라이브러리만 사용합니다.
• 비디오 폴더에 설치된 Chromium이 있는 Playwright: npm i -D playwright && npx playwright install chromium.
• 이 스킬의 scripts/ 와 assets/template.html.

명령어에서 $SKILL은 이 스킬의 폴더입니다 (예: ~/.claude/skills/launch-video). 셸에서 한 번 설정하세요: SKILL=~/.claude/skills/launch-video. 비디오 폴더에서 명령어를 실행하세요.

프로세스

단계를 순서대로 진행하세요. 각 단계는 다음 단계에서 사용할 무언가를 작성합니다.

단계	출력	참고 자료
1. 브리프	brief.md	references/1-brief.md
2. 포맷	형식, 길이, 화면 비율, 플랫폼 (브리프 내)	references/2-formats.md
3. 스토리	beatmap.md	references/3-story.md
4. 비주얼	스타일 노트 (브리프 내)	references/4-look-and-motion.md
5. 제작	film.html: 사용자 확인용 4개 키 스틸 이미지, 이후 전체 영화	references/5-build.md, assets/template.html
6. 음악 및 사운드	노래 옵션, 컷 포인트, 믹스된 MP4	references/6-music-and-sound.md
7. 렌더링 및 점검	MP4 및 점검 결과	references/7-render-and-check.md
8. 배포	최종 파일, 축소 버전, 게시 노트	references/8-platforms.md

해당 단계에 도달했을 때 참고 자료를 읽고, 한 번에 모두 읽지 마세요.

1. 브리프

제품이 무엇인지, 비디오 대상이 누구인지, 그들이 기억해야 할 한 가지, 그리고 매직 모먼트(제품이 그 역할을 눈에 보이게 수행하는 지점)를 알아내세요. 먼저 저장소, 사이트 및 문서를 읽으세요. 그런 다음 사용자에게 한 번에 최대 5개의 질문을 하세요. 그 외의 사항은 브리프의 미해결 질문에 기본값을 적고 계속 진행하세요. brief.md를 작성하세요.

2. 포맷

제품 유형, 목표 및 플랫폼에 따라 비디오 종류를 선택하세요: 티저, 실행 영화, 데모, 설명 영상, 기능 소개, 창업자 비디오, 해커톤 데모. 길이와 화면 비율을 설정하세요. 소프트웨어의 경우 일반적으로 X와 LinkedIn용 15~30초 실행 영화가 기본값입니다. 조언이 충돌할 경우 사용자의 말이 우선하며, 그 다음이 주요 플랫폼입니다. 다른 플랫폼은 축소 버전을 만듭니다.

3. 스토리

고정된 템포로 비트 맵을 작성하세요. 120 BPM은 0.5초 비트를 제공합니다. 각 비트마다 무슨 일이 일어나는지, 어떤 이전 요소에서 파생되는지, 카메라가 어디로 가는지, 어떤 텍스트가 표시되는지, 무엇이 들리는지를 명시합니다. 매직 모먼트를 음악의 드롭 부분에 배치하세요.

4. 비주얼

제품 자체의 브랜드를 사용하세요: 색상, 글꼴, 로고, 아이콘 및 구성 요소. 디자인 토큰과 CSS를 읽으세요. 브랜드가 없는 경우 밝은 2D 스타일을 사용하세요: 따뜻한 흰색 캔버스, 거의 검은색 UI, 하나의 강조 색상, 하나의 깔끔한 산세리프 글꼴, 코드용 모노 글꼴. 휴대폰에서 읽을 수 있을 만큼 텍스트를 크게 만드세요.

5. 제작

$SKILL/assets/template.html을 video/film.html로 복사하세요. 엔진은 유지하고 영화만 교체하세요. 모든 스타일은 seek(t) 내부의 시간에서 비롯됩니다. CSS 전환, 타이머 또는 프레임 간 상태가 없습니다. 페이드 대신 모양이 서로 변환됩니다.

먼저 4개의 키 모먼트를 구축하세요: 후크, 매직 모먼트, 페이오프 및 엔드 카드. 스틸 이미지로 렌더링하고 비트 맵과 함께 사용자에게 보여주세요. 여기서 사용자의 승인을 받으세요. 문장 하나를 바꾸는 것은 저렴하지만 완성된 장면을 바꾸는 것은 그렇지 않습니다. 그런 다음 나머지를 구축하세요.

6. 음악 및 사운드

영화 템포에 가까운 3~4개의 후보 노래를 찾으세요. 각각 조용한 부분과 명확한 드롭이 있어야 합니다. 다운로드 전에 먼저 물어보세요. 각 노래를 scripts/beats.py로 측정하고, scripts/loudness_plot.py를 살펴보고, beats.py --around로 드롭을 확인하세요. 비트가 맞춰지도록 속도 = 노래 BPM / 영화 BPM으로 영화를 렌더링하세요. 그런 다음 scripts/mux.py로 각 노래를 잘라 드롭이 매직 모먼트에 떨어지도록 하세요. 사용자가 선택하게 하세요. 클릭, 휙, 팝 소리에 대한 실제 사운드 효과를 추가하고, 가장 큰 지점에 배치하세요.

7. 렌더링 및 점검

먼저 스틸 이미지를 렌더링한 다음 비디오를 렌더링하세요: node $SKILL/scripts/render.mjs film.html --out out/film.mp4. 그런 다음 점검하고 사용자에게 증거를 보여주세요:

• scripts/pops.py는 단일 프레임으로 번쩍이는 프레임을 찾습니다. 0을 보고해야 합니다.
• scripts/contact_sheet.py --video는 0.5초마다 프레임을 보여줍니다. 모든 타일에서 프레이밍, 잘린 텍스트 및 겹침을 확인하세요.
• 드롭 타이밍과 음량(-14 LUFS)을 확인하세요.
• 휴대폰 크기에서 음소거로 시청하세요.

8. 배포

각 플랫폼에 필요한 마스터 및 축소 버전(예: 16:9, 1:1 또는 4:5, 9:16)을 내보내세요. 사용자에게 파일, 클레임 및 링크가 포함된 게시글 텍스트, 게시 전 확인 사항을 제공하세요. 그런 다음 감독처럼 메모를 작성하고("중간이 지루하다", "줌이 드롭과 맞아야 한다") 메모가 언급하는 내용만 변경하세요.

작업 규칙

• 실제 제품, 사실에 기반한 주장. 제품의 실제 이름, UI, 단어 및 데이터 형태를 사용하세요. 샘플 데이터는 그럴듯해야 하며 장면 전체에서 일관되어야 합니다. $120 주문이 들어오면 총액이 $120 증가합니다. 존재하지 않는 기능이나 뒷받침할 수 없는 숫자는 절대 표시하지 마세요. 해당되는 경우 "베타" 또는 "테스트넷"이라고 표시하세요.
• 비디오당 하나의 메시지. 브리프에 세 개의 메시지가 있으면 세 개의 비디오를 만들거나 하나를 선택하세요.
• 다운로드 전에 음악, 사운드 효과 또는 푸티지를 요청하세요. 파일 이름, 출처, 라이선스 및 크기를 명시하세요.
• 보여주기 전에 자신의 작업을 확인하세요. 7단계의 점검은 사용자가 보기 전에 대부분의 문제를 잡아냅니다. "괜찮아 보인다"가 아닌 숫자로 결과를 보고하세요.
• 취향이 결정되는 부분에서는 옵션을 보여주세요. 특히 음악: 3~4개 버전을 잘라 사용자가 선택하게 하세요.
• 구조는 복사하되, 예술은 복사하지 마세요. 참조 비디오는 페이싱과 비트 구조를 빌려올 수 있습니다. 캐릭터, 예술, 음악 또는 브랜드는 복사하지 마세요.

비디오 폴더

사용자가 원하지 않는 한 비디오를 제품의 소스 트리 밖에 유지하세요.

video/
  brief.md        beatmap.md
  film.html       assets/      (로고, 글꼴, 아이콘, 스크린샷)
  music/          sfx/         (다운로드 파일, 라이선스 노트 포함)
  stills/         out/         (렌더링 파일, 폐기 가능)
  package.json    node_modules/ (Playwright)

스크립트

스크립트	기능
scripts/render.mjs	스틸 이미지 또는 모션 블러, 병렬 워커 및 --speed를 사용한 전체 MP4
scripts/contact_sheet.py	스틸 이미지 또는 비디오 프레임을 하나의 이미지로 볼 수 있는 시트로 배열
scripts/pops.py	단일 프레임 결함 찾기
scripts/beats.py	노래 템포, 비트 그리드, 드롭 후보; --around로 세부 확인
scripts/loudness_plot.py	그리드 및 드롭 후보와 함께 노래 음량 그래프 그리기
scripts/mux.py	히트에 맞춰 음악 자르기, 피크별로 사운드 효과 배치, 음량 설정

사용법을 보려면 인수 없이 스크립트를 실행하세요.