HyperFrames: HTML로 작성한 화면을 MP4 영상으로 렌더링하는 AI 에이전트용 프레임워크

9bow · 6월 5, 2026, 6:30오전

HyperFrames 소개

영상을 코드로 만들려고 하면 보통 전용 타임라인 포맷이나 특정 프레임워크의 컴포넌트 모델을 새로 배워야 합니다. HyperFrames는 이 진입 장벽을 낮추기 위해, 이미 익숙한 HTML과 CSS, 미디어, 시킹(seeking) 가능한 애니메이션을 그대로 영상의 정의로 삼는 오픈소스 프레임워크입니다. 작성한 화면은 결정론적인 MP4 영상으로 렌더링됩니다.

HyperFrames는 스스로를 "Write HTML. Render video. Built for agents." 라는 한 줄로 소개합니다. 로컬에서 CLI로 쓸 수도 있고, 스킬(skill)을 통해 AI 코딩 에이전트에서 호출할 수도 있으며, 호스팅된 영상 제작 워크플로우의 렌더링 코어로도 쓸 수 있습니다. 이 프로젝트는 영상 제작 SaaS HeyGen의 프로덕션에서 실제로 사용되고 있고, ADOPTERS.md에 따르면 tldraw, TanStack 같은 팀의 사례도 함께 소개되어 있습니다.

영상의 한 장면을 HTML 파일로 정의하기 때문에 React 같은 별도 프레임워크가 필요 없고, 빌드 단계 없이 index.html 을 브라우저에서 그대로 미리 볼 수 있습니다. 애니메이션은 GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 또는 직접 만든 프레임 어댑터로 구현할 수 있어, 기존에 쓰던 도구를 그대로 가져올 수 있습니다.

HyperFrames의 동작 방식

화면을 HTML로 작성한 뒤, 각 요소에 타이밍과 트랙을 지정하는 data-* 속성을 붙입니다. 예를 들어 data-start 로 등장 시점을, data-duration 으로 지속 시간을, data-track-index 로 트랙을 지정하고, GSAP 같은 어댑터로 시킹 가능한 타임라인을 연결합니다.

<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>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

렌더링 엔진은 헤드리스 Chrome에서 각 프레임을 시킹하며 화면을 캡처하고, 그 결과를 FFmpeg로 인코딩합니다. 이 과정이 시각(wall-clock)이 아니라 프레임 단위로 진행되기 때문에, 같은 입력은 항상 같은 영상을 만들어냅니다. 결정론적인 출력은 CI나 회귀 테스트, 자동화된 렌더링 파이프라인에 적합합니다.

HyperFrames를 코딩 에이전트와 함께 쓰기

HyperFrames가 HTML 입력을 영상으로 렌더링하는 데모

HyperFrames는 코딩 에이전트가 영상을 만들 때 필요한 제작 절차를 스킬로 제공합니다. 다음 명령으로 스킬을 설치한 뒤, 원하는 영상을 자연어로 설명하면 됩니다.

npx skills add heygen-com/hyperframes

이 스킬은 영상 기획, 유효한 HTML 작성, 시킹 가능한 애니메이션 연결, 미디어 추가, lint, 미리보기, 렌더링으로 이어지는 제작 루프를 에이전트에게 학습시킵니다. 일반적인 웹 문서만으로는 놓치기 쉬운 영상 제작 패턴을 가르치는 셈입니다. Claude Code, Cursor, Gemini CLI, Codex처럼 스킬을 지원하는 코딩 에이전트와 함께 동작합니다.

HyperFrames와 Remotion 비교

HyperFrames는 Remotion에서 영감을 받았다고 밝히고 있습니다. 두 도구 모두 헤드리스 Chrome과 FFmpeg로 영상을 렌더링하지만, 화면을 작성하는 방식이 다릅니다. Remotion은 React 컴포넌트를 선택했고, HyperFrames는 사람과 에이전트가 모두 쉽게 작성할 수 있는 평범한 HTML을 선택했습니다.

항목	HyperFrames	Remotion
작성 방식	HTML과 CSS, 시킹 가능한 애니메이션	React 컴포넌트
빌드 단계	없음. `index.html` 이 그대로 동작	번들러 필요
에이전트 핸드오프	평범한 HTML 파일	JSX/React 프로젝트
분산 렌더링	로컬과 AWS Lambda 경로	Remotion Lambda
라이선스	Apache 2.0	소스 공개형 Remotion License

HyperFrames 설치 및 사용법

CLI만으로 직접 영상 프로젝트를 만들 수도 있습니다. Node.js 22 이상과 FFmpeg가 필요합니다.

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 브라우저에서 라이브 리로드로 미리보기
npx hyperframes render     # MP4로 렌더링

전환 효과나 오버레이, 차트 같은 재사용 가능한 블록은 카탈로그에서 바로 추가할 수 있습니다.

npx hyperframes add flash-through-white   # 셰이더 전환 효과
npx hyperframes add data-chart            # 애니메이션 차트

저장소는 여러 패키지로 나뉘어 있으며, CLI인 hyperframes, 파서와 런타임을 담은 @hyperframes/core, Puppeteer와 FFmpeg로 화면을 영상으로 캡처하는 @hyperframes/engine 등이 포함됩니다.

HyperFrames의 라이선스

HyperFrames는 Apache 2.0 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있으며, 렌더링 건당 요금이나 상업적 사용 한도가 없습니다.

HyperFrames 플레이그라운드

HyperFrames 문서 사이트

HyperFrames 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~