Back to Blog
[TUTORIAL]

HeyGen HyperFrames: HTML로 영상을 코드처럼 찍어내는 AI 에이전트용 오픈소스 프레임워크

8 min read0 views

HeyGen HyperFrames: HTML로 영상을 코드처럼 찍어내는 AI 에이전트용 오픈소스 프레임워크

영상 편집을 떠올리면 보통 "타임라인에 클립을 끌어다 놓는" 장면이 그려지죠. 프리미어든 다빈치든, 우리는 늘 손으로 클립을 옮기며 영상을 만들어 왔어요. 그런데 HeyGen이 공개한 HyperFrames는 이 패러다임을 통째로 뒤집습니다. 웹페이지를 만들 듯 HTML로 한 장면을 작성하면, 그게 그대로 MP4로 찍혀 나오는 구조예요. 사람이 아니라 AI 에이전트가 "영상을 코드로 작성"하는 시대를 겨냥한 프레임워크입니다.

HeyGen은 2026-04-17(오늘 2026-06-17 기준 약 61일 전, 약 두 달 전)에 이 프레임워크를 Apache 2.0 오픈소스로 공개했어요. 짧은 기간에 GitHub 스타 약 28,100개를 모으며 화제가 됐죠. 오늘은 HyperFrames가 정확히 무엇이고, 왜 "결정론"이라는 단어가 핵심인지, 그리고 기존 Remotion과 무엇이 다른지를 편하게 풀어볼게요.

HeyGen HyperFrames란 무엇인가요?

비유부터 하자면, HyperFrames는 **"영상판 정적 웹사이트 생성기"**예요. HTML 파일을 쓰면 웹페이지가 뜨듯, 여기서는 HTML 파일을 쓰면 영상이 렌더링됩니다.

공식 GitHub README의 정의는 이렇습니다.

"HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos." (HyperFrames는 HTML·CSS·미디어·seekable 애니메이션을 결정론적 MP4 영상으로 바꾸는 오픈소스 프레임워크입니다.)

한 줄 슬로건은 더 직관적이에요. "Write HTML. Render video. Built for agents." — HTML을 쓰고, 영상으로 렌더링하고, 에이전트를 위해 만들었다는 뜻이죠.

HyperFrames 한 줄 정의: HTML·CSS·미디어·seekable 애니메이션을 같은 입력이면 항상 같은 결과가 나오는 결정론적 MP4 영상으로 변환하는 오픈소스 렌더링 프레임워크입니다. CLI로 로컬에서, AI 코딩 에이전트의 skills로, 또는 호스팅 저작 워크플로의 렌더링 코어로 쓸 수 있어요.

핵심 가치 제안은 README의 "Why HyperFrames?" 섹션에 잘 정리돼 있어요.

  • HTML-native: 영상의 한 장면(컴포지션)이 data attribute가 붙은 평범한 HTML 파일이에요. React를 요구하지 않고, 독자적인 타임라인 포맷도 없습니다.
  • Agent-friendly: AI 에이전트는 이미 HTML을 잘 쓰고, CLI가 기본적으로 비대화형(non-interactive)이라 다루기 편해요.
  • Deterministic: 같은 입력이면 같은 프레임, 같은 출력. CI·회귀 테스트·자동 렌더링에 적합합니다.
  • No build step: index.html 컴포지션이 그대로 재생되고, 브라우저에서 바로 프리뷰할 수 있어요.
  • Adapter-based animation: GSAP·CSS·Lottie·Three.js·Anime.js·WAAPI 같은 라이브러리나 커스텀 런타임을 가져다 씁니다.
  • Open source: Apache 2.0 라이선스, per-render 수수료나 상업 사용 임계가 없어요.

왜 "결정론(determinism)"이 그렇게 중요한가요?

이 프레임워크를 이해하는 열쇠가 바로 "결정론"이에요. 비유하자면, 일반적인 생성형 AI 영상은 **"같은 주문을 해도 매번 다르게 나오는 즉흥 요리"**에 가깝습니다. 같은 프롬프트를 넣어도 결과가 매번 달라지죠. 그래서 자동화 파이프라인에 넣기가 까다로워요. 오늘 만든 영상과 내일 만든 영상이 미묘하게 다르면, 검증도 재현도 어렵거든요.

반면 HyperFrames는 **"레시피대로 정확히 따라 만드는 정밀 조리"**입니다. README의 표현을 그대로 옮기면 이래요.

