데이터·도형 · 9초

종이 위에 자라는 설문 막대그래프

종이 결이 있는 크림색 바탕에 제목과 형광펜 밑줄이 그어지고, 막대가 왼쪽부터 차례로 자랍니다. 막대 끝의 숫자는 자리마다 굴러 멈추고, 가장 큰 막대에 왕관이 떨어져 앉으며 나머지 막대는 색이 빠져 1등이 돋보입니다.

이럴 때 쓰세요

수강생 설문 결과를 발표할 때
기관 결과 보고 영상에 숫자를 보여 줄 때
수업 중 투표 결과를 다시 보여 줄 때

「여기만 고치세요」 칸

제목 · 작은제목: — 왼쪽 위 제목과 설명
항목: — [이름, 값, 막대색] 목록. 이름에 \n 넣으면 줄바꿈
단위: — 숫자 뒤에 붙는 단위(명, %, 점 등)
눈금최대: — 그래프 맨 위가 뜻하는 값. 가장 큰 값보다 조금 크게

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

이 레시피 파일로 우리 반 설문 결과 영상을 만들어 줘. - 제목: 다음 학기에 배우고 싶은 것 - 작은제목: 오후반 수강생 32명 · 하나씩 고르기 - 항목: 키오스크 12, 사진 보정 8, AI 대화 7, 은행 앱 5 (색은 알아서 차분하게) - 단위: 명 / 눈금최대: 15

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

알아 두면 좋은 점

눈금최대를 가장 큰 값의 1.2배쯤으로 두면 왕관이 제목과 안 겹쳐요
항목은 3~6개가 알맞습니다
1등이 두 개면 둘 다 왕관을 받아요

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