reel

Reel은 웹 애플리케이션과 명령줄 인터페이스를 위한 '데모-어-코드(demos-as-code)'를 생성하기 위한 오픈소스 도구입니다. 작은 YAML 사양 파일이 실제 애플리케이션을 제어하며, Chromium 브라우저에서는 Playwright를 통해, 터미널에서는 실제 터미널에서 작동합니다. 그리고 실제로 일어나는 일을 녹화한 후, 그 녹화물을 항상 최신 상태의 GIF, MP4, WebM 파일, PNG 스토리보드, 그리고 HyperFrames 기반의 상호작용형 HTML 컴포지션으로 렌더링합니다. 워크플로우는 사양 파일에 중심을 두며, 이를 작성하거나 캡처한 후 `reel check` 명령어로 모든 단계가 여전히 작동하는지 확인하고, 이후 `reel shoot`으로 영상 자료를 생성합니다. `reel compose` 명령어는 HyperFrames 프로젝트를 구조화하고, 작성자가 장면 설명을 입력한 후 렌더링할 수 있도록 합니다. 주요 기능: - **캡처 모드**: 애플리케이션을 수동으로 조작하면서 Reel이 안정적인 접근성 기반 선택자를 포함한 사양을 자동으로 작성합니다. - **장면 문법**: 타이틀 카드, 콜아웃, 하이라이트, 전환, 다이어그램(Mermaid), 줌, 스크롤, 드래그 제스처 등을 원시 녹화가 아닌 방향성 있는 시퀀스로 구성합니다. - **배포 프리셋**: README, 소셜 미디어, 문서, 고품질 공유를 위한 최적화된 출력 형식을 제공합니다. - **오디오**: ElevenLabs 또는 OpenAI를 통한 선택적 내레이션, 합성된 효과음, 배경 음악(ducking 포함), 그리고 이미지와 음성 동기화 기능을 지원합니다. - **자막 및 현지화**: 언어별 LLM 번역된 SRT/VTT 파일을 포함한 사이드카 파일을 지원합니다. - **인증 처리**: Playwright 세션을 저장하여 한 번만 로그인하면, 데모 재생 시 비밀번호 노출 없이 인증 상태를 유지합니다. - **결정론성**: 시계를 정지시키고 애니메이션을 비활성화하며, 지역/시간대를 고정하여 재현 가능한 렌더링을 보장합니다. - **Claude Code 플러그인**: `/reel` 및 `/reel-polish` 스킬을 사용하여 자연어로 데모를 구축하고 보완합니다. - **스튜디오 UI**: 사양 편집, 실시간 미리보기로 녹화, AI 작문, 드리프트 체크가 가능한 로컬 Next.js 인터페이스입니다. - **CI 통합**: `reel check`는 데모 흐름이 깨질 경우 파이프라인을 실패시키는 스모크 테스트 역할을 합니다. - **에디터 지원**: VS Code, JetBrains, Neovim에서 YAML 스키마 자동 완성을 제공합니다. 모든 작업은 로컬에서 실행되며, 100% MIT 라이선스로 SaaS나 호스팅이 필요하지 않습니다. Node.js 22 이상과 TypeScript가 필요합니다.