Rihpig

Posted on Apr 17 • Originally published at apidog.com

AI 에이전트 HyperFrames로 영상 편집하는 방법

요약

AI 에이전트는 코드를 작성하고, API를 호출하며, 다단계 워크플로우를 실행할 수 있습니다. 지금까지는 하나의 기능이 그들에게 계속해서 어려움으로 남아 있었습니다: 바로 비디오 편집입니다. After Effects 및 DaVinci Resolve와 같은 전문 도구는 LLM이 학습하지 않은 계층형 타임라인과 JSON 장면 그래프를 사용합니다. HeyGen의 새로운 오픈 소스 프로젝트인 HyperFrames는 이러한 접근 방식을 뒤집습니다. 이 프로젝트는 AI 에이전트가 HTML, CSS, JavaScript를 사용하여 비디오를 구성한 다음, 그 결과를 MP4, MOV, 또는 WebM으로 렌더링하도록 합니다. 하나의 명령으로 Claude Code 스킬로 설치하면, 당신의 에이전트는 비디오 편집기가 됩니다.

지금 Apidog을 사용해보세요

소개

비디오는 웹에서 가장 매력적인 커뮤니케이션 형식입니다. AI 에이전트가 생성할 수 있는 다른 모든 매체(텍스트, 코드, 이미지, 차트)는 명확한 도구 체인을 가지고 있습니다. 비디오는 그렇지 않았습니다.

Sora, Veo 또는 Runway를 사용하여 모델에 전체 클립을 생성하도록 프롬프트를 줄 수 있지만, 이 접근 방식에는 한계가 있습니다. 프롬프트로부터 단일의 통합된 비디오를 얻게 됩니다. 구성할 수 없습니다. 모션 그래픽을 반복하거나 특정 브랜드 애니메이션을 오버레이할 수 없습니다. 에이전트에게 "장면 3을 더 느린 페이드로 다시 만들어"라고 말할 수 없습니다.

HeyGen은 이러한 격차를 해소하기 위해 2026년 4월 17일 HyperFrames를 출시했습니다. 에이전트에게 전통적인 비디오 소프트웨어를 가르치는 대신, 그들이 이미 알고 있는 형식인 HTML을 제공했습니다. 이 가이드는 작동 방식, 이 접근 방식이 합리적인 이유, 그리고 자신의 에이전트가 비디오를 편집할 수 있도록 설정하는 방법을 안내합니다.

비디오를 생성하는 API 기반 에이전트 워크플로우를 구축하고 있다면, 오케스트레이션 계층도 테스트하고 싶을 것입니다. Apidog이 어떻게 적합한지는 마지막에 다룰 것입니다.

AI 에이전트가 이전에는 비디오를 편집할 수 없었던 이유

전통적인 비디오 편집 도구는 에이전트를 위해 만들어지지 않았습니다. 그들은 타임라인을 클릭하는 인간을 위해 만들어졌습니다.

세 가지 특정 장벽:

타임라인 기반 UI는 코드에 매핑되지 않습니다. After Effects, Premiere, DaVinci Resolve는 프로젝트를 독점적인 바이너리 형식이나 깊게 중첩된 JSON 장면 그래프로 저장합니다. 에이전트가 이러한 파일을 읽을 수 있다고 해도, 의미론적 공간은 좁습니다. 이러한 형식에 대한 모델 가중치 학습 데이터는 거의 존재하지 않습니다.
모션 그래픽은 시각적 사고를 필요로 합니다. 키프레임 애니메이션, 이징 커브, 레이어 합성 등은 일반적으로 눈으로 합니다. 에이전트는 미리보기 창을 보지 못합니다. 그들은 움직임에 대해 추론하기 위해 텍스트 우선 추상화가 필요합니다.
도구는 인간 운영자를 가정합니다. 렌더 파이프라인, 플러그인 생태계, 코덱 선택은 모두 UI 메뉴 뒤에 존재합니다. 스크립트를 통해 자동화하는 것은 제한된 경우(예: After Effects의 ExtendScript)에 작동하지만, API는 좁고 취약합니다.

결과: 에이전트는 ffmpeg를 호출하여 클립을 연결하고, 기본적인 필터로 텍스트를 오버레이하는 스크립트를 작성할 수 있었습니다. 그 이상은 인간의 개입이 필요했습니다.

