LESSON 14

HyperFrames & Remotion — 코드로 영상 자동 생성

HTML로 모션그래픽, React로 데이터 영상 — Claude Code가 코드를 쓰고 ffmpeg가 렌더링

오늘의 목표

HyperFrames 스킬을 설치해 /hyperframes 명령으로 모션그래픽 영상을 만들고, Remotion으로 데이터가 바뀔 때마다 자동으로 새 영상을 렌더링합니다.

예상 소요 시간 약 65분

두 도구 비교

	HyperFrames	Remotion
개발사	HeyGen (오픈소스)	Remotion (오픈소스)
언어	HTML / CSS / JS	React / TypeScript
Claude 통합	`/hyperframes` 슬래시 명령	Remotion Skills (에이전트 모드)
렌더링	Playwright + ffmpeg	npx remotion render
잘 맞는 용도	모션그래픽, 자막, 타이틀 카드	데이터 영상, 퍼스널라이즈드, 반복 렌더
코딩 경험	불필요 (Claude가 모두 작성)	불필요 (Claude가 모두 작성)

HyperFrames

용어 풀이 렌더링 = 코드로 쓴 장면을 영상 파일로 뽑아내는 일, MP4 = 가장 흔한 영상 파일 형식, ffmpeg = 영상을 이어 붙이고 변환하는 무료 도구, 9:16 = 스마트폰 세로 화면 비율입니다.

처음이라면 HyperFrames 한 가지만 끝까지 해 보세요. Remotion·합치기는 뒤쪽 "더 해보기(선택)"에 있습니다.

설치

사전 준비: Node.js 22+, ffmpeg, Chrome (headless)

Code 탭에서 시키기: 영상 파일을 모아 둘 프로젝트 폴더를 선택하고 아래처럼 말합니다. 설치 명령(npx·npm)을 실행해도 되는지 권한 요청이 뜨면 무엇을 설치하는지 읽고 수락하세요. 끝나면 입력창에 /hyperframes를 쳤을 때 명령이 보이는지 확인합니다.

HyperFrames 스킬을 설치해줘.
npx 또는 npm으로 HyperFrames를 설치하고
/hyperframes 명령을 Claude Code에서 쓸 수 있게 해줘.

Claude Code가 설치를 완료하면 입력창에서 /hyperframes를 쓸 수 있습니다. (터미널에서 claude를 실행해도 같은 명령이 활성화됩니다.)

[!NOTE] Claude Code 앱에서 슬래시(/) 명령으로 /hyperframes를 입력하면 HeyGen HyperFrames 스킬이 실행됩니다. 앱 버전에 따라 설치 방법이 다를 수 있으니 공식 문서를 확인하세요.

기본 사용법 — 타이틀 카드 만들기

먼저 가장 단순한 영상으로 도구가 동작하는지 확인합니다.

#112 프롬프트 14-0🟢 초급

/hyperframes 가장 단순한 영상을 만들어줘. 검은 배경에 흰 글씨 "안녕하세요"가 페이드인, 길이 3초, 16:9, 출력은 videos/hello.mp4

결과 확인: videos/hello.mp4를 더블클릭해 재생했을 때 글씨가 서서히 나타나면 성공입니다. 이제 아래처럼 색·로고·애니메이션을 하나씩 더하면 됩니다 (처음부터 다 넣으면 어디서 틀렸는지 찾기 어렵습니다).

#113 프롬프트 14-1🟡 중급

/hyperframes 신메뉴 출시 타이틀 카드를 만들어줘.

