참고 모션 비디오
영화는 HTML이고, 큐 리스트는 악보입니다. 보이는 모든 이벤트는 화면을 움직이는 상수 옆에 큐를 등록하고, 영화의 모든 구간은 목적에 따라 이름 붙여진 섹션으로 나뉩니다. 팔레트는 이들을 각 프레임에 맞는 음악으로 바꾸어 이야기를 연기합니다: 문제가 제시되는 동안에는 리듬이 없고, 제품이 작동할 때는 그루브가 생기며, 결정적인 순간 전에는 숨을 고르고, 제품이 의도적으로 멈출 때는 드럼이 나가고, 로고에서 완전히 정지합니다.
작업 예시: examples/claude-code/ (공유 스테이지에서 각기 다른 팔레트로 실행 가능한 런칭 필름, 설명 영상, 데모 영화), examples/moments-v2.html (36초 연속 샷 광고), examples/ads/ (Moments 광고: 드럼, 오케스트라, 바이올린). Moments 작곡은 제품 에셋과 경로 조정이 필요합니다; 이들은 바로 렌더링 가능한 데모가 아닌 참고 자료입니다.
과거 영화를 결정한 규칙
- 적합성이 우선입니다. 음악은 제품의 분위기와 일치하고 화면의 흐름을 연기해야 합니다. 블라인드 A/B 테스트(KIBO v4.5, 30초, 동일 화면, 동일 음량)에서 소유자는 모든 기계적 지표에서 더 우수했던 비트 매칭된 무료 스톡 일렉트로팝 트랙보다 화면에 맞춰 작곡된 악보를 선택했습니다: "두 번째 것은 안 맞아요". 작곡이 기본값이며, 사용자가 트랙을 직접 선택할 때만 라이브러리 트랙을 사용합니다(
references/music.md). - 모든 큐에 그 프레임에 맞는 소리가 있어야 합니다. 컷은 비트에 맞춰 떨어지고, 단어는 오프비트에서 강조되며, 가장 큰 공개는 가장 큰 타격을 받습니다.
- 실제 영상과 실제 출력만 사용합니다. 모션 그래픽은 프레임을 구성하고 설명하며, 기능을 절대 가짜로 만들지 않습니다. 가속 및 대기 컷은 화면에 표시합니다("실제 앱 · 1×", "⋯ 대기 컷", "▶▶ 빨리 감기"), 합성 음성에 태그를 붙이고, 모든 숫자 아래에 출처를 넣습니다.
- 음성이 우선입니다. 내레이션이나 대화가 있을 때, 배경 음악은 이를 방해하지 않습니다(
references/music.md, "Mix"). - 기계적 관문은 필요 조건이지 충분 조건이 아닙니다. 동기화, 음량, STT 모두 맞지 않는 음악에서는 통과할 수 있습니다. 사람이 블라인드 청취로 결정합니다.
- 질문한 후 결정하세요. 요청과 저장소가 답할 수 없는 것만 먼저 추천 답변과 함께 질문하고, 나머지는 결정하고 그렇게 말하세요.
워크플로우
0. 설정 확인 (다른 모든 것보다 먼저)
각 항목을 ok 또는 missing으로 보고하고, 수정 방법을 알려주며, 키 값을 절대 출력하지 마세요.
- Google Chrome (렌더러는 설치된 Chrome을 사용합니다: 번들된 Chromium은 H.264를 디코딩할 수 없음), ffmpeg (
rubberband포함), Node ≥ 20 및 스킬 디렉토리에서npm ci --prefix engine --ignore-scripts실행. - Python 3.12와 numpy, scipy, soundfile, pytest (
uv venv --python 3.12 .venv, 스킬 디렉토리에서uv pip install --python .venv/bin/python -r requirements.txt실행). - 샘플:
bash engine/fetch_samples.sh core실행(VSCO-2-CE CC0 퍼커션, 금관, 말렛; Pixabay 라이선스 SFX), 그 다음bash engine/fetch_samples.sh piano실행하여soft_pulse용(Salamander Grand Piano, CC-BY 3.0; 사용 시 크레딧 표시). 샘플이 없으면 팔레트가 합성으로 대체되지만, 피아노 대체는 섹션 균형 검사를 실패시킬 수 있습니다; 전체 테스트 스위트에는 두 세트를 모두 사용하세요. - 내레이션 제공자와 해당 자격 증명은 내레이션이 요청된 경우에만 필요합니다(
references/voice.md). 실행 가능한 세 가지 샘플에는 API 키가 필요하지 않습니다. 내레이션, 전사 및 앱 캡처 클라이언트는 번들되지 않았습니다; 사용 가능한 도구를 사용하고 필요할 때 선택한 제공자의 최신 문서를 확인하세요. - 여유 디스크 공간: 렌더는 프레임을 파이프라이닝하지만(PNG 덤프 없음), 샘플 라이브러리와 테이크에는 몇 GB가 필요합니다.
1. 인테이크 인터뷰 → 1페이지 브리프 (계획 전 승인)
요청과 저장소가 제공하지 않는 컨텍스트만 질문하세요. 환경의 질문 도구를 사용하거나, 없으면 일반 채팅을 사용하세요; 관련 질문을 그룹화하고, 추천 옵션을 먼저 제시하며, 이미 주어진 답변을 재사용하세요:
- 목적: 어떤 종류의 영화인지(런칭, 컨셉 설명, 데모 워크스루, 사용 사례 비네트, 매니페스토), 누가 시청하는지, 어디에 게시되는지(YouTube, 콘테스트, 소셜 미디어), 시청자가 본 후 무엇을 해야 하는지, 마감일 및 심사 기준.
- 메시지 및 증거: 기억해야 할 한 문장, 출처가 있는 세 가지 증거, 말해서는 안 되는 것.
- 형식과 사운드: 길이와 형식(16:9, 9:16, 축소판), 화면 언어, 자막, 음성; 음악 참고 링크 또는 분위기(목적에 맞는 아래 표의 팔레트를 제안하고, "참고 링크가 있습니다" 옵션 추가); 내레이션 여부와 음성.
- 소스 및 규칙: 실제 앱을 녹화할 수 있는지(URL, 로그인, 데모 데이터, 두 대의 기기), 사람이 등장하는지, 브랜드 자산, 콘테스트 규칙, 타사 IP.
브리프를 다시 읽고 확인을 받으세요.
video/BRIEF.md에 작성하세요.
2. 장르 및 참고 자료
references/genres.md에서 장르의 비트 템플릿과 측정된 목표를 선택하세요(5개 장르에 걸친 16개 공식 참고 자료, 샷 길이, 카드당 단어 수, 음성 해설 속도, 제품 및 로고가 나타나는 시점 포함). 선택한 참고 자료를 /watch로 시청하고, engine/ref-analyze.py로 음악을 측정하세요. 연속 샷 광고의 경우 references/transitions.md 및 references/youtube-analysis.md를 읽으세요.
3. 계획 → video/PLAN.md (빌드 전 승인)
BPM 그리드(100 BPM = 1비트 0.6초, 30fps에서 18프레임; 다운비트에 드롭 배치) 기반 비트 시트: 시간 | 마디 | 장면 | 화면 텍스트 | 영상 | 섹션 종류 | 큐 | 음성. 히어로 객체(영화 전체를 여행하며 로고에 도착하는 제품의 한 요소), 지속적인 프레임, 그리고 각 주장과 그 증거 파일의 이름을 지정하세요.
4. 실제 화면 캡처
references/capture.md: 제품이 필요할 때, 실제 앱에서 두 대의 기기 라이브 테이크(벽시계 타임스탬프가 있는 CDP 스크린캐스트 프레임, 전화 마이크로 재생되는 합성 고객 음성, 페이지에서 탭한 AI의 응답), 일정한 프레임 속도의 MP4로 변환된 다음, 시간 맵([[영화 t, 테이크 t], ...]: 동일 단계는 1×, 평평한 실행은 홀드, 1ms 떨어진 두 지점은 컷)을 통해 영화에서 재생됩니다. 환경에서 사용 가능한 브라우저 도구를 사용하세요; references/aside-capture.md는 Aside 특정 구현을 제공합니다. 터미널 또는 도구 출력: 실제 출력을 다시 조판하세요(Claude Code 샘플의 경우), 절대 발명하지 마세요.
5. 내레이션 (선택 사항)
references/voice.md: 선택한 TTS 제공자 또는 제공된 녹음을 사용하고, 테이크를 청취하며, 단어 정확도와 속도(영어 데모의 경우 155-170 wpm이 시작점)로 선택하고, 음성을 늘리기 전에 문구나 일시 중지를 조정하세요. 소스에서 정리하고 각 줄을 해당 슬롯의 단어 예산에 맞게 작성하세요.
6. 구성 빌드
- 하나의 고정된 1920×1080
#stage; 모든 동작은 하나의 일시 정지된 GSAP 타임라인에서; 타이핑, 카운터, 히어로 도트 및 비디오 테이크는__seek(t)에서 시간만으로 평가됩니다. CSS 애니메이션,setTimeout또는requestAnimationFrame을 동작에 사용하지 마세요.fromTo는immediateRender: false가 필요합니다. - 엔진을 위한 계약:
window.__duration,__seek(t),__ready,__cues,__sections,__bpm,__T.examples/claude-code/stage.js(큐, 섹션, 단어 팝, 타이핑, 카운터, 터미널 카드, 히어로 도트) 또는examples/moments-v2.html(실제 화면 위의 가상 카메라)에서 시작하세요. - 무언가를 보이게 만드는 모든 상수 옆에 큐를 등록하세요; 모든 구간을 목적에 따라 섹션으로 표시하세요(아래 표).
- 자막: 음성 대사를 위한 읽기 가능한 슬롯을 확보하고 다른 콘텐츠를 그 슬롯 밖에 유지하세요; 합성 스피커와 해당 제공자를 식별하고, 브리프가 요구할 때 번역을 추가하며, 동일한 자막 목록에서
.srt를 작성하세요. - 전체 렌더링 전에 스틸 이미지 확인:
node engine/stills.mjs index.html out/stills 1.7 3.6 ....
7. 음악: 화면에 맞춰 작곡
node engine/cues.mjs > cues.json # duration, bpm, T, cues, sections
python engine/compose.py cues.json score.wav --palette bright_demo [--narr narr.js --narr-root .]
compose.py는 악보를 작성하고, 음성을 우선으로 믹스하며, -14 LUFS(트루 피크 -1 dBTP 미만)로 마스터링하고 동기화 관문을 자체적으로 실행합니다: 33ms 이내에 들리는 온셋이 없는 큐는 팔레트의 강조 사운드를 받고 믹스가 다시 수행됩니다(최대 두 번); 보고서는 추가된 항목을 나열합니다. 선택 전에 청취하세요: 동일한 15-30초 구간을 두세 가지 적합한 팔레트로 렌더링하고 사람이 블라인드로 선택하게 하세요. 세부 사항, 믹스 규칙 및 라이브러리 트랙 경로: references/music.md.
8. 렌더링
node engine/render.mjs index.html out/film.mp4 --fps 30 --audio score.wav (JPEG q95 프레임이 x264로 파이프: PNG보다 약 10배 빠름; YouTube 플래그: High 프로파일, 프레임 속도의 절반 GOP, BT.709 태그, AAC 48kHz 384kbps). 초안의 경우 짧은 범위: --from 10 --to 16. Chrome은 한 페이지에 약 18개의 개별 비디오를 로드합니다; 움직이지 않는 테이크에는 스틸 이미지를 사용하세요.
9. 관문 (모두 최종 파일에 대해)
references/qa.md. 최종 MP4에서 동기화 확인(python engine/synccheck.py out/film.mp4 cues.json: 모든 큐가 33ms 이내, 해당 기회 기준선과 함께 읽음), 음량, 트루 피크, 스틸 이미지, 전환, 그리고 사람의 청취 판단. 음성, 자막, QR 및 수정 검사는 해당 기능이 존재할 때만 환경에서 사용 가능한 도구를 사용하여 적용하고, 실행되지 않은 검사를 통과로 보고하지 마세요. 클라우드 이해도 테스트는 선택 사항이며 사용자가 해당 서비스로 영화를 보내기로 선택해야 합니다.
10. 전달
브리프의 길이와 형식으로 전달, 일반적으로 H.264 MP4, 자막이 있는 경우 .srt 사이드카, 요청된 경우 썸네일 또는 축소판. 내장 스테이지와 렌더러는 1920×1080입니다; 다른 종횡비는 렌더러 플래그가 아닌 명시적인 적응이 필요합니다. 실제로 실행된 검사와 그 증거를 보고하세요. 게시는 사용자가 이미 요청하지 않은 경우 별도의 작업입니다.
목적별 섹션
| 종류 | 그림이... | 음악은... |
|---|---|---|
intro | 제품이 작동하기 전에 문제를 제시합니다 | 리듬 없음: 패드, 큐 사운드만 |
tease | 제품을 깨우고, 첫 번째 요청을 합니다 | 성긴 그루브(백비트, 상단 퍼커션 또는 멜로디 없음) |
build | 결과가 곧 나타나려고 합니다; 재진입 전 필인 | 섹션 끝으로 갈수록 크레센도 |
groove | 제품이 작동하는 모습을 보여줍니다(e 0.5-1.2) | 에너지 e의 풀 그루브 |
light | 조밀한 라인이나 텍스트로 가득 찬 카드를 전달합니다 | 멜로디 피겨가 없는 그루브 |
muffled | 심각한 사실, 통계, 문제를 진술합니다 | 로우패스된 그루브, 다음 섹션으로 열림 |
breath | 결정적 순간 전에 한 비트 동안 멈춥니다 | 거의 침묵; 히어로 객체의 소리만 울림 |
stop | 제품이 의도적으로 작동하지 않는 모습을 보여줍니다(안전 정지, 한계) | 드럼 아웃, 유지되는 패드 |
end | 엔드 카드입니다 | 침묵 |
riser(오버레이) | 착륙으로 상승합니다 | 섹션 끝에서 끝나는 라이저 |
모든 팔레트가 응답하는 큐 유형: drop(결정적 순간), reentry, final(로고, 그 다음 완전 정지), break(정지 시작), cut(장(big)), tap, tapTouch, pop, word, chip, node, num, count, fill, bar, key(타이핑), dot(히어로 객체의 고유 소리).
팔레트 (engine/palettes/)
| 팔레트 | 적합 | 사운드 | 출처 |
|---|---|---|---|
bright_demo | 데모 워크스루, 친근한 소비자 또는 SaaS 앱, 음성 주도 | 100BPM F장조 팝: 펀치감 있는 킥, 클랩과 스냅, 셰이커와 탬버린, 마림바(VSCO 샘플 또는 합성), 플럭키 베이스, 에어리 패드, 물방울 히어로 사운드 | KIBO v4.5 (A2-bright), 소유자 선택; 블라인드 A/B 승리 |
drums_launch | 런칭 필름 및 광고, 제품 공개, 음악 주도 | 100BPM D단조 라이브 킷: VSCO 킥, 스네어와 고스트, 하이햇, 콩가, 카우벨, 당김음 베이스, 뮤트 기타 스캥크, 트럼펫과 호른 스탭 | Moments 50초 드럼 광고(Apple의 MacBook Air M5 영화 참고), 소유자가 가장 좋아하는 스타일 |
soft_pulse | 컨셉 설명, 다이어그램, 내레이션이 많은 영화 | 96BPM C장조: 샘플링된 피아노, 튜닝된 마림바 큐 사운드, 소프트 킷, 베이스와 패드; 레이어가 에너지에 따라 진입하고 큐 음이 다이어그램이 구축됨에 따라 상승 | examples/claude-code/explainer 용 |
아직 독립 스크립트로 팔레트 인터페이스로 이식 중: 피아노와 벨(engine/score.py, Moments v2), 밴드(engine/score_band.py, B2B 프로모션), 오케스트라 및 솔로 바이올린(examples/ads/orch, examples/ads/violin). 팔레트를 추가하려면 engine/palettes/__init__.py를 따르고 tests/test_compose.py에 이름을 추가하세요: 테스트는 섹션 문법(인트로에 킥 없음, 침묵하는 숨과 엔드 카드, 스탑에서 드럼 아웃, 모든 큐 청취, -14 LUFS)을 수행함을 증명합니다.
파일
engine/:render.mjs,cues.mjs,stills.mjs,compose.py+palettes/,audio.py(버스, 샘플러, 룸),synccheck.py,beatmap.py및bedmix.py(라이브러리 트랙 경로),ref-analyze.py,music-analyze.py,fetch_samples.sh.references/:genres.md,music.md,voice.md,capture.md,qa.md,transitions.md,youtube-analysis.md,aside-capture.md,ads/.tests/:python -m pytest -q tests/(비트 맵, 라이브러리 믹스, 동기화 관문, 모든 팔레트의 섹션 문법).
브리프 및 제출 제약 사항
- 요청된 길이, 언어, 종횡비 및 배포처를 사용하세요. 콘테스트의 경우 실제 규칙을 읽고
ffprobe로 길이를 확인하세요; 과거 콘테스트의 제한을 상속하지 마세요. - 기능 주장에 대해 실제 제품 영상 또는 실제 출력을 보여주고, 사용자의 브랜드 및 자산 권한을 존중하세요. Claude Code 샘플이 하는 것처럼 다른 제품에 대한 비공식 샘플을 식별하세요.
- 먼저 로컬 전달물을 준비하세요. 사용자가 대상과 가시성을 승인한 경우에만 업로드하세요.