웹페이지처럼짜서 영상으로뽑기

중급자용깃허브 주간 인기 TOP10© AIKOREACLUB

heygen-com/hyperframes

웹페이지처럼 짜서 영상으로 뽑기

HTML로 장면을 짜면 그대로 MP4 영상으로 뽑아 주는 도구라서, 코딩 AI에게 말로 영상을 시킬 수 있어요

★ 78,050 · 이번 주 +4,924영상 제작 프레임워크(터미널 도구 + 에이전트 스킬 + 데스크톱 앱) · Apache-2.0확인 2026-11-03

제품 소개 영상 하나 만들려면 편집 앱을 열고 클립을 끌어다 놓고 제목에 효과를 하나씩 걸어야 해요. 코딩 AI는 웹페이지는 금방 짜 주는데, 편집 앱의 타임라인은 손댈 수가 없죠.하이퍼프레임스는 영상 플랫폼 헤이젠이 만든 오픈소스로, 영상을 아예 웹페이지(HTML)로 짜게 해서 코딩 AI가 잘하는 일로 바꿔 놓았어요. 스킬을 한 번 깔고 "10초짜리 제품 소개 영상 만들어 줘"라고 하면 계획부터 렌더링까지 이어서 해요. 이번 주 깃허브에서도 별이 5천 개 가까이 늘었어요.

스튜디오 앱이 먼저 보여 주는 장면 계획 — 브라우저 편집 화면(Studio)

영상을 '찍지' 않고 '한 장씩 뽑는' 이유

화면을 그대로 녹화컴퓨터가 바쁘면 장면이 빠져요시계를 따라 흘러가는 애니메이션을 찍으면, 녹화가 늦은 순간 같은 장면이 두 번 찍히거나 건너뛰어요. 돌릴 때마다 결과가 조금씩 달라요.

하이퍼프레임스시간을 멈추고 한 장씩 찍어요보이지 않는 크롬에서 0초, 1/30초, 2/30초처럼 시간을 정확히 옮겨 놓고 찍은 뒤 FFmpeg로 묶어요. 같은 입력이면 늘 같은 영상이에요.

그래서 애니메이션은 GSAP, CSS, Lottie처럼 '원하는 시간으로 옮길 수 있는' 방식으로 짜요. 코딩 AI는 이미 HTML을 잘 쓰니, 영상 편집 앱을 손으로 만지지 않고도 파일만으로 영상을 만들 수 있어요.

원리를 보여 주려고 저희가 그린 예시예요. 위 줄은 일반적인 화면 녹화에서 생길 수 있는 일을 단순하게 그린 것이고, 실제 영상의 장면 수와 길이는 프로젝트에 따라 달라져요.

한눈에

무엇인가요

하이퍼프레임스는 HTML, CSS, 미디어, 애니메이션을 MP4 영상으로 바꿔 주는 오픈소스 프레임워크예요.영상이 곧 HTML 파일이에요. 영상 길이와 화면 크기, 각 요소가 언제 나와 얼마나 머물지를 data-start, data-duration 같은 속성으로 적어요. 리액트도, 전용 타임라인 형식도, 빌드 과정도 필요 없고 index.html 이 그대로 재생돼요.같은 입력이면 같은 영상이에요. 렌더러가 보이지 않는 크롬에서 시간을 한 장면씩 정확히 옮겨 가며 찍고 FFmpeg로 묶어요. 그래서 자동화나 반복 검사에 넣어도 결과가 흔들리지 않아요.코딩 AI용 스킬이 딸려 있어요. 영상 계획, HTML 작성, 애니메이션 연결, 미디어 넣기, 검사, 미리보기, 렌더링 순서를 가르쳐 둔 스킬 9개가 있어요. README에 따르면 헤이젠 실제 서비스에서도 쓰이고 있어요.

함께 쓰는 도구 · 클로드 코드 · 코덱스 · 커서 · 제미나이 CLI · 깃허브 코파일럿 · 오픈코드

