광고·홍보 · 9초

물건 위 콜아웃 선으로 특징 짚기

가운데 물건(기본은 휴대폰 화면 그림)이 떠오르고, 짚을 곳에 빨간 점이 톡 찍힙니다. 점에서 사선, 이어서 수평선이 그려지며 끝에 특징 글자가 한 자씩 붙고, 점은 고리처럼 퍼지며 계속 깜빡입니다.

이럴 때 쓰세요

수강생용 앱·사이트 화면의 기능을 소개할 때
교재 구성(QR·빈칸·부록)을 짚어 줄 때
키트·교구의 부분별 쓰임새를 알려 줄 때

「여기만 고치세요」 칸

제목: — 맨 위 제목
그림: — 내 물건 사진(PNG) 경로. 비우면 휴대폰 화면 그림. 400×800 칸에 맞춰 들어갑니다
특징: — [굵은 글자, 작은 설명, 점 가로, 점 세로, "왼쪽"/"오른쪽"] 목록. 점 위치는 그림 안의 비율(0~1)
간격: — 특징 하나씩 나오는 간격(초)

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

이 레시피 파일로 내 실습 교재 소개 영상을 만들어 줘. 그림은 assets/교재표지.png 를 쓰고, 특징은 - 「QR로 영상 보기」 수업 장면 다시 보기 · 점 0.8, 0.15 · 오른쪽 - 「따라 쓰는 빈칸」 손으로 써 보며 익히기 · 점 0.3, 0.5 · 왼쪽 - 「큰 글씨 판형」 돋보기 없이 읽기 · 점 0.5, 0.85 · 오른쪽 제목은 「원데이 클래스 교재, 이렇게 생겼어요」로 바꿔 줘.

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

알아 두면 좋은 점

같은 쪽(왼쪽/오른쪽)에 놓는 특징은 세로 위치를 0.2 이상 띄워야 글자가 안 겹쳐요
점 위치는 그림 왼쪽 위가 0,0 오른쪽 아래가 1,1 입니다
특징은 4개 안팎이 9초 영상에 알맞아요

원본 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