product-motion

Product Motion

제품 기능이 어떻게 동작하는지 보여주는 짧은 영상입니다. 제품 UI가 화면에 나타나고, 커서가 클릭하고, 텍스트가 입력되며, 입력 필드 아래에 레이블이 나타나고, 카드가 계단식으로 나타나며, 카메라가 시선을 따라가고, 음성이 현재 상황을 설명합니다. 이 접근 방식은 여러 제품의 영상에서 검증되었으며, 특정 브랜드에서 분리되어 있습니다.

원칙

1. 프레임은 시간의 함수입니다. 영상은 render(t)가 시간에 따라 프레임 상태를 계산하는 HTML 페이지이며, scripts/render.py가 프레임을 하나씩 캡처하여 ffmpeg에 전달합니다. CSS 애니메이션, 타이머, 화면 녹화는 사용하지 않습니다. 끊김이나 동기화 문제가 없으며, 모든 순간을 개별 프레임으로 확인할 수 있습니다. 엔진은 templates/engine.js (references/engine.md)입니다.
2. 제품에 실제로 있는 것만 보여줍니다. 화면, 레이블, 상태는 현재 프로젝트의 코드, 프로토타입, docs/ 또는 스크린샷에서 가져옵니다. 영상에 존재하지 않는 기능은 없습니다. 데이터는 가상의 짧은 이름을 사용합니다. 장면을 위해 만들어진 내용(응답, 상태 텍스트 등)은 사용자에게 확인을 위해 알려줍니다.
3. 스타일은 제품의 것이지, 스킬의 것이 아닙니다. 색상, 강조색, 폰트, 로고는 프로젝트의 브랜드 프로필(motion/brand/)에서 가져오며, 이는 코드에서 수집됩니다 (references/brand.md). 스킬의 중립적인 프로필은 초안용으로만 사용됩니다.
4. 음성을 직접 합성하지 않습니다. 로컬 TTS는 로봇처럼 들립니다. 사용자는 Gemini TTS용 텍스트와 프롬프트를 별도로 받거나 (또는 직접 음성을 녹음하여) 파일을 보내고, align_vo.py가 이를 단어 단위로 정렬합니다. 그 전까지는 영상이 자막과 음악과 함께 제공됩니다.
5. 먼저 눈으로 확인한 후 렌더링합니다. 전체 렌더링 전에 선택한 형식의 주요 순간에 대한 콘택트 시트와 verify_scene.py를 사용합니다. 구성 오류는 프레임에서 잡는 것이 가장 저렴합니다.
6. 사용자의 결정을 추측하지 않습니다. 언어, 형식, 속도, 음악, 게시는 브리핑이나 질문에서 결정합니다. 아래의 기본값은 사용자가 별도로 말하지 않은 경우에만 사용됩니다.

프로세스

0. 환경 설정 (머신당 한 번)

python3 <skill>/scripts/check_env.py

Python 3.9+, ffmpeg/ffprobe, pip install playwright numpy scipy pillow (+ faster-whisper 음성용), python -m playwright install chromium이 필요합니다. 가속 버전의 경우 ffmpeg에 rubberband가 필요합니다. 프로젝트의 venv 또는 그 근처에 설치하는 것이 좋습니다. 종속성을 사용자의 동의 없이 설치하지 말고, 명령어를 안내하세요.

1. 브리핑

기능; 길이 (명시되지 않은 경우 기능당 30–35초, 섹션당 60–75초); 대상 및 목적 (학습, 프로모션, 투자자, 랜딩); 언어; 형식 (명시되지 않은 경우 16:9, 세로 9:16 제안). 한 번에 두 개 이상의 질문을 하지 마세요. 나머지는 응답에서 명시된 합리적인 기본값을 사용합니다. 자세한 내용은 references/brief.md를 참조하세요.

2. 기능에 대한 사실 — 현재 프로젝트에서

기능의 코드와 프로토타입, docs/, 스크린샷을 읽습니다: 화면, 정확한 레이블, 플레이스홀더, 버튼, 상태, 존재하는 것과 없는 것. 주요 작업 후 사용자가 무엇을 보는지 명확하지 않으면 질문하세요.

3. 브랜드 프로필 — 프로젝트당 한 번

