HyperFrames란? | HTML로 영상 코딩·에이전트용 Remotion 대안

1. 한 줄로 먼저

HyperFrames는 HTML/CSS/JS로 영상을 정의하고 MP4로 렌더링하는 오픈소스 영상 제작 프레임워크다. Sora 같은 생성형 영상 AI가 아니라, AI 코딩 에이전트가 영상을 코딩하도록 만든 HTML 기반 Remotion 대안에 가깝다. HeyGen이 내부 파이프라인에서 쓰던 기술을 Apache 2.0으로 공개했다.

• GitHub: heygen-com/hyperframes
• 사이트·문서: Introduction · Quickstart · Showcase

그림 1. HTML로 장면을 쓰고 Chrome이 프레임을 캡처한 뒤 FFmpeg로 MP4를 만든다. 생성형 영상 모델이 아니다.

2. 뭘 하는 도구인가

영상 한 편을 웹페이지처럼 작성한다.

개념적으로는 h1에 class="clip" · data-start="1" · data-duration="4"처럼 타이밍을 붙인 「Launch day」 장면을 두고 GSAP을 연결한 뒤 다음을 실행한다. (공식 Introduction의 HTML 컴포지션과 같은 모델이다.)

npx hyperframes preview npx hyperframes render

브라우저 장면을 프레임 단위로 캡처해 영상으로 만든다.

3. 생성형 영상 모델은 아니다

HyperFrames 자체가 다음을 만들어 주는 모델은 아니다.

• 실사 동영상 생성
• 사람 얼굴·아바타 생성
• 텍스트에서 영화 장면 생성
• 이미지·음악·나레이션의 자체 생성

대신 기존 영상·이미지·음원·(다른 도구로 만든) AI 미디어를 조합해 완성본을 뽑는 엔진이다.

다만 CLI에 로컬 TTS, Whisper 자막, 배경 제거 같은 보조 기능과 에이전트용 제작 스킬이 있어, 써 보면 「영상 제작 AI」처럼 느껴질 수 있다. 체감과 모델 정의를 구분해 두는 편이 좋다.

4. 왜 “Built for agents”인가

Claude Code, Cursor, Codex, Gemini CLI 같은 코딩 에이전트에 이런 식으로 맡기는 전제다.

우리 제품 웹사이트를 이용해서 30초짜리 세로형 출시 영상을 만들어줘. 타이틀은 페이드인하고 제품 기능 3개를 보여주고 자막과 배경음악을 넣어줘.

그림 3. 기획부터 MP4 렌더까지 에이전트가 이어 가도록 스킬이 준비돼 있다.

에이전트가 이어 갈 작업 예시는 다음과 같다.

1. 영상 기획
2. 디자인 시스템 작성
3. 스크립트·스토리보드
4. HTML/CSS/GSAP 작성
5. 이미지·음성·자막 배치
6. 레이아웃·애니메이션 검사
7. MP4 렌더링

제품 소개, 얼굴 없는 설명 영상, PR 변경사항 영상, 음악 기반 영상, 모션 그래픽, 자막 삽입 등 19개 에이전트 스킬이 포함돼 있다고 공식 Quickstart에서 안내한다. 스킬 설치 예:

npx skills add heygen-com/hyperframes --full-depth

npx는 외부 패키지를 받아 실행하므로, 회사 장비에서는 패키지·설치 스크립트를 먼저 검토하는 것이 안전하다.

5. 어떤 영상에 잘 맞나

잘 맞는 쪽

• SaaS 제품 출시, 웹·앱 UI 소개
• 데이터 차트·인포그래픽, 키네틱 타이포
• GitHub PR·코드 변경 설명
• 자동 자막·로어 서드, SNS 세로형
• 템플릿 기반 대량·브랜드별 개인화
• CI에서 돌리는 릴리스 영상

단독으로 맞지 않는 쪽

• 영화급 실사 장면 생성
• 다큐처럼 복잡한 수작업 NLE 편집
• Premiere/DaVinci급 정교 타임라인 편집
• 비개발자가 마우스만으로 즉시 편집
• 리얼타임 3D 렌더가 핵심인 작품

공식 Showcase에서 결과물 유형을 볼 수 있다.

