데모 비디오 크리에이터은(는) 무엇을 하나요?
브라우저 상호작용을 자동화하여 세련된 제품 데모 비디오를 만듭니다.
개요
- 데모 시퀀스 계획 (페이지, 상호작용, 타이밍)
- Playwright CDP 스크린캐스트로 프레임 녹화
- FFmpeg로 비디오 인코딩
빠른 시작
전제 조건
- OpenClaw 브라우저 실행 중 (
browser action=start profile=clawd) - 브라우저를 통해 앱 접근 가능 (localhost 또는 원격)
- 인코딩을 위해 FFmpeg 설치
녹화 워크플로우
- OpenClaw 브라우저가 실행 중이 아니면 시작합니다.
- 수동으로 또는
browser action=open명령으로 앱으로 이동합니다. - 대상 앱에 맞게
scripts/record-demo.js를 커스터마이징합니다. - 실행:
node scripts/record-demo.js - 인코딩:
bash scripts/frames-to-video.sh
데모 계획
references/demo-planning.md에서 다음에 대한 지침을 확인하세요:
- 데모 시퀀스 구조화
- 타이밍과 템포
- 상호작용 패턴
- 데모를 설득력 있게 만드는 요소
스크립트
scripts/record-demo.js
다음을 수행하는 템플릿 Playwright 스크립트:
- CDP를 통해 OpenClaw 브라우저에 연결
- 스크린캐스트 캡처 시작 (JPEG 프레임)
- 데모 시퀀스 실행 (네비게이션, 클릭, 호버, 타이핑)
- 프레임을 출력 디렉토리에 저장
각 데모에 맞게 커스터마이징:
DEMO_SEQUENCES배열 - 페이지와 상호작용 정의OUTPUT_DIR- 프레임 저장 위치FRAME_SKIP- N번째 프레임마다 건너뜀 (낮을수록 더 많은 프레임)
scripts/frames-to-video.sh
프리셋이 포함된 FFmpeg 인코딩 스크립트:
mp4- H.264, 좋은 품질/크기 균형 (기본값)gif- 임베딩용 애니메이션 GIFwebm- VP9, 더 작은 파일
사용법: ./frames-to-video.sh [input_dir] [output_name] [format]
상호작용 패턴
// 네비게이션
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);
// 요소 클릭
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);
// 호버 (툴팁, 호버 상태 표시)
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);
// 텍스트 입력
await page.locator('input[placeholder="Search"]').fill('query');
await page.waitForTimeout(500);
// 키 누르기
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');
// 스크롤
await page.evaluate(() => window.scrollBy(0, 300));
팁
- 타이밍: 페이지 로드 시 2초, 상호작용 사이 0.5~1초, 결과 표시 시 1.5초
- 프레임 스킵: 부드러운 비디오에는 3
5, 작은 파일에는 810 사용 - 품질: 85~90 JPEG 품질이 크기와 선명도의 균형을 유지합니다.
- 해상도: 브라우저 창 크기가 출력 해상도를 결정합니다.
- 루프: GIF는 매끄럽게 반복되어야 하며, 시작한 곳에서 끝나야 합니다.
주의사항
- 스크린샷 vs 비디오: 사용자가 기능을 빠르게 확인해야 하는 경우, 전체 비디오를 녹화하는 대신 인라인으로 스크린샷을 찍으세요. 먼저
browser action=tabs profile=clawd명령으로 앱 탭이 열려 있는지 확인하고, 열려 있다면 하위 에이전트 없이 바로 스크린샷을 캡처하세요. - 컨텍스트 제한: 스크린샷이 많이 발생하는 녹화 루프는 컨텍스트를 빠르게 소모합니다 (200k 토큰 제한). 범위를 좁게 유지하세요: 먼저 모든 프레임을 녹화한 후 분석을 수행하며, 프레임 캡처와 분석을 절대 섞지 마세요. 컨텍스트가 부족하면 프레임을 디스크에 저장하고 별도의 패스에서 분석하세요.
- 병렬 에이전트 위험: 동일한 브라우저 탭에 대해 여러 데모 에이전트를 동시에 실행하지 마세요. 서로의 네비게이션 상태를 간섭하게 됩니다.