프로젝트에 motion/brand/가 없으면 references/brand.md에 따라 수집합니다: brand.css (CSS 변수, 테마, tailwind 설정의 토큰), 권한이 확인된 로컬 폰트, 로고. 첫 번째 영상 전에 사용자에게 샘플 프레임을 보여주세요. 이후 영상은 준비된 프로필을 사용합니다.

4. 시나리오

"타임코드 · 화면 내용 · 카메라/애니메이션 · 대사" 테이블 (references/storyboard.md: 길이별 스켈레톤, 텍스트 밀도 초당 1.3–1.6 단어, 장면 아키타입). 영상이 30초를 넘거나 브리핑이 불완전하면 테이블을 보여주고 "확인"을 기다리세요. 짧고 브리핑이 명확한 경우 바로 제작을 시작하고 첫 번째 프레임과 함께 테이블을 보여줄 수 있습니다.

5. 영상 프로젝트

프로젝트에 비디오를 위한 기존 위치가 있으면 (promo/, design/motion/ 등) 그곳에 배치하고, 그렇지 않으면 motion/<slug>/에 배치합니다.

python3 <skill>/scripts/new_project.py motion/<slug> --brand motion/brand --lang ru --title "기능 · 제품"

내부: video.html, plan.js, cues.js, tmap.js, engine.js, processing.js, base.css, brand/, build/, out/, README.md. build/와 큰 out/*.mp4는 사용자가 달리 결정하지 않는 한 프로젝트의 .gitignore에 추가합니다. 프로젝트에 docs/가 있으면 거기에 영상에 대한 짧은 링크와 README를 추가합니다.

6. plan.js 및 씬

plan.js는 단일 소스입니다: duration, fps, canvas, language, product, audience, hold, 대사 vo[] (id, at, text, tts, subs), pronounce, emphasis, music. window.PLAN = 뒤에 엄격한 JSON입니다.

video.html에서 템플릿의 데모 콘텐츠를 기능의 화면으로 교체합니다: build (반복 요소), setup (E.measureAt + E.rect 측정, 두 형식의 카메라 키, 커서, 클릭), scene(t). 화면 이벤트는 대사 단어에 동기화됩니다 (E.sync('p3:word', fallback)). 어두운 화면과 모달은 E.dim()과 #app2를 통해 처리합니다. 씬 레시피는 references/scenes.md, 모션 및 카메라 규칙은 references/motion.md를 참조하세요. 슬라이더가 있는 미리보기: 영상 폴더에서 python3 -m http.server를 실행하여 video.html?preview=1로 확인합니다.

7. 프레임 확인

python3 <skill>/scripts/verify_scene.py video.html --fmt both
python3 <skill>/scripts/render.py video.html stills --fmt both --times 1,6,9,12,15,19,23,27,31,34 --sheet

build/stills/sheet_h.jpg와 sheet_v.jpg를 엽니다: 카메라가 액션을 바라보고 있는지, 레이블이 해당 조각 아래에 있는지, 텍스트가 줄바꿈되거나 잘리지 않는지, 강조가 제자리에 있는지, "처리 → 결과" 전환에 하얀 섬광이 없는지, 9:16에서 텍스트가 충분히 크고 자막이 하단 패널 위에 있는지 확인합니다. 키 프레임이 깔끔해질 때까지 수정합니다. 첫 번째 렌더링 전에 references/pitfalls.md를 참조하세요.

8. 음성 패킹

python3 <skill>/scripts/vo_pack.py plan.js            # --model 3.8 (Gemini 3.8 Flash TTS용), --voice female

out/voiceover/tts_text.txt와 tts_prompt.txt를 두 개의 개별 코드 블록 (텍스트는 텍스트 필드에, 프롬프트는 스타일 필드에)으로 제공하고, 음성 (러시아어 남성의 경우 Schedar를 첫 번째로), 한 번에 전체를 녹음해 달라는 요청, timing.md의 테이블을 제공합니다. 사용자가 같은 텍스트로 직접 녹음한 파일도 가능합니다. 규칙은 references/voiceover.md를 참조하세요.

9. 음성 도착 → 정렬

python3 <skill>/scripts/align_vo.py plan.js voice.wav        # build/vo_aligned.wav, cues.js, out/subtitles.srt, 보고서

build/align_report.md를 읽습니다: "귀로 확인 필요" 단어를 타임코드와 함께 사용자에게 알리고, 이동된 대사는 plan.js에서 수정하는 것이 좋습니다. 대사가 최종 프레임(hold)까지 지속되면 스크립트가 중지됩니다.

속도 조절은 제안일 뿐입니다. 영상이 "늘어지는" 경우 retime.py를 제안합니다 (읽기 속도 +4.5 %, 일시 정지 단축, 비디오, 음성, 음악, 자막을 위한 단일 시간 맵). 동의한 경우에만 메인 작업을 수행합니다.

10. 음악, 믹싱, 렌더링, 조립

python3 <skill>/scripts/music.py plan.js --out build/music.wav                         # music 섹션에 따른 초안 합성
python3 <skill>/scripts/prepare_music.py plan.js track.mp3 --end-align --out build/music.wav   # 또는 사용자 트랙
python3 <skill>/scripts/mix.py build/music.wav build/vo_aligned.wav --out build/mix.wav
python3 <skill>/scripts/render.py video.html video --fmt h --out build/h_subs.mp4
python3 <skill>/scripts/render.py video.html video --fmt h --qs subs=0 --out build/h.mp4
python3 <skill>/scripts/assemble.py --video build/h.mp4 --audio build/mix.wav --out out/<slug>_16x9.mp4
python3 <skill>/scripts/assemble.py --video build/h_subs.mp4 --audio build/mix.wav --out out/<slug>_16x9_subs.mp4
#   … 동일하게 --fmt v (_9x16, _9x16_subs) 브리핑에 세로가 있으면
python3 <skill>/scripts/verify_media.py plan.js out/*.mp4 --sheet

렌더링 시간은 형식당 비디오 1분에 약 2–5분입니다. 백그라운드에서 실행하거나 조각으로 나누어 실행합니다 (--start/--end, assemble.py --video part1 part2 …로 연결). 합성된 음악은 임시용입니다. 공개 영상의 경우 라이선스 트랙을 제안하세요. 세부 사항은 references/audio.md를 참조하세요. 요청 시 export_web.py (순수 MP4, WebVTT, 포스터, 최종 프레임)를 사용하여 웹사이트 플레이어용으로 내보낼 수 있습니다. 사용자의 별도 결정 없이 게시를 수행하지 마세요.

사용자에게 제공할 내용

• 선택한 형식의 파일: <slug>_16x9.mp4, <slug>_16x9_subs.mp4 (+ _9x16), SRT, 음성 패키지 (음성 녹음 전), 콘택트 시트. 파일 경로; 파일 전송 도구가 있으면 전송합니다.
• 간략히: 길이, 각 장면의 내용; 가상으로 만들어진 내용으로 제품 확인 필요; 음악이 임시적임; 확인되지 않은 사항 (예: 귀로 듣지 않음).
• 영상 폴더의 README 업데이트: 상태, 브리핑 결정 사항, 재조립 방법.
• 프로세스를 설명하거나 "혁신적인 AI"를 광고하지 마세요.

스킬 파일

templates/engine.js	프레임 엔진: 카메라, 커서, 클릭, 어두움 및 상위 레이어 #app2, 자막 (subs=0), 시간 맵 tmap.js, 미리보기 preview=1, 측정, markup/grad/plural
templates/base.css	브랜드 토큰 기반 컴포넌트: 헤더, 그라데이션 필드, 레이블, 툴팁, 어두운 처리, 결과, 팝오버, 채팅, 평가, 피날레
templates/brand/	중립 브랜드 프로필: brand.css, Manrope (OFL), 플레이스홀더 로고
templates/processing.js	중립 처리 애니메이션 (링, 강조 빛, 날아드는 카드)
templates/starter.html, plan.js	가상 제품 Demo의 약 36초 작동 데모 영상 "스마트 검색": 후크 → 레이블 입력 → 힌트 → 처리 → "왜" 포함 결과 → 저장 → 평가 → 피날레
scripts/	check_env, new_project, verify_scene, render, vo_pack, align_vo, retime, music, prepare_music, mix, assemble, verify_media, export_web
references/	brief.md · brand.md · storyboard.md · scenes.md · motion.md · engine.md · voiceover.md · audio.md · pitfalls.md