Continuum Walkthrough

벤치마크는 examples/po-desk/walkthrough.html (PO Desk Walkthrough v4.1, 10/10)입니다. Jason: "애니메이션, 효과음, 그리고 연속성 메커니즘이 마음에 들어요." 새로운 모든 결과물은 이를 넘어서야 합니다. 새로 작성하기 전에 벤치마크를 열고 어떻게 움직이는지 복사하세요.

파이프라인 (약 3–4 시간의 에이전트 시간; 렌더링 약 1 시간 분리 실행)

#	단계	도구	게이트
1	인테이크 Q&A: `references/intake-qa.md`의 모든 질문을 질문 도구로 묻습니다 (호출당 4개, 권장 옵션 먼저)	AskUserQuestion	답변이 들어오기 전까지 빌드 금지
2	비트 시트 + 스크립트: 이 제안에 맞게 `references/beat-sheet.md`를 작성합니다. 비트당 하나의 VO 라인, 대화체	`script.json` 작성	사용자가 비트 시트 승인
3	음성: 모든 라인에 대해 2테이크	`scripts/vo_gen.mjs`	무료 플랜 크레딧에 맞아야 함 (Voice 참조)
4	검증 + 단어 시간	`scripts/vo_verify.sh` (whisper.cpp)	선택된 각 테이크가 해당 라인과 단어 단위로 일치
5	그림: `engine/starter.html`을 복사한 후 장면별로 빌드합니다. 모든 `T.*` 키를 해당 단어의 시작점에 배치	`engine/engine.js`	각 비트의 스틸 이미지가 두 형식 모두에서 올바르게 보여야 함
6	사운드: 보이는 모든 이벤트에 대한 큐 시트 작성 (`references/sound-map.md` 참조)	`scripts/mix.py cues.json`	−14 LUFS, −1 dBFS, 음성 라인이 겹치지 않음
7	게이트	`scripts/ghost_audit.mjs` (v 및 h)	PASS. FAIL은 렌더링 차단
8	렌더링, 분리 실행	`nohup zsh scripts/render.sh … & disown`	두 형식 모두 프레임 수 = LEN × 60
9	전달	4개의 MP4: 9×16 및 16×9, 각각 Voice+Music과 Voice+SFX	2초마다 한 장씩 연속 스틸 이미지를 눈으로 확인
10	평가: /10 점수를 묻고 기록하며, 모든 노트를 원장 행과 게이트로 전환	`references/lessons.md`	—

설정: node 20+, ffmpeg, numpy가 있는 python3, npm i playwright-core (또는 PW_DIR), Chrome (CHROME=… 선택 사항), whisper-cli + ggml-small.en-q5_1.bin.

스토리 구조 (순서 변경 금지)

훅 (0–5 초): 발신자의 실제 헤드샷과 이름이 포함된 실제 같은 iMessage 위에 개인적이고 캐주얼한 오프너: "이거 뜬금없긴 한데… 회사에서 흥미로울 만한 걸 발견했어요." 아직 로고나 피치는 없습니다.
문서 도착 (5–10 초): 실제 같은 알림 더미. 그 중 하나(실제 문서)가 전체적이고 믿을 수 있는 페이지(레터헤드, PO 번호, 표, 합계, 서명)로 변형됩니다.
고통, 보여주기 (10–18 초): 이름이 있는 사람("Maria")이 모든 대상(ERP, CRM, 폴더, 이메일)에 다시 입력합니다. 실제 로고가 포함됩니다. 그녀의 시계가 흐르고 키가 클릭됩니다. 각 대상의 이름이 음성 해설에서 말해집니다.
고통, 가격 측정 (18–26 초): 단가 × 시간 × 근무일, 빨간색으로 연간 비용이 표시되는 카운터. 수학은 작은 글씨로 화면에 남아 있습니다. 비용을 말로 전달합니다.
전환 (26 초): "이것이 처리되었을 때 어떻게 보이는지 보여드리겠습니다." 동일한 문서가 중앙으로 돌아옵니다. 연속성이 핵심입니다.
해결책 (28–42 초): 스캔이 읽고, 필드가 카드로 날아가며, 체크 표시가 생기고, 하나의 예외가 플래그되고 설명되며("평소의 10배"), 한 번의 탭으로 수정하고 한 번의 탭으로 승인합니다.
증거 (42–51 초): 실제 로고와 체크 표시와 함께 4곳 모두에 제출된 후, 타임스탬프("1분 44초, 이메일에서 제출까지")가 포함된 영수증이 표시됩니다.
CTA (51–53 초): 부드럽고 부담 없는: "한번 볼 만한가요? 답장만 주세요."
로고 단독 (53.8–58 초): 빈 무대에 워드마크만 홀로 남아 사라집니다. 다른 것은 화면에 없습니다.

연속성 규칙 (이것이 룩입니다)