"The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video." (렌더러가 headless Chrome에서 프레임을 한 장씩 seek해서 FFmpeg로 인코딩하므로, 같은 입력은 같은 영상을 산출합니다.)

이게 왜 중요할까요? 영상을 코드(HTML)로 표현하고 결정론적으로 렌더링하면, AI 에이전트가 리포트 영상·마케팅 자산·데이터 시각화를 반복 가능하게(repeatable) 생산할 수 있어요. 테크 미디어(The Agent Times, creativeainews)는 이를 "deterministic video primitive(결정론적 영상 원시 구성요소)"라고 표현했습니다. 영상을 마치 코드처럼 버전 관리하고, CI에 꽂고, 회귀 테스트를 돌릴 수 있게 된다는 뜻이죠.

HyperFrames는 어떻게 동작하나요? (production loop + CLI)

동작 흐름을 알면 그림이 확 잡혀요. HyperFrames의 skills는 에이전트에게 다음과 같은 **"영상 제작 production loop"**를 가르칩니다.

영상 기획(plan) → 유효한 HTML 작성(write valid HTML) → seekable 애니메이션 연결(wire seekable animations) → 미디어 추가(add media) → lint → preview → render

쉽게 말하면, 글쓰기 같은 순서예요. 먼저 개요를 잡고, 본문(HTML)을 쓰고, 움직임을 입히고, 이미지/오디오를 넣고, 맞춤법 검사(lint)를 하고, 미리보기(preview)로 확인한 뒤, 최종 출력(render)을 뽑는 거죠.

렌더링 메커니즘은 이렇습니다. 영상을 HTML로 정의하고, 타이밍과 트랙을 data-start, data-duration, data-track-index, data-composition-id 같은 data attribute로 표현해요. 애니메이션은 GSAP·CSS·Lottie·Three.js·Anime.js·WAAPI 또는 커스텀 frame adapter로 작성하고요. 그러면 렌더러가 headless Chrome에서 프레임을 한 장씩 seek 캡처하고, FFmpeg로 인코딩합니다.

CLI는 이렇게 직관적이에요.

npx hyperframes init my-video     # 프로젝트 스캐폴드
cd my-video
npx hyperframes preview           # 브라우저 라이브 리로드 프리뷰
npx hyperframes render            # MP4 렌더
npx hyperframes add data-chart    # 카탈로그 블록 설치
npx hyperframes lint              # 정적 HTML 구조 검사
npx hyperframes validate          # 런타임 검사 (headless Chrome로 JS 오류·누락 자산 탐지)

여기에 AI 에이전트 연동도 자연스러워요. npx skills add heygen-com/hyperframes로 skills를 설치하면 Claude Code·Cursor·Gemini CLI·Codex 같은 에이전트가 위 production loop를 학습합니다. 모든 영상 제작 워크플로는 단일 진입 skill /hyperframes를 거치고요. 그 아래에는 용도별 워크플로가 준비돼 있어요. /product-launch-video(제품 URL → 런칭 영상), /website-to-video(웹사이트 → 투어 클립), /faceless-explainer(텍스트 → 얼굴 없는 해설), /pr-to-video(GitHub PR → 코드 변경 해설), /remotion-to-hyperframes(Remotion React → HyperFrames HTML 마이그레이션) 등이 있습니다.

HyperFrames vs Remotion: 무엇이 다른가요?

HyperFrames를 이야기할 때 Remotion 비교는 빠질 수 없어요. 흥미롭게도 README가 직접 "HyperFrames is inspired by Remotion"이라고 밝힙니다. 둘 다 headless Chrome + FFmpeg로 영상을 렌더링하는, 같은 뿌리를 가진 도구거든요.

비유하자면, **Remotion은 "React로 짓는 맞춤 주택"**이고 **HyperFrames는 "조립식 HTML 모듈 주택"**이에요. 결정적 차이는 **저작 모델(authoring model)**입니다. Remotion은 React 컴포넌트(빌드 단계 필요)에 베팅했고, HyperFrames는 빌드 없이 그대로 재생되는 plain HTML에 베팅했죠.

항목HyperFramesRemotion
저작 모델HTML + CSS + seekable animationReact 컴포넌트
빌드 단계없음 (index.html 그대로 재생)번들러 필요
에이전트 핸드오프plain HTML 파일JSX / React 프로젝트
라이브러리-클럭 애니메이션adapter로 seekable·프레임 정확wall-clock 패턴은 주의 필요
분산 렌더링로컬 + AWS LambdaRemotion Lambda (성숙한 클라우드 렌더러)
라이선스Apache 2.0Source-available Remotion License

