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로 녹화 길이 기반 자동 계산
브랜딩 커스텀: 타이틀, 색상, 폰트를 시나리오에서 설정

web-demo-video

Safety Notice

Copy this and send it to your AI assistant to learn