webreel - 브라우저 데모를 MP4 영상으로 자동 녹화하는 CLI 도구
(github.com/vercel-labs)- 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 에서 데모 보기
- Apache-2.0 라이선스 / TypeScript
GeekNews Weekly에 포함된 글입니다.
에디터 코멘트 보기