JSON이 아닌 HTML을 작성하라: HeyGen의 시각적 접지(Visual-Grounding) 트릭

스크린샷과 임베디드 소스가 포함된 전체 버전은 AgentConn에서 확인하세요 → agentconn.com/blog/heygen-hyperframes-html-visual-grounding-video-ui-agents-2026

2026년의 모든 에이전트 프레임워크(agent framework)는 구조화된 JSON을 반환하라고 말합니다. 스키마 검증(Schema-validated)이 완료되고, 타입 안정성(type-safe)이 있으며, 파싱 가능한 형태 말이죠. 그리고 대부분의 작업에서 이는 옳습니다. 구조화된 출력(structured output)은 비구조화된 텍스트의 7085% 성공률에 비해 에이전트에게 9599%의 작업 성공률을 제공합니다.

하지만 아무도 이야기하지 않는 문제가 있습니다: JSON에는 시각적 의미론(visual semantics)이 없습니다. 에이전트는 비디오 타임라인을 설명하는 완벽하게 유효한 JSON 설정—정확한 스키마, 유효한 키프레임(keyframes), 법적 속성 값—을 생성할 수 있지만, 렌더링된 결과물은 엉망처럼 보일 수 있습니다. 에이전트는 자신이 볼 수 없는 것에 대해 "정확한" 지침을 작성한 것입니다.

HeyGen은 이를 파악했습니다. 그들의 오픈 소스 프레임워크인 HyperFrames는 JSON 설정을 사용하지 않습니다. 대신 HTML을 사용합니다.

시각적 접지(Visual-Grounding) 문제

에이전트가 JSON 비디오 설정을 생성할 때, 에이전트는 눈을 감고 작업하는 것과 같습니다. 완벽하게 유효한 JSON 장면 설명—정확한 스키마, 올바른 키프레임—이라 할지라도, 에이전트가 비시각적 형식에서 공간적 레이아웃(spatial layout)을 추론할 수 없기 때문에 시각적 쓰레기로 렌더링될 수 있습니다.

SeeAct-V 연구는 실무자들이 이미 알고 있는 사실을 확인해 줍니다: 시각적 접지(visual grounding)는 비시각적 형식에서 작동하는 언어 모델(language models)의 근본적인 능력 격차입니다.

HyperFrames: 에이전트의 캔버스로서의 HTML

HyperFrames는 2026년 4월 17일에 출시되었으며, 두 달 만에 **30,100개의 스타(stars)**를 기록했습니다. 에이전트는 JSON 설정 대신, 타이밍을 위한 CSS 및 data-* 속성을 포함한 표준 HTML을 작성합니다:

<div data-scene="intro" data-duration="3s">
  <h1 style="font-size: 48px; text-align: center; margin-top: 20vh;">
    Hello World
...

에이전트는 이에 대해 _추론(reason about this)_할 수 있습니다. 에이전트는 text-align: center가 어떻게 보이는지 알고 있습니다. margin-top: 20vh가 헤딩을 아래로 밀어낸다는 것도 알고 있습니다. 즉, CSS 레이아웃을 이해하고 있는 것입니다.

아키텍처: 결정론적인 프레임 캡처(deterministic frame capture)를 위한 headless Chrome (Puppeteer), 인코딩을 위한 FFmpeg를 사용합니다. GSAP 3, Lottie, Three.js, Anime.js, 그리고 WebGL 셰이더(shaders)를 지원합니다. 브라우저에서 실행되는 애니메이션 라이브러리라면 어댑터 없이 무엇이든 작동합니다.

왜 HTML이 JSON보다 우세한가

HN 토론(HN discussion)에서는 이를 명확하게 설명했습니다: "그것은 단지 HTML의 상위 집합(superset)일 뿐이며, 에이전트들은 기본적으로 HTML + GSAP를 작성하는 방법을 알고 있습니다."

LLM(대규모 언어 모델)은 수십억 개의 웹 페이지를 통해 학습되었습니다. 이들은 display: flex가 어떻게 보이는지, border-radius: 50%가 원을 만드는지, font-size: 72px가 크다는 것을 알고 있습니다. 이러한 시각적 직관은 임의의 JSON 좌표계에서는 존재하지 않습니다.

에이전트 기술 아키텍처 (The Agent Skill Architecture)

HyperFrames는 Claude Code, Cursor, Gemini CLI, 그리고 Codex를 위한 전용 기술(skills)을 포함하고 있습니다. HeyGen의 자체 출시 영상은 100% Claude Code + HyperFrames로 제작되었습니다. Nous Research의 Hermes 에이전트는 공식적인 HyperFrames 기술을 보유하고 있으며, 이는 비디오 제작을 네이티브하게 통합한 최초의 주요 에이전트 프레임워크입니다.

비디오를 넘어선 패턴

이 통찰은 일반적입니다: 출력 형식을 모델의 가장 강력한 추론 양식(reasoning modality)에 맞추십시오.

도메인	낮은 접지력 (Low-Grounding)	높은 접지력 (High-Grounding)
비디오	JSON 설정 (config)	HTML + CSS + data-*
...

HeyGen은 에이전트가 JSON보다 HTML에서 더 잘 생각할 것이라고 확신했습니다. 두 달 만에 기록한 3만 개의 스타(stars)는 그들의 판단이 옳았음을 시사합니다.

원문은 AgentConn에 게시되었습니다.