HTML로 MP4 영상을 만드는 오픈소스 HyperFrames

HTML 조각 하나가 영상이 되는 세상

HeyGen이 만든 HyperFrames는 HTML·CSS·시크(seek) 가능한 애니메이션을 그대로 결정론적 MP4 영상으로 렌더링하는 오픈소스 프레임워크예요. 같은 입력을 주면 언제 실행해도 똑같은 프레임, 똑같은 결과 영상이 나온다는 뜻이에요. 이 프로젝트는 2026년 9월 8일 기준 GitHub에서 약 4만 6천여 개의 스타와 4,300여 개의 포크를 기록하고, 하루 700여 개의 별을 받는 트렌딩 저장소로 올라와 있어요.

라이선스는 Apache 2.0이고, 요구 조건은 Node.js 22 이상과 FFmpeg예요. 제작사 HeyGen이 운영에 직접 쓰는 만큼 실전 검증을 거쳐온 도구여서, 프로그래매틱 영상을 자동화 파이프라인에 넣고 싶은 개발자라면 눈여겨볼 만해요.

출처: HyperFrames README (heygen-com/hyperframes)

영상 저작을 HTML 저작으로 바꾼 이유

기존의 프로그래매틱 영상 생성은 React 기반 컴포넌트(Remotion)나 전용 타임라인 포맷이 중심이었어요. HyperFrames는 그 대신 "평범한 HTML 파일 하나"를 작곡 단위로 써요. <div>에 data-start, data-duration, data-track-index 같은 data 속성을 붙이면 영상 트랙이 되고, class="clip"이 붙은 요소가 클립으로 인식돼요.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="intro.mp4" muted playsinline></video>
  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
  <audio data-start="0" data-duration="6" data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>

이 구조의 핵심 장점은 빌드 단계가 없다는 거예요. index.html이 그대로 브라우저에서 재생되고 미리보기가 되므로, 사람이 읽어도 에이전트가 읽어도 똑같이 자연스러워요.

"에이전트는 이미 HTML을 잘 쓴다"는 말이 이 프로젝트의 중심 철학이에요. 그래서 캐치프레이즈가 'Write HTML. Render video. Built for agents.'예요.

렌더링은 헤드리스 크롬과 FFmpeg가 맡아요

렌더링 파이프라인은 여러 패키지로 나뉘어 있어요. @hyperframes/engine이 Puppeteer로 헤드리스 크롬을 띄워 각 프레임을 시크하고, @hyperframes/producer가 FFmpeg로 인코딩과 오디오 믹싱을 담당해요.

시크 가능한 애니메이션은 GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 어댑터 중 골라 쓰거나, 직접 만든 프레임 어댑터를 꽂을 수도 있어요. 프레임 단위로 정확하게 시크하는 라이브러리 클록 방식을 쓰기 때문에 출력이 결정적이에요.

이 성질 덕분에 CI 환경에서 회귀 테스트나 대량 자동 렌더링에 안성맞춤이에요. 렌더링은 로컬이나 Docker에서 하고, 규모가 커지면 @hyperframes/aws-lambda 패키지로 분산 렌더 스택을 배포해 노트북이나 CI에서 원격으로 렌더를 돌릴 수 있어요.

에이전트가 영상을 만들도록 스킬 20종을 얹었어요

HyperFrames가 주목받는 또 하나의 이유는 AI 에이전트용 스킬을 공식으로 제공한다는 점이에요. npx skills add heygen-com/hyperframes 한 줄로 설치하고, /hyperframes 라우터 스킬이 어떤 요청이든 작업 흐름을 골라줘요.

예를 들어 제품 런칭 영상, 무광고 설명 영상, GitHub PR 소개 영상, 모션 그래픽, 뮤직 비트싱크 영상, 슬라이드쇼 같은 워크플로가 준비돼 있어요. 이 스킬들은 Claude Code, Cursor, Gemini CLI, Codex 등 스킬을 지원하는 코딩 에이전트에서 동작해요.

스킬은 에이전트가 "영상 제작 루프"를 자연스럽게 타도록 가르쳐요 — 콘셉트를 계획하고, 유효한 HTML을 작성하고, 시크 가능한 애니메이션을 붙이고, 린트와 미리보기를 거쳐 렌더까지 진행하는 흐름이에요. 재사용할 수 있는 블록·컴포넌트는 npx hyperframes add 명령으로 카탈로그에서 곧바로 설치할 수 있어요.

Remotion과는 무엇이 다른가요

HyperFrames는 Remotion에서 영감을 받았어요. 두 도구 모두 헤드리스 크롬과 FFmpeg로 영상을 렌더링해요. 핵심 차이는 저작 모델이에요 — Remotion은 React 컴포넌트를 베팅으로 삼고, HyperFrames는 사람과 에이전트 둘 다 쉽게 쓸 수 있는 플레인 HTML을 베팅으로 삼아요.

HTML 네이티브 저작이라는 선택은 팀으로 보면 작은 차이처럼 보이지만, 에이전트 워크플로에선 큰 이점이 돼요. 에이전트가 생성한 JSX 프로젝트보다 플레인 HTML이 훨씬 안정적이고 검증하기 쉬우니까요.

누가 쓰고 있고, 신경 쓸 지점도 있어요

HyperFrames는 제작사 HeyGen 내부에서 운영 환경으로 쓰이고 있고, 커뮤니티 사례로는 tldraw, TanStack 같은 팀이 ADOPTERS 문서에 올라와 있어요.

또 frame.md라는 흥미로운 개념도 있어요. 브랜드의 web용 디자인 시스템을 카메라용으로 재해석한 DESIGN.md 상위 집합으로, 에이전트가 디자인 토큰을 지키면서 영상을 자동 구성하도록 돕는 레이어예요.

시작하기 전에 알아두면 좋을 지점도 있어요. Node.js 22 이상과 FFmpeg가 필요하고, 완전히 결정적인 출력을 원하면 미디어 소스 자체가 안정적으로 제공돼야 해요. 대규모 분산 렌더링은 AWS Lambda 경로를 구성해야 하니 클라우드 배경지식이 어느 정도 필요해요.

프로그래매틱 영상을 자동화 파이프라인에 넣고 싶은 개발자나, AI 에이전트에게 영상 제작을 맡겨보고 싶다면 HyperFrames의 공식 문서와 GitHub 저장소에서 시작해 보는 걸 추천해요.