사이트-투-릴 (Site to Reel)

사이트-투-릴 (Site to Reel)은(는) 무엇을 하나요?

웹사이트 그 자체를 사용하여 짧은 수직 영화를 만듭니다: 실제 페이지, 실제 클릭, 실제 상태. 모든 프레임은 하나의 캔버스 렌더러에 의해 시간의 순수 함수로 그려지고 오프라인에서 캡처된 후 인코딩됩니다. 이 스킬은 Dawas Shlef 릴에서 추출된 하우스 워크플로입니다. examples/dawas-shlef/에는 해당 프로젝트의 타임라인, 음성 라인, 캡처 스크립트 및 리뷰 노트가 작업 참고 자료로 포함되어 있습니다. 참고 자료로만 취급하십시오. 다른 제품에 해당 프로젝트의 장면 목록을 복사하지 마십시오.

함께 로드할 것:

• video-director – 제작 원리 및 scripts/check_timeline.py와 scripts/qa_video.py 스크립트를 위해.
• playwright-cli – 모든 브라우저 단계를 위해.

스킬이 없으면 그렇게 말하십시오. 임시방편으로 우회하지 마십시오.

양보 불가 사항

이 스킬을 만든 브리프에서 비롯된 것이며 모든 프로젝트에 적용됩니다:

1. 실제 UI만. 라이브 로컬 사이트를 캡처합니다. 실제 컨트롤을 클릭하고 실제 결과를 캡처하여 상태 변화를 보여주며 절대 그려서 보여주지 마십시오. 화면, 개수 또는 알림을 임의로 만들지 마십시오.
2. 사용자의 환경을 원래대로 남겨둡니다.
   • 사이트를 재설계, 수정, 배포 또는 게시하지 마십시오.
   • 캠페인을 시작하거나 양식을 제출하지 마십시오.
   • 북마크 하나와 같은 데모 데이터만 만들고 작업 후 제거하십시오. 저장소 상태를 작업 전후에 기록하십시오.
   • 기존 사용자 데이터를 절대 지우지 마십시오.
   • 시작한 서버와 브라우저 세션을 중지하십시오. 사용자가 승인하지 않는 한 사용자의 자체 사이트 서버는 계속 실행된 상태로 두십시오.
3. 화면에는 localhost가 아닌 공개 URL을 표시합니다. URL은 초반(3초 이내)과 엔드 카드에 표시됩니다.
4. 주장은 brand.json → claims 안에만 있어야 합니다. 단어는 출처보다 강할 수 없습니다. 브리프에 명시되지 않은 "계정 불필요" 같은 것은 비평가가 지적해야 합니다.
5. 음성.
   • 타인의 목소리를 복제하지 마십시오.
   • 생성된 음성이 실제 사람의 녹음이라고 암시하지 마십시오.
   • 내레이터는 창작자를 3인칭으로만 언급합니다(예: "X가 만들었습니다", "나는 X입니다" 금지). 화면 1인칭 문구는 이에 맞게 변경합니다.
   • 게시 시 AI 오디오임을 표시하도록 사용자에게 알리십시오.
6. 완성되지 않은 컷을 최종본이라고 부르지 마십시오. 무음 컷은 "애니메틱"입니다. 파일은 사운드가 존재하고 QA를 통과했을 때만 *-final로 명명합니다.
7. 측정하지 않은 것을 주장하지 마십시오. 출력물을 보거나 들을 수 없습니다. 실행한 검사와 확인한 스틸을 보고하고 TTS 발음이나 실시간 느낌 등 아무도 보거나 듣지 못한 것은 솔직히 말하십시오.
8. 사용자를 대신하여 게시하거나 게시하지 마십시오. 요청 시 GitHub에 업로드할 수 있지만 Instagram 및 기타 소셜 미디어에 게시하는 것은 항상 사용자의 몫입니다.

워크플로 (세 가지 승인 게이트)

단계	당신이 만드는 것	게이트
0. 인테이크	한 라운드 질문(아래 참조). 브리프, 에셋 및 사이트를 읽고 brand.json을 작성합니다.
1. 기획 및 룩	TREATMENT.md – 한 문장 아이디어, 후킹, 읽기 포함 비트 시트, 영웅 순간 및 주장. 읽기 전용 사이트 서베이. 실제 렌더러에서 2–4개의 스타일프레임. 첫 timeline.json.	사용자 승인
2. 무음 애니메틱	캡처, 전체 타임라인, 렌더링 및 인코딩된 *-animatic-silent.mp4. QA. 인코딩된 MP4에서 가져온 컨택트 시트, 전환 시트, 디테일 시트 및 스토리보드. 한 번의 수정 라운드가 있는 비평가 리뷰. 리뷰 노트.	사용자가 페이싱과 프레이밍 승인
3. 최종본	승인된 영상에 맞춘 내레이션(녹음 또는 사용자가 선택한 TTS). 배경 음악 및 SFX. −16 LUFS 및 ≤ −1 dBTP 믹스. 자막. *-final.mp4. QA. 수정 라운드 한 번 포함 비평가. 커버. 업데이트된 노트.	사용자가 듣고 승인