배경: 진한 에스프레소색 (#2C1810)
중앙 텍스트: "뱅쇼 라떼 출시" (흰색, 큰 글씨, 페이드인 애니메이션)
하단: "이번 겨울만 한정 판매" (작은 서브텍스트, 0.5초 딜레이)
로고: images/logo.png 우측 상단
길이: 3초, 9:16 비율
출력: videos/title-card.mp4

Claude Code가 HTML/CSS/JS 씬 파일을 작성하고, Playwright가 캡처하고, ffmpeg가 MP4로 합칩니다.

실전 예시들

인스타 소식 카드

#114 프롬프트 14-2🟢 초급

/hyperframes 가게 주간 소식 영상을 만들어줘. 씬 1 (2초): "이번 주 소식" 타이틀 씬 2 (3초): "① 신메뉴 뱅쇼 라떼 출시" — 왼쪽에서 슬라이드인 씬 3 (3초): "② 12월 5일 창립 기념 할인 20%" — 아래에서 등장 씬 4 (2초): "@mycafe" 로고 + 아이콘 페이드아웃 배경: 브랜드 색 그라디언트, 9:16

유튜브 오프닝 인트로

#115 프롬프트 14-3🟢 초급

/hyperframes 유튜브 채널 인트로를 만들어줘. 채널명: "마이카페 일상" 로고: images/logo.png 인트로 길이: 5초 스타일: 로고가 중앙에서 확대되며 등장, 채널명 타이핑 효과 출력: videos/intro.mp4, 16:9

자막 바 (Lower Third)

#116 프롬프트 14-4🟢 초급

/hyperframes 인터뷰 자막 바를 만들어줘. 텍스트: "김민준 대표 / 마이카페" 스타일: 하단 왼쪽, 브랜드색 바 배경, 흰 글씨 애니메이션: 왼쪽에서 슬라이드인, 3초 유지 후 페이드아웃 투명 배경(알파채널) PNG 시퀀스로도 출력해줘.

더 해보기(선택) — 반복 렌더: 주간 일정 영상

데이터만 바꿔서 매주 새 영상을 만듭니다.

#117 프롬프트 14-5🔴 고급

/hyperframes 주간 메뉴 영상 템플릿을 만들어줘. 데이터 파일(weekly-menu.json)을 읽어서 메뉴 이름과 가격을 씬에 넣어. 씬마다 메뉴 하나씩, 총 5씬. 템플릿이 완성되면 weekly-menu.json만 바꿔도 새 영상이 나와야 해.

매주:

// weekly-menu.json 만 수정
{
  "items": [
    { "name": "뱅쇼 라떼", "price": "6,500원" },
    { "name": "시나몬 롤", "price": "4,000원" }
  ]
}

#118 프롬프트 14-6🔴 고급

/hyperframes weekly-menu.json을 읽어서 주간 메뉴 영상을 렌더해줘.

🧪 실습

실습 미션 — HyperFrames로 영상 파일 만들고 재생하기

프로젝트 폴더를 선택하고 설치를 시킨 뒤, 입력창에 /hyperframes가 보이는지 확인했다
videos/hello.mp4(3초 "안녕하세요")를 만들어 직접 재생했다
타이틀 카드(14-1)에서 내 가게·채널 이름으로 문구를 바꿨고, 재생해서 글씨와 색을 확인했다
9:16 세로 영상이 휴대폰 화면 비율로 보이는지 확인했다
(선택) Remotion Studio를 localhost 주소로 열어 화면을 봤다

더 해보기(선택) — Remotion (데이터로 반복 렌더)

설치

Code 탭에서 시키기: 프로젝트 폴더를 선택한 뒤 아래처럼 말합니다. 설치·서버 실행 명령에 대한 권한 요청이 뜨면 읽고 수락하세요.

Remotion 프로젝트를 현재 폴더 안에 video-remotion/ 디렉토리로 만들어줘.
npx create-video@latest ./video-remotion
TypeScript + npm 조합으로.

설치 완료 후:

cd video-remotion && npm run dev 으로 Remotion Studio를 열어줘.

브라우저에서 http://localhost:3000 → Remotion Studio가 열립니다. (Code 탭 오른쪽 Aside 브라우저에서 열어도 됩니다.)

터미널로도 할 수 있어요

위 말을 직접 입력하는 대신, 터미널에서 같은 명령을 실행해도 됩니다.

npx create-video@latest ./video-remotion
cd video-remotion && npm run dev

Remotion 스킬 (에이전트 모드)

Claude Code에게 자연어로 요청하면 React 컴포넌트를 직접 작성합니다.

#119 프롬프트 14-7🟢 초급

Remotion 스킬을 활성화해서 아래 영상을 만들어줘:

가게 월간 리포트 영상 (30초, 16:9):

씬 1 (10초): 이번 달 방문자 수 카운트업 애니메이션 (0 → 1,247명)
씬 2 (10초): 인기 메뉴 Top 3 바 차트 (왼쪽에서 순서대로 등장)
씬 3 (10초): 다음 달 이벤트 예고 텍스트 색상은 브랜드 색 (#2C1810, #D4A96A) 사용.

Claude가 React 컴포넌트(src/compositions/MonthlyReport.tsx)를 작성합니다.

데이터 기반 반복 렌더 — Remotion의 강점

숫자만 바꿔서 매달 새 영상을 자동 생성합니다.

#120 프롬프트 14-8🟡 중급

Remotion 컴포넌트가 props로 데이터를 받도록 수정해줘:

visitorCount: number
topMenus: { name: string; count: number }[]
nextEvent: string

그 다음 아래 데이터로 렌더해줘: visitorCount: 1247 topMenus: [{ name: "뱅쇼 라떼", count: 342 }, { name: "아메리카노", count: 289 }] nextEvent: "12월 창립기념 20% 할인"

Code 탭에서는 "MonthlyReport를 visitorCount 1247로 렌더해서 out/report-dec.mp4로 저장해줘"라고 시키면 됩니다. 권한 요청에 렌더 명령이 뜨면 읽고 수락하세요.

터미널로도 할 수 있어요

렌더 명령:

npx remotion render MonthlyReport out/report-dec.mp4 --props='{"visitorCount":1247}'

매달 props 값만 바꾸면 새 MP4가 자동으로 나옵니다.

쇼츠·릴스용 9:16 영상

#121 프롬프트 14-9🟢 초급

Remotion으로 쇼츠용 영상을 만들어줘. 9:16 비율, 60초.

첫 3초: 강한 후크 텍스트 (큰 글씨, 배경 색 전환)
본문: 핵심 3가지를 순서대로 슬라이드 (각 15초)
마지막 12초: CTA 애니메이션 + 채널 로고 내용: [원하는 내용 입력]

Remotion → 유튜브 자동 배포 연동

렌더 완료 후 바로 12강의 유튜브 업로드 스킬로 연결합니다.

#122 프롬프트 14-10🟢 초급

video-remotion을 렌더해서 out/report-dec.mp4를 만들고, 유튜브 업로드 스킬을 써서 바로 예약 업로드해줘. 주제: 12월 카페 운영 리포트

더 해보기(선택) — HyperFrames vs Remotion 선택 기준

빠르게 짧은 모션그래픽이 필요할 때
  → HyperFrames (/hyperframes 명령 한 줄)

숫자·데이터가 바뀔 때마다 같은 포맷으로 반복 렌더
  → Remotion (props만 바꿔서 자동화)

둘 다 조합:
  HyperFrames → 인트로·타이틀·자막 바 제작
  Remotion    → 본편 데이터 씬 제작
  ffmpeg      → 두 결과를 하나의 MP4로 합치기

더 해보기(선택) — 완성 파이프라인

#123 프롬프트 14-11🔴 고급

이번 달 리포트 영상을 만들어줘:

HyperFrames로 인트로 (5초) + 아웃트로 (3초) 렌더
Remotion으로 데이터 본편 (30초) 렌더
ffmpeg로 인트로 + 본편 + 아웃트로 합치기 → out/monthly-report.mp4
유튜브 업로드 스킬로 예약 업로드

오늘의 체크리스트

HyperFrames를 설치하고 /hyperframes 명령을 실행했다
타이틀 카드 영상(MP4)이 출력됐다
(선택) Remotion Studio가 localhost에서 열렸다
(선택) Claude Code로 React 컴포넌트를 자동 작성했다
(선택) props를 바꿔서 새 영상이 렌더됐다
(선택) HyperFrames + Remotion + ffmpeg 통합 파이프라인을 실행했다