HyperFrames란 무엇인가? HTML을 작성하고 AI 에이전트가 비디오로 렌더링하는 방법

만약 제가 지금 가장 빠르게 비디오를 만드는 방법은 HTML 파일 하나를 작성하고 명령어 한 번으로 실행하는 것이라고 말한다면, 믿으시겠습니까?

HyperFrames는 HeyGen의 오픈소스 프레임워크로, 비디오 제작에 대한 사고방식을 완전히 바꿉니다. 이는 편집 프로그램도 아니고 타임라인을 드래그하는 도구도 아닙니다. 브라우저에서 열 수 있는 일반적인 웹페이지이며 MP4 파일이 될 수 있습니다 [1][2]。

HyperFrames란 무엇인가

그 개념은 자체 레포지토리 페이지의 한 문장에 담겨 있습니다.

"Write HTML. Render video. Built for agents." [1]

사용할 때는 index.html 파일을 작성하고, 텍스트, 이미지, 사운드를 배치한 뒤, data-start와 data-duration 속성으로 시간을 지정합니다. 그런 다음 헤드리스 브라우저(headless Chrome)가 애니메이션의 각 프레임으로 **탐색(seek)**하여 이미지를 캡처하고 FFmpeg에 전송하여 비디오로 인코딩합니다 [1][2][3]。

저는 HeyGen 팀이 설명한 다른 도구와의 차이점을 좋아하는 방식입니다.

"If you can build a web page, you can build a video." [2]

타임라인 자체가 문서이다

대부분의 비디오 제작 도구는 타임라인을 분리된 객체로 취급합니다. 클립을 드래그하고 키프레임을 설정한 다음, 도구가 이를 JSON이나 JSX 또는 자체 언어로 변환합니다.

HyperFrames는 그 반대입니다. HTML 문서 자체가 타임라인인 것입니다 [2][3]。

이 개념이 생각보다 영리한 이유

제가 가장 날카롭다고 생각하는 부분은 프레임워크 자체가 아니라, AI가 HTML을 작성할 수 있다는 점에 베팅했다는 것입니다.

HeyGen의 제품 및 에이전트 엔지니어링 부문 부사장인 Bin Liu가 X(Twitter) 스레드에서 그 이유를 설명했습니다 [15]。

"When an LLM writes HyperFrames, it's writing the medium it was trained on most heavily. The web as browsers see it (HTML, CSS, JavaScript, GSAP idioms from CodePen, 25+ years of accumulated web animation content) is the deepest well in the model's training data." [15]

이 글을 읽고 나니 많은 사람이 궁금해하는 질문에 답할 수 있다고 생각했습니다. 왜 React를 사용하지 않느냐는 것입니다. 답변은 모델이 지식을 끌어오는 우물이 그쪽보다 훨씬 깊기 때문입니다.

Remotion도 싫어하지 않는다고 직접 말했다

스레드에서 누군가 HyperFrames가 단순히 Remotion을 감싼 것인지 물었습니다. 그는 직접적으로 답했습니다.

"아닙니다 - HyperFrames는 처음부터 네이티브 에이전트 사용을 위해 설계되었으며, 자체적으로 구축되었습니다. 무엇보다도 Remotion은 정말 멋진 프로젝트라서 저희가 프로덕션 파이프라인에서 몇 달 동안 사용했습니다." [15]

알아야 할 핵심 기능들

• 렌더링 가능한 형식: MP4, MOV, WebM, GIF 및 PNG 이미지 세트 [2]
• 애니메이션 드라이버: GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 또는 자체 작성 런타임 [1]
• 세 가지 렌더링 방식: 로컬 실행(AWS Lambda 또는 Google Cloud Run 포함) 및 HeyGen Cloud [2][3]
• 컴포지션 변수: HTML에 슬롯을 선언하고 렌더링 시 값을 주입할 수 있습니다. 하나의 파일로 여러 비디오를 출력할 수 있습니다 [2][8]
• 사전 제작 구성 요소 라이브러리: 인포그래픽, 소셜 카드, 자막(lower third), 체이더 트랜지션 등 150개 이상의 블록 제공 [2]
• 내장 음악 및 사운드 효과: 무료 레이어와 함께 10만 개가 넘는 배경 트랙 라이브러리 보유 [5]
• 에이전트용 스킬 (Skill): npx skills add heygen-com/hyperframes를 설치한 후 Claude Code, Cursor, Codex 및 Gemini CLI에서 사용할 수 있는 21가지 스킬 제공 [1][6]