비디오를 위한 HTML 통찰

HeyGen 팀은 다른 관찰을 했습니다. LLM은 수십억 페이지의 HTML, CSS, JavaScript로 학습되었습니다. 그들은 수십만 개의 GSAP 애니메이션, SVG 합성, Canvas 실험, Lottie 파일을 보아왔습니다. 웹은 그들의 학습 데이터에서 가장 큰 단일 창의적 매체입니다.

최신 모델에게 시각적으로 풍부한 애니메이션을 만들도록 요청하면, 모델은 HTML을 유창하게 작성합니다. 모델은 다음을 수행하는 방법을 알고 있습니다:

CSS로 요소 배치
GSAP 또는 CSS 키프레임으로 애니메이션 적용
SVG 경로 렌더링
z-index 및 opacity로 계층형 장면 구성
상태 간 트위닝

편집자가 필요로 하는 모든 시각적 프리미티브는 이미 브라우저에 존재합니다. 빠진 조각은 HTML 장면의 타임라인을 렌더링된 비디오 파일로 바꾸는 것이었습니다.

그것이 바로 HyperFrames가 하는 일입니다. 이름이 모든 것을 말해줍니다: HTML이 비디오 프레임이 됩니다. HyperFrames.

HyperFrames 작동 방식

HyperFrames는 표준 HTML에 작은 data- 속성 세트를 추가합니다. 이 속성들은 비디오 타임라인을 정의합니다. 그 외의 모든 것은 일반 웹 코드입니다.

핵심 속성:

속성	목적
`data-composition-id`	비디오 합성 고유 ID
`data-width` / `data-height`	픽셀 단위의 출력 해상도
`data-start`	장면 시작 시간(초)
`data-duration`	장면 지속 시간(초)
`data-track-index`	겹치는 장면에 대한 레이어링 순서

에이전트는 일반 HTML 파일을 작성합니다. HyperFrames는 데이터 속성을 읽고, 헤드리스 브라우저에서 페이지를 실행하며, 목표 프레임 속도로 프레임을 캡처한 다음, FFmpeg로 출력을 인코딩합니다.

이게 전부입니다. 새로운 DSL도 없고, 장면 그래프도 없고, 키프레임 편집기도 없습니다. 애니메이션은 GSAP 타임라인 또는 CSS 애니메이션에 존재하며, 이는 모델이 이미 생성하는 코드와 정확히 일치합니다.

최소한의 예시

아래는 70줄 미만의 HTML로 만들어진 5초짜리 비디오 구성 예제입니다. 두 장면: 페이드인되는 제목 카드, 그리고 흐림 효과로 전환되어 닫는 화면으로 이어집니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
  <style>
    body { margin:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    .scene { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    #scene2 { z-index:2; opacity:0; }
    .s1 { display:flex; flex-direction:column; justify-content:center; padding:120px 160px; gap:20px; }
    .s2 { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:100px 160px; gap:32px; }
  </style>
</head>
<body>
  <div id="root" data-composition-id="hyperframes-intro"
       data-width="1920" data-height="1080" data-start="0" data-duration="5">
    <div id="scene1" class="scene">
      <div class="s1">
        <div class="s1-title">HTML is Video</div>
        <div class="s1-sub">Compose. Animate. Render.</div>
      </div>
    </div>

    <div id="scene2" class="scene">
      <div class="s2-title">Start composing.</div>
    </div>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });

    // Scene 1: title entrance
    tl.from(".s1-title", { x:-40, opacity:0, duration:0.5, ease:"power3.out" }, 0.25);
    tl.from(".s1-sub", { y:15, opacity:0, duration:0.4, ease:"power2.out" }, 0.5);

    // Blur crossfade transition
    const T = 2.2;
    tl.to("#scene1", { filter:"blur(8px)", scale:1.03, opacity:0, duration:0.35, ease:"power2.inOut" }, T);
    tl.fromTo("#scene2",
      { filter:"blur(8px)", scale:0.97, opacity:0 },
      { filter:"blur(0px)", scale:1, opacity:1, duration:0.35, ease:"power2.inOut" }, T + 0.08);

    window.__timelines["hyperframes-intro"] = tl;
  </script>
