캐릭터 · 9초

마스코트가 교재를 추천하는 광고 장면

왼쪽에서 마스코트가 뿅 연기와 함께 나타나 말풍선으로 추천 한마디를 해요. 손짓하면 오른쪽으로 교재가 미끄러져 들어와 고리와 방울이 팡 터지고, 이름표가 붙은 뒤 아래 자막 바가 펼쳐집니다. 상품 사진만 바꾸면 텀블러·키트 홍보에도 그대로 써요.

이럴 때 쓰세요

교재·키트·굿즈 소개 짧은 광고
얼리버드 혜택·사은품 안내
수업 마지막 «준비물 챙기세요» 장면

「여기만 고치세요」 칸

캐릭터그림: — 내 캐릭터 PNG 경로(배경 투명 권장). 비워 두면 파일 안에서 그린 동글이
제품그림: — 교재·상품 사진 PNG 경로. 비워 두면 그림으로 그린 책
표지글자·표지색: — 그림 책 표지의 두 줄 글자와 색
말풍선: — 추천 한마디. *별표* 사이는 강조색
제품이름: — 교재 아래 노란 이름표
자막: — 아래 자막 바 문장

파일을 건네며 AI에게 이렇게 말해 보세요

첨부한 HTML은 하이퍼프레임즈 영상 레시피야. 맨 아래 「여기만 고치세요」 칸만 바꿔 줘. 말풍선: "준비물은 이거 *하나면 끝!*" 제품그림: "assets/만들기키트.png" 제품이름: "손뜨개 원데이 키트" 자막: "얼리버드 신청자에게 키트를 먼저 보내 드려요" 바꾼 다음 npx hyperframes render 로 mp4까지 뽑아 줘.

Claude Code·Codex·안티그래비티처럼 파일을 고치고 명령을 실행할 수 있는 AI에게 건네세요.

알아 두면 좋은 점

상품 사진은 배경을 지운 PNG 가 가장 예뻐요.
말풍선은 두 줄, 자막은 한 줄 안쪽으로. 할 말이 많으면 자막에 넘기세요.

원본 HTML

로그인하면 이 영상을 만든 HTML 파일을 그대로 받을 수 있어요.
회원가입은 무료예요.

로그인하고 원본 받기

내 컴퓨터에서 직접 돌려 보기

AI에게 맡기지 않고 직접 해 보려면 터미널에서 아래 순서대로 하세요. 하이퍼프레임즈(HyperFrames)는 HTML을 영상으로 바꿔 주는 무료 도구예요.

# 1) 처음 한 번만: Node.js 설치 (nodejs.org 에서 LTS)
#    + FFmpeg 설치 (맥: brew install ffmpeg / 윈도우: winget install Gyan.FFmpeg)
#    준비됐는지 확인: npx hyperframes doctor  → FFmpeg·Chrome 줄이 ✓ 면 OK
# 2) 영상 폴더 만들기
npx hyperframes init 내영상
cd 내영상
# 3) 받은 레시피 파일을 이 폴더의 index.html 자리에 덮어쓰기
# 4) 미리 보기 → 영상 뽑기
npx hyperframes preview
npx hyperframes render -o 결과.mp4