영상 편집 프로그램 없이 클로드 코드로 MP4 뽑기, 헤이젠 오픈소스 HyperFrames 정리
HyperFrames 맥·리눅스 데스크톱 앱 (출처: HyperFrames 깃허브)
영상 편집 프로그램을 안 켜고 영상을 만드는 방법이 있습니다. 클로드 코드나 코덱스한테 말로 시키면 AI가 웹페이지를 짜고, 그 웹페이지가 그대로 MP4가 됩니다. 영상 AI 회사 헤이젠(HeyGen)이 공개한 오픈소스 HyperFrames 얘기입니다. 깃허브 별은 10월 29일 기준 7만 4천 개를 넘었습니다.
어떻게 영상이 되나
HTML·CSS·애니메이션으로 화면을 만들면, 렌더러가 헤드리스 크롬으로 한 프레임씩 넘기며 찍고 FFmpeg로 묶어 MP4를 만듭니다. 같은 입력을 넣으면 항상 같은 영상이 나옵니다. 편집 타임라인 대신 코드가 영상의 원본이 되는 셈이라, 코드를 잘 쓰는 AI 에이전트와 궁합이 좋습니다.
| 항목 | 내용 |
|---|---|
| 만든 곳 | 헤이젠 |
| 라이선스 | Apache 2.0 (상업 이용 가능) |
| 결과물 | MP4 등 영상 파일 |
| 필요한 것 | Node.js 22 이상, FFmpeg |
| 지원 에이전트 | 클로드 코드, 코덱스, 커서, 제미나이 CLI 등 스킬을 쓰는 도구 |
스킬 7개
| 스킬 | 하는 일 |
|---|---|
| /hyperframes | 영상 만들기의 기본 규칙과 작업 순서. 가장 먼저 읽는 스킬 |
| /hyperframes-cli | 프로젝트 만들기, 미리보기, 렌더링 같은 명령어 |
| /hyperframes-registry | 전환·자막·차트·지도·3D 등 미리 만든 블록 약 450개 |
| /media-use | 음악, 효과음, 이미지, 내레이션 같은 소재 구하기 |
| /figma | 피그마 디자인을 영상으로 가져오기 |
| /slideshow | 발표용 슬라이드 덱 만들기 |
| /remotion-to-hyperframes | 리모션 등 다른 도구로 만든 영상 코드 옮기기 |
설치
클로드 코드에서는 플러그인으로 설치합니다.
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes다른 에이전트는 npx skills add heygen-com/hyperframes 로 스킬을 깔면 됩니다. 에이전트 없이 직접 해 보고 싶다면 이렇게요.
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render팁 깃허브에 나온 예시 프롬프트는 이렇습니다. "/hyperframes로 10초짜리 제품 소개 영상을 만들어 줘. 제목은 서서히 나타나고, 배경 영상과 잔잔한 배경 음악을 넣어 줘."
리모션과 뭐가 다른가
비슷한 도구로 리모션(Remotion)이 있습니다. 둘 다 크롬과 FFmpeg로 영상을 뽑지만, 리모션은 리액트 컴포넌트로 만들고 자체 라이선스를 씁니다. HyperFrames는 그냥 HTML로 만들고 Apache 2.0이라 더 자유롭게 쓸 수 있습니다.
주의 처음 공개된 건 올해 3월이라 완전히 새로운 도구는 아닙니다. 컴퓨터에 Node.js 22와 FFmpeg가 깔려 있어야 하고, 결과물 품질은 시키는 에이전트와 프롬프트에 따라 꽤 달라집니다.
AI한테 맡겨 보고 싶은 영상이 있으면 댓글로 남겨 주세요. 몇 개 골라서 직접 만들어 보겠습니다.
아직 ‘도움돼요’를 누른 회원이 없어요. 어떤 직업에 도움이 됐는지 여기에 모여요.
댓글 [0]
로그인하고 경험을 나눠 주세요. 서로 다른 직업의 시선이 큰 도움이 됩니다.
로그인하고 댓글 쓰기아직 댓글이 없어요. 첫 댓글을 남겨 주세요.