HyperFrames V2 — Claude로 영상을 'vibe-coding'하는 시대가 왔다

HYPERFRAMES / V0.5.7 FIG.00 — COVER

 

Claude로
영상을 코딩
하는 시대

HyperFrames V2 — HTML/CSS만으로 MP4를 만든다.
AI 에이전트가 영상을 '쓰는' 첫 번째 표준.

APACHE-2.0 · 17K★ · LOCAL RENDER 2026.05.11

AI · IT — TOOLING

HyperFrames V2 — Claude로
영상을 'vibe-coding'하는 시대가 왔다

HTML/CSS를 입력으로 받아 MP4를 출력하는 오픈소스 프레임워크. 17,000개의 GitHub 스타와 Claude Code 스킬 통합으로, AI 에이전트가 영상을 '코드로 작성'하는 워크플로우가 현실이 됐다.

IX

IX Interaction Team

프로토타입·AI 자동화 분야 · 사내 인터랙션 실험실

ix-works.xyz/news · 발행 2026.05.11 · 읽기 약 7분

#HYPERFRAMES #CLAUDE-CODE #VIBE-CODING #OSS

01 / 정의

HyperFrames란 무엇인가

HTML·CSS·JS를 입력으로 받아 MP4를 출력하는 오픈소스 프레임워크.
내부 동작은 의외로 직관적이다.

Puppeteer로 헤드리스 브라우저를 띄워 프레임 단위로 캡처한 뒤, FFmpeg로 인코딩한다. 핵심은 결정론적(deterministic) 렌더링이다. 같은 HTML을 넣으면 항상 같은 영상이 나온다.

이게 왜 중요하냐면 — AI 에이전트가 영상을 '코드로 작성'할 수 있게 만들어주기 때문이다. LLM에게 "30초 인트로 영상 만들어줘"라고 하면, 모델은 HTML+CSS+GSAP 타임라인을 출력하고, 그걸 그대로 렌더링하면 MP4가 나온다. 사람 손이 닿지 않는다.

FIG.01 SPECS · 2026-05

GITHUB STARS

17K

2026년 5월 기준

RESOLUTION

1920×1080

30fps · 4K/60fps 옵션

LICENSE

Apache-2.0

상업적 무제한

버전 v0.5.7 (2026-05-10) 출력 MP4 / MOV / WebM 렌더 로컬 · API 키 불필요

6대 핵심 지표 한눈에 (출처: GitHub heygen-com/hyperframes · 공식 릴리스 노트)

02 / 변화

V2에서 새로 추가된 것

기능 추가보다는 '실제 콘텐츠 크리에이터가 쓸 수 있는' 수준으로의 도약. 핵심 변경 세 가지.

FIG.02 V2 RELEASE HIGHLIGHTS

01

자막 시스템

hyperframes-media 스킬이 TTS·STT를 같이 처리. 오디오 넣으면 타이밍 자동 자막.

02

플로팅 카드 50+

인용·통계·페이드인 등 카탈로그 블록. npx hyperframes add 한 줄.

03

Frame Adapter

GSAP + anime.js + Lottie + three.js를 한 HTML 안에서 자유롭게 조합.

V2의 세 가지 결정적 변화 (출처: HyperFrames 공식 릴리스 노트 v0.5.0~v0.5.7)

03 / 통합

Claude Code와의 통합 — 스킬 시스템

이 부분이 가장 큰 변화다. Anthropic Skills 시스템에 맞춰 모듈을 잘게 쪼갰다.

설치는 한 줄이다.

$ npx skills add heygen-com/hyperframes

그러면 Claude Code 안에서 다음 슬래시 커맨드들이 활성화된다.

FIG.03 SLASH COMMAND CATALOG

CORE

/hyperframes

HTML 컴포지션 작성

/hyperframes-cli

init · lint · preview · render

/hyperframes-media

TTS · 전사 · 배경 제거

/gsap

GSAP 타임라인 도움말

ADAPTERS & STYLING

/tailwind /animejs /css-animations /lottie /three /waapi

Claude Code에 활성화되는 10개 슬래시 커맨드 (출처: heygen-com/hyperframes CLAUDE.md)

실제 사용 흐름은 이렇다. "60초짜리 신제품 소개 영상 만들어줘, 톤은 미니멀하게"라고 요청하면, Claude Code가 /hyperframes를 호출해서 HTML 컴포지션을 작성하고, /hyperframes-cli로 렌더 명령을 실행한다. 사용자는 결과 MP4만 확인한다.

04 / 비교

왜 이게 중요한가 — Remotion과의 차이

코드로 영상을 만든다는 컨셉 자체는 새롭지 않다. Remotion이 이미 React 기반으로 비슷한 일을 한다. 하지만 두 도구는 의도적으로 다른 곳을 본다.

FIG.04 DESIGN PHILOSOPHY

A · 기존

Remotion

프로그래머를 위한 도구

• React 기반 JSX 컴포넌트
• 사람이 직접 작성하는 코드
• 컴포넌트 트리 사고 필요
• React 생태계 통합

B · 신규

HyperFrames

AI를 위한 도구