6. 작동 구조

그림 2. 실시간 화면 녹화가 아니라, 특정 시각으로 seek한 뒤 프레임을 캡처한다.

HTML/CSS/JS + 이미지/영상/음원 → HyperFrames Runtime → Headless Chrome seek → 프레임별 캡처 → FFmpeg 인코딩 → MP4 / WebM / MOV / GIF 등.

미리보기가 끊겨도 최종 렌더는 프레임을 시간축에 맞춰 직접 찍기 때문에, 원칙적으로 프레임 드롭 없는 결과를 노린다.

7. 결정적(Deterministic) 렌더링

규칙을 지키면 같은 입력에서 같은 프레임을 다시 뽑을 수 있다. 다만 자동으로 완성되지 않는다.

• Math.random() 금지 또는 시드 고정
• 렌더 중 네트워크 요청 금지
• 시스템 시각 의존 금지
• 에셋·폰트 고정
• Docker 등으로 Chrome·FFmpeg 버전 고정

아무 HTML이나 넣으면 재현성이 생기는 것은 아니다. Deterministic Rendering 문서를 본다.

8. Remotion과의 차이

가장 가까운 비교 대상은 Remotion이다.

그림 4. 작성 방식·대상·라이선스·생태계 성숙도가 갈린다. 렌더는 둘 다 Chrome+FFmpeg.

HyperFrames 쪽 차별점은 GSAP처럼 자체 시간축을 가진 라이브러리를 멈춘 상태에서 원하는 프레임으로 옮기기 쉽다는 점이다. 기존 웹 애니를 영상으로 옮기기 편하다.

React 컴포넌트·타입 안전성·디자인 시스템 재활용·대규모 렌더 생태계는 Remotion이 더 강하다. HyperFrames 측도 Remotion Lambda가 더 성숙하다고 인정한다. 공식 비교를 참고한다.

9. 장점

그림 5. HTML·자동화·Apache 2.0이 강점이고, 0.x·자원·재현성·텔레메트리는 같이 본다.

1. AI가 쓰기 쉬운 포맷 — LLM이 익숙한 HTML/CSS/JS. 별도 영상 DSL을 덜 배운다.
2. 웹 기술 재사용 — GSAP, CSS Animation, Lottie, Three.js, Anime.js, WAAPI, WebGL 등.
3. 자동화 — JSON 변수만 바꿔 동일 템플릿으로 고객별·다국어·주간 리포트·뉴스·업데이트·광고 소재 대량 생성.
4. 출력 다양 — MP4, WebM, 투명 WebM/MOV, GIF, PNG 시퀀스, HDR 로컬, 최대 4K 프리셋 등(CLI 문서 기준).
5. 진짜 오픈소스 — Apache 2.0, 렌더당 오픈소스 사용료 없음. HeyGen 호스팅·AWS 비용은 별도.

10. 단점과 주의점

1. 아직 0.x — 2026년 7월 23일 기준 공개 최신은 v0.7.68(2026-07-22). API·규칙이 바뀔 수 있다.
2. 프롬프트 한 줄 ≠ 고품질 — 에이전트가 HTML을 쓰는 것과 미적 완성도는 별개다. 디자인·에셋·폰트·브랜드 컬러·스토리보드·나레이션·장면 길이가 명확해야 한다.
3. 렌더 자원 — Chrome 프레임 단위라 긴 영상·4K·Three.js·다중 영상 레이어는 CPU·메모리·디스크를 많이 쓴다. 프레임 캐시가 수 GB까지 커질 수 있다고 CLI 문서에 주의가 있다.
4. 재현성 조건 — OS 폰트·Chrome 차이로 로컬 결과가 달라질 수 있다. 엄격한 동일성은 Docker·고정 클라우드.
5. 에이전트 코드 검수 — 외부 스크립트·CDN·웹 콘텐츠는 보안·저작권·재현성 이슈. 미디어 로컬화, 라이브러리 버전 고정, CDN 최소화, JS 검토가 필요하다.
6. 텔레메트리 — CLI가 명령명, 렌더 성능, 오류 종류, 대략적 시스템 정보, 사용 에이전트명 등을 수집한다고 문서에 명시돼 있다. 프로젝트명·영상 내용은 수집하지 않는다고 한다. 끄려면:

HYPERFRAMESNOTELEMETRY=1

11. 프로젝트 상태 (2026-07-23 기준)

GitHub API·공개 메타 기준 대략치는 다음과 같다. 숫자는 시점에 따라 변한다.

관심·개발 속도는 높지만 공개된 지 얼마 안 된 0.x라는 점은 같이 본다.

12. 직접 실행하려면

필수 조건

• Node.js 22 이상
• FFmpeg
• npm 또는 Bun
• (선택) Docker

npx hyperframes init my-video → 폴더 진입 → npx hyperframes preview → npx hyperframes render

13. 최종 평가

HyperFrames는 「AI 영상 생성 모델」보다 「AI가 조작하기 좋은 프로그래머블 영상 제작 엔진」으로 보는 편이 정확하다.

특히 다음 조건이면 매력적이다.

• 코딩 에이전트로 영상을 자동 생성하고 싶다
• 제품 UI·웹사이트·텍스트·차트 중심이다
• 여러 버전을 반복·대량 생산해야 한다
• React보다 HTML/CSS/GSAP이 편하다
• 오픈소스 라이선스(Apache 2.0)가 중요하다

반면 한두 편을 사람이 정교하게 편집하려면 Premiere·After Effects·Resolve가 편하고, React 팀에서 안정된 코드 영상 파이프라인을 원하면 아직은 Remotion이 더 검증된 선택일 수 있다.

정리하면: Claude/Codex에게 영상용 웹페이지를 코딩하게 한 다음, 그것을 프레임 정확한 MP4로 구워 주는 도구다.

---

14. 가장 쉬운 사용법부터

HyperFrames는 일반 웹 채팅창에 프롬프트만 넣는 SaaS가 아니다. Claude Code·Cursor·Codex CLI 같은 코딩 에이전트가 로컬 프로젝트 파일과 터미널을 조작하게 만드는 방식이다.

전체 흐름:

1. 자료 준비
2. HyperFrames 프로젝트 생성
3. 코딩 에이전트에 영상 제작 요청
4. 브라우저 미리보기
5. 수정 요청 반복
6. MP4 렌더링

공식 입문: Introduction · Quickstart · Prompt Guide · Skills · Pipeline

14.1. 준비물·설치

• Node.js 22 이상, FFmpeg, npm 또는 Bun
• Claude Code / Cursor / Codex / Gemini CLI 중 하나
• 선택: 로고·제품 캡처·영상·BGM·폰트

확인: node --version · ffmpeg -version

macOS 예: brew install node ffmpeg Windows 예: winget install OpenJS.NodeJS · winget install Gyan.FFmpeg

14.2. 프로젝트 생성

npx hyperframes init my-video 후 폴더로 들어간다. 처음에는 대화형으로 스타일을 고를 수 있다.

공식 Examples

14.3. 에이전트 스킬

hyperframes init이 기본 스킬을 넣기도 하지만, 별도 설치는:

npx skills add heygen-com/hyperframes --full-depth

Claude Code는 설치 후 세션 재시작을 권장한다. Cursor는 my-video 폴더를 열고 Agent 모드를 쓰면 된다. npx는 외부 패키지를 받으므로 회사 장비에서는 패키지·설치 스크립트 검토가 안전하다.

어떤 종류인지 모르겠으면 항상 /hyperframes 로 시작한다.

14.4. 첫 요청에 넣기 좋은 말

바로 코딩시키지 말고 기획 → 대본 → 스토리보드 → 제작 → 검수 순으로 막는다. 예:

/hyperframes

이 프로젝트에 15초짜리 제품 소개 영상을 만들어줘.

형식: 9:16, 1080×1920, 30fps, 약 15초, 릴스·쇼츠용.

스타일: 깔끔·현대·빠른 전개. 검정 배경, 흰 텍스트, 포인트 #6C5CE7.

구성 5장면, 자막 크게, 전환은 빠르되 과한 글리치 금지. 엔딩은 로고+「지금 시작하세요」 CTA.

먼저 STORYBOARD.md와 SCRIPT.md를 보여주고, 승인 후에 HTML 컴포지션을 만들어줘.