이런 분께

제품 소개나 기능 발표 영상을 자주 만드는 분
자막, 차트, 지도 애니메이션이 들어간 짧은 영상을 자동으로 찍어 내고 싶은 팀
영상 편집 앱 대신 코딩 AI에게 말로 영상을 시키고 싶은 분

어떻게 작동하나요

README의 예시를 보면 구조가 단순해요.
1. 화면 전체를 감싸는 div 에 영상 크기(1920×1080)를 적어요.
2. 배경 영상, 제목, 음악을 넣고 각각 data-start(언제 나올지), data-duration(얼마나), data-track-index(몇 번째 줄)를 붙여요.
3. 제목이 아래에서 떠오르는 움직임은 GSAP 같은 도구로 짜요. 원하는 시간으로 옮길 수 있는 방식이어야 해요.
4. preview 로 보고 lint, check 로 검사한 뒤 render 로 뽑아요.렌더링은 장면을 한 장씩 찍어 묶는 방식이에요. 영상에 fps 를 따로 안 적으면 초당 30장이 기본이에요.리모션과 비교하면 둘 다 크롬과 FFmpeg로 영상을 뽑지만, 리모션은 리액트 컴포넌트로 짜고 하이퍼프레임스는 그냥 HTML로 짜요. 사람도 AI도 쉽게 쓰는 평범한 HTML에 건 것이 가장 큰 차이예요.

할 수 있는 일

말로 영상 만들기코딩 AI에게 부탁하면 HTML 장면을 짜고 MP4로 렌더링해요

브라우저 미리보기preview 명령으로 고칠 때마다 바로 확인하고, Studio에서 타임라인을 보며 손봐요

준비된 블록 가져오기전환 효과, 자막, 차트, 지도, 3D, 카메라 움직임 등 약 450개 블록을 add 명령으로 넣어요

음악, 효과음, 목소리 준비media-use 스킬이 헤이젠이나 무료 로컬 도구로 영상 재료를 마련하고 소리를 섞어요

여러 형식으로 뽑기MP4 말고도 MOV, WebM, GIF, PNG 연속 이미지, HLS로 뽑을 수 있어요

피그마와 발표 자료/figma 로 피그마 디자인을 움직이는 영상으로, /slideshow 로 넘겨 보는 발표 자료를 만들어요

바로 쓸 수 있나요

도구 연결 필요

필요한 것코딩 AI 도구(클로드 코드 유료 요금제 등), Node.js 22 이상, FFmpeg. 터미널이 낯설면 맥, 윈도, 리눅스용 Studio 앱도 있어요

비용Apache 2.0으로 무료이고 렌더링마다 내는 요금이나 상업 사용 기준이 없다고 해요. 코딩 AI 요금은 따로이고, 헤이젠 아바타나 생성 영상은 요청할 때만 헤이젠 크레딧이 든다고 문서에 나와요

시작하기

클로드 코드 플러그인 설치
터미널에서 두 줄을 실행해요. 설치 뒤에는 /hyperframes:hyperframes 로 불러요. 자동 업데이트는 /plugin 의 Marketplaces 메뉴에서 켜요.
```
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
```
다른 코딩 도구라면 핵심 스킬만 설치
핵심 묶음(hyperframes, hyperframes-cli, hyperframes-registry, media-use) 넷만 정확히 깔아 줘요. 오픈코드 등에서 고르는 화면으로 깔려면 npx skills add heygen-com/hyperframes 를 쓰고 Core Skills 를 고르세요.
```
npx hyperframes skills update
```
직접 해 보기(선택)
Node.js 22 이상과 FFmpeg가 있어야 해요. 새 프로젝트를 만들고 미리 본 뒤 렌더링해요.
```
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render
```
뽑기 전에 검사(선택)
lint 는 프로젝트 구조를, check 는 브라우저로 열어 실행 오류, 배치, 움직임, 미디어, 대비 문제를 봐요.
```
npx hyperframes lint
npx hyperframes check
npx hyperframes render --output final.mp4
```

