HTML을 쓰면 MP4가 나온다: HyperFrames, 영상을 Agent가 만들 수 있는 것으로 바꾸다

HTML을 쓰면 MP4가 나온다

HeyGen이 이번 달 HyperFrames를 오픈소스로 공개했습니다. 캐치프레이즈는 거의 무례할 만큼 담백합니다. HTML을 쓰고, 영상을 렌더링하고, Agent를 위해 만들었다. 안에 확산 모델은 없습니다. 무언가를 상상해내지 않습니다. 웹 페이지를 쓰면 그 페이지가 헤드리스 Chrome에서 로드되고, 지정한 타임스탬프마다 프레임을 캡처하고, FFmpeg가 그 프레임들을 하나의 파일로 이어 붙입니다.

영상 모델이 문장 하나로 그럴듯한 거리 풍경을 뽑아내는 해에 이건 퇴보처럼 들립니다. 실제로는 반대입니다. HyperFrames가 푸는 건 생성 모델이 가장 못하는 절반, 두 번 돌려도 똑같이 나와야 하는 부분입니다.

Apache-2.0이고, 10월 중순 기준 스타 약 63,900개. 하루에 천 개 넘게 늘었고, 10월 12일까지 일주일간 npm 다운로드는 약 811,000회입니다. Agent가 영상을 만든다는 카테고리에서 압도적으로 가장 많이 채택된 물건이고, 그 위치에 오는 동안 원본 픽셀은 하나도 생성하지 않았습니다.

결정성이 실제로 사주는 것

영상 확산 모델은 샘플링 과정입니다. 같은 프롬프트를 두 번 던지면 서로 다른 영상 두 개가 나옵니다. 탐색할 때는 괜찮고, 납품할 때는 끔찍합니다.

HyperFrames는 반대로 갑니다. 컴포지션 하나가 곧 index.html 하나입니다. 클립은 평범한 요소이고, 시작 시각과 길이, 트랙 번호를 data 속성으로 답니다. 애니메이션은 GSAP 타임라인, CSS keyframes, Lottie, Three.js, Anime.js, Web Animations API에서 옵니다. 렌더러는 페이지를 로드하고, 실시간 재생 대신 seek로 각 프레임으로 건너뛰고, 캡처해서, 그 시퀀스를 FFmpeg에 넘깁니다. 같은 입력, 같은 프레임, 매번.

그 성질은 지루합니다. Agent를 루프에 넣기 전까지는. 카피 한 줄을 고친 Agent는 영상의 나머지가 움직이지 않았다는 걸 알아야 합니다. 생성 모델이라면 텍스트를 고친 뒤 다시 렌더링하는 건 클립 전체를 다시 뽑는 일이고, 타이밍이 살아남기를 빌어야 합니다. 결정론적 렌더러에서는 수정이 그냥 수정입니다.

팀에게 개인보다 더 중요한 2차 효과도 있습니다. 영상이 diff 가능한 산출물이 됩니다. 3번째 버전과 4번째 버전 사이에 뭐가 바뀌었는지 보입니다. HTML이니까요.

진짜 제품은 스킬이다

렌더러는 쉬운 쪽입니다. 어려운 쪽은 영상이 들어간 웹 페이지처럼 보이지 않는 컴포지션을 쓰도록 코딩 Agent를 가르치는 일입니다.

HyperFrames에는 agent skill 21개가 들어 있고, /hyperframes가 요청을 읽고 워크플로를 고르는 라우터 역할을 합니다. 카탈로그는 기능이 아니라 실제 작업의 모양을 하고 있습니다. URL이나 브리프로 만드는 제품 런칭 영상, 텍스트로 만드는 얼굴 없는 설명 영상, 비트에 컷을 맞추는 음악에서 영상으로의 변환, 내장 자막, 토킹헤드 재편집, 로고 스팅과 스탯 카드용 짧은 모션 그래픽. 이 skill들은 Claude Code, Codex, Cursor, Gemini CLI에서 동작합니다.

가장 영리한 조각은 frame.md입니다. 요즘 많은 브랜드가 design.md를 유지합니다. 색, 타입 스케일, 간격 규칙을 Agent가 읽게 하는 것이죠. 문제는 그 규칙이 화면용으로 쓰였다는 겁니다. 영상에 적용하면 Agent는 규칙대로 14픽셀 본문과 내비게이션 바를 얌전히 만들어냅니다. frame.md는 같은 브랜드 시스템을 영상 스케일로 다시 씁니다. 팔 길이에서도 읽히는 글자, 16:9 크롭을 견디는 구도, 갈 곳이 있는 모션. 갤러리에는 시작용 시스템 십여 개가 들어 있고, 그중 하나는 채도 높은 빨강 하나로 짠 빈티지 스포츠 잡지 룩입니다.