여기서 두 가지가 눈에 띄어요. 첫째, 라이선스입니다. HyperFrames는 Apache 2.0이라 per-render 수수료나 상업 사용 임계가 없어요. 둘째, 에이전트 친화성이에요. AI 에이전트에게 React 프로젝트를 넘기는 것보다 평범한 HTML 파일을 넘기는 게 훨씬 가볍죠.

다만 솔직하게 짚자면, README 스스로 클라우드 렌더링 성숙도는 Remotion Lambda 쪽이 더 앞선다고 인정합니다. HyperFrames의 AWS Lambda 경로도 사용 가능하지만 상대적으로 신생이에요. "더 나은 도구"가 아니라 "다른 베팅을 한 도구"로 보는 게 정확합니다.

누가 어떻게 활용하고 있나요?

비유하자면 HyperFrames는 **"영상 공장의 새 컨베이어 벨트"**예요. 사람이 손으로 조립하는 대신, 같은 자산을 반복적으로 찍어내는 데 강합니다. README의 "What You Can Build"에는 이런 활용처가 나와요.

  • 제품 런칭·기능 발표 영상
  • PR 워크스루(애니메이션 코드 diff + 나레이션 + 자막)
  • 데이터 시각화·차트 레이스·맵 애니메이션
  • 키네틱 자막·오버레이·음악이 있는 소셜 영상
  • Docs → 영상, PDF → 영상, 웹사이트 → 영상 설명 영상
  • 자동화 콘텐츠 파이프라인용 재사용 모션 그래픽

실제 채택 사례도 ADOPTERS.md에 정리돼 있습니다.

  • HeyGen: 자사 영상 제품 전반의 AI 영상 컴포지션·렌더링을 구동(프로덕션 사용).
  • tldraw: GSAP 애니메이션 코드 diff + 나레이션 + 자막이 들어간 자동 PR 워크스루 영상 생성.
  • TanStack: 짧은 코드 데모·문서 영상을 탐색 중.
  • reap.video: 에이전트 우선 AI 영상 클리핑·편집·렌더에 사용.
  • Typeframe: 단어 타이밍 타이핑 자막이 있는 스피치 영상 MP4 익스포트.

1인 기업이나 콘텐츠 자동화를 운영하는 분이라면 이런 시나리오가 매력적이에요. Claude Code나 Codex가 글(스레드·블로그)을 받아 HyperFrames HTML로 변환하고, 결정론적 MP4를 뽑아 릴스·숏폼 자동 발행 파이프라인에 연결하는 흐름이죠. React 빌드 부담 없이 HTML로 가는 점이 가벼운 운영에 유리할 수 있습니다.

버전과 출시 현황은 어떤가요?

빠른 출시와 강한 채택 신호가 인상적이에요. 시점을 절대 날짜로 정리하면 이렇습니다.

이벤트절대 날짜오늘(2026-06-17) 기준
GitHub 저장소 생성2026-03-10약 99일 전
공개 발표(오픈소스화)2026-04-17약 61일 전 (약 두 달 전)
Show HN 게시2026-04-25약 53일 전
현재 npm 최신 버전 v0.6.1082026-06-17당일

현재 npm 최신 버전은 v0.6.108(게시 2026-06-17)이고, GitHub 스타는 약 28,100개, fork는 약 2,656개예요. 요구 환경은 Node.js 22 이상과 FFmpeg이고, 라이선스는 Apache 2.0입니다.

릴리스 케이던스가 굉장히 빨라요. 하루에도 여러 차례 패치를 내고 있습니다. 이건 강점이자 주의점인데, 다음 섹션에서 자세히 다룰게요.

한계와 주의할 점

