HyperFrames로 15초 세로 모션그래픽 만들기

HyperFrames: HTML·CSS·사진·애니메이션으로 쓴 장면을 MP4 영상으로 바꾸는 오픈소스 도구
라이선스: Apache 2.0
Claude Code에 플러그인으로 설치하면 Claude가 장면 파일 작성, 검사, 렌더 명령까지 실행합니다
가격: 내 컴퓨터에서 렌더하면 별도 요금 없음

명령	하는 일
`npx hyperframes check`	오류, 깨진 파일 경로, 글자 대비를 한 번에 검사합니다
`npx hyperframes preview`	브라우저에서 시간축과 함께 미리 봅니다
`npx hyperframes render`	MP4 파일로 내보냅니다

명령은 Claude가 실행하고, 사람은 구성안을 고르고 미리보기를 본 뒤 렌더를 승인합니다
색과 글꼴을 design.md에서 가져오게 하면 여러 편을 만들어도 색이 갈라지지 않습니다

세로 영상 네 편의 한 장면을 나란히 놓은 이미지. 왼쪽부터 Dr.NOON 로고와 「양치는 매일. 눈꺼풀은?」 문구, 09:00 시계 장면, 양치와 눈꺼풀 세정을 위아래로 맞댄 장면, 「2023 안과에서 시작한 티슈」 문구와 제품 상자 장면입니다. — 2026-10-06 눈닥터 브랜드 자료로 만든 15초 세로 영상 네 편의 한 장면씩입니다. 네 편 모두 HyperFrames 컴포지션으로 쓰고 같은 색 값을 썼습니다.

실행 순서

따라하기 덱으로 열기 →

Claude Code에 HyperFrames 설치를 맡기고, 필요한 프로그램이 이 컴퓨터에 있는지 먼저 확인하게 합니다.
```
https://github.com/heygen-com/hyperframes 저장소의 README를 읽고 Claude Code용 HyperFrames 플러그인을 설치해 줘. 설치 전에 Node.js 22 이상과 FFmpeg가 이 컴퓨터에 있는지 확인하고, 없으면 설치 방법을 알려 주고 멈춰 줘.
```
확인Node.js와 FFmpeg 버전 확인 결과가 먼저 나오고, 플러그인 설치 뒤 /hyperframes로 부를 수 있다는 안내가 나옵니다.

영상을 만들기 전에 장면 구성안을 표로 받아 고릅니다.

[브랜드 폴더]의 brand.md·design.md와 사진 파일을 읽고, 1080×1920 세로 15초 영상의 장면 구성안을 표로 만들어 줘. 장면마다 시작·끝 초, 화면 문구, 쓸 사진 파일, 움직임을 적고, 첫 1초 안에 브랜드 이름이나 핵심 문장이 보이게 해 줘. 문구는 brand.md에 있는 사실만 쓰고, 아직 영상은 만들지 마.

확인장면 4~6개짜리 표가 나오고, 장면마다 쓸 사진 파일 경로와 화면 문구가 적혀 있습니다.

고른 구성안으로 프로젝트를 만들고 검사를 통과시킨 뒤 미리보기를 엽니다.

고른 구성안으로 HyperFrames 프로젝트를 만들어 줘. 색과 글꼴은 design.md 값만 쓰고, 다 쓰면 npx hyperframes check를 돌려 오류와 글자 대비 경고를 고친 뒤 미리보기 주소를 알려 줘. 렌더는 내가 미리보기를 보고 말할 때 해.

확인check 결과에 남은 오류가 없고, 브라우저에서 열 수 있는 미리보기 주소가 나옵니다.

미리보기를 확인한 뒤 렌더를 맡기고, 파일 규격을 숫자로 확인합니다.
```
미리보기 그대로 MP4로 렌더해 줘. 렌더한 뒤 ffprobe로 길이·해상도·초당 프레임 수를 재서 표로 보여 줘.
```
확인MP4 파일 경로와 함께 길이 15초 안팎, 해상도 1080×1920이 적힌 표가 나옵니다.

직접 해보기

대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.

내 상황에 맞춰

[가게 이름]의 [행사 이름, 날짜, 장소]를 알리는 15초 세로 영상을 만들고 싶어. [사진 폴더]의 사진만 쓰고, 마지막 2초에는 신청 방법을 한 줄로 넣어 줘. 장면 구성안을 표로 먼저 보여 주고, 내가 고른 뒤에 만들어.

음악을 넣을 때는 장면 전환을 박자에 맞추고, 음원 출처를 같이 남깁니다.

대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.

한 단계 더

[음악 파일]의 박자를 찾아서 장면 전환이 마디 시작에 오도록 컴포지션을 고쳐 줘. 음원의 출처 주소와 라이선스 이름을 프로젝트 폴더의 sources.md에 적어 줘.

내 브랜드 사진 다섯 장으로 15초 세로 영상 하나를 렌더하고, 문구 한 줄을 고친 뒤 다시 렌더해 다른 장면이 바뀌지 않았는지 확인해 보세요.

헷갈리기 쉬운 것

렌더는 시간이 걸리므로 미리보기를 보고 고친 다음에 맡깁니다. 사진 안에 효능이나 수치 같은 문구가 들어 있으면 화면 문구 검사에 걸리지 않으므로 사진을 한 장씩 열어 봅니다. 장면 일부를 생성형 AI 영상으로 채우면 유료 크레딧이 들고, 그 컷은 같은 결과를 다시 만들 수 없습니다.

왜 이렇게 작동하나요

웹페이지를 만들어 본 적이 있다면 HyperFrames의 장면은 시간에 따라 움직이는 웹페이지 한 장과 같습니다. 브라우저가 그 페이지를 정해진 초마다 찍어 이어 붙이면 영상이 됩니다.

같은 HTML과 같은 사진은 같은 프레임을 만듭니다. 그래서 문구나 색을 바꾸면 바뀐 장면만 달라지고, 색 값을 design.md에서 가져오면 영상 여러 편이 같은 색을 씁니다. 생성 영상은 요청할 때마다 결과가 달라서 이 성질이 없습니다.

더 알고 싶다면

생성형 AI 영상과는 언제 섞나요?

실사 사람이나 공간처럼 코드로 그리기 어려운 장면만 생성 영상으로 만들고, 문구·로고·전환은 HyperFrames에 둡니다. 생성 영상 컷은 파일로 받아 컴포지션 안에 넣습니다. 크레딧이 드는 호출이므로 몇 컷을 만들지 정한 뒤 요청합니다.

Claude에 Higgsfield 연결하기 카드에서 다룹니다 →

결과 영상은 어떻게 검사하나요?

렌더한 MP4에서 장면마다 한 장씩 프레임을 뽑아, 글자 잘림과 색 값을 기준 문서와 대조합니다.

이미지와 영상 결과를 검사하기 카드에서 다룹니다 →

GitHub 저장소 heygen-com/hyperframes 소개 이미지

HyperFrames — GitHub READMEgithub.com/heygen-com/hyperframes

2026-10-07 기준 · 출처 · HyperFrames — GitHub README, HyperFrames Quickstart

HyperFrames로 15초 세로 모션그래픽 만들기

실행 순서

직접 해보기

헷갈리기 쉬운 것

관련 카드