등장·움직임 · 11초

말하는 낱말에 맞춰 등장

낱말 시각표(몇 초에 무슨 말을 했는지)를 넣어 두면, 정해 둔 낱말이 들리는 순간 카드가 튀어나와요. 아래 자막은 말한 낱말까지 진해지는 가라오케 방식입니다. 우리 수업 영상이 «말과 화면이 딱 맞는» 이유가 바로 이 레시피예요.

이럴 때 쓰세요

내레이션이 있는 설명 영상
슬라이드를 목소리에 맞춰 움직이고 싶을 때
자막 가라오케

「여기만 고치세요」 칸

낱말: — [말한 초, 낱말] 시각표. 받아쓰기 결과를 그대로 넣어요
카드: — [보일 글자, 이 낱말이 들릴 때] 묶음

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

내 목소리 파일 assets/설명.mp3 를 받아쓰기(Whisper)해서 낱말마다 몇 초인지 표로 뽑아 줘. 그 표를 첨부한 «말하는 낱말에 맞춰 등장» 레시피의 낱말 칸에 넣고, 카드 세 장은 "검색", "지도", "길찾기"라는 말이 들릴 때 나오게 해 줘. 오디오도 영상에 같이 넣어 줘.

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

알아 두면 좋은 점

받아쓰기는 «에이아이»를 «AI»로, «칠십»을 «70»으로 적기도 해요. 카드가 안 뜨면 시각표의 낱말 표기를 먼저 확인하세요.
목소리는 <audio> 태그로 따로 넣어요. 영상(<video>)은 항상 muted 로.

원본 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는 같은 말일까?