안녕하세요! 오늘은 HeyGen이 오픈소스로 공개한 HyperFrames에 대해 알아보겠습니다. HyperFrames는 HTML을 작성하면 MP4 비디오로 렌더링하는 혁신적인 프레임워크입니다. 특히 Claude Code, Cursor, Codex 같은 AI 코딩 에이전트와 완벽하게 연동되어, AI가 직접 비디오를 만들 수 있는 환경을 제공합니다. 이 블로그에서는 HyperFrames의 핵심 기술, Claude Code 설치 방법, 실제 사용 예제, 다른 AI 에이전트 연동법을 상세히 설명하겠습니다. 함께 살펴보시죠!
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
🤖 HyperFrames란 무엇인가?
HyperFrames는 HeyGen이 2026년 4월에 오픈소스로 공개한 HTML 기반 비디오 렌더링 프레임워크입니다. 기본 개념은 간단합니다: HTML 코드를 작성하면, Puppeteer로 페이지를 캡처하고 FFmpeg로 MP4 비디오로 렌더링합니다. 이 과정이 모두 자동화되어 있어, AI 에이전트가 HTML을 생성하면 바로 비디오가 만들어집니다.
핵심 특징 3가지:
1. Video as Code: 비디오를 HTML 코드로 작성 → git-diffable, 버전 관리 가능
2. AI Agent Native: Claude Code, Cursor, Codex 등 AI 에이전트와 1차 지원
3. Apache 2.0 라이선스: 완전 무료 오픈소스, 상업적 사용 가능
HyperFrames는 Remotion에서 영감을 받아 개발되었습니다. HeyGen은 실제 프로덕션에서 Remotion을 사용하면서 학습한 패턴들(Chrome launch flags, image2pipe → FFmpeg streaming, frame buffering)을 HyperFrames에 적용했습니다. 하지만 Remotion과 달리 HyperFrames는 AI 에이전트를 위해 특별히 설계되었습니다.
HTML로 비디오 만드는 원리
HyperFrames에서 비디오는 data-* 속성을 사용한 HTML 요소들로 구성됩니다:
<div id="root" data-composition-id="my-video"
data-start="0" data-width="1920" data-height="1080">
<h1 id="title" class="clip"
data-start="0" data-duration="5" data-track-index="0"
style="font-size: 72px; color: white; text-align: center;">
Hello, Hyperframes!
</h1>
</div>각 요소의 의미:
data-composition-id: 비디오 IDdata-start: 시작 시간(초)data-duration: 재생 시간(초)data-track-index: 트랙 번호(동시 재생 요소 관리)class="clip": timed element 표시(필수)
📦 HyperFrames 패키지 구성
HyperFrames는 여러 패키지로 구성된 모듈형 아키텍처를 사용합니다:
| 패키지 | 기능 | 용도 |
|---|---|---|
hyperframes (CLI) |
create, preview, lint, render | 터미널에서 비디오 생성 |
@hyperframes/engine |
Puppeteer + FFmpeg | seekable page-to-video capture |
@hyperframes/producer |
capture + encode + audio mix | 전체 렌더링 파이프라인 |
@hyperframes/studio |
Browser-based editor UI | 웹에서 비디오 편집 |
@hyperframes/player |
Embeddable web component | 비디오 플레이어 임베드 |
가장 중요한 패키지는 CLI입니다. npx hyperframes preview로 미리보기, npx hyperframes render --output demo.mp4로 MP4 다운로드가 가능합니다.
🚀 Claude Code에서 HyperFrames 설치법
Claude Code는 HyperFrames를 스킬(Skill) 형태로 지원합니다. 설치 과정을 단계별로 설명하겠습니다.
1단계: Git LFS 설치 (필수)
HyperFrames는 Git LFS를 사용합니다. 먼저 Git LFS를 설치해야 합니다:
# Ubuntu/Debian
sudo apt install git-lfs
git lfs install
# macOS (Homebrew)
brew install git-lfs
git lfs install
# Windows
git lfs install⚠️ 주의: Git LFS가 없으면 git-lfs filter-process: command not found 오류가 발생합니다. 반드시 설치하세요.
2단계: HyperFrames 스킬 설치
Claude Code에서 스킬을 설치합니다:
npx skills add heygen-com/hyperframes
설치 후 Claude Code에서 다음 슬래시 명령어가 활성화됩니다:
/hyperframes: 비디오 composition 작성/hyperframes-cli: CLI 명령어 실행/gsap: GSAP 애니메이션 도움
3단계: 프로젝트 생성
Claude Code에서 새 프로젝트를 만듭니다:
# Claude Code에서 입력
/hyperframes make me a product demo video for my AI tool
Claude Code가 HTML composition을 생성합니다. 그 다음 미리보기와 렌더링:
# 미리보기 (브라우저에서 확인)
npx hyperframes preview
# MP4 렌더링
npx hyperframes render --output demo.mp4
| HyperFrames로 생성한 영상 |
💡 실제 사용 예제
Claude Code에게 비디오를 요청하는 실제 예제를 보겠습니다.
예제 1: 제품 데모 비디오
Claude Code 입력:
/hyperframes create a 30-second product demo video for "Claude Reader"
- a tool that reads documents and summarizes them
- Use brand colors: blue (#2196F3) and white
- Include animated text transitions
- Add a logo reveal at the start
- End with a call-to-action "Try Free"Claude Code가 HTML composition을 생성한 후, npx hyperframes lint로 검증하고 npx hyperframes render로 MP4를 만듭니다.
| 제품 데모 비디오 영상 |
예제 2: 최소 Composition
직접 index.html을 작성하는 최소 예제:
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; background: #000; }
.clip { position: absolute; }
</style>
</head>
<body>
<div id="root" data-composition-id="minimal-demo"
data-start="0" data-width="1920" data-height="1080">
<h1 id="title" class="clip"
data-start="0" data-duration="3" data-track-index="0"
style="font-size: 80px; color: #2196F3;
text-align: center; top: 50%; left: 50%;
transform: translate(-50%, -50%);">
Welcome to HyperFrames
</h1>
<p id="subtitle" class="clip"
data-start="3" data-duration="2" data-track-index="0"
style="font-size: 40px; color: white;
text-align: center; top: 60%; left: 50%;
transform: translate(-50%, -50%);">
AI-powered video creation
</p>
</div>
</body>
</html>이 HTML을 저장하고 npx hyperframes render --output minimal.mp4를 실행하면 5초 비디오가 생성됩니다.
🔗 다른 AI 에이전트 연동법
HyperFrames는 Claude Code 외에도 다양한 AI 에이전트를 지원합니다.
Claude Design 연동
Claude Design(Anthropic의 웹 기반 AI)에서도 HyperFrames를 사용할 수 있습니다:
- GitHub에서
docs/guides/claude-design-hyperframes.md다운로드 - Claude Design 채팅에 파일 첨부
- Claude Design이 HTML skeleton 생성
- Claude Code에서
npx hyperframes lint로 검증 후 렌더링
💡 Claude Design 특징: template-first approach로 npx hyperframes lint를 0 errors로 통과하는 HTML을 첫 번째 다운로드에 생성합니다. 구조적 규칙이 이미 embedded 되어 있어 Claude Code가 바로 refine 할 수 있습니다.
Cursor 연동
Cursor는 두 가지 방법으로 연동합니다:
방법 1: Cursor Marketplace
- Cursor Marketplace에서 HyperFrames 플러그인 검색
- 설치 후 플러그인 활성화
방법 2: Sideload
# HyperFrames 클론
git clone https://github.com/heygen-com/hyperframes
cd hyperframes
# Cursor에서 Settings → Plugins → Load unpacked
# hyperframes 폴더 선택OpenAI Codex 연동
Codex는 OpenAI Codex 플러그인으로 연동합니다:
# sparse-install plugin surface
# .codex-plugin/plugin.json 참조Codex에서도 Claude Code와 동일한 스킬이 제공됩니다.
📊 Remotion vs HyperFrames 비교
HyperFrames는 Remotion에서 영감을 받았지만, AI 에이전트에 특화된 차별점이 있습니다:
| 특징 | Remotion | HyperFrames |
|---|---|---|
| 기본 언어 | React/TypeScript | HTML/CSS |
| AI 에이전트 지원 | 없음 | 1차 지원 (Claude Code, Cursor, Codex) |
| 학습 곡선 | React 필요 | HTML만 알면 됨 |
| 라이선스 | Remotion License | Apache 2.0 (완전 무료) |
| Skills/MCP | 없음 | Skills + MCP 서버 포함 |
| Lint | eslint | npx hyperframes lint |
HyperFrames의 HTML 기반 접근은 AI 에이전트에게 더 적합합니다. AI는 React 코드를 생성할 수 있지만, HTML은 더 직관적이고 lint 통과가 보장됩니다.
🎯 맺음말
지금까지 HeyGen HyperFrames에 대해 알아보았습니다. HyperFrames는 HTML을 작성하면 MP4 비디오로 렌더링하는 오픈소스 프레임워크입니다. 특히 Claude Code, Cursor, Codex 같은 AI 에이전트와 완벽 연동되어, AI가 직접 비디오를 만들 수 있습니다. Apache 2.0 라이선스로 완전 무료이며, 상업적 사용도 가능합니다.
설치는 npx skills add heygen-com/hyperframes 한 줄이면 됩니다. Git LFS만 미리 설치하면, Claude Code에서 /hyperframes 명령어로 바로 비디오를 만들 수 있습니다.
여러분도 한번 HyperFrames를 Claude Code에서 직접 사용해보시길 추천드리면서 저는 다음 시간에 더 유익한 정보를 가지고 다시 찾아뵙겠습니다. 감사합니다.
📚 참고 문헌 및 출처
- HeyGen. (2026). HyperFrames GitHub Repository. Retrieved from https://github.com/heygen-com/hyperframes
- HeyGen. (2026). HyperFrames Documentation - Claude Design Guide. Retrieved from https://hyperframes.mintlify.app/guides/claude-design
- Reddit r/ClaudeCode. (2026). Claude writes HTML, HyperFrames render a video. Retrieved from https://www.reddit.com/r/ClaudeCode/comments/1sqchxu/
- Nidhin.dev. (2026). Video as Code: A Deep Dive into HeyGen's Hyperframes. Retrieved from https://blog.nidhin.dev/video-as-code
'AI 도구' 카테고리의 다른 글
| 🆓 Claude Design의 오픈소스 대안: Open Design으로 72개 디자인 시스템 무료 사용 (1) | 2026.05.01 |
|---|---|
| 🆓 Deep Research Leaderboard 1위 오픈소스: Onyx 무료 설치 가이드 (2) | 2026.04.30 |
| 🤖 Hermes Agent v2026.4.23 Interface Release - 119K 스타 오픈소스 자가 개선 AI 에이전트 (0) | 2026.04.28 |
| 🚀 Qwen3.6-Max-Preview: 6개 벤치마크 1위 달성한 알리바바 최신 플래그십 (0) | 2026.04.27 |
| 🚀 DeepSeek V4 Preview: 1M 토큰 컨텍스트의 오픈소스 LLM 새로운 이정표 (1) | 2026.04.25 |