</body>
</html>

주요 포인트:

애니메이션 로직은 순수한 GSAP입니다. GSAP 튜토리얼을 본 어떤 모델이든 이와 같은 타임라인을 작성할 수 있습니다.
HyperFrames 오버헤드는 미미합니다. 루트 요소에 몇 개의 data- 속성만 있으면 됩니다.

이 파일을 렌더링하면 1920x1080 MP4 애니메이션을 얻을 수 있습니다. 텍스트, 색상, 글꼴, 로고 등도 자유롭게 변경 가능합니다.

에이전트가 실제로 사용할 수 있는 것

렌더 파이프라인이 실제 브라우저이기 때문에 어떤 웹 기술이든 작동합니다:

CSS 애니메이션 및 전환: 간단한 움직임
GSAP 타임라인: 복잡한 안무
SVG: 로고, 모양, 경로 애니메이션
Canvas: 파티클 시스템, 생성형 배경
Three.js: 3D 장면
D3.js: 데이터 시각화
Lottie: After Effects 애니메이션
웹 글꼴: Google Fonts, 커스텀 소스
배경 비디오/이미지: <video>, <img>

래퍼, 플러그인, 별도 프레임워크 없이 에이전트가 이미 아는 것을 그대로 활용합니다.

한 번의 명령으로 에이전트에 비디오 편집 기능 부여하기

HyperFrames는 Claude Code 스킬로 제공됩니다. Claude Code를 사용한다면, 아래 명령 한 줄로 바로 설치할 수 있습니다.

npx skills add heygen-com/hyperframes

이 명령은 HeyGen GitHub 저장소에서 스킬을 가져오고, 툴체인을 설치하며, 비디오 편집 기능을 Claude Code에 등록합니다.

설치 후, 에이전트에게 자연스럽게 프롬프트하세요:

Build me a 10-second product explainer video for a new API.
Start with a dark gradient background, animate the product name
sliding up from the bottom with a fade, then cut to three
bullet points with icons, end on a call-to-action card.

에이전트가 HTML을 작성하고, 로컬 미리보기를 실행하며, 최종 MP4를 렌더링할 수 있습니다. 별도의 API 키나 외부 서비스 없이 로컬에서 모두 실행됩니다.

Claude Code 없이 설정하기

HyperFrames는 프레임워크에 구애받지 않습니다. 셸 명령을 실행하고 파일을 읽을 수 있는 모든 에이전트에서 호출할 수 있습니다.

1. 저장소 복제:

git clone https://github.com/heygen-com/hyperframes
cd hyperframes
npm install

2. 구성 파일 렌더링:

npx hyperframes render my-video.html --output my-video.mp4

3. 로컬 미리보기:

npx hyperframes preview my-video.html

preview 명령은 브라우저 창을 열어주며, 타임라인을 스크럽하고 프레임별 정확도를 체크할 수 있습니다.

개발자를 위해 이것이 열어주는 것

즉시 활용 가능한 사용 사례:

자동화된 제품 마케팅: 에이전트가 릴리스 노트를 장면별 HTML로 변환, 렌더링 후 CDN 배포
개인화된 비디오 응답: API 웹훅으로 사용자 이벤트별 개인화된 클립 생성
데이터 스토리텔링: 지표를 받아 D3 시각화를 HyperFrames 장면에 래핑, 자동 내레이션 비디오 생성
팟캐스트/장편 콘텐츠용 동적 B-롤: 대본 읽고, 각 포인트에 맞는 모션 그래픽 생성
API 문서 비디오: OpenAPI 사양 파싱, 애니메이션 요청/응답 다이어그램 포함 안내 비디오 생성

Apidog으로 에이전트 오케스트레이션 테스트하기

HyperFrames는 렌더링 단계를 처리합니다. 모든 상위 단계는 오케스트레이션 계층입니다: 에이전트 루프, 도구 호출, LLM API 요청, 입력에 따른 비디오 생성 로직 등.

이 단계에서 오류가 많이 발생할 수 있습니다. 잘못된 도구 페이로드, API 타임아웃, 잘못된 tool_use_id 참조, 메시지 스키마 불일치 등은 모두 렌더링 전 파이프라인을 중단시킬 수 있습니다.

