화면 설명 · 10초

화면 한 곳 확대 + 스포트라이트

브라우저 창이 뜨고, 카메라가 눌러야 할 버튼 쪽으로 천천히 다가가요. 주변이 어두워지며 노란 네모가 켜지고, 빨간 화살표가 콕콕 가리킨 뒤 아래 자막이 나옵니다. 끝나면 다시 전체 화면으로 돌아와요. 내 화면 캡처 한 장만 넣으면 «여기를 누르세요» 영상이 됩니다.

이럴 때 쓰세요

«이 버튼을 누르세요» 안내
홈페이지·앱 사용법
긴 화면 녹화 대신 캡처 한 장으로

「여기만 고치세요」 칸

화면사진: — 내 캡처 파일 이름. 비우면 예시용 가짜 웹페이지
강조: — 강조할 곳 왼쪽·위·너비·높이 — 화면 전체를 1로 본 비율
확대배율 · 자막: — 얼마나 다가갈지, 아래 자막 문장

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

첨부한 확대 레시피에 내 화면 캡처(assets/신청화면.png)를 넣어 줘. 강조할 곳은 화면 오른쪽 아래 «신청하기» 버튼이야. 캡처를 열어 보고 버튼 위치를 0~1 비율로 재서 강조 칸에 넣어 줘. 자막: "마지막으로 「신청하기」를 누르면 끝!"

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

알아 두면 좋은 점

위치 비율은 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