최근 개발자들 사이에서 복잡한 영상 편집 도구 대신 코드로 영상을 찍어내는 방식이 주목받고 있다. 특히 AI 코딩 에이전트(사용자의 명령을 받아 코드를 직접 작성하고 실행하는 인공지능)가 늘어나면서, 이들이 이해하기 쉬운 언어로 영상을 만들 수 있게 돕는 도구들이 깃허브 트렌드에 자주 등장한다. 이번에 공개된 HyperFrames(HTML과 CSS를 활용해 비디오를 생성하는 오픈소스 프레임워크)는 바로 이러한 흐름의 중심에 있다.

HyperFrames의 핵심 기능과 작동 방식

HyperFrames는 별도의 복잡한 프로그래밍 언어나 리액트(사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리)를 배울 필요가 없다. 순수 HTML 파일 자체가 곧 하나의 영상 구성 요소가 되며, 빌드 과정 없이 index.html 파일을 브라우저에서 열면 바로 영상이 재생되는 구조다. 이 도구는 Claude Code(Anthropic의 AI 코딩 에이전트)나 Codex(OpenAI의 코드 생성 모델)와 같은 에이전트가 HTML을 직접 작성해 영상을 제작하는 워크플로우에 최적화되어 있다. 사용자는 단순히 원하는 영상을 설명하기만 하면 된다. 예를 들어, 특정 주제에 대해 10초짜리 제품 소개 영상을 만들거나, CSV(데이터를 쉼표로 구분한 파일)를 애니메이션 차트로 변환하는 작업이 가능하다. 설치와 실행은 아래 명령어를 통해 간단히 시작할 수 있다.

npx hyperframes init my-video
cd my-video
npx hyperframes preview # 브라우저에서 미리보기
npx hyperframes render # MP4로 렌더링

또한, 50개 이상의 사전 제작된 블록과 컴포넌트(재사용 가능한 코드 조각)를 제공하여 셰이더 트랜지션(화면 전환 효과)이나 소셜 오버레이 등을 쉽게 추가할 수 있다. HyperFrames 공식 저장소에서 더 자세한 구조를 확인할 수 있다.

Remotion과의 차이점과 기술적 선택

예전에는 영상 자동화 도구로 Remotion(리액트 기반의 영상 제작 프레임워크)이 주로 사용되었다. 하지만 HyperFrames는 작업물 구성 방식과 라이선스 정책에서 결정적인 차이를 보인다. Remotion은 리액트 기반이라 번들러(코드를 묶어주는 도구)가 필수적이지만, HyperFrames는 HTML을 직접 재생하므로 훨씬 가볍다. 가장 큰 차이는 라이선스다. Remotion은 3인 이상의 기업이 사용할 경우 유료 라이선스가 필요하지만, HyperFrames는 Apache 2.0(누구나 자유롭게 수정하고 상업적으로 이용 가능한 오픈소스 라이선스)을 채택했다. 기술적으로는 GSAP(웹 애니메이션을 위한 자바스크립트 라이브러리)와 같은 도구를 활용해 프레임 단위의 정확도를 유지하며, 동일한 입력값에 대해 항상 같은 결과물을 내놓는 결정적 렌더링을 지원한다. 다만, Remotion은 현재 대규모 분산 렌더링에 강점이 있는 반면, HyperFrames는 단일 머신 렌더링에 집중하고 있다는 점이 다르다.

개발 환경에 미치는 영향

개발자가 바로 체감하는 변화는 AI 에이전트와의 협업 방식이다. 이제는 비디오 에디터를 직접 켜는 대신, AI에게 '16:9 비율의 틱톡 스타일 영상을 만들어달라'고 명령하면 에이전트가 HyperFrames의 패턴을 학습해 HTML 코드를 짜고 MP4 파일로 출력해 준다. 이는 영상 제작 파이프라인이 단순한 코딩 작업의 영역으로 완전히 편입되었음을 의미한다. 특히 웹사이트를 캡처해 영상으로 변환하는 기능까지 포함하고 있어, 자동화된 콘텐츠 생성 시스템을 구축하려는 개발자들에게는 강력한 선택지가 될 것이다.