하이퍼프레임 뭔가요? HTML 파일 하나로 영상을 만드는 오픈소스를 2026 기준으로 쉽게 설명
퀀텀점프클럽 정상록9분 읽기0 views하이퍼프레임 뭔가요? HTML 파일 하나로 영상을 만드는 오픈소스를 2026 기준으로 쉽게 설명
하이퍼프레임: HeyGen이 공개한 오픈소스(누구나 공짜로 쓰고 고칠 수 있게 공개된 소프트웨어) 영상 제작 도구예요. HTML 파일 하나에 화면과 타이밍을 적어 두면 그 파일을 영상으로 뽑아 줘요. 에이전트(스스로 판단해 작업을 처리하는 AI)가 쓰기 쉽게 설계된 것이 특징이에요.
이 글을 끝까지 읽으면 하이퍼프레임이 무엇이고 첫 영상을 만들려면 무엇이 필요한지 설명할 수 있게 돼요. 10분이면 충분해요.
하이퍼프레임은 무엇인가요?
보통 영상은 편집 프로그램에서 클립을 자르고 붙여 만들어요. 하이퍼프레임은 영상의 내용을 웹페이지를 만드는 언어인 HTML로 적어요.
HTML 파일 1개가 영상 1편의 설계도예요. 공식 용어로는 합성물(composition)이라고 불러요. 화면에 나올 글자나 도형마다 data-start(언제 나오는지), data-duration(얼마나 머무는지), data-track-index(몇 번째 층에 놓이는지)를 적고, 화면에 보일 요소에는 class="clip"을 붙여요.
설계도를 실제 영상 파일로 뽑는 일을 렌더(render)라고 해요. 렌더할 때는 헤드리스 크롬(화면 없이 뒤에서 돌아가는 크롬 브라우저)이 프레임(영상을 이루는 정지 장면 한 장)을 하나씩 찾아가며 캡처하고, FFmpeg(영상 파일을 만들고 변환해 주는 프로그램)가 그 장면들을 이어 영상으로 만들어요. 공식 README(프로젝트 첫 안내 문서)에 따르면 같은 입력이면 같은 영상이 나와요. 단 컴퓨터가 바뀌면 픽셀 단위로 달라질 수 있어, 똑같이 재현해야 하면 Docker 렌더를 쓰라고 해요. 기본 설정은 초당 30장(fps 30)이에요.
하이퍼프레임은 누가 만들었고 무료인가요?
HeyGen은 AI 아바타 영상 서비스로 알려진 회사예요.
GitHub 레포와 npm(Node.js용 프로그램을 내려받는 공식 창구) 등록 정보에 따르면 라이선스는 Apache 2.0이에요. 내 컴퓨터에서 뽑는 한 영상을 한 번 뽑을 때마다 요금이 붙는 구조가 아니에요.
다만 HeyGen이 대신 렌더해 주는 cloud render는 크레딧을 써요. 유료 제품 요금은 HeyGen 공식 페이지에서 확인하세요.
2026년 10월 기준 하이퍼프레임은 왜 주목받나요?
GitHub의 하이퍼프레임 리포지토리(코드를 모아 두는 저장소)에는 2026-10-10 조회 기준으로 별(스타, 마음에 든다는 표시) 59,748개가 찍혀 있어요. 복사해 가서 쓰는 포크(fork)는 5,333개예요. 열린 이슈는 64개, 코드 반영 요청(PR)은 161개예요.
저장소가 처음 만들어진 날은 2026-03-10이고 마지막 코드 반영은 2026-10-09예요. 만든 지 7개월쯤 된 프로젝트가 지금도 거의 매일 고쳐지고 있다는 뜻이에요. 이 숫자는 품질 평가가 아니라 활발히 손보는 중이라는 신호로만 읽으세요. 별 수는 매일 변해서 읽는 날에는 숫자가 다를 수 있어요.
하이퍼프레임은 에이전트와 어떤 관계인가요?
에이전트는 이미 HTML을 잘 써요. 같은 HTML로 영상도 만들자는 발상이 설계의 출발점이에요.
레포 소개문에는 이렇게 적혀 있어요.
"Write HTML. Render video. Built for agents."
한국어로 풀면 "HTML을 쓰세요. 영상을 렌더하세요. 에이전트를 위해 만들었어요."라는 뜻이에요. 공식 문서의 첫 장 제목은 "What is HyperFrames?"이고, 그 아래 부제도 같은 방향이에요.
"See what an AI agent can make with ordinary web technology."
"AI 에이전트가 평범한 웹 기술만으로 무엇을 만들 수 있는지 보세요."라는 뜻이에요. 영상 전용 도구를 새로 배우게 하지 않고, 에이전트가 원래 잘하는 웹 기술로 영상을 만들게 한다는 설계예요.
Claude Code(클로드 코드, 코딩을 대신 해주는 AI 도구)에서는 플러그인으로 설치하고, 다른 에이전트는 npx skills add heygen-com/hyperframes를 써요. 공식 README에 따르면 하이퍼프레임이 내놓는 스킬(에이전트에게 쓰는 법을 알려 주는 안내 묶음)은 21개예요.
하이퍼프레임으로 무엇을 만들 수 있나요?
HTML로 그릴 수 있는 화면이면 영상 소재가 돼요. 제품 소개 화면이나 숫자 그래프가 예예요.
공식 CLI(명령어를 타이핑해서 쓰는 까만 화면 프로그램) 문서에 따르면 init 명령의 해상도 프리셋(미리 정해 둔 크기)은 6가지예요.
- landscape: 1920×1080 (가로)
- portrait: 1080×1920 (세로, 릴스나 쇼츠용)
- square: 1080×1080 (정사각형)
- landscape-4k: 3840×2160 (고화질 가로)
- portrait-4k: 2160×3840 (고화질 세로)
- square-4k: 2160×2160 (고화질 정사각형)
결과물 형식은 6가지 중에서 골라요. MP4, WebM, MOV, GIF, PNG 시퀀스(정지 이미지를 순서대로 묶은 것), HLS(인터넷 스트리밍용으로 잘게 나눈 영상)예요. 이 중 WebM과 MOV는 투명 배경을 담을 수 있어요.
영상이나 오디오 파일로 시작하면 CLI가 Whisper(음성을 글자로 받아 적는 AI)로 자막을 받아 적어 합성물에 넣어 줘요. 단 기본 모델은 영어용이에요.
Remotion과는 무엇이 다른가요?
Remotion(리모션)은 React(웹 화면을 만드는 자바스크립트 도구) 코드로 영상을 만드는 비슷한 도구예요. 공식 README 비교표는 항목이 6개이고, 가장 큰 차이는 저작 방식이에요. Remotion은 React 컴포넌트(화면을 이루는 부품)로 쓰고, 하이퍼프레임은 평범한 HTML로 써요. 둘 다 헤드리스 크롬과 FFmpeg로 렌더하는 점은 같아요.
공식 README에는 "Why HyperFrames?"라는 절이 있고, 이유를 6가지 항목으로 적어 둬요. 그 첫 항목이 이 차이를 가장 잘 보여 줘요.
"HTML-native: compositions are HTML files with data attributes. No React requirement, no proprietary timeline format."
"HTML 기반이에요. 합성물은 data 속성이 달린 HTML 파일이고, React가 필요 없으며 전용 타임라인 형식도 없어요."라는 뜻이에요. 어느 쪽이 더 낫다는 말이 아니에요. React에 익숙하면 Remotion이, 에이전트에게 맡길 거라면 하이퍼프레임이 어울린다고 보면 돼요.
하이퍼프레임은 어떻게 시작하나요?
순서대로 따라 해 보세요.
- Node.js 22 이상과 FFmpeg를 준비해요. Node.js(자바스크립트를 내 컴퓨터에서 실행해 주는 프로그램)가 22보다 낮으면 명령을 실행할 때 막혀요. FFmpeg는 따로 설치해야 영상 파일을 만들 수 있어요.
- 터미널(명령어를 입력하는 창)에서 새 프로젝트를 만들어요. 아래 명령을 붙여넣으세요. 영상 프로젝트 폴더를 만드는 명령이에요.
npx hyperframes init my-video
npx는 Node.js에 딸려 오는 실행 도구예요. 폴더가 생기면 그 안에서 다음 단계를 진행해요.
- 미리보기로 확인해요. 아래 명령은 만든 화면을 영상으로 뽑기 전에 브라우저에서 먼저 보여 줘요. 고칠 곳을 렌더 전에 찾을 수 있어요.
npx hyperframes preview
- 영상 파일로 렌더해요. 아래 명령이 설계도를 실제 영상으로 바꿔요.
npx hyperframes render
공식 CLI 문서 기준으로 기본 대상은 index.html이고, 1초에 30장 기준으로 renders 폴더 안에 <이름>.mp4로 저장돼요. 출력 포맷은 6개 중에서 고를 수 있어요.
환경이 맞는지 먼저 보려면 npx hyperframes doctor를 실행하세요. Node.js, FFmpeg, Chrome 같은 필요 요소와 프레임 캐시(렌더 중 임시로 쌓는 이미지 저장 공간) 여유를 점검해 줘요.
npm 등록 정보에 따르면 2026년 10월 기준 버전은 0.8.143이에요. 1.0 미만이라 명령이나 기본값이 바뀔 수 있어요. 다르게 동작하면 공식 문서가 최신이에요.
처음 하면 여기서 막힙니다
- Node.js 버전이 22보다 낮을 때. 하이퍼프레임이 22 이상을 요구해서 명령을 실행할 때 멈춰요.
node --version으로 먼저 확인하세요. - FFmpeg가 없을 때. Node.js만 깔아서는 안 돼요. FFmpeg와 FFprobe가 없으면
doctor가 바로 알려 줘요. - 디스크 여유가 2GB 미만일 때. 프레임 캐시 여유 공간이 2GB 아래면
doctor가 실패로 판정해요. - 스킬이 21개 전부 설치될 때. 사람이 답을 입력하지 않는 자동 실행에서
--skill없이 설치하면 21개가 전부 깔려요. 핵심 묶음만 원하면npx hyperframes skills update를 쓰세요. - 애니메이션이 움직이지 않고 멈춰 있을 때. 애니메이션의 타임라인(시간 순서대로 움직임을 정해 둔 계획표)을 멈춘 상태로 만들어
window.__timelines에 합성물 id로 등록해야 해요. 등록하지 않으면 프레임을 건너뛰며 찾아가는 캡처가 안 돼요. - 자동 점검이 통과한 것처럼 보일 때.
doctor --json은 명령만 제대로 돌면 점검 결과가 나빠도 종료 코드가 0이라 출력된ok값으로 판정해요.
마무리
'하이퍼프레임 뭔가요'를 검색해 오셨다면, 한 줄로 HTML을 영상으로 바꾸는 오픈소스예요. 에이전트가 잘 쓰는 웹 기술로 영상을 만든다는 점이 다른 도구와 가장 달라요. 아직 1.0 전이라 공식 문서를 옆에 두고 가볍게 써 보는 걸 권해요.
자주 묻는 질문
하이퍼프레임은 무료인가요?
오픈소스 하이퍼프레임은 Apache 2.0 라이선스라 렌더 건당 과금이 없어요. HeyGen의 유료 제품 요금은 공식 페이지에서 확인하세요.
코딩을 전혀 몰라도 쓸 수 있나요?
에이전트가 HTML을 쓰도록 설계된 도구예요. 직접 쓰려면 터미널에서 명령을 입력해야 해요. 공식 문서에는 로컬 설치 없이 AI 채팅으로 만드는 베타 경로도 있고, HeyGen 계정이 필요해요.
Node.js와 FFmpeg는 꼭 있어야 하나요?
네, 둘 다 필요해요. Node.js는 22 이상이어야 하고 FFmpeg는 따로 설치해야 해요. 둘이 제대로 갖춰졌는지는 npx hyperframes doctor로 확인할 수 있어요.
지금 써도 안정적인가요?
버전이 0.8.143으로 1.0 미만이라 명령이나 기본값이 바뀔 수 있어요. 중요한 작업이라면 먼저 작은 영상으로 시험해 보세요.