완료 후 lint·validate·snapshot으로 오류·레이아웃 확인. 아직 최종 렌더는 하지 마.

14.5. 좋은 요청문의 공통 구조

1. 목적 2. 대상 시청자 3. 길이 4. 화면 비율 5. 핵심 메시지 하나
2. 장면 구성 7. 디자인 스타일 8. 자료 경로 9. 나레이션·자막·BGM 10. 최종 출력 조건

범용 템플릿 요지: 영상 목적·시청자·기억시킬 한 문장·길이·비율·해상도·플랫폼·분위기·색·폰트·애니메이션·피해야 할 표현·훅–문제–해결–증거–CTA 구성·에셋 경로·오디오 조건 → 먼저 디자인·스토리보드 승인 → 제작 → lint/validate/snapshot.

---

15. 활용 방식별 요청 예시

스킬 이름과 핵심만 정리한다. 자세한 프롬프트는 Prompt Guide·Skills catalog를 본다.

15.1. 웹사이트 → 제품 홍보 (/product-launch-video)

URL을 분석해 30초 SaaS 출시 영상을 만든다. 웹 컬러·폰트 추출, UI 화면 강조, 가짜 수치 금지, DESIGN.md → STORYBOARD/SCRIPT 승인 후 제작. Website to Video

적합한 용도: 홈페이지 소개, SaaS 출시, 앱 업데이트, 랜딩 광고, 리뉴얼 발표.

15.2. 글·PDF → 얼굴 없는 설명 (/faceless-explainer)

보고서·기사·블로그·회의록을 쇼츠형 설명 영상으로. 문서에 없는 통계를 만들지 말고, 핵심 3개만, 나레이션·동기화 자막. 입력 전 요약·출처 페이지를 먼저 보여 달라고 한다.

15.3. 말하는 영상 자막 (/embedded-captions)

assets/interview.mp4에 한국어 자막. 원본 자르지 않기, 최대 2줄, 타이밍 맞춤, 하단 여백·강조색·얼굴 겹침 snapshot 검사.

15.4. 인터뷰·강의를 쇼츠로 (/talking-head-recut)

전사 → 45~60초 후보 구간 제시 → 선택 후 침묵 정리·9:16 중앙 배치·자막·타이포 카드·lower-third·B-roll. 원본에 없는 발언 금지.

15.5. 로고·짧은 모션 (/motion-graphics)

대개 3~10초. 투명 MOV+검정 MP4, 정지 프레임 snapshot 먼저. 숫자 카운트업·막대그래프 등 통계 모션도 가능.

15.6. 음악 싱크 (/music-to-video)

BPM·비트 분석 후 드롭에 로고, 구간별 강약, 후렴 컷 속도. 음악 저작권은 별도 확인.

15.7. CSV·데이터 스토리 (/hyperframes 또는 /general-video)

데이터 임의 변경·추정·보간 금지, 결측은 결측으로. 바 차트 레이스·인사이트 승인 후 제작. 「데이터에 없는 값을 추정하지 말고 결측으로 표시」를 프롬프트에 넣는 것이 좋다.

15.8. GitHub PR → 업데이트 영상 (/pr-to-video)

PR에 없는 기능 금지. 사용자 변화·before/after·근거 파일/커밋 표시. 주간 변경·릴리스 노트·신기능 공지 자동화에 유리.

15.9. 피치덱·슬라이드 (/slideshow)

기본 출력은 MP4가 아니라 탐색 가능한 슬라이드 덱이다. 필요하면 슬라이드별 영상 렌더를 추가 요청. 자료에 없는 매출·시장 규모를 만들지 말고 [자료 필요]로 표시.

15.10. 고객별 대량 생성

data-composition-variables와 JSON으로 name·company·score 등 치환, batch render, 텍스트 오버플로 snapshot. 처음엔 로컬 2~3개 샘플 검증 후 Lambda 분산을 검토.

15.11. Remotion → HyperFrames (/remotion-to-hyperframes)

길이·FPS·해상도 유지, React→HTML, interpolate→seek 가능 GSAP, 스냅샷 비교, 기존 Remotion 코드 삭제 금지·별도 폴더 작성.

