사내에서 영상이 필요한 순간은 대개 거창하지 않다. 분기 실적 숫자를 30초짜리 모션 그래픽으로 만들어야 하거나, 제품 업데이트 열 건을 같은 포맷의 짧은 클립으로 찍어내야 하는 식이다. 문제는 이런 일이 애프터이펙트 같은 전문 도구에 묶여 있어서, 숫자가 바뀔 때마다 사람이 다시 열어 손봐야 한다는 점이다. HyperFrames는 그 지점을 다르게 접근한다. 영상을 타임라인이 아니라 HTML 문서로 쓰고, 그것을 MP4로 렌더한다. 저장소의 한 줄 소개가 정확하다. “HTML을 쓰면 영상이 나온다, 에이전트를 위해 만들었다.”
한눈에 보기
| 항목 | 내용 |
|---|---|
| 만든 곳 | HeyGen |
| 라이선스 / 가격 | 프레임워크는 Apache 2.0 오픈소스. Studio 데스크톱 앱은 공식 사이트에서 내려받는다 |
| 플랫폼 | CLI는 Node.js 22 이상 + FFmpeg. Studio 앱은 macOS, Linux (Windows는 예정) |
| 핵심 기능 | HTML 기반 구성, 결정적 렌더, 블록 카탈로그, 에이전트용 스킬 21종 |
| 렌더 위치 | 로컬, Docker, AWS Lambda |
| 시작 방법 | npx hyperframes init my-video 후 npx hyperframes preview |
타임라인 대신 HTML 문서를 쓴다
구조는 단순하다. index.html 하나에 화면을 그리고, 요소마다 데이터 속성으로 언제 나타나고 사라질지를 적는다. 빌드 단계가 없어서 그 파일을 브라우저에서 바로 열면 그대로 재생된다. 애니메이션은 어댑터로 붙이는데 GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI를 지원하고 직접 만든 런타임도 꽂을 수 있다.
이 설계에서 가장 실무적인 이점은 결정적 렌더다. 같은 입력이면 같은 프레임이 나온다는 뜻이고, 영상 생성을 CI에 거는 것이 가능해진다. 데이터가 바뀌면 파이프라인이 알아서 새 영상을 뽑는 식의 구성은 타임라인 기반 편집 도구로는 꽤 어려운 일이다.
렌더는 로컬뿐 아니라 Docker와 AWS Lambda에서도 돌릴 수 있다. 수십 개 변형을 한꺼번에 뽑아야 하는 경우라면 람다 쪽이 현실적인 선택지로 보인다.
에이전트가 쓰기 좋게 만든 흔적들
이 도구가 다른 영상 라이브러리와 갈리는 지점은 “에이전트를 위해 만들었다”는 말을 설계에 실제로 반영했다는 것이다.
- 출력 포맷이 에이전트의 모국어다. 영상 제작을 HTML과 CSS 쓰기로 환원했기 때문에, 코딩 에이전트가 이미 가장 잘하는 작업이 된다. 전용 DSL이나 GUI 조작을 배울 필요가 없다.
- 스킬 21종을 함께 배포한다. 에이전트가 필요할 때 불러 쓰는 형태이고,
/hyperframes스킬이 라우터처럼 어떤 작업 흐름을 쓸지 고른다. Claude Code 플러그인(claude plugin install hyperframes@hyperframes)이나npx skills add heygen-com/hyperframes로 설치한다. 저장소는 Codex, Cursor, Gemini CLI 등 스킬을 지원하는 에이전트에서 동작한다고 밝히고 있다. - CLI가 기본적으로 비대화형이다. 중간에 사람 입력을 기다리지 않으므로 에이전트가 그대로 호출할 수 있다. 사소해 보이지만 자동화에서는 결정적인 차이다.
Studio, 에이전트와 사람이 같은 화면을 본다
프레임워크 위에 올라가는 데스크톱 앱이 HyperFrames Studio다. HeyGen이 2026년 10월 초 Product Hunt에 공개했고, 스스로를 에이전트를 위한 첫 영상 편집기라고 소개한다. 이 표현은 만든 쪽의 주장이라는 점을 감안하고 읽는 편이 낫다.
실제로 흥미로운 것은 작업 방식이다. 사람이 미리보기 화면 위에 직접 그림을 그리거나 특정 요소에 메모를 남기고, 그 메모를 한 번에 묶어 에이전트에게 넘긴다. “이 자막 2초 늦게, 로고는 오른쪽 아래로” 같은 지시를 말로 설명하는 대신 화면에 표시해서 전달하는 셈이다. 수동 타임라인도 있어서 클립을 직접 끌거나 자를 수 있고, MP4, WebM, MOV로 4K까지 내보낸다. Claude Code와 Codex를 붙여 쓸 수 있다.
초안을 에이전트가 뽑고 사람이 수정 메모를 모아 돌려보내는 루프가 기본 작업 단위다. 한 번에 완성되는 구조가 아니라는 점은 미리 알아 두는 편이 좋다.
시작하기
- Node.js 22 이상과 FFmpeg을 먼저 준비한다. FFmpeg이 없으면 렌더 단계에서 막힌다.
npx hyperframes init my-video로 프로젝트를 만들고cd my-video로 들어간다.npx hyperframes preview를 실행하면 라이브 리로드가 붙은 미리보기가 뜬다.index.html을 고치면 즉시 반영되므로 이 상태로 구성을 잡는다.- 모양이 나오면
npx hyperframes render로 MP4를 뽑는다. 분량이 길면 Docker나 Lambda 렌더를 검토한다. - 에이전트와 함께 쓸 생각이면 스킬을 설치하고, 블록 카탈로그에서 쓸 만한 전환·오버레이·차트 컴포넌트를 먼저 훑어 둔다.
같은 포맷의 영상을 데이터만 바꿔 반복 생산해야 하는 쪽이라면 투자할 가치가 분명하다. 반대로 한 편을 공들여 다듬는 브랜드 필름이라면, HTML로 영상을 기술하는 방식이 주는 이점이 거의 없고 기존 편집 도구가 여전히 빠르다.
주의점
- 영상 품질의 상한은 웹 기술의 상한이다. 브라우저가 그릴 수 있는 것만 영상이 된다. 고급 합성, 색보정, 파티클 같은 영역은 전문 도구 쪽이 여전히 앞선다.
- Studio는 아직 플랫폼이 제한된다. macOS와 Linux만 지원하고 Windows는 로드맵에 있다. 윈도우 환경이라면 당분간 CLI와 프레임워크 쪽만 쓸 수 있다.
- 공개된 지 얼마 되지 않았다. Studio는 2026년 10월에 나왔고 프레임워크도 활발히 바뀌는 중이다. 운영 파이프라인에 넣을 생각이라면 버전을 고정하고, 업데이트할 때 렌더 결과가 달라지지 않는지 확인하는 절차를 같이 두는 편이 안전하다.
정리
HyperFrames는 영상 제작을 “디자인 작업”에서 “코드 작업”으로 옮겨 놓는 도구다. 그 전환 덕분에 버전 관리, CI, 그리고 에이전트 위임이 한꺼번에 가능해지는데, 대신 웹 기술로 표현할 수 있는 범위 안에 갇힌다. 반복 생산할 영상 포맷이 있고 코딩 에이전트를 이미 쓰고 있다면, 프레임워크가 Apache 2.0이라 시험 비용도 낮으니 npx hyperframes init으로 한 번 돌려 볼 만하다.