영상 레시피 전체로그인하고 원본 받기
데이터·도형 · 10초
지도 위 길 안내 (배움터 가는 길)
블록과 길로 된 단순한 동네 지도가 펼쳐지고, 출발점에서 도착점까지 경로 선이 그려져요. 작은 동글이가 그 선을 정확히 따라 걷고(선 위 좌표를 미리 계산), 도착하면 핀이 위에서 쿵 떨어지며 물결이 퍼지고 이름표와 소요 시간이 붙습니다.
이럴 때 쓰세요
- 처음 오는 수강생에게 강의실 가는 길 안내
- «1주차 → 수료» 같은 과정 로드맵을 지도처럼
- 행사장·체험 부스 동선 소개
「여기만 고치세요」 칸
- 가로길·세로길
- — 길이 지나는 자리(px). 지도 블록이 여기에 맞춰 그려져요
- 경로점
- — [가로, 세로] 점 목록. 길이 만나는 자리에 찍으면 길을 따라 꺾여요
- 출발이름·도착이름·도착설명
- — 출발 이름표, 도착 핀 위 이름표, 아래 작은 설명
- 이동시간
- — 출발에서 도착까지 걸리는 초
- 색
- — 바탕·블록·길·먹(선)·경로·핀·공원·동글이 색
파일을 건네며 AI에게 이렇게 말해 보세요
첨부한 HTML은 하이퍼프레임즈 영상 레시피야. 맨 아래 「여기만 고치세요」 칸만 바꿔 줘. 제목: "도서관 3층 강의실 가는 길" 경로점: [[300, 920], [760, 920], [760, 330], [1620, 330]] 출발이름: "버스 정류장" 도착이름: "시립도서관 3층" 도착설명: "걸어서 7분" 색 경로: "#2B6CB0" 바꾼 다음 npx hyperframes render 로 mp4까지 뽑아 줘.
Claude Code·Codex·안티그래비티처럼 파일을 고치고 명령을 실행할 수 있는 AI에게 건네세요.
알아 두면 좋은 점
- 경로점은 가로길·세로길 숫자 조합으로만 찍으면 블록을 뚫고 지나가지 않아요.
- 도착점이 화면 위쪽에 있으면 이름표가 핀 위에 들어갈 자리가 있는지 확인하세요(위에서 250px 이상).
원본 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