---

16. 제작·수정·렌더를 단계로 쪼개기

처음부터 「완성해줘」보다 단계가 낫다.

수정은 전체를 다시 만들지 말고 구체적으로: 「스위스 편집으로」「입장 0.3초 snappy」「beat 3만 다시」「자막 120px 위」「BGM 덕킹」.

16.1. 자주 쓰는 CLI

• 미리보기: npx hyperframes preview
• 환경: npx hyperframes doctor
• 검사: npx hyperframes check
• 스냅샷: npx hyperframes snapshot
• 렌더: npx hyperframes render --output final.mp4

에이전트에게 「draft 품질로」「high 품질 final.mp4」처럼 품질을 명시한다. CLI 문서

16.2. 첫 실전 과제 (10초 타이포)

복잡한 1분짜리보다 10초 세로 타이포로 시작하는 편이 안정적이다. /hyperframes로 9:16·1080×1920·30fps·나레이션 없음·검정 배경·흰+형광 녹색. 문구 「아이디어를 / 코드로 만들고 / 영상으로 렌더한다 / HYPERFRAMES」. 스토리보드 승인 → lint/validate → 0·2·5·8·9.5초 snapshot → final.mp4. 성공 후 웹사이트·나레이션·자막·기존 영상을 하나씩 얹는다.

---

17. 공식 개념·패키지 (문서 지도)

공식 Introduction 기준, 영상은 HTML data-*로 타이밍을 붙이고 npx hyperframes render로 결정적 프레임 캡처·FFmpeg 인코딩한다. 타임라인 전용 포맷이 아니라 웹페이지와 같은 스택이다.

개념 문서 예: Compositions · Data Attributes · Variables · Frame Adapters · Deterministic Rendering

패키지 예:

배포·클라우드: Cloud Rendering · AWS Lambda · GCP Cloud Run 기타 가이드: GSAP · 4K · HDR · Remove Background · Common Mistakes · Troubleshooting · vs Remotion · Showcase

HTML 타이밍 예(개념): h1.clip에 data-start="1" · data-duration="4" 등으로 「Launch day」 문구 구간을 잡고 GSAP을 연결한 뒤 preview/render.

문서 전체 목차는 llms.txt로도 탐색할 수 있다.

18. 마무리

앞에서 다룬 HyperFrames의 핵심만 짧게 정리한다.

• Sora류 생성 AI가 아니라 HTML로 장면을 짜고 Chrome+FFmpeg로 렌더하는 프레임워크다.
• 코딩 에이전트·웹 애니·템플릿 자동화·CI 릴리스 영상에 잘 맞는다.
• Remotion과 Chrome+FFmpeg는 비슷하고, 작성 언어·라이선스·성숙도가 갈린다.
• 결정적 렌더는 규칙·환경 고정이 필요하고, 0.x·자원·텔레메트리를 감안한다.
• 회사망에서는 npx·스킬 설치 전 패키지를 검토한다.
• 스타·다운로드·버전은 변하니 GitHub·npm·공식 문서를 확인한다.
• 패키지·클라우드·가이드는 공식 Introduction·llms.txt 목차를 따라가면 된다.
• 실무는 채팅 한 방이 아니라 프로젝트 생성 → 에이전트 스킬 → 스토리보드 승인 → preview → render 흐름이다.

「에이전트가 HTML을 쓰게 만든 영상 엔진이지, 한 줄 프롬프트로 영화를 뽑는 모델이 아니다.」 에셋과 스토리보드를 준비한 뒤 preview → render로 확인하는 흐름이 실무에 가깝다.

자주 묻는 질문

• HyperFrames는 Sora처럼 영상을 생성하나요?

  아닙니다. 텍스트에서 실사 장면을 만들어 주는 생성형 영상 모델이 아닙니다. HTML/CSS/JS로 배치·애니메이션을 정의하고 Headless Chrome으로 프레임을 캡처한 뒤 FFmpeg로 인코딩하는 렌더 엔진입니다. 기존·외부 AI 미디어를 조합할 수는 있습니다.

