TL;DR

  • Explainroo는 Claude 등 코딩 에이전트로 설명 동영상을 만들고, 음성·타이밍·렌더링을 로컬 컴퓨터에서 처리하는 무료 오픈소스 프레임워크임.
  • 에이전트가 script.md와 scenes.js를 작성하면 Kokoro, Whisper, Chrome, ffmpeg가 음성 생성부터 MP4 렌더링까지 수행함.
  • 장면 이미지와 전체 동영상 프레임 시트, 레이아웃 검사, 음성 검사 기능으로 코딩 에이전트의 결과 확인을 지원함.
  • 5가지 영상 스타일, 다양한 화면 비율, 단어별 자막, 재생 속도 설정과 앱 화면을 재현하는 제품 데모 기능을 제공함.
  • 로컬 처리에는 비용이 들지 않으며, 기본 설치에는 Node.js 20.11 이상, ffmpeg, Chrome 또는 Chromium이 필요함.

개요

  • Explainroo는 음성이 주제를 설명하는 동안 그림이 나타나는 설명 동영상을 코딩 에이전트로 제작하는 프레임워크임.
  • 음성 생성, 타이밍 측정, 렌더링은 사용자 컴퓨터에서 실행됨.
  • 영상 제작 예시는 explainroo.com에서 볼 수 있음.
  • 관련 자료: Website · Example videos · Docs · AGENTS.md.

동영상 만들기

  • 저장소를 코딩 에이전트에 제공하고 영상에서 설명할 주제를 알려주면 됨.
  • Claude Code, Codex, Pi 등 여러 코딩 에이전트와 작동하며, 현재는 Claude Code와 Opus 5.5에서 가장 잘 작동함.
  • 에이전트에 저장소를 복제하고 AGENTS.md의 단계를 따르도록 요청하면, Explainroo를 설정하고 동영상을 만든 뒤 확인해 MP4 파일을 제공함.
  • 주제 자리에 원하는 내용을 넣어 사용할 수 있는 요청 예시는 다음과 같음: “내 주제에 관한 짧은 설명 동영상을 만들어 줘. Explainroo를 사용하고, https://github.com/vincentsch/explainroo 를 복제한 다음 AGENTS.md를 읽고 단계를 따라 줘.”

작동 방식

  • 에이전트가 두 파일을 작성함.
  • script.md: 음성으로 읽을 대본을 담음.
  • scenes.js: JavaScript로 그림을 그리고, 대본의 특정 단어에 맞춰 그림이 나타나도록 지정함.
  • Explainroo가 영상 제작의 나머지 과정을 처리함.
  • 음성: 계정이나 API 키가 필요 없는 오픈 음성 모델 Kokoro가 대본을 읽음. 음성은 28가지임.
  • 타이밍: Whisper가 녹음 음성을 분석해 각 단어가 발화된 시점을 기록함.
  • 그림: Chrome이 백그라운드에서 프레임을 그림. Rough.js로 손으로 그린 듯한 선을 만들 수 있고, Lucide 아이콘 1,800개를 사용할 수 있음. 장면에는 차트, 코드, 사용자 스크린샷도 표시할 수 있음.
  • 사운드: 동영상마다 배경 음악을 만들고 작은 효과음을 추가함. 음성이 나오는 동안 음악은 작아짐.
  • 파일: ffmpeg가 모든 요소를 MP4 파일로 결합함.
  • 코딩 에이전트는 동영상을 직접 볼 수 없으므로, Explainroo는 장면 스틸 이미지와 영상 전체의 작은 프레임 모음을 저장해 결과 확인을 지원함.
  • 레이아웃 검사는 잘리거나 겹치는 텍스트를 찾고, 음성 검사는 음성이 잘못 읽은 단어를 찾음.
  • 이 처리 과정은 사용자 컴퓨터 밖으로 나가지 않으며 비용이 들지 않음. 코딩 에이전트는 별도 서비스로 자체 약관과 요금이 적용됨.
  • 원한다면 에이전트가 OpenRouter를 통해 AI 이미지 모델로 삽화를 만들 수도 있으며, 이 경우 이미지마다 비용이 발생함.

