3줄 요약
- HeyGen의 오픈소스 HyperFrames는 영상을 HTML + GSAP 파일 한 장으로 만들고, 같은 입력이면 늘 같은 영상으로 렌더합니다.
- 원본이 텍스트라 Claude Code 같은 에이전트가 직접 고치고, 결과는 로컬 브라우저에서 바로 미리 봅니다.
- 클립 조립은 Remotion, 오버레이·모션그래픽·자막은 HyperFrames로 나누면 잘 굴러갑니다.
“Write HTML. Render video. Built for agents.” HeyGen이 공개한 HyperFrames는 HTML과 GSAP으로 영상을 만들고, 코딩 에이전트가 소스 파일을 직접 다룰 수 있게 한 오픈소스 도구입니다. HeyGen은 2026년 7월 24일 02:00(한국 시간) HyperFrames를 자사 Video Agent에도 넣었다고 발표했습니다. 2026년 9월 27일 기준 GitHub 스타는 53,307개이며 Apache 2.0 라이선스를 사용합니다. 저장소는 2026년 3월 10일 처음 공개됐고 현재 버전은 0.8대입니다. skills.sh에는 HyperFrames 스킬 52개가 누적 900만 회 설치된 것으로 표시됩니다. 상위 설치 항목은 hyperframes-cli 68.8만, hyperframes 65.6만, hyperframes-registry 59.6만입니다.
출처: X @HeyGen
1. 영상을 HTML 한 장으로 만든다
HyperFrames 프로젝트는 HTML·CSS·미디어와 GSAP 애니메이션으로 구성합니다. 영상 타임라인을 전용 편집기에서 만들기보다 텍스트 파일을 고치는 방식이라, 제목·자막·요소 배치·타이밍을 Claude Code 같은 에이전트에게 수정시킬 수 있습니다.
렌더할 때는 헤드리스 Chrome이 각 프레임마다 GSAP 타임라인을 해당 시각으로 이동해 화면을 캡처하고 FFmpeg가 영상으로 인코딩합니다. 재생 중 프레임을 녹화하는 방식이 아니므로 같은 입력이면 늘 같은 영상이 나옵니다(결정적 렌더). `npx hyperframes preview`는 로컬 브라우저에서 Studio를 열고 파일 변경을 live reload로 반영합니다.
2. 설치하고 첫 영상 만들기
Node.js 22 이상과 FFmpeg를 준비한 뒤, 에이전트 스킬을 설치하고 프로젝트를 초기화합니다. 첫 명령을 실행하면 나오는 선택 화면에서 Core Skills를 고르면 됩니다.
npx skills add heygen-com/hyperframes
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render --output final.mp4Claude Code에는 “Using /hyperframes, create a 10-second product intro…”처럼 스킬 이름과 길이, 만들 장면을 함께 요청하면 됩니다. 에이전트가 선택 화면 없이 설치하게 하려면 npx hyperframes skills update를 실행합니다. 미리보기는 로컬 브라우저에서 열리며, 편집한 파일은 화면에 곧바로 반영됩니다.
3. 프롬프트는 얼마나 자세히 쓸까
공식 Prompt Guide는 지시의 구체성을 세 단계로 나눕니다. 짧은 영상이나 탐색 단계에서는 분위기만 제시하고, 결과를 더 통제하고 싶으면 색상·서체 같은 스타일을 지정합니다. 요소가 많고 화면의 일관성이 중요할수록 모양·색·위치·타이밍까지 적는 편이 좋습니다.
- Mood words: “차분하고 미래적인 분위기”처럼 전체 감성을 말합니다.
- Style tokens: 색상 코드, 서체, 질감처럼 눈에 보이는 스타일 기준을 줍니다.
- Full visual spec: 장면별 요소의 모양·색·위치·등장 타이밍을 구체적으로 지정합니다.
4. Remotion과 역할을 나눠 쓴다
클립을 시간순으로 이어 붙이는 작업은 Remotion, 이미 촬영한 영상 위에 오버레이·모션그래픽·자막을 입히는 작업은 HyperFrames로 나누면 각 도구의 장점을 살릴 수 있습니다. HyperFrames의 talking-head-recut 스킬은 원본 푸티지 위에 타이틀·하단 자막바·데이터 카드를 얹는 흐름을 다루고, embedded-captions는 자막 작업을 맡습니다. 기존 Remotion 작업물을 HyperFrames로 옮기는 스킬도 제공됩니다.
| 구분 | HyperFrames | Remotion |
|---|---|---|
| 작성 방식 | HTML·CSS·GSAP | React 컴포넌트·JSX |
| 렌더 | 헤드리스 Chrome 캡처와 FFmpeg | 브라우저 렌더러와 FFmpeg, 클라우드 렌더 옵션 |
| 라이선스 | Apache 2.0 | 개인과 3명 이하 조직은 무료 조건, 더 큰 회사는 사용 형태에 따라 유료 라이선스 |
Remotion 전환 스킬은 다음처럼 설치할 수 있습니다. Remotion은 개인·소규모 조직의 무료 사용 범위와 회사 라이선스 조건을 공식 라이선스 페이지에서 확인할 수 있습니다.
npx skills add heygen-com/hyperframes --skill remotion-to-hyperframesRemotion 라이선스 · HyperFrames와 Remotion 비교
5. HyperFrames로 만든 영상 사례
@HyperFrames_는 8월 8일 03:03(한국 시간) Claude Design에서 만든 애니메이션에 효과음과 모션을 입혀 MP4로 내보내는 HyperFrames MCP를 소개했습니다.
출처: X @HyperFrames_
@Miguel07Code는 9월 23일 01:55(한국 시간) Claude Opus 5.5가 HyperFrames로 Shotbase 출시 영상을 20분 안에 한 번에 만들었다고 공유했습니다.
출처: X @Miguel07Code
Claude Code를 쓰고 있다면 npx skills add heygen-com/hyperframes 한 줄로 시작해 10초짜리 제품 소개 영상부터 만들어 보세요.
