AI Neo Lab
스킬

HTML로 동영상 만드는 HyperFrames, AI 에이전트 연결까지 6단계

HTML·CSS만으로 결정론적 MP4를 뽑아내는 HyperFrames를 로컬 CLI와 AI 코딩 에이전트(Claude Code, Cursor 등)에 붙여 쓰는 법을 다룹니다. 스킬 설치부터 플레이그라운드·카탈로그 활용, 실전 렌더링 파이프라인 구축까지 한 번에 해결합니다.

2026.09.30 · 읽는 데 10분 · 섹션 5개

HTML만 짜면 동영상이 뚝딱 나오는 HyperFrames가 5.5만 개 스타를 모으며 주목받고 있습니다. 이 글은 로컬 설치부터 AI 에이전트 연동, 실무 렌더링 워크플로까지 6단계로 정리해 바로 써먹게 돕습니다.

HyperFrames가 무엇인가요

HyperFrames는 Heygen에서 만든 오픈소스 프레임워크예요. GitHub 저장소는 heygen-com/hyperframes이고, 한 줄 설명은 “Write HTML. Render video. Built for agents.” 현재 ⭐️ 5.5만 개, 포크 4,953개를 기록하고 있어요. 주 언어는 TypeScript이며, Apache-2.0 라이선스를 따릅니다. 프로젝트는 7개월 전(2026년 3월) 처음 만들어졌고, 마지막 업데이트는 1개월 전(2026년 9월)입니다.

이 프레임워크는 HTML, CSS, 이미지·오디오·비디오 같은 미디어와 시크 가능한 애니메이션을 입력으로 받아, 동일한 결과를 보장하는 deterministic MP4 파일로 변환합니다. 그래서 웹 페이지에서 만든 복잡한 인터랙션도 코드 한 줄로 영상화할 수 있죠.

HyperFrames는 세 가지 실행 모드를 제공해요. CLI 모드에서는 로컬 터미널에서 npx hyperframes … 명령어로 바로 렌더링할 수 있습니다. AI 코딩 에이전트 모드에서는 Claude, Copilot, VS Code 등 플러그인을 통해 에이전트가 자동으로 영상 생성 워크플로를 호출합니다. 호스팅 모드는 서비스 형태로 제공되어, 별도의 서버에서 저작 워크플로를 관리하고 사용자에게 UI 기반 편집 기능을 제공합니다.

터미널에서 실행
npx hyperframes skills update

  1. 플러그인 설치

    Claude Code 등에서 hyperframes 플러그인을 활성화하고 자동 업데이트를 켭니다.

  2. 핵심 스킬 로드

    터미널에 npx hyperframes skills 를 입력해 전체 스킬을 확인하거나, npx hyperframes skills update 로 최신 핵심 스킬을 설치합니다.

  3. 영상 렌더링

    HTML·CSS·미디어 파일을 준비하고 npx hyperframes render <입력파일> 명령어로 MP4 영상을 생성합니다.

  • ai
  • animation
  • ffmpeg
  • framework
  • gsap
  • html
  • mcp
  • puppeteer
  • rendering
  • typescript
  • video

HyperFrames는 ‘Write HTML. Render video. Built for agents.’ 라는 슬로건처럼, 개발자와 AI 에이전트 모두가 손쉽게 동영상을 만들 수 있게 설계된 툴킷입니다. 다양한 주제 태그와 활발한 커뮤니티 덕분에 앞으로도 기능이 계속 확장될 예정이에요.

설치·사용 6단계

HyperFrames를 로컬에서 바로 쓰려면 6단계만 따라 하면 돼요. 이 프레임워크는 HTML·CSS·미디어와 시크 가능한 애니메이션을 deterministic MP4 비디오로 변환해 줍니다. 저장소는 heygen-com/hyperframes이고, 5.5만 개의 스타와 4,953개의 포크를 기록했으며, 주 언어는 TypeScript입니다. Apache-2.0 라이선스로 제공되고, 7개월 전(2026년 3월) 처음 만들었고, 마지막 업데이트는 1개월 전(2026년 9월)였어요.

  1. 1) 로컬 CLI 설치

    터미널에 npx hyperframes skills update 명령을 입력해 Core Skills를 한 번에 설치합니다.

  2. 2) Claude Code·Cursor·VS Code 플러그인 연동

    플러그인 마켓플레이스에서 hyperframes 플러그인을 활성화하고, /hyperframes:hyperframes 명령을 사용해 연결합니다.

  3. 3) Core Skills 그룹 자동 설치

    Core Skills 그룹만 있으면 모든 생성 워크플로우가 필요할 때마다 자동으로 설치됩니다.

  4. 4) Playground에서 즉시 미리보기

    Playground 탭을 열면 HTML 코드를 바로 입력하고, 결과 비디오를 실시간으로 확인할 수 있어요.

  5. 5) Catalog에서 템플릿 복사

    Catalog에 있는 다양한 템플릿을 선택해 프로젝트에 복사하고, 원하는대로 커스터마이징합니다.

  6. 6) 실서비스 렌더링 파이프라인에 임베드

    완성된 HTML·CSS·애니메이션을 파이프라인에 넣어 자동으로 MP4 영상으로 렌더링합니다.

터미널에서 실행
npx hyperframes skills update
스타5.5만 개
포크4,953개
주 언어TypeScript
라이선스Apache-2.0
  • ai
  • animation
  • ffmpeg
  • framework
  • gsap
  • html
  • mcp
  • puppeteer
  • rendering
  • typescript
  • video