장점만 보면 균형이 안 맞죠. 솔직하게 짚어볼게요.

  • HTML/CSS 지식이 사실상 필요합니다: "HTML 그대로"가 장점이지만, 타이밍은 data attribute로, 애니메이션은 GSAP/CSS/Lottie 같은 어댑터로 직접 배선해야 해요. 비개발자가 GUI 편집기처럼 쓰긴 어렵고, 에이전트가 HTML을 작성하는 것을 전제로 한 설계입니다.
  • 렌더링 환경 의존성이 있어요: Node.js 22 이상, FFmpeg, headless Chrome(Puppeteer)이 필요합니다. 로컬·Docker·AWS Lambda 경로가 있지만 환경 셋업 부담은 있어요. (개발용으로 전체 클론을 받으면 Git LFS로 약 240MB의 golden 베이스라인 mp4가 따라옵니다.)
  • pre-1.0(0.x) 활발 개발 단계입니다: 현재 버전이 0.6.x이고 릴리스가 하루에도 수 차례로 매우 빠릅니다. API와 동작이 변경될 가능성이 높으니, 프로덕션에 쓴다면 버전을 핀(고정)하는 걸 권합니다. 1.0 이전이라는 점을 늘 염두에 두세요.
  • 전통 영상 편집 도구와는 트레이드오프가 있어요: 타임라인 드래그앤드롭의 직관성은 없습니다(코드 기반). 대신 결정론·버전 관리·자동화·CI 적합성을 얻죠. "사람이 손으로 미세 편집"보다 "에이전트·스크립트가 반복 생산"하는 쪽에 최적화돼 있어요.
  • 생태계 성숙도는 아직 진행형입니다: 클라우드 렌더는 Remotion Lambda 쪽이 더 성숙하다고 README가 자인합니다.

정리하면, HyperFrames는 만능 영상 편집기가 아니라 **"AI 에이전트가 코드로 영상을 반복 생산하는 자동화 파이프라인"**에 특화된 도구예요. 이미 성숙한 영상 파이프라인이 있다면, 도입 전에 "마이그레이션 비용 vs HTML 저작 단순화 이득"을 냉정히 따져보는 게 좋습니다(/remotion-to-hyperframes skill이 마이그레이션 경로를 제공합니다).

마무리

HeyGen HyperFrames는 영상 제작을 "타임라인 편집"에서 "코드 작성"으로 옮기려는 시도예요. 핵심은 두 단어, 결정론과 HTML 네이티브입니다. 같은 입력이면 같은 영상이 나오는 재현성, 그리고 React 없이 평범한 HTML로 가는 가벼움이 AI 에이전트 시대와 잘 맞아떨어지죠.

아직 0.x 단계라 API 변경 주의가 필요하지만, GitHub 스타 약 28,100개와 tldraw·TanStack 같은 채택 신호는 무시하기 어려운 흐름입니다. 영상 자동화 파이프라인을 고민하고 있다면, 한 번쯤 직접 npx hyperframes init으로 손에 익혀볼 가치가 충분해요.

자주 묻는 질문 (FAQ)

Q: HyperFrames를 쓰려면 React를 알아야 하나요?

아니요. HyperFrames의 핵심 차별점이 바로 그거예요. Remotion은 React 컴포넌트로 영상을 작성하지만, HyperFrames는 빌드 단계 없는 평범한 HTML/CSS로 컴포지션을 작성합니다. 다만 타이밍을 data attribute로 표현하고 애니메이션을 GSAP·CSS·Lottie 같은 어댑터로 연결해야 하므로, HTML/CSS에 대한 기본 이해는 필요해요.

Q: "결정론적(deterministic)" 렌더링이 정확히 무슨 의미인가요?

같은 입력을 넣으면 매번 정확히 같은 영상이 나온다는 뜻이에요. 렌더러가 headless Chrome에서 프레임을 한 장씩 seek 캡처하고 FFmpeg로 인코딩하기 때문에 결과가 변하지 않습니다. 그래서 CI·회귀 테스트·자동 렌더링 파이프라인에 그대로 꽂을 수 있어요. 결과가 매번 달라지는 일반 생성형 영상 모델과의 가장 큰 차이입니다.

Q: HyperFrames는 무료인가요? 상업적으로 써도 되나요?

네. HyperFrames는 Apache 2.0 오픈소스 라이선스이고, per-render 수수료나 상업 사용 임계가 없습니다. Remotion이 source-available 라이선스인 것과 대비되는 지점이에요.

Q: 지금 프로덕션에 바로 도입해도 괜찮을까요?

주의가 필요합니다. 현재 버전이 0.6.x로 pre-1.0(0.x) 활발 개발 단계이고, 하루에도 여러 차례 패치가 나올 만큼 릴리스가 빠릅니다. API와 동작이 변경될 가능성이 높으니, 도입한다면 반드시 버전을 핀(고정)하고 1.0 이전이라는 점을 감안해 운영하세요.

Q: 어떤 환경이 있어야 실행되나요?

Node.js 22 이상과 FFmpeg가 필요하고, 내부적으로 headless Chrome(Puppeteer)을 사용합니다. 로컬·Docker·AWS Lambda 경로를 지원하지만, 환경 셋업 부담이 어느 정도 있다는 점은 감안하세요.

참고 자료