글자·자막 · 7초

제목이 왼쪽부터 드러나고 밑줄이 그어지기

작은 머리글이 먼저 뜨고, 큰 제목이 왼쪽부터 드러나요. 강조 글자는 한 번 통 튀고, 그 아래로 색 밑줄이 쭉 그어진 뒤 설명이 올라옵니다. 수업 영상의 장 제목으로 가장 많이 쓰는 기본기예요.

이럴 때 쓰세요

영상 첫 장면·장(章) 제목
새 개념을 소개하는 순간
슬라이드를 영상으로 바꿀 때 제목 칸

「여기만 고치세요」 칸

작은글: — 제목 위 작은 머리글
제목: — [ ] 로 감싼 글자는 강조색으로 바뀌고 한 번 통 튑니다
설명: — 제목 아래 한 줄 설명
밑줄색: — 밑줄 색 (#F1C34A 같은 색 번호)

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

첨부한 HTML은 하이퍼프레임즈 영상 레시피야. 맨 아래 「여기만 고치세요」 칸만 바꿔 줘. 작은글: "스마트폰 기초 3차시" 제목: "사진을 [크게] 보는 법" 설명: "손가락 두 개로 벌리기만 하면 돼요" 바꾼 다음 npx hyperframes render 로 mp4까지 뽑아 줘.

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

알아 두면 좋은 점

제목은 열다섯 글자 안쪽이 가장 보기 좋아요. 길면 두 장면으로 나누세요.
강조 [ ] 는 한 군데만. 두 군데면 눈이 어디로 갈지 몰라요.

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

이 연출을 쓴 스마택트 영상

내 생애 첫 AI 교실 1편 — AI, 챗GPT, 생성형 AI는 같은 말일까?