HTML로 작성하고 영상으로 렌더링하는 HyperFrames — 코딩 에이전트를 위한 영상 제작 도구

AI 요약

HyperFrames는 웹 개발에 쓰는 HTML과 CSS를 영상 구성 형식으로 활용하는 오픈소스 도구입니다. React 컴포넌트로 영상을 작성하는 Remotion과 달리, HyperFrames는 브라우저에서 바로 열 수 있는 HTML 파일을 입력으로 받습니다. 타임라인 전용 편집기나 번들링 단계 없이 기존 웹 기술과 애니메이션 라이브러리를 조합해 영상을 만듭니다.

구성과 렌더링

영상 구성은 HTML 요소에 data-start, data-duration, data-track-index 같은 속성을 붙여 정의합니다. 예를 들어 비디오 클립과 제목, 오디오의 시작 시각·길이·트랙을 지정하고, GSAP 타임라인이나 CSS 애니메이션을 연결합니다. GSAP 외에도 Lottie, Three.js, Anime.js, Web Animations API(WAAPI), 사용자 정의 프레임 어댑터를 지원합니다.

렌더러는 헤드리스 Chrome에서 프레임마다 지정한 시각으로 이동해 화면을 캡처하고, FFmpeg로 영상을 인코딩하고 오디오를 믹싱합니다. 프로젝트는 브라우저에서 즉시 미리 볼 수 있으며, 로컬이나 Docker에서 렌더링할 수 있습니다. 같은 입력에서 같은 프레임과 결과를 얻도록 설계해 CI 작업과 회귀 테스트에도 사용할 수 있다고 설명합니다.

CLI와 에이전트 작업 흐름

Node.js 22 이상과 FFmpeg가 필요합니다. npx hyperframes init my-video로 프로젝트를 만들고, npx hyperframes preview로 브라우저 미리보기를 띄운 뒤 npx hyperframes render로 MP4를 생성합니다. CLI에는 lint, check, snapshot, publish, doctor 같은 기능도 포함됩니다. AWS Lambda 렌더링 경로도 제공해 분산 렌더링을 구성할 수 있습니다.

저장소는 영상 제작 절차를 코딩 에이전트가 따르도록 21개 스킬을 제공합니다. 먼저 /hyperframes 라우터를 읽으면 요청에 맞춰 제품 소개 영상, 설명 영상, PR 영상, 자막, 모션 그래픽, 슬라이드 덱 등의 작업 흐름을 고릅니다. 별도 설치에서는 npx hyperframes skills update가 기본 스킬 묶음을 설치합니다. 전체 스킬을 설치하려면 npx skills add heygen-com/hyperframes --all을 사용합니다. README는 skills add가 레지스트리의 갱신 지연된 자료를 가져올 수 있고, skills update는 현재 main 브랜치 기준으로 설치한다고 안내합니다.

Remotion과의 차이

두 프로젝트 모두 헤드리스 Chrome과 FFmpeg로 영상을 렌더링합니다. Remotion은 React 컴포넌트와 번들링을 전제로 하지만 HyperFrames는 HTML·CSS 파일을 그대로 사용합니다. HyperFrames는 Apache 2.0 라이선스를 적용하며 렌더링별 요금을 두지 않는다고 밝힙니다. 저장소에는 재사용 가능한 전환·오버레이·차트 등의 카탈로그와 브라우저 기반 편집기 Studio도 포함되어 있습니다.

원문: GitHub / 번역·요약: Trawling