# webreel - 브라우저 데모를 MP4 영상으로 자동 녹화하는 CLI 도구

> Clean Markdown view of GeekNews topic #28335. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=28335](https://news.hada.io/topic?id=28335)
- GeekNews Markdown: [https://news.hada.io/topic/28335.md](https://news.hada.io/topic/28335.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-04-09T11:16:02+09:00
- Updated: 2026-04-09T11:16:02+09:00
- Original source: [github.com/vercel-labs](https://github.com/vercel-labs/webreel)
- Points: 24
- Comments: 0

## Summary

**Vercel Labs**에서 만든, JSON 설정 파일로 브라우저 데모를 **MP4 영상으로 자동 녹화**해주는 CLI 도구입니다. 클릭·타이핑·스크롤 같은 액션을 정의하면 헤드리스 Chrome이 ~60fps로 캡처하고 ffmpeg으로 인코딩합니다. 커서 애니메이션이나 키스트로크 HUD 오버레이까지 합성 가능하고요. README에 넣을 데모 영상이나 프로덕트 소개 영상을 매번 수동으로 녹화하던 분들에게 유용할 것 같습니다.

## Topic Body

- **JSON 설정 파일**에 클릭·타이핑·드래그 등 액션을 정의하면 헤드리스 Chrome이 자동으로 구동되어 ~60fps로 캡처 후 ffmpeg으로 인코딩  
- 커서 애니메이션, **키스트로크 HUD 오버레이**, 사운드 이펙트를 영상에 합성 가능  
- MP4(기본), **GIF, WebM(VP9)** 출력 포맷 선택 가능  
- `pause`, `click`, `key`, `type`, `scroll`, `wait`, `screenshot`, `drag`, `moveTo`, `navigate`, `hover`, `select` 등 **12종 액션** 지원  
- Chrome과 ffmpeg은 첫 실행 시 `~/.webreel`에 **자동 다운로드** — 별도 환경 설정 불필요  
- `webreel init`: 새 설정 파일 스캐폴딩, `$schema` 포함으로 IDE 자동완성 지원  
  - `record` : 영상 녹화 실행, `--watch`로 보기 모드와 `--verbose` 모드 지원  
  - `preview` : 실제 녹화 없이 브라우저 창에서 시나리오 미리보기 가능  
  - `composite` : 저장된 원본 녹화·타임라인으로부터 **재합성** (재녹화 필요없음)  
  - `validate` : 녹화 실행전 설정 파일 오류 사전 검사  
  - `include` 필드로 **공통 스텝을 재사용** 가능 (예: 쿠키 배너 닫기 등 초기화 스텝 공유)  
- 드래그앤 드롭, 로그인 처리, 모바일 뷰포트 녹화, 다중 선택, 단일 설정으로 복수 영상 생성, PNG 스크린샷 동시 캡처 등 다양한 예제 제공  
- [Webreel.dev](https://webreel.dev/) 에서 데모 보기  
- Apache-2.0 라이선스 / TypeScript

## Comments



_No public comments on this page._