• Plain HTML/CSS/JS
• LLM이 자유롭게 출력
• --non-interactive 기본 내장
• 자동화 파이프라인 first-class

두 도구의 출발점 차이 (출처: remotion.dev · hyperframes.heygen.com 공식 포지셔닝)

요약 — Remotion은 '프로그래머가 영상을 만드는 도구', HyperFrames는 'AI가 영상을 만드는 도구'다. 출발점부터 타겟이 다르다.

05 / 실행

설치와 첫 영상 — 4단계

체감해보고 싶으면 이 시퀀스를 따라가면 된다. 사전 조건은 Node.js 18 이상.

FIG.05 QUICKSTART · 4 STEPS

01

프로젝트 스캐폴딩

npx hyperframes init my-first-video

02

디렉터리 진입 + 미리보기

cd my-first-video && npx hyperframes preview

03

라이브 편집

브라우저가 자동으로 열림 — index.html 수정하면 라이브 리로드

04

렌더링 → MP4

npx hyperframes render index.html --output out.mp4

Node.js 18+ 환경 기준 첫 영상 워크플로 (출처: HyperFrames 공식 Quickstart)

처음 렌더링은 1080p 30fps 기준 30초짜리 영상이 약 1~2분 걸린다. 결정론적 출력이라 CI 환경에서도 그대로 재현된다.

06 / 활용

활용 시나리오 — AI 자동화 영상의 새 표준

한 사람을 위한 도구가 아니라 파이프라인을 위한 도구다. 떠올릴 수 있는 활용 시나리오를 정리하면 이렇다.

FIG.06 5 PIPELINE PATTERNS

01 · DAILY

일일 뉴스 영상 자동 생성

RSS → LLM 요약 → HyperFrames → YouTube 자동 업로드

02 · BATCH

제품 소개 변형 100개

한 제품에 톤·길이·언어 다른 영상을 배치로 생성

03 · DATA

데이터 시각화 영상

D3·Chart.js와 결합해 매월 매출 영상 자동화

04 · EDU

교육 콘텐츠

코드 등장 + 설명 자막 + 결과 화면, 모두 HTML로

05 · SHORT-FORM

SNS 숏폼 양산

1080×1920 세로 모드로 인스타·틱톡용 영상 자동 생성

HyperFrames + AI 파이프라인 5대 패턴 (출처: HeyGen 커뮤니티 'website-to-hyperframes' 스킬 사례 분석)

실제로 HeyGen 팀과 커뮤니티는 'website-to-hyperframes'라는 스킬도 함께 공개했다. 기존 웹페이지를 입력으로 받아 자동으로 영상 컴포지션으로 변환해주는 도구다. 마케팅 페이지를 1~2분 영상으로 바로 뽑을 수 있다.

07 / 정직

한계와 주의점

물론 완벽하지 않다. 알아둬야 할 한계도 있다.

RENDER SPEED

렌더링 속도 — 프레임 단위 캡처라 4K/60fps 긴 영상은 시간이 꽤 걸린다. 실시간 편집기 수준의 빠른 피드백은 아니다.

LEARNING CURVE

학습 곡선 — GSAP 타임라인 + CSS 애니메이션 개념을 모르면 처음엔 어색하다. 다만 Claude Code 스킬이 이 부분을 상당히 보완한다.

FX CEILING

복잡한 영상 효과 — 파티클, 셰이더, 고급 합성 같은 효과는 여전히 DaVinci/AE가 우위다. HyperFrames는 정보 전달형 영상에 강점.

08 / 결론

정리 — 코드와 영상의 경계가 무너진다

HyperFrames V2의 의미는 단순한 '새 도구 하나 더'가 아니다.

FIG.07 CLOSING TAKE

"

영상이 코드로 표현 가능해진다는 것 — 그리고 그 코드를 LLM이 자유롭게 쓴다는 것 — 이 둘이 합쳐지면 콘텐츠 생산 비용이 완전히 다른 차원으로 떨어진다.

— HYPERFRAMES V2 의미 2026.05

이 글의 한 줄 요약 (분석 정리)

특히 Claude Code 사용자라면 지금 바로 시작해볼 가치가 있다. 스킬 한 줄 설치, 슬래시 커맨드 하나로 영상 작성이 시작된다. "한 번 만들기 어려운 영상" 대신 "쉽게 100개 변형 만드는 영상" 시대로 넘어가는 첫 단추다.

REFERENCES

참고 자료

1. [01]
   HyperFrames GitHub Repository

   github.com/heygen-com/hyperframes

   17K stars · Apache-2.0
2. [02]
   HyperFrames 공식 사이트

   hyperframes.heygen.com
3. [03]
   HeyGen 공식 소개 — Edit Videos By Vibe-Coding

   heygen.com/hyperframes
4. [04]
   RoboNuggets V2 분석 글

   robonuggets.blog/p/claude-video-editing-just-got-a-major
5. [05]
   CLAUDE.md — Claude Code 스킬 통합 가이드

   github.com/heygen-com/hyperframes/blob/main/CLAUDE.md

IX-WORKS.XYZ · AI-IT · 2026.05.11 END OF DOCUMENT