Agent가 만든 영상이 프로처럼 보이는지를 결정하는 건 이런 안 멋있는 디테일입니다. 예쁜 프레임을 생성하는 모델은 당신 브랜드에 특정한 빨강이 있다는 걸 모릅니다. skill 파일은 압니다.

Remotion과의 비교, 솔직하게

HyperFrames는 React 기반 영상 프레임워크 Remotion에서 공개적으로 영감을 받았습니다. 팀은 실서비스에서 Remotion을 썼고, 그것이 개척한 패턴에 대한 출처 주석을 소스에 남겼고, 한 가지 다른 베팅을 했습니다. Remotion은 React 컴포넌트를 쓰게 하고, HyperFrames는 HTML을 쓰게 합니다.

교환은 명확합니다. Remotion은 진짜 프로그래밍 모델과 빌드 단계를 줍니다. HyperFrames는 빌드 단계가 아예 없습니다. index.html이 그대로 돌아갑니다. 그리고 언어 모델이 HTML과 CSS에는 극도로 강하고 React에는 그저 그렇다는 사실에 기댑니다. Agent 우선 도구라면 맞는 베팅입니다. 최적화 대상 실패 모드가, 그럴듯해 보이지만 컴파일이 안 되는 JSX를 뱉는 Agent니까요.

요구 사항은 소박합니다. Node 22 이상, FFmpeg, Chrome. 렌더 워커당 RAM 약 256MB. GPU는 필요 없습니다. 렌더링은 로컬, AWS Lambda, 또는 HeyGen 호스팅 서비스에서 돌릴 수 있습니다. 돈이 걸린 곳은 여기입니다. 로컬은 내 컴퓨터 말고는 무료, 호스팅은 크레딧 과금, 4K는 1.5배.

10월 10일 나온 0.8.145는 HyperFrames Studio에 GPU 내보내기를 추가하고, 긴 내보내기가 90%에서 멈추던 버그를 고쳤습니다. 작은 릴리스 노트지만 이 프로젝트가 지금 어디 있는지를 잘 말해줍니다. 연구 데모가 아닙니다. 버그 트래커가 있고, 진행 바가 거짓말하면 알아채는 사용자가 있는 도구입니다.

솔직한 한계

HyperFrames는 푸티지를 만들어내지 못합니다. 군중, 폭포, 특정한 표정을 짓는 사람 얼굴이 필요하다면 이건 틀린 도구이고 영상 모델을 써야 합니다. 이건 코드로 서술한 것을 렌더링합니다. 타이포그래피, 차트, UI 워크스루, 로워서드, 키네틱 타입, 이미 가지고 있는 3D 오브젝트, 이미 찍어둔 영상.

결과물의 수준은 Agent가 써 준 HTML의 수준과 정확히 같습니다. 약한 Agent는 페이드가 들어간 슬라이드쇼를 냅니다. skill은 하한을 꽤 올려주지만 취향을 대신하지는 못하고, 이 영상이 뭐를 위한 건지 끝까지 말하지 않은 프롬프트를 구해주지도 못합니다.

그리고 Studio 데스크톱 앱은 이제 HeyGen 계정 로그인을 요구합니다. 합리적인 비즈니스 결정이고, 동시에 무료인 건 엔진이지 제품 전체가 아니라는 알림이기도 합니다.

또 하나의 영상 모델보다 이게 더 중요한 이유

지난 한 해의 AI 영상은 같은 축에서의 경주였습니다. 더 긴 클립, 더 나은 물리, 더 일관된 캐릭터. 다 진짜 진전이고, 다 생성에 관한 이야기입니다.

그런데 전문 영상의 상당 부분은 생성이 아닙니다. 제대로 움직여야 하는 차트, 0:03에 나와야 하는 로워서드, 폰에서 읽혀야 하는 타이틀. 그런 일들은 더 나은 모델을 기다린 적이 없습니다. 지루해하지 않고 흔들리지 않는 무언가에 일을 넘기는 방법을 기다렸습니다.

HyperFrames가 그 인계이고, 가장 강한 주장은 품질에 관한 게 아닙니다. 결정성은 기능이라는 것. 같은 입력에서 같은 출력을 내는 도구라야 그 위에 파이프라인을 세울 수 있습니다. 나머지는 아주 인상적인 슬롯머신일 뿐입니다.