YAML 시나리오를 작성하면 시네마틱 데모 영상(MP4/GIF)을 자동으로 만들어주는 스크린 레코더. Playwright CDP 기반. 위 데모 영상은 YAML 파일 1개, 239줄로 만들었습니다.
YAML 시나리오를 작성하고 녹화하면 — Clipwise가 모든 시네마틱 효과를 처리합니다.
npx clipwise demo 한 줄로 내장 대시보드를 즉시 녹화 — 설정 불필요.Clipwise를 설치하고 데모를 실행하거나 직접 시나리오를 작성해보세요.
npx로 설치 없이 사용할 수 있습니다.npm install -D clipwisenpx clipwise demo
npx clipwise demo --device iphone # iPhone 목업
npx clipwise demo --device android # Android 목업
npx clipwise demo --url https://kwakseongjae.github.io/clipwise/demo/ # 내 사이트npx clipwise init # clipwise.yaml 생성
# clipwise.yaml 편집 — URL을 내 사이트로 변경
npx clipwise record clipwise.yaml -f mp4 # 녹화!import { ClipwiseRecorder, CanvasRenderer, encodeMp4, loadScenario } from "clipwise";
const scenario = await loadScenario("my-scenario.yaml");
const recorder = new ClipwiseRecorder();
const session = await recorder.record(scenario);
const renderer = new CanvasRenderer(scenario.effects, scenario.output, scenario.steps);
const frames = await renderer.composeAll(session.frames);
const mp4 = await encodeMp4(frames, scenario.output);시나리오는 4개 섹션으로 구성됩니다: 메타데이터, 이펙트, 출력, 스텝.
name: "My Demo"
description: "선택 설명"
viewport:
width: 1280 # 브라우저 너비 (기본: 1280)
height: 800 # 브라우저 높이 (기본: 800)
effects:
# 아래 "이펙트" 섹션 참조
output:
format: mp4 # gif | mp4 | png-sequence
width: 1280
height: 800
fps: 30 # 1-60
preset: balanced # social | balanced | archive
steps:
- name: "스텝 이름"
actions:
- action: navigate
url: "https://example.com"
captureDelay: 200 # 액션 후 대기(ms)
holdDuration: 800 # 결과 화면 유지(ms)
transition: none # none | fade| 액션 | 파라미터 | 기본값 | 설명 |
|---|---|---|---|
navigate | url, waitUntil? | networkidle | URL로 이동 |
click | selector, delay?, timeout? | 요소 클릭 | |
type | selector, text, delay?, timeout? | delay: 50 | 텍스트 입력 (한 글자씩) |
hover | selector, timeout? | 요소에 마우스 올리기 | |
scroll | y?, x?, selector?, smooth?, timeout? | smooth: true | 스크롤 |
wait | duration | 대기 (ms) | |
screenshot | name?, fullPage? | fullPage: false | 캡처 마커 |
| 액션 | 파라미터 | 기본값 | 설명 |
|---|---|---|---|
waitForSelector | selector, state?, timeout? | visible, 15s | 요소 상태 대기 |
waitForNavigation | waitUntil?, timeout? | networkidle, 15s | 페이지 로드 대기 |
waitForURL | url, timeout? | 15s | URL 매칭 대기 |
waitForFunction | expression, polling?, timeout? | raf, 30s | JS 표현식이 truthy가 될 때까지 대기 |
waitForResponse | url, status?, timeout? | 30s | 네트워크 응답 대기 (URL 부분 문자열 매칭) |
# API 호출 후 요소 대기
- action: waitForSelector
selector: ".result-panel"
state: visible
timeout: 20000
# AI 스트리밍 완료 대기
- action: waitForFunction
expression: "document.querySelector('.ai-response')?.dataset.done === 'true'"
timeout: 60000
# 특정 API 응답 대기
- action: waitForResponse
url: "/api/chat/completions"
status: 200
timeout: 60000전체 YAML 스키마 레퍼런스를 복사하세요. Claude Code, Cursor, ChatGPT 등 AI 도구에 붙여넣으면 즉시 시나리오를 생성할 수 있습니다.
이 블록에는 AI가 필요한 모든 정보가 담겨 있습니다: 12종 액션 타입, 파라미터, 기본값, 이펙트 설정, 출력 옵션, 사용 규칙.
# Clipwise YAML Schema Reference (v0.5.0)
# 스크립터블 시네마틱 스크린 레코더 — YAML 작성, MP4 출력
# 설치: npm install -D clipwise
# 녹화: npx clipwise record scenario.yaml -f mp4
# ─── 최상위 구조 ──────────────────────────────────────
name: "시나리오 이름" # 필수
description: "설명" # 선택
viewport:
width: 1280 # 기본: 1280
height: 800 # 기본: 800
# ─── 출력 ─────────────────────────────────────────────
output:
format: mp4 # mp4 | gif | png-sequence
fps: 30 # 1-60 (기본: 30)
preset: balanced # social | balanced | archive (기본: balanced)
# quality: 80 # 사용 중단 — preset 사용 권장
width: 1280 # 기본: 1280
height: 800 # 기본: 800
# ─── 스텝 ─────────────────────────────────────────────
steps:
- name: "스텝 이름" # 선택
captureDelay: 200 # 액션 후 대기 ms (기본: 300)
holdDuration: 800 # 결과 화면 유지 ms (기본: 1500)
transition: none # none | fade (기본: none)
actions:
# --- 기본 액션 (7종) ---
- action: navigate
url: "https://example.com"
waitUntil: networkidle # load | domcontentloaded | networkidle (기본)
- action: click
selector: "#btn" # CSS 셀렉터 (유니코드/한국어 OK)
delay: 0 # 선택. 클릭 딜레이 (ms)
timeout: 15000 # 선택. 요소 대기 타임아웃 (ms)
- action: type
selector: "#input"
text: "hello"
delay: 50 # 글자당 딜레이 ms (기본: 50)
timeout: 15000 # 선택. 요소 대기 타임아웃 (ms)
- action: hover
selector: ".menu"
timeout: 15000 # 선택
- action: scroll
y: 400 # 수직 px (기본: 0)
x: 0 # 수평 px (기본: 0)
selector: ".container" # 선택. 대상 요소
smooth: true # 기본: true
timeout: 15000 # 선택
- action: wait
duration: 1000 # ms
- action: screenshot
name: "결과" # 선택
fullPage: false # 기본: false
# --- 비동기 대기 액션 (5종) ---
- action: waitForSelector
selector: ".result"
state: visible # visible (기본) | attached | hidden
timeout: 15000 # 기본: 15000
- action: waitForNavigation
waitUntil: networkidle # load | domcontentloaded | networkidle (기본)
timeout: 15000 # 기본: 15000
- action: waitForURL
url: "https://example.com/dashboard"
timeout: 15000 # 기본: 15000
- action: waitForFunction
expression: "document.querySelector('.done') !== null"
polling: raf # raf (기본) 또는 밀리초 숫자 (예: 500)
timeout: 30000 # 기본: 30000
- action: waitForResponse
url: "/api/chat" # URL 부분 문자열 매칭
status: 200 # 선택. HTTP 상태코드 필터 (100-599)
timeout: 30000 # 기본: 30000
# ─── 이펙트 ───────────────────────────────────────────
effects:
zoom:
enabled: true # 기본: true
scale: 1.8 # 1-5 (기본: 1.8)
duration: 600 # ms (기본: 600)
autoZoom:
followCursor: true # 기본: true
maxScale: 2.0 # 기본: 2.0
padding: 200 # px (기본: 200)
cursor:
enabled: true # 기본: true
size: 20 # px (기본: 20)
color: "#000000" # 기본: #000000
speed: fast # fast | normal | slow (기본: fast)
clickEffect: true # 기본: true
clickColor: "rgba(59,130,246,0.3)"
trail: false # 기본: false
trailLength: 8 # 기본: 8
highlight: false # 기본: false
highlightRadius: 40 # 기본: 40
background:
type: gradient # gradient | solid | image (기본: gradient)
value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
padding: 60 # px (기본: 60)
borderRadius: 12 # px (기본: 12)
shadow: true # 기본: true
deviceFrame:
enabled: false # 기본: false
type: browser # browser | iphone | ipad | android | none
darkMode: false # 기본: false
keystroke:
enabled: false # 기본: false
position: bottom-center # bottom-center | bottom-left | bottom-right
fontSize: 18 # 기본: 18
fadeAfter: 1500 # ms (기본: 1500)
speedRamp:
enabled: false # 기본: false
idleSpeed: 3.0 # 기본: 3.0
actionSpeed: 0.8 # 기본: 0.8
watermark:
enabled: false # 기본: false
text: ""
position: bottom-right # top-left | top-right | bottom-left | bottom-right
opacity: 0.5 # 0-1 (기본: 0.5)
# ─── 규칙 ─────────────────────────────────────────────
# - 셀렉터: CSS 선택자 (#id, .class, [data-*], [aria-label="..."])
# - 유니코드/한국어 셀렉터 지원
# - 클릭/타이핑 전 요소가 화면에 보여야 함 — 필요하면 scroll 먼저
# - type 전에 click으로 input 포커스
# - 고정 wait보다 비동기 대기 액션 우선 사용 (더 안정적)
# - waitForFunction: AI 스트리밍, 동적 콘텐츠, DOM 변화 감지
# - waitForResponse: 트리거 액션 전에 자동으로 리스너 등록됨
# - 타이밍: captureDelay 50-100ms, holdDuration 500-800ms (빠른 데모)내장된 Claude Code 스킬을 설치하면 자연어로 시나리오를 생성할 수 있습니다. 설치 한 번, 슬래시 커맨드 한 번이면 끝.
.claude/skills/ 디렉토리에 복사합니다. 프로젝트당 한 번(또는 글로벌) 실행.npx clipwise install-skill/clipwise를 입력하세요. 녹화할 내용을 자연어로 설명하면 됩니다./clipwise
> http://localhost:3000 대시보드 데모 녹화해줘
— 로그인 클릭, 이메일/비밀번호 입력, 분석 페이지 이동npx clipwise validate로 검증한 후, MP4를 녹화합니다 — 전부 자동.clipwise 업그레이드 후 npx clipwise install-skill을 다시 실행하면 최신 스킬로 업데이트됩니다.
모든 이펙트는 선택사항이며 합리적인 기본값이 있습니다. 원하는 스타일로 조합하세요.
zoom:
enabled: true
scale: 1.8
duration: 500cursor:
enabled: true
speed: "fast"
trail: true
highlight: truebackground:
type: gradient
value: "linear-gradient(135deg,
#667eea 0%, #764ba2 100%)"
padding: 48
borderRadius: 14deviceFrame:
enabled: true
type: browser # or iphone/ipad/android
darkMode: truekeystroke:
enabled: true
position: bottom-center
fontSize: 16
fadeAfter: 1500speedRamp:
enabled: true
idleSpeed: 3.0
actionSpeed: 0.8