스타일

  • 영상 스타일은 paper, clean, chalk, blueprint, midnight의 5가지임.
  • video.json의 설정 하나로 영상 스타일을 변경함.
  • 예시 영상에는 각 스타일로 만든 프레임이 포함됨.

화면 크기

  • 영상이 게시될 위치에 맞춰 크기를 선택함.
  • YouTube 영상은 가로형이며 Shorts, TikTok, Reels는 세로형임. Instagram과 LinkedIn 게시물에는 4:5 비율을 사용할 수 있고 정사각형 크기도 제공됨.
  • Shorts, TikTok, Reels는 영상 위에 자체 버튼을 표시하며, Explainroo는 그 영역에 텍스트가 놓이지 않도록 처리함.
  • 세로형, 4:5, 정사각형 영상에는 단어별로 밝아지는 자막이 포함됨.

속도

  • video.json에서 "pace": 1.2로 설정하면 음성, 쉼, 애니메이션이 20% 빨라지고 음악도 약간 빨라짐.
  • 속도 설정 범위는 0.7~1.6이며, 1이 기본 속도임.

제품 데모

  • Explainroo는 소프트웨어 회사가 앱을 보여주기 위해 만드는 제품 데모 영상도 제작할 수 있음.
  • 에이전트가 앱 코드나 웹사이트를 바탕으로 색상, 글꼴, 버튼 레이블을 반영해 화면을 재현함.
  • 마우스 포인터가 화면을 클릭하고 입력란에 내용을 입력하는 장면을 만들 수 있음. 에이전트에 제품 이름과 코드 또는 웹사이트 위치를 알려주면 됨.
  • Unspar와 Vroni 데모는 자체 제품의 예시이며, Unspar 데모 파일은 examples/unspar-demo에 있음.
  • explainroo.com에는 Gmail, ChatGPT, Claude의 비공식 데모도 있음.

직접 설치하기

  • 설치 요건은 Node.js 20.11 이상, ffmpeg, Chrome 또는 Chromium임.
  • 최초 설정 시 음성 및 타이밍 모델을 다운로드하며, 합계 용량은 약 400MB임. 그래픽 카드는 필요하지 않음.
  • 개발 및 테스트 환경은 Linux임. macOS와 Windows에서도 작동할 것으로 예상되지만, 해당 환경에서의 테스트는 상대적으로 적음.
  • 저장소 복제, 패키지 설치, 초기 점검 및 모델 다운로드 순서로 설치함: https://github.com/vincentsch/explainroo.git 저장소를 복제하고 npm install을 실행한 뒤 node bin/explainroo.js doctor --fetch를 실행함.
  • Explainroo 폴더에서 에이전트를 시작하고 “HTTPS가 비밀번호를 비밀로 유지하는 방법에 관한 60초 동영상을 만들어 줘”와 같이 요청하면 됨.
  • 에이전트는 AGENTS.md를 따르며 동영상을 videos/<name>/out/video.mp4에 저장함. 예시 동영상은 examples/에 있고 전체 문서는 explainroo.com에서 확인할 수 있음.

워터마크

  • 각 동영상 모서리 한 곳에 작은 explainroo.com 워터마크가 표시됨.
  • video.json에서 "watermark": false로 설정하면 워터마크를 끌 수 있음.
  • 워터마크를 유지하면 다른 사람이 Explainroo를 발견하는 데 도움이 됨.

크레딧과 라이선스

  • Explainroo는 MIT 라이선스를 따름.
  • 음성에는 Kokoro, 단어 타이밍에는 Transformers.js를 통한 Whisper를 사용함.
  • 그림에는 Rough.js와 Lucide 아이콘을 사용함.
  • Playwright가 Chrome을 실행하고 ffmpeg가 동영상 파일을 만듦.
  • 글꼴은 SIL Open Font License를 따름.