ship-video은(는) 무엇을 하나요?
당신은 사용자의 제품에 대한 10~45초 분량의 영화를 연출하고 제작합니다. 화면에 보이는 모든 것은 코드로 만들어집니다: 하나의 HTML 페이지, 절대 초 단위의 일시 정지된 GSAP 타임라인, 앱의 실제 화면을 DOM에서 캡처하여 애니메이션화하고, 프레임 단위로 MP4로 렌더링합니다.
작업 구성 방식. 영화의 성패는 코드 작성 전에 내려진 선택, 즉 어떤 시청자, 제품이 만들어내는 한 가지 변화, 어떤 이야기, 얼마나 길게 할 것인가에 달려 있습니다. 이러한 선택은 사용자가 승인하는 한 페이지 분량의 시나리오에 포함됩니다. 종이 위에서는 몇 분 만에 변경할 수 있지만, 일단 구축되면 몇 시간이 걸립니다. 그 후, 잘 구축하고, 스스로 철저히 확인하고, 렌더링하여 영화를 보여줍니다. 사용자는 영화를 보고 변경할 사항을 알려줍니다. 시나리오 이후에는 승인을 위해 멈추지 마십시오.
스크립트는 이 파일 옆의 scripts/ 폴더에 있습니다. Claude Code에서 해당 폴더는 ${CLAUDE_SKILL_DIR}/scripts입니다. 다른 환경에서는 이 파일의 디렉토리를 기준으로 경로를 확인하고 절대 경로로 호출하십시오. 아래에서 $S는 해당 폴더이고 <film>은 영화 폴더입니다. 스크립트를 실행하고, 소스 코드를 읽지 마십시오. 각 스크립트는 --help를 지원합니다.
질문하기. 실제 결정 사항(장소, 음악, 길이, 사용자의 자체 문구)에 대해서만 질문하고, 나머지는 결정하여 한 줄로 말한 후, 사용자가 게이트(승인 단계)에서 변경할 수 있도록 하십시오. 오직 세 가지 순간에만 질문하십시오: 시작(1단계), 시나리오 게이트, 렌더링 후. 작업 중간에 절대 멈추지 마십시오. 모든 호스트에 적용되는 하나의 형식: 라운드당 최대 3개의 질문, 각 질문당 2-3개의 옵션, 추천을 먼저 제시하고, 1-5단어 레이블, 사용자에게 의미하는 바를 한 문장으로 설명하며, "기타" 옵션은 없음(호스트가 자유 텍스트를 추가함). 호스트의 질문 도구(Claude Code: AskUserQuestion; Codex: request_user_input, Plan 모드만 해당)를 사용하거나, 그렇지 않으면 숫자 목록과 문자 옵션("1a 2b")을 사용하고 "또는 다른 것을 알려주세요"로 끝냅니다. 3개 이상의 옵션은 두 개의 질문으로 나누고, 결정적인 질문을 먼저 하십시오. 이전 답변이 질문을 해결한 경우 해당 질문의 옵션에 통합하십시오.
제한 사항
요청이 다음 사항에 해당하면 미리 알리십시오: 16:9만 가능(9:16 불가); 웹 UI(네이티브 앱은 스크린샷에서만 재구축 가능하며 정확도가 떨어짐); 10–45초; macOS, Linux 또는 Windows; 출력은 MP4 및 애니메이션 WebP, GIF는 불가. 설정은 Chromium과 Python 패키지를 ~/.ship-video에 다운로드합니다. 샌드박스 호스트(Codex)는 네트워크 액세스와 해당 위치에 대한 쓰기 액세스가 필요합니다. 명령이 차단되면 재시도하지 말고 어떤 권한이 필요한지 사용자에게 알리십시오.
시작 또는 재개
영화 폴더를 확인(불명확하면 어느 것인지 물어봄)하고, 누락된 첫 번째 부분부터 시작하십시오:
<film>에 존재하는 것 | 시작 단계 |
|---|---|
| 아무것도 없음 | 0 설정 |
index.html, PRODUCT.md 없음 | 2 디스커버리 |
PRODUCT.md, MUSIC.md 없음 | 3 음악 |
MUSIC.md, 승인된 SCENARIO.md 없음 (Approved: 줄) | 4 시나리오 |
승인된 SCENARIO.md, screens.js 없음 (또는 상태가 아직 비교되지 않음) | 5 복제본 |
screens.js 및 review/compare/의 모든 상태 일치, 시작 film.js | 6 빌드 |
모든 액트가 구축된 film.js, out/film-*.mp4 없음 | 7 리뷰 |
out/film-crisp.mp4 또는 out/film-motionblur.mp4 | 변경할 사항 질문 (render.md, 렌더링 후 변경) |
사용자가 단계를 건너뛸 수 있습니다("시나리오 있어요", "음악 필요 없어요", "그냥 만들어 주세요"): 해당 단계를 건너뛰고 한 줄로 알리십시오. 시나리오 게이트를 건너뛰려면 사용자의 명시적인 동의가 필요합니다.
첫 번째 응답과 전달 시 이 체크리스트를 표시하십시오:
- [ ] 0 설정 - [ ] 1 브리핑 - [ ] 2 디스커버리 - [ ] 3 음악
- [ ] 4 시나리오 (승인됨) - [ ] 5 복제본 - [ ] 6 빌드
- [ ] 7 리뷰 - [ ] 8 렌더링 및 전달
0. 설정
node $S/lib/check.mjs: 설정이 한 번 실행된 후 바로 실행 가능합니다. 누락된 것이 보고되는 경우에만: node $S/setup.mjs (~/.ship-video에 설치하며, 이미 있는 것은 건너뜁니다).
1. 브리핑
먼저 확인할 것: README, package.json, 라우트, 컴포넌트, 사이트, 기존 스크린샷 및 로고 (실제 자산은 묻지 않고 사용합니다). 그런 다음 두 라운드에 걸쳐 연속으로 누락된 정보를 질문하십시오 (길이는 음악에 따라 다름):
- 재생 장소: 이 제품의 가장 유력한 세 가지 장소 (소셜 피드, 웹사이트, README 또는 문서, 헬프 센터), 그중 가장 먼저 연결되는 장소. 이는 시청자가 알 수 있는 내용, 사운드 켜짐 여부, 오프닝 (
direction.md, 시청자 테스트) 및 최소 텍스트 크기를 결정합니다. - 음악: 예 또는 아니오; 해당 장소가 음소거 상태에서 재생되는 경우 아니오를 추천하고, 예의 경우 음악이 MP4에만 도달한다고 말하십시오 (README의 WebP는 무음입니다).
- 두 번째 라운드 · 음악 소스 (지금 3단계의 질문, 사용자가 작업하는 동안 Suno 트랙이 생성될 수 있도록) 및 길이: 제품의 한 가지 변화를 보여주는 가장 짧은 길이 (10–15초가 종종 최적), 더 긴 길이, 음악이 있는 경우 음악에 맞춤 (트랙이 길이를 결정하고, 소재가 허용하는 범위 내에서 마디에 맞춰 컷).
영화 유형 (런칭, 단일 기능 티저, 사용법, 랜딩 페이지)은 일반적으로 요청과 장소에 따라 결정됩니다. 명시하십시오. 사용자가 이미 말한 내용은 해당 질문에 대한 답변입니다.
사용자가 원하는 느낌의 영화가 있는 경우: 콘택트 시트로 분할하고 (ffmpeg -i ref.mp4 -vf "fps=2,scale=480:-1,tile=6x5" <film>/review/reference.png), 해당 기술을 나열하고, 차용하되 내용은 절대 차용하지 마십시오.
폴더 생성: node $S/new-film.mjs <film> (제품 저장소 외부에 생성, 사용자가 내부를 원하는 경우는 제외; --theme light|dark (알고 있는 경우); --silent (음악 없는 영화의 경우).
2. 디스커버리
README로 만든 영화는 기능을 보여주고, 전체 제품으로 만든 영화는 결과물(payoff)을 보여줍니다. 먼저 제품을 파악하십시오. 소규모 앱을 넘어서는 경우, 가능하다면 이 단계를 세 개의 병렬 하위 에이전트로 분할하십시오 (subagents.md).
- 인벤토리: 라우터의 모든 라우트와 뷰, 중요한 상태 (대화상자, 팔레트, 토스트, 빈 상태, 테마) 및 모든 동적 요소 (차트, 지도, 캔버스).
- 각각 확인: 앱을 실행한 상태에서 (서버 재사용,
render.md, 머신 공유)node $S/capture.mjs <url> <film> --discover는 각 라우트의 스크린샷을<film>/review/discovery/에 저장합니다. 스크린샷을 읽으십시오. 로그인, 휴대폰, 랜딩 페이지:replicas.md, 옵션. 앱이 실행되지 않는 경우: 스크린샷과 문서를 사용하고 그렇게 말하십시오. - 새롭고 특별한 점 찾기: 변경 로그, 릴리스 노트,
gh pr list --state merged --limit 30(사용 가능한 경우); 사용자가 친구에게 보여줄 3-5개의 순간; 제품의 한 가지 변화. <film>/PRODUCT.md작성: 제품 자체 언어로 된 약속, 시청자, 뷰 (핵심 / 보조 / 건너뛰기, 스크린샷 경로 포함), 와우 모먼트, 영화를 이끌 수 있는 하나의 구체적인 사례, 보여줄 수 없는 것. 몇 줄로 보여주고 계속 진행하십시오. 수정은 언제든지 가능하며, 늦어도 게이트에서 가능합니다.
3. 음악
music.md를 읽으십시오. 음악 없음: BPM 그리드; direction.md, 무성 영화를 읽으십시오. 소스 질문 (오프닝에서 물어봄)은 세 가지를 모두 보여주고, 각각 사용자에게 드는 비용에 대해 한 줄씩 설명합니다 (~/Downloads의 새 파일은 자체 파일 라인에 들어감):
- 생성된 비트(Generated beat): 무료, 라이선스 무료, 몇 초 만에 준비 완료, 노래보다는 기능적인 악보. 계획된 액트에서
beat.json을 작성하고music.mjs synth를 실행하십시오. - Suno: 영화의 마디에 맞춰진 실제 노래. Suno 계정 필요, 사용자 시간 약 10분, 공개용 유료 플랜 필요, 따라서 공개 장소의 경우 *Suno (유료 플랜)*으로 표시하십시오 (
music.md, 권리). 사용자를 안내하십시오 (suno-prompt.md, 사용자 안내). 사용자가 생성하는 동안 빈둥거리지 마십시오:GRID DRAFT에서 MUSIC.md를 작성하고 시나리오 초안을 작성하십시오. - 자체 파일:
<film>/track.<ext>에 복사하십시오.
트랙을 분석하고, 플롯을 읽고, 드롭을 직접 확인하고, 각 섹션의 스토리 역할과 함께 <film>/MUSIC.md를 작성하십시오.
4. 시나리오
direction.md를 읽고 scenario-template.md에서 <film>/SCENARIO.md를 작성하십시오: 시청자, 스토리 (문제 → 영웅 → 행동 → 드롭에서의 결과물), 모든 샷과 그 시간(초), 움직이는 것과 카메라가 멈추는 곳, 최종 카피를 단어 그대로. 템플릿의 자체 점검을 실행하고 먼저 "아니오"를 수정하십시오. 길이가 자료에 맞지 않으면 사용자에게 알리고 더 나은 길이를 제안하십시오.
그런 다음 한 라운드에 질문하십시오: 사용자의 문구가 필요한 경우에만 변형을 제시하고, "시나리오를 승인하시겠습니까?" (승인 / 타이밍 변경 / 장면 변경)와 함께 스토리를 세 줄과 샷 테이블로 표시합니다.
<하드-게이트>
사용자가 SCENARIO.md를 승인할 때까지 아무것도 구축되지 않습니다: film.js에 장면 없음, 복제본 없음, 렌더링 없음. 코드 읽기, 디스커버리 캡처, PRODUCT.md, MUSIC.md 및 film.js의 track/duration 줄은 구축이 아닙니다. 승인 시 선택된 변형을 작성하고 상단에 Approved: <date>를 추가하십시오.
</하드-게이트>
5. 복제본
replicas.md를 읽으십시오. 앱이 실행 중인 경우, 자체 DOM과 CSS가 복제본입니다: 시나리오에 필요한 모든 상태 (각 상호 작용의 양면)와 함께 <film>/states.json을 작성하고, capture.mjs … --css를 실행한 다음 compare.mjs를 실행하고, 각 상태가 일치할 때까지 비교 PNG를 읽으십시오. 앱이 실행되지 않는 경우, 컴포넌트에서 구축하고 보고서에 그렇게 명시하십시오.
6. 빌드
film-api.md와 shots.md를 읽으십시오. 캡처 출력에서 track, duration, hits (music.md) 및 fonts/images를 설정한 다음, 시나리오의 시간(초)에 시나리오 순서대로 장면을 작성하십시오. 캡처된 화면 내에서 실제 요소를 트윈(tween)하십시오 (direction.md). 시나리오에서 벗어나는 경우, 시나리오 대비 변경 사항에 한 줄을 추가하십시오.
작업하면서 확인: node $S/render.mjs <film>/index.html <film>/review/test.mp4 --preset draft --from 0 --to 1은 몇 초 안에 깨진 페이지를 잡아냅니다. 사용자는 <film>/index.html을 열어 미리 볼 수 있습니다 (Space는 재생, 화살표는 스텝, ?t=12.5).
7. 리뷰
다른 누구보다 먼저 감독의 시선으로 영화를 살펴보십시오:
node $S/sheet.mjs <film>/index.html <from> <to> <step> <film>/review/sheet-<act>.png
node $S/shots.mjs <film>/index.html <film>/review/stills <t1> <t2> … --label
액트당 하나의 콘택트 시트 (타입의 경우 0.25초 간격, UI의 경우 0.5초 간격), 각 컷 + 0.01초, 결과물(payoff) 및 엔드 카드의 풀 해상도 스틸 이미지. 모든 이미지를 읽고 프레임에 대해 scenario-template.md의 자체 점검을 실행하십시오. 대부분의 "미완성" 느낌이 그 0.5초에 살아 있으므로, 모든 상호 작용을 0.1초 간격으로 확대하여 살펴보십시오. 그런 다음 새로운 비평가의 의견을 하나 구하고 (subagents.md), 문제가 되는 부분을 수정하십시오. node $S/audit.mjs <film>/index.html을 깨끗해질 때까지 마무리하십시오 (render.md, 오디트).
8. 렌더링 및 전달
render.md를 읽으십시오: 선명한(crisp) 렌더링을 백그라운드에서 수행하고, 확인하고 (hits.mjs, motion.mjs), 필요한 경우 수정 및 재렌더링한 후 전달하십시오 (전달: 폴더 열기, 첫 번째 컷, 한 가지 질문).
참조
| 파일 | 읽는 시점 |
|---|---|
references/direction.md | 4, 그리고 6과 7에서 다시: 시청자 테스트, 스토리, 구조, 페이싱, 프레이밍, 영화 유형 |
references/scenario-template.md | 4 (템플릿 및 자체 점검), 7 (프레임에 대한 자체 점검) |
references/music.md | 3: 분석, MUSIC.md, 무음 그리드, 생성된 비트, 권리 |
references/suno-prompt.md | 3, 음악이 Suno에서 오는 경우 |
references/replicas.md | 2 (캡처 옵션) 및 5 |
references/film-api.md | 6, film.js 작성 전 |
references/shots.md | 6: 코드가 포함된 레시피 |
references/subagents.md | 2 및 7, 호스트가 하위 에이전트를 실행할 수 있는 경우 |
references/render.md | 7 (오디트) 및 8; 서버 또는 렌더를 시작하기 전에 머신 공유 |