사용자가 있을 때는 ask-first 모드를 사용하십시오. 한 번 묻고 나머지 모든 결정을 직접 내린 후 리뷰 노트에 결정: … 이유: …로 기록하여 각 결정을 한 번의 답변으로 되돌릴 수 있도록 하십시오.

인테이크 질문 (한 라운드, 권장 옵션 우선)

브리프와 사이트가 이미 답하지 않은 것만 묻습니다.

1. 무엇을 누구에게: 영화가 반드시 전달해야 할 한 가지, 대상 청중, 캡션 언어 및 방언.
2. 플랫폼 및 길이: Instagram Reels 9:16 @ 1080×1920(기본값), 45초 메인 컷과 별도로 편집된 15초 버전, 16:9 필요 여부(기본값 아니오).
3. 사실: 허용된 주장, 정확한 브랜드 철자, 창작자 이름, 공개 URL.
4. 에셋: 브랜드 색상 및 폰트, 로고 또는 워드마크, 보여줄 사이트 상태 및 기능.
5. 사운드: 사용자가 음성 녹음(선호) 또는 공개 포함 TTS, 또는 음악+캡션만. 음악 권리에 대해 문의합니다.
6. 경계: 건드리지 말아야 할 것(사이트 서버, 기존 사용자 데이터, 양식).

"지금 영상 만들어줘" 요청에 녹음이 없으면 사운드 확보 방법을 묻습니다. 옵션은: 음성 없이 음악+캡션, 사용자 녹음, 생성된 내레이터. TTS를 선택하면 설치 전에 무엇이 설치되어 있는지 확인합니다. edge-tts를 설치하면 스크립트 텍스트가 Microsoft의 온라인 서비스로 전송되므로 사용자에게 먼저 확인을 받고 음성을 선택하도록 합니다.

프로젝트 레이아웃

templates/project/를 새 프로젝트 폴더로 복사한 후 편집합니다:

brand.json            이름, 워드마크, 창작자, 공개 URL, 팔레트 토큰, 폰트, 주장, neverSay, 음성, 안전 영역
reel.html, reel.js    렌더러(브랜드 중립; 타임라인에서 모든 것을 읽음)
vo-lines.json         VO 라인: [시작 초, 텍스트, 종료 초]
assets/fonts, assets/icons, assets/previews
capture3x/            캡처 + boxes.json (tools/capture.js 출력에서 작성됨)
tools/
  survey.js           읽기 전용 페이지 서베이 (제목, 링크, y 위치, 스토리지 키)
  capture.js          캡처 + 콜아웃 박스, 데모 데이터 생성 및 복원
  cli3x.config.json / cli4x.config.json / render.config.json   playwright-cli 설정
  build_timelines.py  brand.json(+ vo/*.json)에서 timeline.json + timeline-ad15.json 생성
  styleframes.js, stills.js, render-frames.js, shot-storyboard.js   run-code 스크립트
  make_vo.py, make_audio.py, make_srt.py                            음성, 사운드, 자막
  review_frames.py, storyboard.py                                   인코딩된 MP4에서 추출 시트

명령어

CLI는 node "<argo>/node_modules/playwright/cli.js" cli 또는 playwright-cli가 설치된 경우 단순 playwright-cli를 의미합니다. 모든 run-code 스크립트는 단일 async page => {}입니다. 매개변수는 페이지 URL 쿼리에 전달되며 --raw는 반환된 값만 출력합니다.

# 캡처 (로컬 사이트가 실행 중이어야 함; 깨끗한 인메모리 세션)
CLI -s=cap open --config=tools/cli3x.config.json "about:blank"
CLI -s=cap --raw run-code --filename=tools/survey.js
CLI -s=cap --raw run-code --filename=tools/capture.js      # {"caps": ...}를 capture3x/boxes.json에 저장
CLI -s=cap close

# 타임라인 + 게이트
python -X utf8 tools/build_timelines.py
python -X utf8 ~/.claude/skills/video-director/scripts/check_timeline.py timeline.json

# 렌더링 (임시 정적 서버, 사용 후 중지)
python -m http.server 4380 --bind 127.0.0.1
CLI -s=render open --config=tools/render.config.json "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<절대 프레임 디렉토리>&times=1.2,24.5"
CLI -s=render --raw run-code --filename=tools/styleframes.js
CLI -s=render goto "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<절대 프레임 디렉토리>&from=0&to=1349"
CLI -s=render --raw run-code --filename=tools/render-frames.js   # 긴 영화: 백그라운드 또는 청크로 실행

# 인코딩 (무음 애니메틱; 최종본은 -i out/audio/<영화>-mix.wav -map 0:v -map 1:a -c:a aac -b:a 192k -ar 48000 -t <지속시간> 추가)
ffmpeg -framerate 30 -start_number 0 -i <프레임>/frame_%04d.png -frames:v 1350 -c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p -r 30 -vf setsar=1 -movflags +faststart out/reel-animatic-silent.mp4

# 측정 및 리뷰 (항상 인코딩된 MP4에서 수행)
python -X utf8 ~/.claude/skills/video-director/scripts/qa_video.py out/reel-final.mp4 --beats timeline.json --lufs -16 --tp -1 --out out/qa-reel
python -X utf8 tools/review_frames.py out/reel-final.mp4 timeline.json reel
python -X utf8 tools/storyboard.py out/reel-final.mp4 timeline.json reel
CLI -s=render goto "http://127.0.0.1:4380/out/storyboard-reel.html?shot=<절대 경로>/out/storyboard-explained.png"
CLI -s=render --raw run-code --filename=tools/shot-storyboard.js

# 3단계
python -X utf8 tools/make_vo.py && python -X utf8 tools/build_timelines.py && python -X utf8 tools/make_audio.py && python -X utf8 tools/make_srt.py

Windows에서는 Python을 python -X utf8로 실행하고 PYTHONIOENCODING=utf-8을 사용하십시오. 그렇지 않으면 아랍어 출력이 깨집니다.

리뷰 루프

• 비평가. 2단계 후와 3단계 후에, 새로운 컨텍스트 서브에이전트에게 MP4, 타임라인, 시트 및 QA 보고서를 제공합니다. 순위 목록을 요청합니다: 반드시 수정, 수정 권장, 사소한 것. 각각 타임코드와 구체적인 수정 방법 포함. 읽기 전용, 500단어 이하, 임의의 문제 생성 금지.
• 한 번의 수정 라운드. 수정 라운드를 한 번 적용한 후 인코딩된 MP4에서 다시 확인합니다.
• 범위 제한 수정. 일부 프레임으로 제한된 수정의 경우 해당 프레임을 백업하고 해당 범위만 다시 렌더링한 후 백업과 차이 비교합니다. 변경 범위 밖의 프레임은 재인코딩 전에 바이트 동일해야 합니다.
• 비평가의 보고서는 모델 출력입니다. 사용자 승인으로 간주되지 않습니다.

산출물

• out/<영화>-animatic-silent.mp4 (2단계) 및 out/<영화>-final.mp4 (3단계).
• out/storyboard-explained.png, out/contact-sheet-<영화>.jpg, out/review/, out/qa-*/.
• timeline*.json, vo-lines.json, vo/, out/audio/ (믹스 + 스템), out/subtitles-*.srt.
• out/cover/reel-cover.jpg 및 3:4 그리드 미리보기.
• voiceover-script-*.txt – 음성(엔진, 음성, 공개 여부) 또는 녹음되지 않음으로 표시.
• review-notes.md: ffprobe 메타데이터, 구조, 모든 검사(번호 포함), 비평가 표 및 수정 사항, 결정, 명확히 명시된 한계, 정확한 명령어, 사용자에게 남겨진 결정. 템플릿은 references/report-template.md.

참고 자료 (해당 단계에 도달하면 읽기)

• references/motion.md: 카메라 모델, 전환, 텍스트 타이밍, 콜아웃, 캡션, 엔드 카드, 홀드.
• references/capture.md: 서베이, 캡처, 실제 상태 교체, 박스, 데모 데이터 복원.
• references/sound-and-voice.md: 녹음 vs TTS, 영상에 VO 맞추기, 영웅 침묵, 배경 음악, 믹스, 자막.
• references/instagram-reels.md: 형식, 안전 영역, 후크, CTA 문구, 커버, AI 라벨.
• references/gotchas.md: 발생한 모든 버그와 해결 방법.
• references/report-template.md: review-notes 및 최종 메시지 템플릿.
• examples/dawas-shlef/: 전체 작업 예제 (캡처와 폰트 없음, 재캡처 필요).