이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.
TL;DR
LLM을 활용한 영상 생성 시 기존 프레임워크의 제약과 브라우저의 비동기적 특성이 병목으로 작용했다. HyperFrames는 HTML, CSS, JavaScript를 기반으로 브라우저의 비동기적 렌더링을 프레임 단위로 제어하여 결정론적 MP4 출력을 생성한다. 에이전트 루프와 평가 시스템을 통해 모델에 영상 제작의 '감각(Taste)'을 학습시켰으며, 현재 130만 개 이상의 영상이 생성되는 등 실무적 규모로 운영되고 있다. 향후 Code-to-Video 벤치마크를 통해 모델의 창의적 영상 생성 능력을 표준화할 계획이다.
챕터별 상세
Introduction and the HeyGen mission
HeyGen은 영상 생성 기술을 통해 커뮤니케이션 문제를 해결하는 것을 목표로 한다. 영상 제작 과정에서 A-roll과 B-roll의 조합이 중요하다. 발표자는 HeyGen의 HyperFrames 프로젝트를 통해 영상 제작의 새로운 가능성을 제시한다.
The challenge of creating launch videos
출시 영상 제작은 실제 제품 개발보다 더 어려운 과정이다. 코딩 에이전트가 개발을 민주화했으나, 영상 제작은 여전히 복잡한 단계로 남아있다. 발표자는 영상 제작의 병목 현상을 해결하기 위해 HyperFrames를 개발했다.
The importance of A-roll, B-roll, and composition
성공적인 영상은 A-roll(아바타)과 B-roll(이미지, 애니메이션, 자막, 음악)의 조화로 구성된다. 모든 레이어를 정교하게 다루는 것이 중요하다. 발표자는 영상의 각 요소를 완벽하게 제어하는 것이 고품질 영상 제작의 핵심이라고 강조한다.
Why HTML, CSS, and JavaScript are the native languages of LLMs
LLM은 HTML, CSS, JavaScript를 가장 잘 이해한다. 웹 페이지 데이터가 LLM의 학습 데이터 대부분을 차지하기 때문이다. 발표자는 모델이 자신의 모국어인 웹 기술을 사용하여 영상을 생성하도록 유도하는 것이 효율적이라고 주장한다.
Comparing HTML to other frameworks like Remotion
Remotion은 결정론적 영상 생성을 가능하게 하지만, React 프레임워크의 제약으로 인해 에이전트의 창의성을 제한한다. 가이드라인을 추가할수록 결과물은 안전하지만 단조로워진다. 발표자는 HTML 기반의 접근 방식이 더 큰 창의성을 제공한다고 설명한다.
Designing the Hyperframes framework with Gemini Flash
Gemini Flash를 설계 파트너로 선정하여 HyperFrames 프레임워크를 개발했다. 작은 모델이 안정적으로 코드를 작성할 수 있는 구조를 지향한다. 발표자는 프레임워크가 에이전트와 충돌하지 않도록 설계하는 것이 중요하다고 말한다.
How Hyperframes works in the browser
브라우저의 비동기적 특성(이미지 디코더, 폰트 로더, 애니메이션 클럭)은 결정론적 렌더링을 어렵게 만든다. HyperFrames는 시계를 멈추고 프레임 단위로 탐색하며 에셋 로딩을 기다린 후 스크린샷을 찍는 방식으로 이를 해결한다. 이 과정을 통해 브라우저의 비동기적 특성을 결정론적 MP4 출력으로 변환한다.
html
<div class="clip" data-start="0" data-duration="5">HyperFrames 프레임워크에서 영상 클립의 시작 시간과 지속 시간을 정의하는 HTML 메타데이터 예시
Leveraging browser-native technologies like Three.js and WebGL
Three.js, WebGL 등 브라우저 네이티브 기술을 활용하여 영상 내에 다양한 시각적 요소를 렌더링한다. 브라우저에서 렌더링 가능한 모든 요소는 HyperFrames에서도 구현 가능하다. 발표자는 웹 기술의 확장성이 영상 제작의 핵심이라고 강조한다.
Using Skills to teach agents video taste
에이전트 루프와 평가 시스템을 통해 모델에 영상 제작의 '감각(Taste)'을 학습시킨다. 프레임워크의 문법을 가르치는 대신 좋은 영상을 만드는 방법을 학습시킨다. 발표자는 기술적 제약보다 감각을 학습시키는 것이 더 중요하다고 말한다.
Crafting videos: the human-in-the-loop workflow
인간이 개입하는 워크플로우를 통해 영상 제작의 세부 사항을 조정한다. 스토리보드 작성부터 프레임 단위의 편집까지 인간의 의도를 반영한다. 발표자는 파워 유저를 위한 완전한 제어권을 제공하는 것이 중요하다고 강조한다.
Keyframes integration
GSAP를 활용하여 키프레임 통합을 구현했다. 전문 모션 디자이너가 After Effects에서 수행하는 작업을 코드 기반으로 재현한다. 발표자는 키프레임 제어를 통해 영상의 모션을 완벽하게 제어할 수 있다고 설명한다.
javascript
gsap.set("#agents", { x: 0, })GSAP를 사용하여 특정 요소의 초기 위치를 설정하는 코드
javascript
gsap.to("#agents", { keyframes: [ { x: 0 }, { x: 420, ease: "power2.out" } ], })GSAP의 키프레임을 사용하여 요소의 모션을 정의하는 코드
Scaling and performance metrics
HyperFrames는 지난 90일 동안 130만 개 이상의 영상을 렌더링했다. 26만 명 이상의 크리에이터가 사용 중이며, GitHub 스타 3만 2천 개를 기록했다. 발표자는 이 수치가 HyperFrames의 실무적 가치를 증명한다고 말한다.
Future goals: Code-to-Video benchmarking
모델의 창의적 작업 능력을 향상하기 위해 Code-to-Video 벤치마크를 개발 중이다. 영상 생성 에이전트 분야의 표준을 높이는 것을 목표로 한다. 발표자는 협업을 원하는 사람들의 참여를 요청한다.
용어 해설
- 결정론적 렌더링(Deterministic Rendering)
- — 동일한 입력에 대해 항상 동일한 출력(픽셀)을 생성하는 렌더링 방식이다. 브라우저의 비동기적 특성(폰트 로딩, 이미지 디코딩 등)을 제어하여 영상의 각 프레임이 매번 동일하게 렌더링되도록 보장하는 것이 핵심이다.
- 비동기 렌더링(Async Rendering)
- — 웹 브라우저가 자원을 순차적으로 기다리지 않고 로딩하는 방식이다. 성능에는 유리하지만, 영상 생성 시 프레임마다 렌더링 상태가 달라질 수 있어 결정론적 출력을 방해하는 주요 요인이 된다.
- GSAP
- — 웹 애니메이션을 위한 고성능 JavaScript 라이브러리이다. HyperFrames에서 키프레임 기반의 정교한 모션 제어를 구현하는 데 핵심적인 역할을 한다.
- 에이전트 루프(Agentic Loop)
- — 에이전트가 작업을 수행하고 결과를 평가한 뒤, 이를 바탕으로 스스로 개선하거나 다음 단계를 결정하는 반복적인 프로세스이다. 영상 생성 과정에서 모델의 결과물을 점진적으로 개선하는 데 사용된다.
언급된 리소스
GitHubHyperFrames GitHub
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 07. 22.수집 2026. 07. 22.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
