HTML Is All Agents Need — James Russo, HeyGen
📺 원본 영상: HTML Is All Agents Need — James Russo, HeyGen
🎙️ 채널: AI Engineer
📅 정리 일자: 2026-07-22
⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(차트, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다.
개요
HeyGen의 James Russo는 이 강연에서 “에이전트가 좋은 영상을 만들기 위해 필요한 것은 결국 HTML”이라는 주장을 펼친다. 그의 핵심 논지는 단순하다. LLM과 코딩 에이전트는 이미 HTML, CSS, JavaScript를 가장 자연스럽게 다루도록 학습되어 있으므로, 영상 제작을 위해 별도의 DSL(Domain-Specific Language)이나 복잡한 JSON 구조를 강요하기보다 웹의 언어를 그대로 영상 제작 캔버스로 사용하는 편이 더 높은 품질과 제어 가능성을 제공한다는 것이다.
강연의 중심 사례는 HeyGen이 공개한 오픈소스 프레임워크 HyperFrames다. HyperFrames는 에이전트가 작성한 HTML을 브라우저에서 렌더링하고, 이를 프레임 단위로 캡처해 결정론적인 MP4 영상으로 변환하는 구조를 취한다. Russo는 이 접근이 단순한 데모가 아니라 실제 대규모 사용량을 기록하고 있으며, 제품을 만드는 에이전트가 곧 출시 영상까지 만들 수 있는 새로운 워크플로를 열고 있다고 설명한다.
코딩 에이전트 이후에도 남은 문제는 ‘출시’다
Russo는 강연 초반에 생성형 미디어라는 주제에 맞춰, 하나의 에이전트가 한 번의 시도로 HTML을 활용해 만든 영상을 보여주며 이야기를 시작한다. 그가 던지는 문제의식은 명확하다. 코딩 에이전트는 이미 “무엇인가를 만드는 일”을 크게 민주화했지만, 그 결과물을 세상에 알리는 일, 즉 출시 글이나 출시 영상을 만드는 일은 여전히 어렵다는 것이다.
이 지점에서 HeyGen의 미션이 등장한다. HeyGen은 “비디오를 통한 커뮤니케이션 문제를 해결한다”는 목표 아래 AI 아바타를 발전시켜 왔고, Russo는 이를 영상의 A-roll에 비유한다. A-roll은 내레이터, 캐릭터, 혹은 화면의 주체가 되는 핵심 푸티지를 뜻하지만, 좋은 영상은 그것만으로 완성되지 않는다. 실제로 설득력 있는 영상에는 B-roll, 이미지, 미디어 에셋, 애니메이션, 캡션, 음악이 함께 작동해야 하며, HeyGen이 해결하려는 과제는 아바타 하나를 잘 만드는 데서 끝나지 않는다.
01:35 - HeyGen의 AI 아바타를 A-roll로 설명하며 화면 왼쪽의 예시 영상을 가리키는 구간
따라서 강연의 주제는 “AI 아바타를 어떻게 더 좋게 만들 것인가”가 아니라, 에이전트가 영상 전체의 구성 요소를 어떻게 생성하고 조합할 수 있게 할 것인가로 확장된다. Russo는 이 문제를 해결하기 위한 캔버스로 HTML을 선택했다고 말한다. 여기서 HTML은 웹페이지를 만드는 마크업 언어에 머물지 않고, 에이전트가 시각적 장면과 시간 기반 구성을 표현하는 공통 언어로 재해석된다.
왜 HTML인가: LLM의 모국어라는 관점
Russo의 가장 중요한 주장은 HTML, CSS, JavaScript가 LLM의 “native language”에 가깝다는 점이다. 웹에서 수집된 방대한 학습 데이터는 결국 HTML, CSS, JavaScript로 구성된 페이지를 포함하고 있으며, LLM은 이미 이 언어들로 시각적 구조와 인터랙션을 표현하는 법을 상당히 잘 학습했다. 반대로 새로운 DSL이나 커스텀 JSON 구조를 모델에게 가르치는 일은, 이미 잘하는 언어를 두고 낯선 언어를 억지로 쓰게 만드는 것에 가깝다.
그는 이를 Shakespeare에게 일본어나 중국어로 시를 쓰라고 요청하는 비유로 설명한다. 충분한 예시와 지침을 제공하더라도, 창작자가 자기 언어가 아닌 표현 체계 안에서 최고의 결과를 내기 어렵다는 것이다. 이 비유의 핵심은 모델이 새로운 포맷을 전혀 못 배운다는 말이 아니라, 출력 품질과 창의성이 포맷의 자연스러움에 크게 영향을 받는다는 데 있다.
강연자는 Tarek 및 Andrej Karpathy가 최근 “HTML is the new Markdown”이라는 취지의 논의를 했다고 언급한다. STT에서는 “Andre Caparthi”처럼 들리지만, 문맥상 Andrej Karpathy를 가리키는 것으로 보는 것이 자연스럽다. Russo는 자신이 이 강연을 두 사람의 트윗 이전에 제출했다고 덧붙이면서, 여러 사람이 독립적으로 비슷한 결론에 도달했다고 설명한다. 즉, LLM에게 시각적 결과물을 만들게 하려면 모델이 이미 잘 아는 언어로 말하게 하는 편이 낫다는 것이다.
기존 영상 제작 도구와 에이전트 친화성의 긴장
Russo는 HyperFrames에 도달하기 전까지 다양한 도구와 프레임워크를 실험했다고 말한다. 그는 이들을 결과물의 품질과 에이전트 친화성이라는 두 축으로 바라본다. After Effects와 Premiere Pro는 크리에이티브 업계의 골드 스탠더드에 가깝고 뛰어난 결과물을 만들 수 있지만, 에이전트가 자율적으로 창의적 산출물을 만들기에는 적합하지 않다고 평가한다. 최근 커넥터가 생겼더라도 이는 사용자가 이미 아는 작업을 보조하는 코파일럿에 가까우며, 에이전트가 처음부터 영상을 구성하는 방식과는 거리가 있다는 것이다.
Lottie와 Rive 역시 검토 대상이었다. 이들은 JSON이나 커스텀 XML 기반의 구조로 애니메이션을 표현할 수 있고 꽤 좋은 출력물을 만들 수 있지만, Russo가 보기에 LLM의 자연스러운 출력 언어는 아니었다. 특히 HeyGen이 중요하게 여긴 것은 controllability, 즉 결과물을 세밀하게 수정하고 통제할 수 있는 층이었다. 좋은 출력만큼이나 중요한 것은 인간과 에이전트가 그 결과를 다시 편집하고 개선할 수 있는가라는 문제였기 때문이다.
STT에서 “promotion”으로 기록된 부분은 문맥상 Remotion을 가리키는 것으로 보인다. Remotion은 React 기반으로 영상을 프로그래밍할 수 있는 프레임워크이며, 실제로 LLM과 코딩 에이전트가 코드로 영상을 생성하는 사례와 잘 맞닿아 있다. Russo는 Remotion이 LLM과 에이전트가 코딩을 통해 무엇을 할 수 있는지 보여주는 좋은 예였다고 인정하지만, 여전히 프레임워크의 사용법과 언어를 모델에게 가르쳐야 했고, 많은 예시와 프롬프트 맥락을 제공해야 했다고 설명한다. 그 과정에서 모델의 창의성이 줄어드는 문제가 있었다는 것이 그의 판단이다.
03:58 - After Effects, Premiere Pro, Lottie, Rive, Remotion, HTML 등을 품질과 에이전트 친화성 축에서 비교하는 구간
HyperFrames의 선택: 얇은 래퍼와 데이터 속성
Russo에 따르면 HyperFrames 팀은 HTML, CSS, JavaScript 주변에 여러 형태의 래퍼를 씌워 보았다. 더 많은 컨텍스트를 주고, 시스템 프롬프트를 키우고, 스킬을 추가하는 방식도 실험했다. 그러나 의외로 최종적으로 가장 좋은 결과를 낸 것은 가장 얇은 래퍼였다. 사실상 HTML을 그대로 사용하되, 타이밍과 메타데이터를 알리기 위한 소수의 data attribute만 추가하는 방식이 가장 효과적이었다는 것이다.
이 접근은 모델의 발전 방향에 대한 실용적 베팅이기도 하다. Russo는 작은 모델이 이 포맷으로 쓸 만한 코드를 작성할 수 있다면, 더 큰 모델과 고도화된 코딩 에이전트는 당연히 더 잘할 수 있다고 보았다. 강연에서는 “Gemini 2.5 Flash”를 작은 설계 파트너로 사용했다고 언급되는 것으로 보인다. 다만 핵심 메시지는 특정 모델명이 아니라, 가장 약한 모델이 이해할 수 있을 만큼 포맷을 단순하게 만들면 모델 성능 향상과 함께 시스템 전체의 품질도 자연스럽게 올라간다는 점이다.
06:30 - HyperFrames에서 왼쪽의 HTML 코드와 오른쪽의 브라우저 렌더링 결과를 나란히 보여주는 구간
HyperFrames에서 미리보기와 렌더링은 모두 브라우저 안에서 이루어진다. 브라우저가 보는 픽셀이 곧 최종 영상이 보는 픽셀이 된다는 설계는 이 프레임워크의 중요한 장점이다. 에이전트가 작성할 수 있는 어떤 웹페이지도 이제 영상의 장면이 될 수 있으며, 이는 HTML을 단순한 문서 구조가 아니라 영상 생성의 범용 장면 기술 언어로 바꾸어 놓는다.
브라우저를 영상 렌더러로 만들 때 생기는 문제
HTML을 영상으로 바꾸는 일은 겉보기보다 어렵다. Russo가 설명하듯, 브라우저는 본질적으로 비동기적(async)으로 동작하도록 설계되어 있다. 폰트는 페이지가 로드된 뒤 늦게 적용될 수 있고, 이미지나 비디오 같은 에셋도 네트워크 상태에 따라 순차적으로 나타날 수 있다. 일반 웹페이지에서는 이런 동작이 허용된다. 잠깐 기본 폰트가 보이다가 웹폰트로 바뀌거나, 이미지가 나중에 로딩되는 것은 사용자 경험상 어느 정도 감내 가능한 일이다.
하지만 영상 렌더링에서는 다르다. 영상은 특정 시간의 특정 프레임이 확정적으로 존재해야 하며, 같은 입력은 같은 출력으로 이어져야 한다. 어떤 프레임에서는 이미지가 보이고 어떤 렌더링에서는 아직 로드되지 않아 비어 있다면, 이는 영상 제작 도구로서 치명적인 문제가 된다. 따라서 HyperFrames의 핵심 과제는 웹의 유연하고 비동기적인 렌더링 모델을 영상의 결정론적 프레임 생성 모델로 바꾸는 것이었다.
07:51 - 브라우저의 비동기 로딩과 영상 렌더링의 결정론적 요구사항 차이를 설명하는 구간
Russo는 이를 “clock을 freeze하고 frame by frame으로 seek한다”고 설명한다. 영상은 본질적으로 수많은 이미지 프레임이 시간순으로 연결된 것이므로, HyperFrames는 브라우저의 시간을 멈춘 뒤 특정 시점으로 이동하고, 페이지의 모든 리소스가 준비되었는지 확인한 다음 스크린샷을 찍는다. 이후 다음 프레임으로 이동해 같은 과정을 반복하고, 이렇게 모은 프레임을 인코딩해 MP4 영상으로 만든다. 이 구조 덕분에 브라우저에서 미리 본 입력과 최종 영상 출력이 같은 픽셀 경로를 공유하게 된다.
08:31 - 브라우저 clock을 멈추고 프레임별로 seek한 뒤 스크린샷을 캡처하는 렌더링 방식을 설명하는 구간
브라우저 생태계 전체가 영상 제작 도구가 된다
HyperFrames의 강점은 브라우저에서 렌더링 가능한 거의 모든 것이 영상에도 들어갈 수 있다는 데 있다. Russo는 Three.js, 차트, SVG, shader, WebGL, WebGPU, Lottie 등을 예로 든다. 이들은 원래 웹에서 인터랙티브하거나 시각적으로 복잡한 표현을 구현하기 위해 발전한 도구들이지만, HyperFrames의 렌더링 방식에서는 모두 영상 구성 요소가 될 수 있다.
이 관점은 영상 제작의 재료 풀을 크게 확장한다. 기존 모션 그래픽 도구에서는 특정 플러그인이나 에셋 포맷에 맞춰야 했던 표현도, 웹에서 이미 구현되어 있다면 에이전트가 이를 참고하고 변형해 영상에 포함할 수 있다. Russo는 실제로 인터넷에서 영감을 찾고, 예시를 가져와 필요에 맞게 조정한 뒤, 이를 영상 안에 넣는 방식으로 많은 영상을 만든다고 설명한다.
이 대목에서 중요한 것은 HTML이 단순히 쉬운 포맷이라는 점이 아니다. HTML을 중심에 두면 웹 생태계의 누적된 자산을 영상 생성 시스템으로 끌어올 수 있다. LLM이 이미 웹 코드를 잘 쓰고, 브라우저가 이미 복잡한 시각 표현을 렌더링할 수 있으며, HyperFrames가 이를 프레임 단위 영상으로 고정해 준다면, 에이전트 기반 영상 제작은 별도의 폐쇄적 툴체인보다 훨씬 넓은 기반 위에서 작동할 수 있다.
좋은 결과는 프레임워크만이 아니라 ‘스킬’에서 나온다
Russo는 프레임워크와 렌더링 엔진만으로는 충분하지 않다고 말한다. 에이전트가 좋은 출력을 내도록 하려면, 어떤 영상을 좋은 영상으로 만드는지에 대한 지침과 평가가 필요하다. HyperFrames 팀이 만든 스킬은 HTML, CSS, JavaScript를 가르치는 데 초점을 맞추지 않는다. 모델은 이미 그 언어를 알고 있기 때문이다. 대신 스킬은 taste, 즉 영상적 취향과 구성 감각, 그리고 비디오 제작의 관습을 가르치는 데 집중한다.
이 차이는 다른 프레임워크와의 중요한 차별점으로 제시된다. 특정 프레임워크를 사용하려면 “이 프레임워크에서 어떻게 작성해야 하는가”를 먼저 가르쳐야 하지만, HyperFrames는 그 부담을 줄이고 “좋은 영상은 어떻게 구성되는가”라는 더 본질적인 문제에 프롬프트와 스킬의 용량을 쓸 수 있다. Russo는 지속적인 평가(eval)와 에이전트 기반 개선을 통해 단일 프롬프트로도 일정 수준 이상의 영상을 만들 수 있도록 기본 품질의 하한선을 올리고 있다고 설명한다.
그가 소개한 예시는 website-to-video 스킬이다. 사용자가 웹사이트 하나를 제공하면, 시스템은 해당 사이트에 들어가 필요한 자산과 정보를 가져오고, 디자인과 테마, 브랜딩을 추출해 영상으로 재구성한다. 강연에서는 design.md 또는 frame.md와 같은 내부 문서를 통해 디자인 지침을 구성한다고 설명하며, 이후 기본 모션 예시와 영상 제작 원칙을 결합해 단일 시도에서도 그럴듯한 결과를 만들 수 있다고 말한다.
10:33 - 웹사이트를 입력으로 받아 디자인, 테마, 브랜딩을 추출해 영상으로 만드는 website-to-video 스킬 예시 구간
단일 프롬프트와 장인적 반복 작업 사이
Russo는 AI 코딩과 마찬가지로, 에이전트 기반 영상 제작에서도 “작동하는 결과”와 “훌륭한 결과” 사이에는 차이가 있다고 강조한다. 단일 프롬프트만으로도 필요를 충족하는 괜찮은 영상은 만들 수 있지만, 정말 좋은 결과를 얻으려면 craft와 taste가 필요하다. 이는 AI 이전의 소프트웨어 엔지니어링과도 닮아 있다. 큰 문제를 작은 조각으로 나누고, 반복적으로 개선하며, 각 부분의 역할을 명확히 해야 결과물의 수준이 올라간다.
HyperFrames에서의 고품질 제작 워크플로도 같은 방식으로 진행된다. 먼저 영상의 내러티브, 비전, 미션을 정의하고, 이후 프레임 단위로 스토리보드를 구성한다. 각 프레임이 어떤 역할을 해야 하는지 정리한 다음, HTML, CSS, JavaScript를 활용해 모션을 추가하고, 전체를 하나의 응집된 영상으로 병합한다. 마지막에는 HyperFrames와 함께 공개된 Studio를 통해 사람이 직접 드래그하고 조정하며 마무리 편집을 수행한다.
이 부분에서 Russo의 관점은 과도한 자동화 낙관론과 다르다. 그는 인간이 항상 loop 안에 있어야 한다고 본다. 에이전트는 초안을 만들고 복잡한 구현을 빠르게 처리할 수 있지만, 최종적인 감각과 의도, 세부 조정은 여전히 사람의 개입을 통해 강화된다. HyperFrames Studio는 바로 이 마지막 편집 구간을 위해 존재하며, 사용자가 일반 영상 편집기에서 하던 일을 오픈소스 프레임워크의 편집 환경 안에서도 할 수 있게 하는 것을 목표로 한다.
Keyframes와 전문 모션 디자인의 접점
강연 중 Russo는 HyperFrames에 keyframes 기능을 “오늘 출시했다”고 언급한다. Keyframes는 모션 디자이너에게 매우 중요한 개념이다. 움직임의 시작점과 끝점, 혹은 중간 지점을 시간축 위에 지정하고, 그 사이의 변화를 계산해 애니메이션을 만드는 방식이기 때문이다. 웹 애니메이션에서도 keyframe은 익숙한 개념이지만, HyperFrames Studio에 이를 통합했다는 것은 에이전트가 만든 HTML 기반 영상에 전문 모션 그래픽 편집의 문법을 연결하려는 시도로 볼 수 있다.
Russo는 이 기능을 통해 프레임 단위 또는 keyframe 단위로 다양한 모션을 조율할 수 있다고 설명한다. 이는 After Effects에서 전문 모션 디자이너가 수행하는 작업의 일부를 HyperFrames 안으로 가져오려는 방향이다. 물론 After Effects의 전체 기능을 그대로 대체한다는 의미라기보다, 에이전트가 생성한 영상 구조를 사람이 섬세하게 다듬을 수 있는 편집 층을 제공한다는 점이 중요하다.
이 흐름은 HyperFrames의 전체 철학과 일관된다. 생성은 에이전트가 빠르게 수행하되, 표현의 품질은 인간의 편집과 판단이 끌어올린다. HTML이라는 익숙한 언어, 브라우저라는 강력한 렌더러, keyframe 기반 편집이라는 모션 디자인의 문법이 결합되면서, HyperFrames는 단순한 코드-투-비디오 변환기를 넘어 에이전트 시대의 영상 제작 환경을 지향한다.
오픈소스 사용량과 생태계 전략
Russo는 HyperFrames가 단순한 실험적 데모가 아니라고 강조한다. 강연에 따르면 HyperFrames는 몇 달 전 공개된 이후, 최근 90일 동안 오픈소스 사용자들에 의해 130만 개 이상의 영상이 렌더링되었다. 또한 26만 7천 명의 크리에이터가 사용해 보았고, 매일 약 1만 5천 개의 영상이 오픈소스 프레임워크를 통해 렌더링되며, GitHub stars는 3만 2천 개 수준이라고 소개한다. 이 수치들은 모두 강연자의 발언과 화면에 표시된 공개 지표에 기반한 것이다.
12:46 - HyperFrames의 사용량, 크리에이터 수, 일일 렌더링 수, GitHub stars 등 공개 지표를 소개하는 구간
| 지표 | 강연에서 언급된 수치 |
|---|---|
| 최근 90일 렌더링 영상 수 | 130만 개 이상 |
| 사용해 본 크리에이터 수 | 26만 7천 명 |
| 일일 렌더링 영상 수 | 약 1만 5천 개 |
| GitHub stars | 3만 2천 개 |
이 숫자들이 중요한 이유는 HyperFrames가 단순히 HeyGen 내부의 제작 도구가 아니라, 에이전트 생태계 전체를 겨냥한 오픈소스 인프라로 포지셔닝되고 있기 때문이다. Russo는 HyperFrames가 오픈소스이며 영구적으로 무료라고 말한다. 또한 Claude Code, Codex, Cursor 등 어떤 코딩 에이전트와도 함께 사용할 수 있다고 설명한다. STT에는 “Cloud Code”로 기록되어 있지만, 문맥상 Claude Code를 의미하는 것으로 보인다.
이 전략은 HeyGen에게도 의미가 크다. 에이전트가 제품을 만드는 단계에서 이미 HTML, CSS, JavaScript를 작성하고 있다면, 같은 에이전트가 제품 출시 영상까지 만들 수 있다는 메시지는 개발자와 스타트업 사용자에게 강하게 다가간다. 제품 구축과 제품 커뮤니케이션 사이의 간극을 줄이는 것이 HeyGen의 문제의식이었다면, HyperFrames는 그 간극을 오픈소스 프레임워크와 에이전트 워크플로로 연결하려는 시도다.
아직 모델은 창의적 작업에 충분히 강하지 않다
강연의 후반부에서 Russo는 중요한 한계를 솔직히 인정한다. 현재 모델은 아직 creative work에 충분히 강하지 않다는 것이다. HeyGen 팀은 스킬을 평가하고 개선하면서 이 문제를 계속 밀어붙이고 있지만, 더 높은 수준에서는 모델과 벤치마크 자체가 함께 발전해야 한다고 본다. 그래서 이들은 code-to-video benchmark를 만들기 시작했다고 설명한다.
이 벤치마크의 목적은 단순히 HyperFrames의 성능을 측정하는 것이 아니라, 영상 에이전트와 LLM 연구소, 크리에이터들이 함께 “좋은 영상 생성”의 기준을 끌어올리는 데 있다. 코드로 영상을 만든다는 과제는 일반적인 코드 생성보다 더 복합적이다. 문법적으로 맞는 코드만으로는 충분하지 않고, 시각적 구성, 타이밍, 내러티브, 브랜드 적합성, 모션의 자연스러움까지 평가해야 하기 때문이다.
이 문제는 앞으로 에이전트 기반 창작 도구가 반드시 마주할 핵심 과제이기도 하다. 생성형 AI가 텍스트와 코드에서는 빠르게 품질을 높였지만, 멀티모달 창작에서는 “정확히 작동함”과 “좋아 보임” 사이에 더 넓은 간극이 존재한다. Russo의 발언은 HyperFrames가 그 간극을 완전히 해결했다는 선언이라기보다, HTML이라는 공통 언어와 브라우저 렌더링이라는 기반 위에서 그 간극을 줄여 나가겠다는 방향 제시에 가깝다.
마무리 / 핵심 정리
James Russo의 강연은 에이전트 기반 영상 생성의 핵심 인터페이스를 다시 생각하게 만든다. 기존 영상 제작 도구가 높은 품질을 제공하지만 에이전트 친화적이지 않고, 전용 DSL이나 커스텀 JSON 구조가 모델의 자연스러운 표현력을 제한한다면, HTML은 이미 LLM이 잘 알고 웹 생태계가 풍부하게 지원하는 가장 현실적인 중간 지점이 된다. HyperFrames는 이 지점을 활용해 HTML, CSS, JavaScript로 작성된 장면을 브라우저에서 렌더링하고, 이를 결정론적인 프레임 캡처 방식으로 영상화한다.
이 접근의 진짜 함의는 “HTML로 영상도 만들 수 있다”는 데서 끝나지 않는다. 제품을 만드는 코딩 에이전트가 같은 언어로 출시 영상까지 만들 수 있다면, 개발과 커뮤니케이션 사이의 경계가 낮아진다. 물론 Russo가 인정하듯 모델의 창의적 품질은 아직 충분하지 않고, 좋은 결과에는 여전히 인간의 취향과 반복 편집이 필요하다. 그러나 HyperFrames가 제안하는 방향은 분명하다. 에이전트에게 낯선 제작 도구를 억지로 가르치기보다, 에이전트가 이미 잘하는 HTML을 영상의 캔버스로 삼을 때 더 넓은 창작 워크플로가 열린다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | HTML Is All Agents Need — James Russo, HeyGen |
| 채널 | AI Engineer |
| 리포트 작성 | 2026-07-22 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.