AI 에이전트가 HTML로 직접 영상을 만드는 시대를 여는 도구
프롬프트로 영상 제작을 지시하면, 에이전트가 HTML 코드를 작성해 MP4 파일로 완성해 줍니다. 웹 개발자가 익숙한 HTML과 CSS를 영상 편집의 언어로 바꾸는 프레임워크입니다. 브라우저에서 바로 미리보기가 가능하고, 같은 입력이면 항상 같은 결과가 나와 자동화 파이프라인에 적합합니다.
에이전트와 함께하는 영상 제작 워크플로
Claude Code나 Cursor 같은 AI 코딩 에이전트를 사용한다면, 전용 스킬을 설치한 뒤 영상 제작을 요청하기만 하면 됩니다. 에이전트는 영상 기획부터 HTML 작성, 애니메이션 연결, 미디어 추가, 렌더링까지 전체 과정을 수행합니다. 이 스킬들은 에이전트가 영상 제작 시 필요한 패턴을 학습하도록 돕습니다. 로컬 CLI를 통해 직접 명령을 입력하는 방식도 지원하며, Node.js 22 이상과 FFmpeg가 필요합니다.
HTML 기반의 결정적 렌더링
영상을 HTML 파일로 정의하고, 데이터 속성으로 타이밍과 트랙을 지정합니다. GSAP, CSS, Lottie, Three.js 등 다양한 애니메이션 라이브러리를 어댑터 기반으로 지원합니다. 렌더러는 헤드리스 Chrome에서 각 프레임을 탐색하고 FFmpeg로 인코딩하여, 동일한 입력이 항상 동일한 영상을 생성하도록 보장합니다. 빌드 단계가 없어 index.html 파일이 있는 그대로 재생되며, 브라우저에서 즉시 미리볼 수 있습니다.
레지스트리와 프레임 디자인 시스템
450개 이상의 미리 만들어진 블록과 컴포넌트를 레지스트리에서 설치해 사용할 수 있습니다. 전환 효과, 오버레이, 타이틀, 차트, 맵 애니메이션 등 다양한 시각 요소를 손쉽게 추가합니다. 또한 frame.md를 통해 웹용 디자인 시스템을 영상용 프레임에 맞게 변환합니다. 브랜드 토큰과 규칙을 유지하면서 AI 에이전트가 추측 없이 프로모션 영상을 구성할 수 있도록 돕습니다.
Remotion과의 차이점
Remotion과 마찬가지로 헤드리스 Chrome과 FFmpeg를 사용해 영상을 렌더링하지만, 작성 모델이 다릅니다. Remotion이 React 컴포넌트를 요구하는 반면, 이 도구는 사람이든 에이전트든 쉽게 작성할 수 있는 순수 HTML을 사용합니다. 빌더가 필요 없어 에이전트와의 협업이 더 매끄럽습니다. Apache 2.0 라이선스를 적용해 렌더링당 비용이나 상업적 사용 제한이 없습니다.
적용 전 확인 사항
Node.js 22 이상과 FFmpeg가 설치된 환경이 필요합니다. 개발용 저장소를 클론할 경우 Git LFS를 설치해야 하며, 소스 파일만 필요하면 LFS 내용을 건너뛰는 옵션을 사용할 수 있습니다. HeyGen의 Pro 플랜은 추가 모델 접근을 제공하지만, 기본 프레임워크와 스튜디오 앱은 무료로 사용할 수 있습니다. 자동화 파이프라인이나 CI 환경에서 결정적 렌더링이 필요한 경우, 그리고 AI 에이전트를 활용해 영상 제작 과정을 자동화하고 싶은 팀에게 적합합니다.
