제품 데모
이 리포지토리의 앱을 Node.js + Playwright + FFmpeg만을 사용하여 점수화된, 자막이 있는, 프레임 단위 완벽한 데모 비디오로 변환합니다. 파이프라인은 결정론적입니다. 즉, 깨끗한 체크아웃에서 전체 데모가 다시 렌더링되고 재점수화됩니다.
파이프라인 순서
| 단계 | 레시피 | 출력 |
|---|---|---|
| 1. 스크립트 | 01-script.md | 장면 테이블, 타임코드가 포함된 VO 라인, 리듬 그리드 |
| 2. 독립형 UI | 02-standalone-ui.md | 정적 폴더에서 렌더링되는 앱 구성 요소 |
| 3. 컴포지션 | 03-composition.md | 클록의 순수 함수로서의 하나의 React 트리 |
| 4. 녹화 | 04-record.md | PNG 프레임 → 시각적으로 무손실 H.264 마스터 |
| 5. 자막 + VO | 05-captions-vo.md | SRT/VTT 사이드카, 타임코드가 포함된 음성 해설 스크립트 |
| 6. 사운드 | 06-sound.md | sfx-cues.json, 라이브 미리보기 플레이어, 자동 믹서 |
| 7. 음악 | 07-music.md | 드롭에서 시작되는 EQ 조각, 덕킹된 배경 음악 |
| 8. 조립 | 08-assemble.md | 인트로 + 전환 + 스템 → 최종 내보내기 |
단계를 순서대로 진행하세요. 각 단계는 이전 단계의 출력을 사용합니다. 5-8단계는 무음 초안의 경우 선택 사항이지만, 출시 품질의 영화를 위해서는 필수입니다.
하나의 시작 프롬프트가 모든 것을 실행합니다
사용자가 데모를 요청하면, 모든 8단계를 직접 조율하세요. 사용자에게 단계 목록을 건네거나 다음 프롬프트를 가져오라고 말하지 마세요. 대신, 사용자만이 제공할 수 있는 것이 정확히 필요한 순간에 대화에서 직접 질문하고, 질문이 몇 초 만에 답변 가능하도록 아티팩트를 첨부하세요.
- 1단계 후: 장면 테이블과 음성 해설 스크립트를 보여주고, 코드를 작성하기 전에 승인을 요청하세요. 스크립트의 타이밍을 다시 조정하는 것은 저렴하지만, 렌더링된 영화의 타이밍을 다시 조정하는 것은 그렇지 않습니다.
- 연기 렌더링 후: 4개의 스팟 프레임을 보여주고, 긴 전체 렌더링 전에 진행 승인을 요청하세요.
- 5단계: 붙여넣기 준비가 된 태그된 음성 해설 블록(동기화 메모 없음)을 전달하고 생성된 오디오 파일 경로를 요청하세요.
- 7단계: 작성한 음악 생성기 프롬프트를 전달하고 생성된 파일 경로를 요청하세요. 사용자가 도구에 한 번만 이동하는 것을 선호하는 경우 두 요청은 3단계의 요청과 함께 배치될 수 있습니다.
- 점수화된 미리보기 후: 최종 마스터를 내보내기 전에 청취할 수 있도록 작은 컷을 제공하세요.
질문 사이에는 확인 없이 진행하세요. 사용자가 선택적 자산(음성, 음악)을 거부하면, 지연시키지 말고 그것 없이 출하하세요.
진행 상황 추적 (재개 가능한 실행)
대상 리포지토리에 demo/PROGRESS.md를 유지하세요: 상태(todo / in progress / done)와 생성된 아티팩트 경로가 포함된 단계당 한 줄. 모든 세션에서 먼저 읽으세요. 절반 완성된 파이프라인은 다시 시작하는 대신 마지막 질문부터 재개됩니다. 모든 단계 후에 업데이트하세요.
결정 규칙
- 사용자에게 스크립트나 스토리가 없는 경우 → 01부터 시작하세요. 절대 코드를 작성하는 것부터 시작하지 마세요.
- 사용자에게 끊기는 비디오가 있는 경우 → 04만 해당(프레임별 녹화로 해결됨).
- 사용자가 기존 비디오에 사운드/SFX를 원하는 경우 → 06(큐 파일 + 믹서), 그 다음 음악이 필요하면 07.
- 사용자의 데모가 "가짜처럼 느껴지는" 경우 → 01 및 03의 정직성 규칙(실제 데이터, 합계 일치).
- 사용자가 길이/형태를 묻는 경우 → 45-60초, 장면당 하나의 주장, 약 6개 장면, 아크: 문제 → 드롭 → 마법 → 상호 작용 → 증명 → 브랜드.
- 음성 복제가 느리고 평평하게 들리는 경우 → 05의 수정 사항.
- SFX가 늦게 떨어지거나 묻히는 경우 → 측정된 히트 오프셋 + 06의 피크 정규화.
비협상 사항 (요청되지 않더라도 시행)
- 정직한 데이터. 픽스처는 실제여야 합니다: 실제 항목, 인쇄된 가격, 일치하는 합계. 더 둥근 숫자를 절대 만들어내지 마세요.
- 페이드 없음. 모든 것은 스탬프, 슬라이드, 찢기 또는 스냅 방식입니다. 페이드는 사과로 읽힙니다. 이징은 최대 3개의 공유 헬퍼에만 존재합니다.
- 절대 화면 녹화하지 마세요. 시크 계약을 통해 프레임별로 렌더링하세요(04).
- 강제된 사운드는 사운드가 없는 것보다 못합니다. 분당 최대 약 10개 큐, 스토리 전환당 하나, 연속 반복 금지.
- 두 개의 마스터. 자막이 포함된 것과 깨끗한 것. 하나의 컴포지션에서
window.__NO_CAPTIONS플래그를 통해. - 완전한 검정색 없음. 모든 어두운 장면은 제품 자체 아트나 배경화면 위에 위치하며, 흐리게 처리되고 그레이딩됩니다. 첫 번째 프레임은 썸네일입니다. 완전한 검정색은 제품의 실제 표면인 경우에만 사용됩니다(03).
템플릿
templates/의 작업 스크립트: record.mjs (결정론적 playwright 프레임 렌더러, 재개 가능), mix-audio.mjs (큐 기반 ffmpeg 믹서; --vo는 리타임된 음성 해설 스템, --bgm은 배경 음악용), retime-vo.mjs (생성된 읽기를 무음에서 자르고 각 구절을 작성된 타임코드에 배치), sfx-cues.example.json (실제 10-큐 스코어), package.json (npm 스크립트). 대상 리포지토리의 demo/ 디렉토리에 복사하고 경로를 조정하세요. 각 레시피는 사용 시점을 알려줍니다.
보완 스킬
대상 리포지토리가 Remotion 또는 ElevenLabs를 사용하는 경우, 해당 공식 스킬도 설치하세요. 이 스킬은 파이프라인과 취향을 다루고, 그들의 스킬은 API를 다룹니다:
npx skills add remotion-dev/skills
npx skills add elevenlabs/skills
사용자가 받는 것 (영화 외에도)
두 개의 붙여넣기 준비 아티팩트로, 인간의 작업량은 정확히 두 번의 붙여넣기 작업입니다: 음성 도구용 태그된 음성 해설 블록(05)과 음악 생성기용 스타일 프롬프트(07). 사용자가 둘 중 하나를 직접 작성하도록 절대 만들지 마세요.
참고 출력
4개의 데모가 이 파이프라인을 관련 없는 제품에서 입증합니다: Vouch 데모(54.3초, 영수증 분할), Excalidraw 데모(35.5초, 실제 @excalidraw/excalidraw npm 구성 요소로 촬영, 이 리포지토리의 examples/excalidraw 아래 소스), Asakiri Studio(54초, Tauri+React 코스 편집기, esbuild로 번들된 실제 구성 요소), Colosseum(54초, Qt/QML Windows 미디어 앱, 자체 토큰과 스크린샷에서 재구성된 표면; 02의 native-app 경로 참조). Vouch 리포지토리 github.com/Anshgrover23/vouch에는 전체 작동 demo/ 디렉토리, 컴포지션, 공급업체 런타임, 큐 파일, 자막이 참조 구현으로 포함되어 있습니다. 모든 숫자와 실패 사례가 포함된 매뉴얼: https://anshgrover23.github.io/product-demo-playbook/