HTML 스트림으로부터의 결정론적 비디오 렌더링: HyperFrames를 에이전트형 UI 파이프라인에 통합하기

새벽 3시 14분, 온콜 페이지거가 비명을 지르기 시작했다. 이유는 다운스트림 엔터프라이즈 클라이언트를 위해 자동화된 마케팅 비디오들이 동기화에서 벗어나고 있었기 때문이다. 제목은 배경 비디오 에셋이 초기화되기 3 프레임 전에 나타나고, 키네틱 자막이 하단 배너와 겹치며, 헤드리스 Chromium 렌더링 팜은 CPU 코어를 100% 포화 상태로 과부하시키고 있었다.

자율 AI 에이전트가 동적인 HTML/CSS를 스트리밍하여 비디오 에셋을 실시간으로 생성할 때, 표준 브라우저 렌더링 가정이 결정론적이지 않은 틱(tick) 속도 하에서 무너진다.

전통적인 브라우저 애니메이션은 requestAnimationFrame과 시스템 벽시계 시간(wall-clock time)에 의존한다. 워커 노드가 무거운 에셋 디코딩 중 40ms의 CPU 정지에 직면하면, 브라우저는 벽시계 파리티를 유지하기 위해 프레임을 드롭시킨다. 실시간 화면 표시에는 이것이 허용되지만, 결정론적이고 프레임 정확한 MP4 비디오 인코딩에서는 복구 불가능한 시각적 찢어짐(visual tearing)과 무음의 오디오-비디오 비동기화가 발생한다.

클라이언트 대면 스트리밍 인터페이스를 취약한 헤드리스 렌더링 스크립트로부터 분리하기 위해, 저희 팀은 heygen-com/hyperframes을 통합했다. 이는 HTML, CSS, 그리고 탐색 가능한 애니메이션을 엄격하게 결정론적인 비디오 합성 파이프라인으로 다루도록 설계된 오픈 소스 프레임워크이다.

실패 모드: 벽시계 지터(Wall-Clock Jitter) 대 프레임 정확도 틱(Frame-Accurate Ticks)

자율 에이전트가 동적으로 비디오 템플릿을 작성할 때, 일반적으로 CSS 애니메이션이나 GSAP 타임라인을 포함하는 DOM 노드를 조립한다. 만약 순수한 Puppeteer나 Playwright 스크립트를 그 DOM에 연결하면, 렌더링 출력은 실행마다 달라진다. 시스템 부하가 캡처 틱 사이의 애니메이션 진행 상황을 직접적으로 변경하기 때문이다.

HyperFrames는 data-* 타이밍 속성과 프레임워크 소유의 가상 시간(virtual time)을 통해 엄격한 합성 계약(composition contract)을 도입함으로써 이를 해결한다. 브라우저 런타임이 틱 속도를 결정하도록 허용하는 대신, 엔진은 기반 하드웨어 처리량에 관계없이 결정론적인 프레임을 렌더링하며 가상 시간을 프레임 단위로 진행시킨다.

+-------------------------------------------------------------------------+
|                    에이전트형 비디오 합성 토폴로지 (Agentic Video Synthesis Topology)                     |
+-------------------------------------------------------------------------

아키텍처 및 구현: 구성 계약 강제 (Architecture & Implementation: Enforcing the Composition Contract)

React 19 백엔드 워커에서, 우리는 구조화된 LLM 생성 스트림을 수신하고 HyperFrames를 준수하는 DOM 구조를 방출한다. 모든 트랙(track), 전환(transition), 동적 키네틱 자막은 명시적인 프레임 또는 시간 경계를 선언해야 한다.

아래는 에이전트 생성 출력을 격리되고 결정론적으로 탐색 가능한 DOM 트리로 변환하기 위해 구현한 검증된 TypeScript 파이프라인 어댑터이다:

import { exec } from "node:child_process";
import { promisify } from "node:util";
import { writeFile, rm } from "node:fs/promises";
...

운영 딜레마: 일시적 클라우드 워커 대 영구 렌더 데몬 (Operational Dilemma: Ephemeral Cloud Workers vs. Persistent Render Daemons)

브라우저 기반 비디오 합성의 근본적인 운영 마찰은 **콜드 스타트 오버헤드(cold-start overhead)와 상태 저장 워커 수명 주기(stateful worker lifecycle)**에 달려 있다. 일시적 Kubernetes Pod 내부에서 헤드리스 Chromium을 구동하는 것은 렌더링 작업당 1.2초에서 2.8초의 샌드박스 시작 페널티를 초래한다. 영구적인 따뜻한 브라우저 인스턴스를 유지하면 초기화 지연 시간(initiation latency)이 90밀리초 미만으로 줄어들지만, 좀비 Chrome 프로세스, 남아있는 GPU 컨텍스트 누수(context leaks), 그리고 연속적인 LLM 버스트 큐 하에서의 조용한 메모리 증가를 야기한다.

우리는 전용의 비버퍼링 프록시 엔드포인트를 통해 호스트별 동시성을 제한하고 에이전트 토큰을 스트리밍함으로써, 렌더링 노드가 생성 청크를 기다리느라 멈추는 일이 없도록 완화했다.

여러분의 팀은 버스트가 발생하는 AI 생성 부하 조건에서 헤드리스 브라우저 파이프라인을 어떻게 격리합니까? 따뜻한 데몬 풀로 콜드 스타트를 흡수하고 있습니까, 아니면 DOM-to-MP4 컴파일 자체를 외부 엣지 워커에 완전히 오프로딩 합니까? 아래 댓글에 여러분의 경험담(battle scars)을 공유해 주세요.