워크스루 비디오
실행 중인 웹 앱을 완성된 내레이터 비디오로 변환하며, 앱이 변경될 때마다 다시 생성할 수 있습니다. 모든 것이 로컬에서 실행됩니다: 비디오 편집기나 유료 서비스가 필요 없습니다.
내레이터 텍스트 -> 로컬 음성 -> 장면별 WAV 하나 + 자막 타이밍
실제 앱 -> Playwright 장면 -> 클립 + 마커 시간 -> assemble.py -> walkthrough.mp4 + .srt
이렇게 작동하는 이유: 영상은 실제 앱이므로 항상 진실입니다. 느린 단계(AI 응답, 페이지 로드)는 녹화 중에 잘라냅니다. 각 장면에서 기록된 "마커"를 통해 조립기가 일치하는 단어에 핵심 순간을 배치할 수 있습니다.
시작하기 전에
- 누락된 것만 요청하세요: 앱이 무엇인지, 비디오가 무엇을 보여줘야 하는지, 시청자는 누구인지, 목표 길이(2~4분이 좋음), 분위기.
- 도구 확인(
references/setup.md참조): Node 20+, Chromium이 포함된 Playwright,xfade,zoompan,loudnorm,libx264가 포함된 FFmpeg, Python 3.11 또는 3.12와kokoro-onnx. 음성(약 350MB)은 리포지토리 외부(예:~/video-tools)에 설치하세요. - 작업 파일을 사용자 프로젝트에 복사하고 생성된 출력물을 git에서 제외하세요:
mkdir -p e2e/video-kit && cp -R <이 스킬>/scripts/. e2e/video-kit/ && cp <이 스킬>/templates/*.mjs e2e/video-kit/ printf '\ne2e/video-kit/clips/\ne2e/video-kit/vo/\ne2e/video-kit/build/\ne2e/video-kit/*.mp4\ne2e/video-kit/*.srt\ne2e/video-kit/spec.json\ne2e/video-kit/.*.json\n' >> .gitignore references/toolkit-api.md를 한 번 읽으세요. 여기에는 리코더 헬퍼와PLAN구문이 문서화되어 있습니다.rec.mjs,speak.py,overlays.mjs또는assemble.py를 다시 작성하지 말고, 가이드가 명명한 부분만 편집하세요.
워크플로: 세 게이트
각 게이트에서 멈추고 사용자를 기다리세요. 녹화 전에는 문구와 구조를 변경하는 것이 저렴하지만, 녹화 후에는 비용이 많이 듭니다.
게이트 1: 스토리보드. 프로젝트(문서, 라우트, 기존 Playwright 테스트)를 살펴보고 812개의 장면을 제안하세요. 각각에 대해: 화면에 무엇이 있는지, 내레이션(2035단어, 평이하게), 어떻게 녹화할 것인지. 사용자가 맥락을 원하면 오프닝 슬라이드를 포함하세요: 문제, 수행 또는 감사한 내용, 솔루션 및 스택. 앱이 실제로 하지 않는 것을 설명하지 말고, 확실하지 않으면 질문하세요.
게이트 2: 문구 및 음성. chunks.txt를 장면|텍스트 줄로 작성하세요. 각 줄은 약 12단어 미만입니다(각 줄이 하나의 자막이 됩니다). 제품 이름과 약어를 speak.py의 PRONOUNCE에 추가하세요. python speak.py를 실행하고 각 장면의 길이를 보고하세요. 사용자가 듣고 녹화 전에 승인합니다.
게이트 3: 녹화, 조립, 확인.
- 장면을
scenes.mjs에 작성하세요(scenes.template.mjs에서 시작). 장면당 하나의 클립이며, 기본 계획과 일치하도록scene-N으로 이름을 지정합니다. 백그라운드에서 한 번에 한 장면씩 녹화합니다:node scenes.mjs <이름>. 실패한 것만 다시 녹화하세요. - 슬라이드를 사용하는 경우 슬라이드를 렌더링하고(
slides.template.mjs),assemble.py에서PLAN과LABEL을 채우세요: 어떤 클립이 어떤 장면에 표시되는지, 어떤 마커가 어떤 내레이션 줄에 해당하는지. python assemble.py all을 실행하세요.walkthrough.mp4와walkthrough.srt를 생성합니다.- 여러 개별 이미지 대신 하나의 콘택트 시트(장면당 1~2프레임, 타일형)에서 결과를 확인하세요: 이름, 날짜, 자막, 잘린 부분 없음, 개인 정보 없음. 수정, 재조립 후 전달하세요.
중요한 규칙
- 개인 정보 보호. 데모 또는 테스트 계정을 사용하세요. 실제 사람, 이메일, 전화번호, 계정 이름, 키, ID, 토큰 또는 결제 정보를 보여주는 것은 흐리게 처리하거나 가리세요(
opts.cover,opts.init). 비밀번호를 절대 처리하지 마세요: 장면에 로그인이 필요한 경우, 사용자가 가시 브라우저에서 한 번 수동으로 로그인하게 하고(templates/auth.template.mjs), 저장된 세션을 재사용하세요. 카메라에 비밀번호나 2FA 코드를 입력하거나 표시하지 마세요..env, 저장된 로그인 및 브라우저 프로필을 git에서 제외하세요. - 실제 계정으로 작업하지 마세요. 라이브 계정에서 보내기, 게시, 예약 또는 삭제하는 작업을 절대 클릭하지 마세요. 버튼 위에 마우스를 올려놓고 그 기능을 설명하세요.
- 허위 기능 없음. 코드와 실행 중인 앱이 실제로 하는 것만 설명하세요.
- 음성 및 마이크 오디오는 브라우저에서 캡처할 수 없습니다. 인터페이스를 보여주고 어떤 일이 발생하는지 설명하세요.
- 서버를 시작하기 전에 포트를 확인하고, 시작한 것은 중지하세요. 1분 이상 걸리는 작업(녹화, 음성, 조립)은 백그라운드에서 실행하고, 루프에서 폴링하는 대신 완료를 기다리세요.
- 답변을 간결하게 유지하세요. 수행한 작업, 파일 경로 및 확인할 수 없는 사항을 보고하세요.
실제 사용에서 얻은 교훈
장면을 작성하기 전에 references/lessons.md를 읽으세요. 요약: 시드 데이터가 실제로 존재하는지 확인하세요(랜덤 테스트 데이터가 오래된 데이터와 충돌할 수 있음). 느린 페이지가 그려졌음을 증명하는 로케이터를 기다리세요. 입력하기 전에 저장된 검색 필터를 지우세요. 팝업을 닫으세요. 레코드로 직접 연결하세요. 필수적이지 않은 요소를 래핑하여 하나의 실패가 장면 전체를 중단시키지 않도록 하세요. 슬라이드 하단 200px는 자막을 위해 비워두세요.
파일
scripts/rec.mjs리코더: 부드러운 커서 이동, 클릭 파동 효과, 확대/축소, 마커, 대기 시간을 줄이는think().scripts/speak.py내레이션을 WAV 및 자막 타이밍으로 변환.scripts/overlays.mjs자막, 레이블 및 제목 카드를 이미지로 생성.scripts/assemble.py클립을 음성에 맞춰 재시간 조정, 결합, 오버레이, 오디오 믹싱, MP4 및 SRT 작성.templates/장면, 저장된 로그인, 슬라이드 및 내레이션 파일의 시작점.references/툴킷 가이드, 설정 및 교훈.
무언가 실패했을 때
- 음성 합성이
espeakng_loader/phontab: No such file오류로 실패:references/setup.md를 참조하세요. - 장면이 텍스트를 기다리다 시간 초과: 페이지가 완전히 그려지지 않았거나, 저장된 필터가 항목을 숨기고 있을 수 있습니다. 실패 지점에서 스크린샷을 찍어 확인하세요.
- 비디오에 대기 시간이 표시됨: 느린 단계를
think()로 감싸세요. - 화면과 음성이 어긋남: 장면을 다시 녹화하세요. 스크립트가 변경될 때마다 마커 시간이 변경되기 때문입니다.