처음 해 볼 한마디

/hyperframes 를 써서 제목이 서서히 나타나고, 배경 영상과 은은한 배경음악이 깔린 10초짜리 제품 소개 영상을 만들어 줘

README 예시 문장을 우리말로 옮긴 거예요. 클로드 코드 플러그인으로 깔았다면 /hyperframes:hyperframes 로 불러요. 우리말 요청이 되는지는 README에 따로 적혀 있지 않아요.

HTML 한 장이 영상이 되는 과정

<div id="stage" data-width="1920" data-height="1080">  <video src="intro.mp4" data-start="0"    data-duration="6" data-track-index="0">  <h1 id="title" data-start="1"    data-duration="4" data-track-index="1">    출시하는 날</h1>  <audio src="music.wav" data-start="0"    data-duration="6" data-volume="0.5">  tl.from("#title", { opacity: 0, y: 40,    duration: 0.8 }, 1);</div>

video 0~6초

h1 1~5초

audio 0~6초

0123456초

$ npx hyperframes render --output final.mp4

보이지 않는 크롬에서 장면을 한 장씩 찍는 중 0 / 180

data-start 와 data-duration 이 언제 나오고 얼마나 있을지 정해요. 타임라인을 눌러 시간을 옮겨 보세요.

README의 예시 코드를 줄이고 제목만 우리말로 바꿔 저희가 그린 예시예요. 6초 영상을 기본값 30fps로 뽑으면 180장이에요. 실제 렌더링 화면과 걸리는 시간은 컴퓨터와 프로젝트에 따라 달라져요.

비슷한 도구

하이퍼프레임스 README가 리모션에서 영감을 받았다고 밝히고 직접 비교표를 실어 두었어요. 위 설명은 그 표를 옮긴 거예요.

리액트로 영상 만들기(리모션)같은 크롬+FFmpeg 방식이지만 리액트 컴포넌트로 짜고, 클라우드 렌더러가 오래 다듬어졌음. 라이선스는 소스 공개형 Remotion Licenseremotion-dev/remotion

주의할 점

아직 0.9 버전대예요(2026-11-03 기준 v0.9.8). 편집 화면(Studio)은 README 표에서도 '쓸 수 있지만 계속 바뀌는 중'으로 적혀 있어요.
Studio 앱은 무료 헤이젠 계정으로 로그인해야 쓸 수 있다고 공식 문서가 안내해요. media-use 스킬로 목소리, 아바타, 생성 영상을 만들면 헤이젠 크레딧이 따로 들 수 있어요.
reverse-any-video(남의 영상을 편집 가능한 프로젝트로 되살리기)와 style-sampling 스킬에는 HyperFrames Pro 표시가 붙어 있어요. AWS 람다로 나눠 렌더링하면 내 클라우드 계정에 비용이 나가요.
저장소 전체를 내려받으면 테스트용 영상 파일이 약 240MB 딸려 와요. 쓰기만 할 거면 npx 명령으로 충분해요. 2026-11-03 기준 열린 이슈는 224개예요.

낯선 말

렌더링 · 만든 장면을 실제 영상 파일로 뽑아내는 과정이에요
FFmpeg · 영상과 소리를 합치고 변환하는 무료 프로그램이에요
헤드리스 크롬 · 화면 없이 뒤에서 돌아가는 크롬 브라우저예요
GSAP · 웹페이지 애니메이션을 만드는 자바스크립트 도구예요
fps · 1초에 담기는 장면 수예요. 하이퍼프레임스는 따로 정하지 않으면 30이에요
리모션(Remotion) · 리액트로 영상을 만드는 비슷한 도구예요. 하이퍼프레임스가 참고했다고 밝혀요

AI 답은 참고 자료예요. 법·세금·돈·건강처럼 삶에 큰 영향을 주는 일에서는 AI 답이 정답이 될 수 없어요. 최종 판단은 전문가나 공식 기관에서 확인하세요.