데모 영상
데모 영상은 서비스를 실제로 써 보는 과정을 소비자 눈높이로 보여 주는 것이다. 5분 이하. "이 과정을 영상으로 찍고 쉽게 설명을 붙여 줘" 한 줄이면 아래 기본값으로 끝까지 만든다.
기본값: Playwright 녹화(1280×720) · 내레이션은 자막(SRT + 번인), 음성은 요청할 때만 · 결과는 mp4 + srt.
서비스 띄우는 법·테스트 계정·영상 스타일은 프로젝트 CLAUDE.md를 따른다.
순서
-
장면 나누기 — 요청을 사용자가 겪는 흐름으로 풀어 3~6장면. 장면마다 "보이는 것"과 "한두 문장 설명".
-
실제로 완주하며 녹화 — 서비스를 띄우고 Playwright
recordVideo(viewport와 같은 크기)로 처음부터 끝까지 실제 조작한다. 사람 속도로(slowMo300ms 안팎), 클릭 뒤에는 결과가 화면에 보일 때까지 기다린다. 영상 파일은 context를 닫아야 완성된다. 실패한 장면만 다시 찍는다. 장면마다 녹화 기준 시각(시작·결과 보임·끝)을 적어 둔다. -
자막 쓰기 — 내부 용어·코드명 없이 "무엇이 좋아지는가"를 말한다. 장면당 1~2문장, 결과가 보인 뒤에 말한다.
- 나쁨: "DMN rule 3의 hit policy를 FIRST로 바꾸는 PR을 생성합니다."
- 좋음: "겹치던 규칙이 정리돼, 같은 주문에 할인이 두 번 붙지 않아요."
-
5분 이하로 편집 — 로딩·대기 구간만 잘라내거나 빠르게 한다. 조작 순간과 결과를 읽는 2~3초는 그대로 둔다. 그래도 넘으면 장면을 합친다. 요청에 나온 핵심 단계는 빼지 않는다.
-
합성 — ffmpeg로 구간을 잇고, 최종 편집본 기준 시각으로 SRT를 다시 계산해 번인한다. Windows는 작업 폴더로 이동해 상대 경로로 넣는다(경로의
:이스케이프 문제). 글꼴은 WindowsMalgun Gothic, Linux는 설치된 한글 글꼴(예:Noto Sans CJK KR).ffmpeg -i edited.mp4 -vf "subtitles=demo.srt:force_style='FontName=Malgun Gothic,FontSize=22'" -c:a copy demo.mp4 -
확인 —
ffprobe -v error -show_entries format=duration -of csv=p=0 demo.mp4로 300초 이하인지 본다. 자막 몇 개의 시각에서 프레임을 뽑아(ffmpeg -ss <초> -i demo.mp4 -frames:v 1 f_<초>.png) 직접 열어 자막이 말하는 것이 화면에 보이는지, 한글이 깨지지 않았는지 확인한다.
지킬 것
- 가짜 화면·mock 응답·DOM 값 주입·force 클릭으로 만든 장면은 쓰지 않는다. 완주가 안 되면 안 된다고 보고한다.
- 실제 PR 병합·운영 데이터 변경·발송·결제처럼 되돌리기 어려운 조작은 프로젝트가 정한 테스트 환경에서만 한다. 그런 환경이 없으면 그 장면 직전에 사용자에게 묻는다. 비밀번호·토큰이 화면·자막에 보이지 않게 한다.
- 보고: mp4·srt 경로, 실제 길이, 장면별 설명, 눈으로 확인한 프레임, 확인하지 못한 것. 게시·전송은 따로 요청받을 때만.