• Remotion과 뭐가 다른가요?

  둘 다 Chrome+FFmpeg로 렌더하지만, HyperFrames는 HTML/CSS/JS·에이전트·Apache 2.0에 가깝고 Remotion은 React/TSX·성숙한 생태계·자체 라이선스에 가깝습니다. GSAP 등 웹 애니를 프레임으로 옮기기 쉬운 점이 HyperFrames 강점이고, React 디자인 시스템·Lambda 성숙도는 Remotion이 유리한 편입니다.

• 코딩 에이전트로 어떻게 쓰나요?

  Cursor·Claude Code 등에 출시 영상 기획·HTML/GSAP·자막·렌더를 요청하는 흐름입니다. 공식은 npx skills add heygen-com/hyperframes --full-depth 로 스킬을 넣는 방식을 안내합니다. npx는 외부 패키지를 받으므로 회사 환경에서는 검수가 필요합니다.

• 어떤 영상에 적합한가요?

  SaaS 출시, UI 소개, 차트·타이포, PR 설명, 자막·세로형 SNS, 템플릿 대량·CI 릴리스 영상에 잘 맞습니다. 영화급 실사 생성, 복잡한 다큐 NLE, 마우스만 쓰는 비개발 편집, 리얼타임 3D 핵심 작품에는 단독으로 적합하지 않습니다.

• 결정적 렌더링이 자동으로 보장되나요?

  아닙니다. 난수·네트워크·시스템 시각을 피하고 에셋·폰트·Chrome·FFmpeg 버전을 고정해야 같은 입력이 같은 프레임에 가깝게 나옵니다. OS·폰트 차이로 로컬 결과가 달라질 수 있어 Docker 등이 필요할 수 있습니다.

• 설치 조건과 기본 명령은?

  Node.js 22 이상, FFmpeg, npm 또는 Bun이 필요합니다. npx hyperframes init → preview → render 순으로 확인합니다. 텔레메트리를 끄려면 HYPERFRAMESNOTELEMETRY=1 을 설정할 수 있습니다.

• 라이선스와 비용은?

  Apache 2.0이라 수정·상업 이용·재배포가 가능하고 렌더당 오픈소스 사용료는 없습니다. HeyGen 호스팅 클라우드나 AWS Lambda 등 인프라 비용은 별도입니다. Remotion과는 라이선스 체계가 다릅니다.

• 지금 써도 되나요? 버전은?

  2026년 7월 23일 전후 공개 최신은 v0.7.68입니다. 스타·다운로드는 많지만 0.x라 API·규칙이 바뀔 수 있습니다. 프로덕션에서는 버전 고정과 회귀 테스트를 권장합니다.

• 채팅창에 프롬프트만 넣으면 영상이 나오나요?

  HyperFrames는 웹 채팅형 생성 서비스가 아닙니다. Claude Code·Cursor·Codex 같은 코딩 에이전트가 로컬 프로젝트에서 HTML을 만들고 preview·render로 MP4를 뽑는 방식입니다. /hyperframes 스킬로 기획·스토리보드 승인 후 코딩하게 하는 편이 안전합니다.

• 첫 요청은 어떻게 쓰는 게 좋나요?

  길이·비율·스타일·장면 수·CTA를 적고, STORYBOARD.md·SCRIPT.md를 먼저 보여 달라고 한 뒤 승인 후에 HTML을 만들게 합니다. lint·validate·snapshot까지 시키고 최종 렌더는 보류하는 프롬프트가 초보에게 잘 맞습니다.

• 웹사이트·PDF·PR·자막 각각 어떤 스킬인가요?

  대표적으로 /product-launch-video(웹→홍보), /faceless-explainer(문서→얼굴 없는 설명), /embedded-captions(자막), /talking-head-recut(쇼츠 재편집), /motion-graphics, /music-to-video, /pr-to-video, /slideshow, /remotion-to-hyperframes 등이 있습니다. 모르겠으면 /hyperframes로 시작합니다.

• slideshow는 바로 MP4인가요?

  기본 출력은 탐색 가능한 슬라이드 덱인 경우가 많습니다. 필요하면 슬라이드별 영상 렌더를 추가 요청합니다. 자료에 없는 매출·시장 규모는 만들지 말고 [자료 필요]로 표시하라고 지시하는 것이 좋습니다.