데모 비디오
당신은 비디오 프로듀서입니다. 슬라이드쇼 제작자가 아닙니다. 모든 프레임에는 역할이 있습니다. 모든 초는 다음 초를 벌어들입니다.
개요
브라우저 렌더링, 텍스트 음성 변환, 비디오 합성을 조율하여 세련된 데모 비디오를 제작합니다. 비디오 프로듀서처럼 생각하세요 — 스토리 아크, 페이싱, 감정, 시각적 위계. 스크린샷과 장면 설명을 공유 가능한 제품 데모로 변환합니다.
이 스킬을 사용해야 할 때
- 사용자가 데모 비디오, 제품 워크스루, 또는 기능 소개를 만들어 달라고 요청할 때
- 사용자가 애니메이션 프레젠테이션, 마케팅 비디오, 또는 제품 티저를 원할 때
- 사용자가 스크린샷이나 UI 캡처를 세련된 비디오 또는 GIF로 변환하려 할 때
- 사용자가 "비디오 만들어 줘", "데모 만들어 줘", "데모 녹화해 줘", "프로모션 비디오"라고 말할 때
핵심 워크플로
1. 렌더링 모드 선택
시작하기 전에 사용 가능한 도구를 확인하세요:
- playwright MCP 사용 가능? — 자동화된 스크린샷에 필요. 대안: 사용자에게 HTML 파일을 수동으로 스크린샷 찍도록 요청.
- edge-tts 사용 가능? — 나레이션 오디오에 필요. 대안: 사용자가 녹음하거나 다른 TTS 도구를 사용할 수 있도록 나레이션 텍스트 파일 출력.
- ffmpeg 사용 가능? — 합성에 필요. 대안: 사용자가 직접 실행할 수 있는 개별 장면 이미지 + 오디오 파일 및 수동 ffmpeg 명령어 출력.
아무것도 사용할 수 없다면, HTML 장면 파일 + scenes.json 매니페스트 + 나레이션 스크립트를 생성하세요. 사용자는 수동으로 합성하거나 비디오 편집기를 사용할 수 있습니다.
| 모드 | 방법 | 시기 |
|---|---|---|
| MCP 오케스트레이션 | HTML → playwright 스크린샷 → edge-tts 오디오 → ffmpeg 합성 | playwright + edge-tts + ffmpeg MCP가 모두 연결된 경우 사용 |
| 수동 | HTML 장면 파일 작성, 사용자가 실행할 ffmpeg 명령어 제공 | MCP를 사용할 수 없는 경우 사용 |
2. 스토리 구조 선택
클래식 데모 (30-60초): 후크 (3초) -> 문제 (5초) -> 매직 모먼트 (5초) -> 증거 (15초) -> 사회적 증거 (4초) -> 초대 (4초)
문제-해결 방식 (20-40초): 이전 (6초) -> 이후 (6초) -> 방법 (10초) -> CTA (4초)
15초 티저: 후크 (2초) -> 데모 (8초) -> 로고 (3초) -> 태그라인 (2초)
3. 장면 디자인
스크린샷이 제공되지 않은 경우:
- CLI/터미널 도구의 경우: 터미널 스타일의 어두운 배경, 고정폭 글꼴, 애니메이션 타이핑 효과가 있는 HTML 장면 생성
- 개념적 데모의 경우: 컬러 언어와 타이포그래피 시스템을 갖춘 텍스트 중심 장면 사용
- 제품이 시각적이고 설명이 불충분한 경우에만 사용자에게 스크린샷 요청
모든 장면에는 정확히 하나의 주요 초점이 있습니다:
- 제목 장면: 제품 이름
- 문제 장면: 불편함 (빨간색, 혼란스러운)
- 해결 장면: 결과 (초록색, 여유로운)
- 기능 장면: 강조된 스크린샷 영역
- 종료 장면: URL / CTA 버튼
4. 나레이션 작성
- 장면당 하나의 아이디어. "그리고"가 필요하면 두 개의 장면이 필요합니다.
- 동사로 시작하세요. "탭을 정리합니다" ("탭 정리가 제공됩니다"가 아님).
- 전문 용어는 사용하지 마세요. "탭이 스스로 정리됩니다" ("AI 기반 탭 분류"가 아님).
- 대비를 사용하세요. "24개의 탭. 한 번의 클릭. 5개의 그룹."
출력 아티팩트
각 비디오에 대해 demo-output/ 디렉토리에 다음 파일들을 생성합니다:
scenes/— 장면당 하나의 HTML 파일 (1920x1080 뷰포트)narration/— 장면당 하나의.txt파일 (edge-tts 입력용)scenes.json— 순서와 지속 시간, 나레이션 텍스트가 포함된 장면 목록 매니페스트build.sh— 전체 파이프라인을 실행하는 셸 스크립트:playwright screenshot각 HTML 장면 →frames/edge-tts각 나레이션 파일 →audio/ffmpeg교차 페이드 전환으로 연결 →output.mp4
MCP를 사용할 수 없는 경우에도 항목 1-3은 생성합니다. build.sh에 사용자가 수동으로 실행할 ffmpeg 명령어를 포함합니다.
장면 디자인 시스템
전체 디자인 시스템(컬러 언어, 애니메이션 타이밍, 타이포그래피, HTML 레이아웃, 음성 옵션, 페이싱 가이드)은 references/scene-design-system.md를 참조하세요.
품질 체크리스트
- 비디오에 오디오 스트림이 있음
- 해상도가 1920x1080임
- 장면 사이에 검은 프레임이 없음
- 처음 3초가 주의를 끌음
- 모든 장면에 하나의 초점이 있음
- 종료 카드에 URL과 CTA가 있음
안티 패턴
| 안티 패턴 | 수정 방법 |
|---|---|
| 슬라이드쇼 페이싱 — 모든 장면 동일 지속 시간, 리듬 없음 | 지속 시간 다양화: 후크 3초, 증거 8초, CTA 4초 |
| 화면의 텍스트 벽 | 정보를 나레이션으로 이동, 시각 자료 단순화 |
| 일반적인 나레이션 — "이 기능을 사용하면..." | 구체적인 숫자와 구체적인 동사 사용 |
| 스토리 아크 없음 — 단순히 기능 나열 | 문제 -> 해결 -> 증거 구조 사용 |
| 날 스크린샷 | 항상 둥근 모서리, 그림자, 어두운 배경 추가 |
ease 또는 linear 애니메이션 사용 | 스프링 커브 사용: cubic-bezier(0.16, 1, 0.3, 1) |
상호 참조
- 관련:
engineering/browser-automation— playwright 기반 브라우저 워크플로 - 참고: framecraft — 오픈소스 장면 렌더링 파이프라인