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

Context

수동으로 진행하는 브라우저 데모 녹화의 반복적 작업 공수 발생. 일관된 품질의 제품 시연 영상 제작을 위한 자동화 도구 필요.

Technical Solution

• JSON 설정 파일 기반의 액션 정의를 통한 헤드리스 Chrome 자동 제어 방식
• 60fps 캡처 데이터의 ffmpeg 인코딩을 통한 고화질 MP4, GIF, WebM 영상 생성 구조
• 커서 애니메이션 및 키스트로크 HUD 오버레이 합성을 통한 시각적 전달력 강화 전략
• include 필드를 활용한 공통 스텝 재사용으로 설정 파일의 중복 제거 및 유지보수 효율성 제고
• composite 기능을 통한 원본 녹화본 기반의 타임라인 재합성으로 불필요한 재녹화 과정 제거
• ~/.webreel 경로 내 Chrome 및 ffmpeg 자동 다운로드를 통한 제로 설정 환경 구축

Impact

• 약 60fps 수준의 고프레임 영상 캡처 지원

Key Takeaway

선언적 설정(Declarative Configuration)을 통해 복잡한 브라우저 인터랙션을 코드 없이 자동화하고 재사용 가능한 모듈형 시나리오를 설계하는 방식.