Web Demo Video Skill
Playwright 녹화 + Remotion 합성으로 웹사이트 시연/소개 영상을 자동 생성하는 스킬.
When to use
- 사용자가 웹사이트/웹앱의 시연(demo) 영상을 요청할 때
- 제품/서비스 소개 영상을 만들 때
- 기능 워크스루(walkthrough) 영상을 만들 때
- 웹 기반 UI의 튜토리얼 영상을 만들 때
Overview
이 스킬은 3단계 파이프라인으로 동작한다:
1. 시나리오 생성 → 2. Playwright 녹화 → 3. Remotion 합성 → MP4 출력
Phase 1: 시나리오 생성
사용자의 요청을 분석하여 JSON 시나리오를 생성한다. 시나리오 스키마는 ./rules/scenario-schema.md 참고.
시나리오에는 다음이 포함된다:
- scenes: 각 장면의 URL, 액션(클릭/입력/스크롤), 대기 시간
- captions: 각 장면에 대응하는 자막/설명 텍스트
- branding: 인트로/아웃트로 타이틀, 로고, 색상 등
Phase 2: Playwright 녹화
시나리오 기반으로 Playwright가 웹사이트를 조작하며 녹화한다. 상세 가이드는 ./rules/playwright-recording.md 참고.
핵심 사항:
browser.newContext({ recordVideo: { dir, size } })로 녹화 활성화- 각 scene별로 별도 context를 생성하여 개별 클립으로 녹화
- 액션 간 적절한 딜레이(500ms~1500ms)를 삽입하여 시청자가 따라올 수 있도록 함
- 녹화 완료 후 반드시
context.close()호출하여 영상 파일 저장 - 출력: WebM →
bunx remotion ffmpeg로 MP4 변환
Phase 3: Remotion 합성
녹화된 클립들과 자막/인트로/아웃트로를 Remotion으로 합성한다.
핵심 사항:
<Video>컴포넌트로 녹화 영상 삽입 (@remotion/media)<TransitionSeries>로 장면 간 전환 효과 (@remotion/transitions)<Sequence>로 인트로 → 클립들 → 아웃트로 시퀀싱- 자막은
<AbsoluteFill>오버레이로 각 장면 위에 표시 calculateMetadata로 녹화 영상 길이에 맞춰 동적 duration 설정
Rule Files
상세 규칙은 개별 rule 파일 참고:
- scenario-schema.md - 시나리오 JSON 스키마 정의
- playwright-recording.md - Playwright 녹화 상세 가이드
- remotion-composition.md - Remotion 합성 구조 및 컴포넌트
- captions-overlay.md - 자막/설명 텍스트 오버레이
- cursor-highlight.md - 가상 커서 및 클릭 하이라이트
- rendering.md - 최종 렌더링 및 출력
Remotion 기본 규칙
아래 규칙을 반드시 따를 것 (remotion-best-practices 기반):
- 애니메이션:
useCurrentFrame()훅 기반. CSS 애니메이션/Tailwind 애니메이션 클래스 절대 금지 - 시퀀싱:
<Sequence>사용, 항상premountFor설정 - 트랜지션:
@remotion/transitions의fade,slide,wipe사용 - 비디오 임베딩:
@remotion/media의<Video>컴포넌트 - 폰트:
@remotion/google-fonts또는loadFont()사용 - FFmpeg:
bunx remotion ffmpeg로 접근 (별도 설치 불필요)
프로젝트 구조
project-root/
├── package.json
├── remotion.config.ts
├── src/
│ ├── Root.tsx # Composition 정의
│ ├── WebDemo/
│ │ ├── index.tsx # 메인 합성 컴포넌트
│ │ ├── Intro.tsx # 인트로 장면
│ │ ├── SceneClip.tsx # 녹화 영상 + 자막 오버레이
│ │ ├── Outro.tsx # 아웃트로 장면
│ │ ├── CaptionOverlay.tsx # 자막 컴포넌트
│ │ └── CursorHighlight.tsx # 커서 하이라이트
│ └── types.ts # 타입 정의
├── scripts/
│ └── record-scenes.ts # Playwright 녹화 스크립트
├── public/
│ ├── recordings/ # 녹화 영상들
│ ├── assets/ # 로고 등
│ └── scenario.json # 시나리오
└── out/
└── demo-video.mp4 # 최종 출력
실행 순서
# 1. 프로젝트 초기화
npx create-video@latest # Blank, TailwindCSS ON
cd my-video && npm install
npm install playwright
npx playwright install chromium
# 2. 시나리오 생성 → public/scenario.json
# 3. Playwright 녹화
npx tsx scripts/record-scenes.ts
# 4. WebM → MP4 변환 (각 클립)
bunx remotion ffmpeg -i public/recordings/scene-01.webm -c:v libx264 -c:a aac public/recordings/scene-01.mp4
# 5. Remotion 프리뷰
npm run dev
# 6. 최종 렌더링
npx remotion render src/Root.tsx WebDemo out/demo-video.mp4
설계 원칙
- 장면 분리: 각 scene → 별도 Playwright context → 독립 클립
- 자막 동기화: scene마다
captionText+captionPosition매핑 - 유연한 합성:
<TransitionSeries>로 인트로-클립-아웃트로 배치 - 동적 길이:
calculateMetadata로 녹화 길이 기반 자동 계산 - 브랜딩 커스텀: 타이틀, 색상, 폰트를 시나리오에서 설정