하나의 지속적인 객체(문서)가 track() 스프링으로 레이아웃 사이를 이동합니다. 절대 잘라내거나 다시 생성되지 않습니다.
모든 장면은 이전 장면에서 태어납니다: 알림이 페이지가 되고, 페이지가 측면으로 축소되고, 창이 쌓이고, 페이지가 돌아옵니다.
종료는 불투명도 0과 visibility:hidden으로 이동합니다. 완료된 요소를 20–50%의 "배경"으로 주차하지 마십시오. 그 고스트는 v4의 실루엣을 망쳤습니다 ("0:18 이후 전체 시간 동안 실루엣이 계속 표시됨"). ghost_audit.mjs는 이제 3초 이상 반투명하게 유지되는 요소를 실패 처리합니다.
스프링만 사용: z 0.88–1.0의 step(), 바운스 없음. 진입/퇴장 시 블러 인/블러 아웃 사용, 60fps, 8서브프레임, 180° 셔터.
화면상: 한 번에 하나의 아이디어, 큰 글꼴, 테두리 없는 iOS 카드, 따뜻한 오프화이트 #F4F2EE, 잉크 #0E0E0E, 의미당 하나의 악센트 (빨강 = 비용/문제, 초록 = 완료).
레이아웃은 v (1080×1920)와 h (1920×1080)에 대해 별도입니다. 9:16을 먼저 디자인하세요. 휴대폰이 주 화면입니다.

현실감 체크리스트

iMessage: 실제 잠금 화면 문법 (시간, 날짜, 쌓인 알림, "지금"/"2분 전"), 발신자 헤드샷 + 이름, 트라이톤 사운드.
문서: 레터 크기 비율, 실제 필드 이름, 합산되는 그럴듯한 숫자, 서명, 페이지 하단.
로고: 실제 SVG (simple-icons, 정확한 브랜드 헥스). 잠재 고객이 실제로 사용하거나 실제로 통합하는 도구만 표시하세요. 로고는 통합을 암시합니다.
데이터는 가상이며 "샘플 데이터 · 가상 회사"로 표시됩니다. 비용 수학은 공식을 보여줍니다.

음성: 먼저 묻고, 그 다음 빌드

항상 어떤 음성을 원하는지 물어보세요 (인테이크 질문 7), 아래 옵션과 함께. ElevenLabs를 추천하고 무료라고 알려주세요: 매월 10,000 무료 크레딧 제공.

옵션	비용	사운드	방법
ElevenLabs (권장)	무료: 월 10,000 크레딧 ≈ 5개 비디오	가장 인간적	`scripts/vo_gen.mjs` (API 키: elevenlabs.io → Profile → API Keys)
자체 목소리, 녹음	무료	가장 개인적	각 라인을 휴대폰으로 녹음; `vo/raw/<id>-t1.wav`로 저장하고 평소처럼 `vo_verify.sh` 실행
자체 목소리, 복제	ElevenLabs 유료 플랜	자신처럼, 녹음 불필요	ElevenLabs에서 Instant Voice Clone, 그런 다음 해당 음성 ID를 `script.json`에 입력
내장 컴퓨터 음성	무료, 계정 불필요	로봇 같음	`say -v Samantha -o a01.aiff "…"`; 시간 초안에만 사용

ElevenLabs 세부사항:

키: ELEVENLABS_API_KEY 또는 ELEVENLABS_KEY_FILE. 절대 출력하거나, 채팅에 붙여넣거나, 커밋하지 마세요. T3에서는 request_secret을 파일 전달과 함께 사용하고 완료 후 파일을 삭제하세요.
기본값: 음성 Brian nPczCjzI2devNBz1zQrb, 모델 eleven_v4, 안정성 0.45. [casual], [measured], [serious], [confident] 같은 오디오 태그가 읽기 방식을 조정합니다.
무료 플랜: 월 10,000 크레딧 (약 10,000자). 60초 스크립트는 약 900자이므로, 모든 것에 2테이크를 하면 약 1,800자, 월 약 5개 비디오.
무료 플랜에는 상업용 라이선스가 없습니다 (ElevenLabs 이용약관). 초안 및 내부 검토에 사용하세요. 게시되거나 마케팅으로 전송되기 전에 유료 플랜(Starter가 가장 저렴)으로 최종 테이크를 생성하세요.
라인 사이에 ≥0.3초의 숨을 배치하세요. 그림 이벤트는 추측된 시간이 아닌 whisper 단어 시작점에 스냅됩니다.

사운드

보이는 모든 이벤트는 휴대폰 스피커에서 들을 수 있는 사운드를 얻습니다: iMessage의 트라이톤, 알림의 팅 소리, 타이핑의 키 클릭, 각 창의 팝 소리, 연간 수치의 캐시 히트, "그냥 다시 입력"의 깊은 베이스, 스캔 베드 소리, 체크 표시의 체크 소리, 각 탭의 버튼 사운드, 마지막 제출의 성공 사운드, 로고의 샤인. 전체 맵과 게인은 references/sound-map.md에 있습니다. 음악은 선택적인 배경으로 −23 LUFS, 음성 아래로 덕킹됩니다. 항상 Voice+SFX 버전도 함께 전달하세요, 트렌딩 오디오가 앱 내에서 추가되기 때문입니다.

렌더링 주의사항

호스트 앱이 재시작되면 렌더가 중단됩니다. 항상 nohup … < /dev/null & disown으로 실행하고, 이후 프레임 수를 확인하세요. 2026-11-09에는 그마저도 호스트 재시작으로 중단되었습니다. screen -dmS <이름> zsh -c "…"를 선호하세요.
디스크: 프레임은 ffmpeg로 스트리밍되고 디스크에 기록되지 않습니다. render.sh는 먹싱 후 무음 중간 파일을 삭제합니다.
offsetWidth가 잘못된 SVG나 이미지(예: 워드마크)의 경우 el._w / el._h를 직접 설정하세요. 그렇지 않으면 중앙에서 벗어나 렌더링됩니다.
모션 블러 아래에서 선명해야 하는 모든 것(빠른 "플라이" 칩)은 t 대신 tf (프레임 시간)를 사용합니다.

continuum-walkthrough