Apidog은 HyperFrames가 다루지 않는 부분의 테스트 환경을 제공합니다:

LLM 엔드포인트 모킹: Apidog에서 더미 Claude/OpenAI 엔드포인트를 구축, 다양한 응답/지연 케이스 검증
도구 사용 페이로드 검증: 외부 API 호출 구조를 Apidog 테스트 시나리오와 연결, 사전 구조 검증
토큰 소비량 추적: 프롬프트 크기/비용이 예상치 못하게 증가하는 상황에 미리 대응
다중 턴 에이전트 흐름 디버깅: 전체 대화 재생으로 단계별 문제 위치 파악

철학적 주장

HeyGen 팀은 "HTML은 에이전트가 생성하는 비디오에 편리한 형식이다"를 넘어서, HTML이 비디오의 미래를 위한 올바른 형식이라고 주장합니다.

이유는 명확합니다. 전통적인 비디오는 Adobe, Blackmagic, 코덱 공급업체가 통제하는 독점 형식에 갇혀 있습니다. HTML은 개방적, 표준화, 버전 관리, 검색 가능, 모든 텍스트 도구로 편집 가능 등 다양한 장점을 가집니다.

HTML 기반 비디오가 교환 형식이 되면:

Git에서 차이점 비교 가능
구성 요소화 가능(React, 모듈)
반응형(1080p, 4K, 세로 등)
접근성(스크린 리더, alt 텍스트 등)
검색 가능(텍스트 그대로 저장)

이 모든 속성은 브라우저에서 이미 실현되어 있습니다. HyperFrames는 브라우저 네이티브 콘텐츠를 비디오 소스로 만드는 다리입니다.

알아야 할 제한 사항

HyperFrames는 버전 1입니다. 실무에서의 제약사항도 있습니다:

렌더링 속도는 복잡성에 따라 달라집니다. Three.js, Canvas 셰이더 등은 인코딩 시간이 더 걸릴 수 있습니다.
라이브 비디오 입력 제한: <video> 태그는 임베드 가능하지만, 실시간 피드/스트리밍은 추가 글루 코드 필요
오디오 지원은 기본적: 고급 믹싱은 FFmpeg 후처리 필요
에이전트의 창의성은 모델에 따라 다름: Opus 4.7이 현재 가장 적합

프로덕션 파이프라인 구축 시 위 제약을 반드시 고려하세요.

시작하기 체크리스트

지금 HyperFrames를 실전에서 사용하려면:

[ ] Claude Code 설치 (또는 선호하는 에이전트 사용)
[ ] npx skills add heygen-com/hyperframes 실행
[ ] 에이전트에게 간단한 5초짜리 비디오를 만들도록 프롬프트하기
[ ] 결과물을 렌더링하고 MP4 확인하기
[ ] 반복: 스타일, 타이밍 또는 장면 수 변경하기
[ ] API 기반 워크플로우의 경우, Apidog에서 LLM 및 도구 엔드포인트 설정하기
[ ] 실제 비디오 하나 만들기 (제품 티저, 데이터 스토리, 릴리스 노트 요약 등)
[ ] github.com/heygen-com/hyperframes에서 저장소에 별표 표시하기

결론

AI 에이전트는 수년간 코드를 작성할 수 있었습니다. 이제 비디오 편집 역시 자동화가 가능합니다. HyperFrames는 에이전트가 이미 작업하는 곳(HTML, CSS, JavaScript)에 맞춰 이러한 의존성을 제거합니다.

이 접근 방식은 한 문장으로 설명할 수 있을 만큼 간단하고, 방송 품질의 모션 그래픽도 제작할 수 있을 정도로 유연합니다. 비디오가 필요한 어떤 자동화(마케팅, 개인화, 데이터 스토리텔링, 에이전트 기반 문서화 등)든 HyperFrames를 스택에 포함시키세요.

API 및 오케스트레이션 계층의 경우, 스케일링 전에 Apidog으로 에이전트의 대화, 도구 호출, LLM 요청을 반드시 테스트하세요. 실패한 API 요청은 MP4로 렌더링되지 않습니다.

DEV Community