Blog

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

Ashley Innocent

Ashley Innocent

17 April 2026

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

Apidog 엔터프라이즈

온프레미스 배포

SSO & RBAC

SOC 2 준수

Apidog Enterprise 살펴보기

요약

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

소개

비디오는 웹에서 가장 매력적인 커뮤니케이션 형식입니다. 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 파일을 보아왔습니다. 웹은 그들의 학습 데이터에서 가장 큰 단일 창의적 매체입니다.

HyperFrames 시연: HTML, CSS, JavaScript를 사용하여 비디오를 생성하는 AI 에이전트의 워크플로우를 보여주는 GIF.

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

편집자가 필요로 하는 모든 시각적 프리미티브는 이미 브라우저에 존재합니다. 빠진 조각은 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>

두 가지 주목할 점:

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

이 파일을 렌더링하면 1920x1080 MP4 애니메이션을 얻을 수 있습니다. 텍스트를 변경하고, 색상을 변경하고, 글꼴을 바꾸고, 로고를 추가하세요: 전체 파일은 순수한 HTML입니다.

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

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

래퍼도 없고, 플러그인 아키텍처도 없으며, 배울 프레임워크도 없습니다. 에이전트는 이미 알고 있는 것을 사용합니다.

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

HyperFrames는 Claude Code 스킬로 제공됩니다. Claude Code를 사용한다면, 설치는 단일 npm 명령으로 이루어집니다.

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

저장소 복제:

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

구성 파일 렌더링:

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

로컬에서 미리보기:

npx hyperframes preview my-video.html

미리보기 명령은 브라우저 창을 열어주며, 여기에서 타임라인을 스크럽하고 전체 렌더링을 확정하기 전에 프레임별 정확도를 확인할 수 있습니다.

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

몇 가지 사용 사례가 즉시 가능해집니다.

자동화된 제품 마케팅. 에이전트가 릴리스 노트를 가져와 장면별 HTML을 생성하고, 렌더링된 결과물을 CDN에 배포할 수 있습니다. 모든 릴리스는 사람이 타임라인에 손대지 않고도 비디오를 얻게 됩니다.

개인화된 비디오 응답. API 웹훅이 사용자 이벤트당 개인화된 클립을 렌더링하는 에이전트를 트리거합니다. 환영 비디오, 영수증, 기념일 축하 영상 등 모든 것이 필요에 따라 생성됩니다.

데이터 스토리텔링. 에이전트에 지표를 제공합니다. 에이전트는 HyperFrames 장면에 래핑된 D3 시각화를 작성합니다. 결과물은 당신의 대시보드에 대한 내레이션된 안내 비디오이며, 매 분기 자동으로 새로고침됩니다.

팟캐스트 또는 장편 콘텐츠를 위한 동적 B-롤. 에이전트가 대본을 읽고, 각 핵심 포인트를 설명하는 모션 그래픽을 생성하여 오디오 위에 계층화합니다.

API 문서 비디오. OpenAPI 사양을 파싱하고, 애니메이션 요청/응답 다이어그램과 함께 엔드포인트 안내를 생성하여 공유 가능한 클립으로 내보냅니다.

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

HyperFrames는 렌더링 단계를 처리합니다. 모든 상위 단계는 오케스트레이션입니다: 에이전트 루프, 도구 호출, LLM API 요청, 그리고 어떤 입력에서 어떤 비디오를 생성할지 결정하는 로직입니다.

이곳이 프로덕션에서 문제가 발생하는 지점입니다. 잘못된 도구 페이로드, 시간 초과된 API 요청, 잘못된 tool_use_id 참조, 또는 일치하지 않는 메시지 스키마는 모두 단일 프레임이 렌더링되기 전에 비디오 파이프라인을 중단시킵니다.

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

버튼

철학적 주장

HeyGen 팀은 "HTML은 에이전트가 생성하는 비디오에 편리한 형식이다"라는 주장보다 더 강력한 주장을 합니다. 그들은 HTML이 비디오의 미래를 위한 올바른 형식이라고 믿습니다. 끝.

그 주장은 설득력이 있습니다. 전통적인 비디오는 Adobe, Blackmagic, 그리고 소수의 코덱 공급업체가 통제하는 독점 형식 안에 갇혀 있습니다. HTML은 개방적이고, 표준화되어 있으며, 버전 관리가 가능하고, 검색 가능하며, 지구상의 모든 텍스트 도구로 편집할 수 있습니다.

HTML 기반 비디오가 교환 형식이 되면, 비디오는 다음과 같이 됩니다:

이 중 어느 것도 이론적이지 않습니다. 이러한 모든 속성은 이미 브라우저에서 작동합니다. HyperFrames는 브라우저 네이티브 콘텐츠를 실행 가능한 비디오 소스로 만드는 다리입니다.

알아야 할 제한 사항

HyperFrames는 버전 1입니다. 몇 가지 실제 제약 사항:

이 중 어느 것도 치명적인 단점은 아니지만, 프로덕션 파이프라인을 구축한다면 이러한 점들을 고려해야 합니다.

시작하기 체크리스트

지금 바로 HyperFrames를 사용해보고 싶다면:

결론

AI 에이전트는 수년간 코드를 작성할 수 있었습니다. 지금까지 비디오 편집은 인간의 개입이 필요한 마지막 주요 창의적 영역이었습니다. HyperFrames는 에이전트가 이미 작업하는 곳(HTML, CSS, JavaScript)에 맞춰 이러한 의존성을 제거합니다.

이 접근 방식은 한 문장으로 설명할 만큼 간단하며, 방송 품질의 모션 그래픽을 제작할 수 있을 만큼 유연합니다. 비디오를 출력으로 필요로 하는 어떤 것이든(마케팅 자동화, 개인화된 콘텐츠, 데이터 스토리텔링, 에이전트 기반 문서화) 구축하고 있다면, HyperFrames는 당신의 스택에 포함되어야 합니다.

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

Apidog에서 API 설계-첫 번째 연습

API를 더 쉽게 구축하고 사용하는 방법을 발견하세요

무료 회원가입다운로드