이상 감지 시 자동 되돌리기(Fallback)

렌더러는 컴파일 시 모든 구성 요소를 검사합니다. 만약 BeginFrame 메커니즘이 처리할 수 없는 요소, 예를 들어 줄에 포함된 <iframe>이나 Frame Adapter 외부의 requestAnimationFrame 루프를 발견하면, 대신 스크린샷 모드로 전환됩니다. 이때 가상 시간(virtual time)을 주입하여 모든 것이 실제 시계가 아닌 프레임에 맞춰 진행되도록 합니다 [15].

어떤 이유로 되돌아갔는지 설명하는 메시지를 받게 되며, 결과물 역시 의도한 대로 정확합니다.

가장 짧은 코드 예시

다음은 배경 비디오, 점진적으로 나타나는 텍스트, 그리고 배경 음악이 포함된 완벽한 6초짜리 구성입니다.

<div id="stage" data-composition-id="launch"
     data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6"
...

기억해야 할 세 가지 규칙이 있습니다. 그렇지 않으면 렌더링 결과가 움직이지 않는 정지 이미지로 나옵니다. 보이는 모든 슬롯(slot)은 반드시 `class=

• GitHub 별점 62,431개 (2026년 10월 13일 GitHub API 기준) [6]
• 생성일 2026년 3월 10일 (약 7개월 경과) [6]
• 최신 버전 v0.8.153 (2026년 10월 13일 출시) [7]
• 하루에 세 가지 버전 (v0.8.151부터 v0.8.153까지) [7]
• Apache 2.0 라이선스 (렌더링 비용 없음) [1][3]

별점 숫자가 매우 흥미로운데, 2026년 5월의 독립적인 리뷰에서는 21,894개의 별점을 기록했습니다 [14]. 이는 5개월이 채 안 되는 기간 동안 약 세 배로 증가했다는 것을 의미합니다.

같은 출처는 HyperFrames가 HeyGen 자체의 실제 작업에 사용되었으며, tldraw나 TanStack 같은 프로젝트에서도 커뮤니티에서 활용하고 있다고 언급했습니다 [14].

가격: 무료인 부분과 유료인 부분

이 부분은 명확히 구분해야 합니다. '오픈 소스(open source)'라는 것과 모든 경우에 '무료(free)'라는 것은 같지 않기 때문입니다.

• 프레임워크 및 로컬 렌더링: 모두 무료 [3]
• HeyGen 클라우드: 비디오 분당 사용량에 따라 과금 [4]
• 1080p, 30fps: 분당 0.10 달러 [4]
• 1080p, 60fps: 분당 0.20 달러 [4]
• 4K, 30fps: 분당 0.15 달러 [4]
• 4K, 60fps: 분당 0.30 달러 [4]
• 4K 작업 시 추가 비용 1.5배 부과 및 MP4만 지원 [8]
• 업로드 파일 제한: 프로젝트당 200MB [8]

HeyGen 자체 아바타 서비스가 초당 0.0167달러에서 0.0667달러, 즉 아바타 모델 및 유형에 따라 분당 약 1~4달러를 청구하는 것과 비교했을 때, 그래픽 작업의 분당 0.10달러는 훨씬 저렴합니다. 하지만 이는 서로 다른 작업이므로 직접적인 비교는 양측 모두에게 공정하지 않습니다.

HyperFrames와 Remotion의 차이점

둘 다 실제 브라우저를 열고, 프레임별로 그리는 방식이며 인코딩하는 과정은 같습니다. 차이는 당신이 작성하는 것에 있습니다 [3]

• HyperFrames는 HTML, CSS 및 JavaScript를 작성할 수 있게 합니다. [3]
• Remotion은 React 및 TypeScript를 작성할 수 있게 합니다. [3]
• HyperFrames는 애니메이션을 일시 정지한 후 원하는 시간으로 이동하여 스크린샷을 캡처합니다. [3]
• Remotion은 코드가 프레임 번호를 읽어 해당 프레임을 반환합니다. [3]
• HyperFrames는 Apache 2.0 라이선스를 완전하게 사용합니다. [3]
• Remotion은 자체 라이선스를 사용하며, 개인 및 회사 사용자에게는 무료이고 그 이상부터 유료입니다. [3]

가장 신뢰할 만한 부분은 HeyGen의 비교 문서를 매우 정직하게 작성했다는 것입니다. 제가 읽고 믿음을 갖게 된 문장이 있습니다.

"Neither version is padded or crippled to make a point." [3]

독립적인 출처들은 그 문서가 "정직하고 잘 쓰여졌다(honest and well-written)"고 확인했습니다. [9]

명확하게 다른 또 다른 지점

GSAP과 Lottie는 자체 시계(timeline)를 가지고 있습니다. GSAP 애니메이션이나 기존 웹 페이지를 Remotion으로 가져오려는 에이전트는 시간, 오디오 레벨의 관계, 글꼴 크기 등 세부 사항을 첫 번째부터 손상시키는 경우가 많습니다. HTML에서 시작하여 번역 단계를 완전히 생략하는 경로가 더 낫습니다.

실제 사용자 리뷰

독립 분석가는 2026년 7월에 5점 만점에 3.8점을 주었으며, 솔직한 평가를 내렸습니다.

"Scored as a render framework it's strong; scored as a way for a non-technical creator to make and ship content, it's the wrong tool." [10]

[14]의 리뷰 게시물은 u/andrew-ooo 계정의 Reddit에 공유되었으며, 이 사용자는 자체 호스팅 환경에서 테스트한 후 다음과 같이 보고했습니다.

"Runs entirely on your own hardware (no cloud dependencies)." [11]

하지만 같은 스레드에서는 다른 사용자로부터 반론이 제기되었습니다.

"Tried it but its so inefficient. Switched to Remotion and established alternatives" [11]

또한, Codex 크레딧을 사용 중에 소진하지 않도록 Unsplash 및 Pixabay와 같은 무료 이미지 라이브러리와 온디바이스 모델에 연결되는 버전을 원한다는 의견도 있었습니다. [11]

GitHub에서 가장 가치 있다고 생각하는 케이스

사용자가 이전 버전에서는 정상 작동했지만, MacBook M4 칩에서 렌더링이 멈춘 문제를 보고한 이슈 번호 1231이 있습니다. 팀은 같은 모델의 장비를 사용했지만 재현할 수 없다고 답변했습니다. [12]

약 반나절에 걸쳐, 그리고 6개 버전이 지나면서 사용자들이 점진적으로 테스트했습니다. 팀은 디버깅 도구를 추가했고 외부 개발자가 웹 페이지 탐색 데이터를 수집하기 위한 별도의 pull request를 제안하여 핵심 원인 파악 작업에 방해되지 않게 했습니다. [12]

실제 원인은 매우 흥미롭습니다.

"The composition's inline script builds a massive GSAP timeline synchronously during page load, 8,562 tl.to() calls across three loops." [12]

이 스크립트는 페이지 로드 시점에 거대한 GSAP 타임라인을 동기적으로 구축하여 세 개의 루프에 걸쳐 8,562개의 tl.to() 호출을 발생시킵니다. 이로 인해 브라우저의 메인 스레드가 과부하되어 설정된 대기 시간(60초)을 초과했고, 심지어 3분으로 설정해도 실패했습니다. [12]

사용자는 먼저 타임라인 구축이라는 무거운 작업을 지연시키는 우회 방법을 찾아냈고, 그 결과 로딩 시간이 12초로 단축되었습니다. 실제로 v0.6.80에서 수정된 후에는 페이지가 2초도 안 되는 시간에 로드되었습니다. [12]

저는 해당 스레드를 읽고 두 가지 교훈을 얻었습니다. 첫째, 이러한 문제는 환경에 따라 재현하기 어렵습니다. 사용자가 v0.6.73부터 v0.6.74 사이의 모든 커밋을 이분 탐색(bisect)해 보았지만, 예전에 작동했던 버전조차도 모든 커밋에서 실패했습니다. [12] 둘째, 디버깅 도구를 해결책과 분리하는 것이 핵심 원인을 파악할 수 있게 해주어 주력 팀이 문제를 재현하기를 기다릴 필요가 없게 했습니다.

결정 전 알아야 할 제한 사항

• 클립 단위로 렌더링하고 종료됩니다. 스크립트 작성, 아바타 생성, 이미지 생성 또는 배포 기능은 없습니다. [10]
• Node.js 22 이상 및 FFmpeg가 필요하며 코드를 직접 작성해야 합니다. [10]
• 내장 AI 모델이 없습니다. 파일 링크를 직접 찾아 삽입해야 합니다. [9]
• Remotion에서 변환할 때 일부 스킬이 누락됩니다. 예를 들어, 애니메이션을 구동하는 useState와 useEffect, UI 라이브러리인 MUI, Chakra, Radix 및 repeat: -1 등이 그렇습니다. [13]
• 아직 1.0 버전 이전입니다. API가 변경될 수 있습니다. [10]
• 로컬에서 렌더링하려면 Chrome과 FFmpeg가 필요하며, 그렇지 않으면 클라우드를 사용해야 합니다. [8]

누구에게 적합하고, 누구에게 부적합한가

적합한 경우

• 기존 데이터에서 변수(variable)를 변경하여 일련의 비디오를 제작하는 팀
• 누군가 컴퓨터를 켜놓을 필요 없이 CI/CD 또는 서버리스 함수에 배포하려는 팀 [5]
• 이미 Claude Code나 다른 에이전트를 구동하고 있으며, 여기에 그래픽 기능까지 추가하고 싶은 사람
• 회귀 테스트(regression test)를 위해 완벽하게 재현 가능한 결과가 필요한 프로젝트

적합하지 않은 경우

• 코드를 작성하지 않으면서 완성된 비디오를 얻고 싶은 사람
• 아바타가 말하는 작업이 필요하거나 시스템이 이미지와 음악을 자동으로 찾아주길 원하는 경우
• 타임라인에서 드래그 앤 드롭 방식으로 이미지 순서를 구성해야 하는 작업

주의사항

저는 이 글에서 HyperFrames를 직접 테스트하지 않았습니다. 모든 정보는 HeyGen의 공식 문서, GitHub 리포지토리 이슈, 그리고 HeyGen 경영진이 언급한 스레드([1]~[16])에서 가져왔습니다.

HeyGen은 프레임워크와 유료 클라우드 서비스를 모두 소유하고 있습니다. 따라서 온디바이스(on-device) 무료 서비스가 문서 작성자의 이해 상충을 제거하지는 못하며, 언급된 속도 수치는 스레드 내 사용자 기기에서 나온 것이지 표준 환경에서의 측정값이 아닙니다.

언급된 요금은 제가 확인한 시점의 HeyGen API 문서에 명시된 금액입니다. 예전처럼 직접 접근 가능했던 개방형(open) 가격 페이지는 현재 개발자 대시보드로 이동하여 로그인해야만 최신 가격을 확인할 수 있습니다([4]). 또한, 공개된 기업용 문서에는 아바타 비용이 크레딧 단위로 명시되어 있으며, 1 크레딧은 0.50달러에 해당합니다. 이는 [16]에서 확인할 수 있습니다.

하루에 세 번씩 버전이 출시되고 아직 1.0에 도달하지 않은 프로젝트는 변화가 빠르기 마련입니다([7]). 따라서 실제로 사용해 보려면 항상 리포지토리(repo)의 최신 API를 확인하는 것이 좋습니다.

요약

HyperFrames는 많은 콘텐츠 제작자들이 망설이는 질문, 즉 AI로 비디오를 만들 때 어디서부터 시작해야 하는지에 대한 답을 제시합니다. 그 대답은 놀라울 정도로 간단합니다. 이미 AI가 가장 잘하는 것에서 시작한 다음, 정확한 렌더링 엔진을 추가하는 것입니다.

제 생각에 이것은 영상 편집 프로그램이나 텍스트 기반 비디오 생성 도구를 대체하려는 것이 아닙니다. 대신 두 가지 모두가 할 수 없는 영역, 즉 사용자가 직접 타임라인을 드래그할 필요 없이 동일한 구조에서 수백 개의 비디오를 생산하는 공백을 채우는 것입니다.

만약 같은 데이터 세트로 여러 개의 비디오를 만들어야 한다면, 리포지토리를 한 번 살펴보시는 건 어떨까요? 스킬(skill) 폴더의 예시부터 읽어보시고, 그것이 현재 작업에 적합한지 확인해 보세요.

참고 자료