한눈에 보는 주요 기능

HyperFrames는 HTML·CSS·미디어와 시크 가능한 애니메이션을 MP4 영상으로 바꾸는 오픈소스 프레임워크예요. 홈페이지에는 Quickstart, Showcase, Playground, Catalog, Docs, Discord 이렇게 6개의 진입점이 있어요. 각각은 시작 가이드, 예시 영상, 실시간 실험 환경, 스킬 목록, 문서, 커뮤니티 채팅을 제공해요.

  • Quickstart
  • Showcase
  • Playground
  • Catalog
  • Docs
  • Discord

스킬 관점에서 보면 공개된 스킬은 총 21개이고, 레포 내부에 별도 관리되는 6개의 스킬이 있어요. 그 중 Core Skills 최소 세트는 에이전트가 기본적으로 필요한 작업만 모아 둔 것으로, npx hyperframes skills update 명령으로 설치됩니다. 전체 21개 스킬을 설치하려면 npx hyperframes skills 를 사용하면 돼요.

세트스킬 수설치 명령기본 포함 여부
Core Skills-npx hyperframes skills update예
레포 내부 스킬6(내부 자동)아니오
전체 공개 스킬21npx hyperframes skills예
터미널에서 실행
npx hyperframes skills update

2026년 3월에 처음 만들어진 이 프로젝트는 현재 5.5만 개의 스타와 4,953개의 포크를 기록했어요. 주 언어는 TypeScript이며, Apache-2.0 라이선스를 따릅니다. 주요 태그는 ai, animation, ffmpeg, framework, gsap, html, mcp, puppeteer, rendering, typescript, video 등 다양합니다.

주의할 점

HyperFrames를 AI 에이전트와 연동할 때 설치 옵션이 여러 개라 혼란스러울 수 있어요. skills add --all 명령은 공개된 21개의 스킬을 모두 설치합니다. 여기에는 기본 Core 스킬 외에 추가된 스킬도 포함돼요. 하지만 이 옵션은 레포 내부에 있는 6개의 스킬(.claude/skills, .agents/skills)을 기본값으로 제외합니다.

반면 npx hyperframes skills update 명령은 Core 스킬만 설치합니다. 즉, 에이전트가 가장 필요로 하는 핵심 워크플로우만 설치돼요. 이 명령은 현재 main 브랜치 기준으로 설치하기 때문에 레지스트리 블롭이 몇 시간 지연되는 문제를 피할 수 있습니다. skills add는 레지스트리 블롭을 참조하므로 최신 내용과 차이가 날 수 있어요.

터미널에서 실행
skills add --all
npx hyperframes skills update
옵션설치 대상레지스트리 사용
skills add --all전체 21개 스킬 (레포 내부 6개 제외)skills.sh 블롭 (시간 지연)
npx hyperframes skills updateCore 스킬만현재 main 브랜치 (최신)
왜 Core 스킬만 설치해야 할까요?

대부분의 에이전트 작업은 핵심 렌더링 흐름에만 의존합니다. 불필요한 스킬을 추가하면 설치 시간이 늘어나고, 레지스트리 동기화 지연으로 최신 버전을 놓칠 위험이 있어요.

  • 핵심 스킬만 빠르게 설치 → npx hyperframes skills update
  • 전체 스킬을 한 번에 설치 → skills add --all

정리

지금까지 로컬 CLI로 영상을 만들고, 에이전트 스킬을 붙이고, 템플릿을 복사해 파이프라인에 임베드하는 6단계를 순서대로 따라 했어요. 이 순서를 한눈에 확인하고 다음 학습으로 바로 넘어갈 수 있도록 체크리스트와 링크를 정리했어요.

구분링크
공식 문서·가이드https://github.com/heygen-com/hyperframes/tree/main/docs
플레이그라운드(브라우저에서 바로 테스트)https://hyperframes.dev/playground
쇼케이스·템플릿 카탈로그https://hyperframes.dev/showcase
Discord 커뮤니티(질문·버그 리포트)https://discord.gg/hyperframes
GitHub 이슈·PR 템플릿https://github.com/heygen-com/hyperframes/issues/new/choose

체크리스트를 모두 완료하면 로컬 테스트부터 에이전트 자동화까지 한 흐름으로 연결돼요. 위 링크에서 예제·고급 설정·커뮤니티 지원을 이어서 살펴보세요.

이런 글도 있어요

AI 트렌드#클로드

클로드 하이쿠 5.5: 75% 저렴해진 비용으로 가장 빠른 소형 모델 쓰기

2026.10.07 · 읽는 데 6분
무료 AI 도구#코딩#글쓰기

리눅스용 오픈소스 AI 이메일 클라이언트 'Penguin Mail' 설치부터 활용까지

2026.10.07 · 읽는 데 3분
무료 AI 도구#사진·이미지#코딩

openTPU로 최신 AI 모델 5가지 직접 구동하는 4단계 가이드

대형 언어 모델을 로컬에서 실행하고 싶지만, 비싼 전용 하드웨어가 없다는 고민을 겪고 계신가요. 기존 상용 AI 가속기는 비용이 높고, 오픈소스 솔루션은 복잡해 보입니다. 이 자료는 openTPU를 이용해 Qwen3·LFM2.5·Gemma 등 5개의 최신 모델을 직접 구동하고 성능을 확인할 수 있도록 단계별로 안내합니다.

2026.10.07 · 읽는 데 11분