Claude, 이제는 영상도 저보다 잘 만듭니다.

먼저 결과부터 보시죠!

Claude로 만든 영상

핵심은 레퍼런스입니다.

5단계로 영상 따라 만들기

① 따라 할 영상 하나를 고르세요.

움직임을 바꿔 볼 수 있는 카드

② 영상을 프레임 단위로 쪼갭니다.

프레임 12장

③ 사진을 요소요소 분해합니다.

프레임 한 장을 요소로 나눈 모습

④ HTML로 따라 만듭니다.

요소마다 padding과 margin 표시

⑤ 프롬프트로 정리합니다.

프롬프트
HTML 파일 하나로 만들어 주세요. 라이브러리는 쓰지 않습니다.
- 1920x1080 무대를 창 크기에 맞게 줄여 가운데에 둡니다. 바탕 #111111, 강조색 #0061F5, 글자 흰색
- 시간은 30fps 프레임 번호로 계산하고 requestAnimationFrame으로 돌립니다
- 무대 아래에 재생, 0.25배속, 처음부터 버튼을 둡니다. 끝나면 1초 쉬고 반복합니다
- cubic-bezier(x1,y1,x2,y2) 이징 함수는 직접 구현해서 씁니다

화면: 1280x720 화면을 1.5배로 키워 무대에 맞춥니다. 아래 px는 1280x720 기준입니다. 어두운 책상 배경(radial 900x500 at 70% 20% #3a3f48 → 투명, linear 160deg #23262c → #121417) 위에 메모 앱 창 하나. 창은 (240,120) 800x480, 흰색, 둥글기 14, 그림자 0 30px 80px rgba(0,0,0,.45), 글자 #15171a. 맨 위 줄 높이 40에 회색(#d6d8dc) 점 3개(12px). 왼쪽 폭 210 사이드바(#fafbfc)에 "오늘"(11px 회색)과 메모 3개: "새 메모" "오전 9:12"(선택됨, 배경 #e9ecf0), "모션 연습" "어제", "카메라 정리" "월요일"(제목 13px 굵게, 아래 줄 11px 회색 #8a9099). 오른쪽 본문에 "2026년 10월 8일 오전 9:12"(11px 회색)와 그 아래 (30,60)에 큰 글자 "부드러운 화면 전환을 만들려면"(30px, 굵기 700, 한 줄), (30,140)부터 회색 막대 3개(높이 10, 둥글기 5, #eef0f3, 간격 12, 가로 70%, 85%, 55%). 창은 처음부터 제자리에 있고 목록과 글자도 모두 보입니다. 바깥 상자, 가운데 상자, 안쪽 상자 3개가 무대 크기로 겹쳐 있고 기준점은 모두 (640,360)입니다.

움직임 "줌인 뒤 옆으로 훑기": 상자 두 개를 겹쳐 줌인한 뒤 글자를 따라 옆으로 훑습니다. 두 움직임이 끊기지 않고 이어집니다. 전체 144프레임.
- 안쪽 상자 줌: 9~45프레임, 배율 1 → 2.4. 동시에 이동 x 0 → 2.4 × (640 - 492), y 0 → 2.4 × (360 - 242). 글자 줄 왼쪽 끝(492, 242)이 화면 가운데로 옵니다. cubic-bezier(0.65, 0, 0.35, 1)
- 바깥 상자 가로 이동: 33~87프레임, x 0 → -2.4 × (글자 줄 오른쪽 끝 x - 492), 같은 곡선. 글자 줄 오른쪽 끝 x는 (글자 줄 왼쪽 480 + 줄 가로 폭 - 12)입니다
- 줌이 끝나기 12프레임 전(33프레임)에 가로 이동을 시작해 두 움직임이 12프레임 겹칩니다
- 본문 글자: 16글자(띄어쓰기 포함)가 한 글자씩 나타남. 보이는 글자 수 = 반올림(16 x p), p = 0.12 + 0.88 x (프레임 - 26.33) / 54를 0~1로 자름. 19프레임까지 0글자, 21프레임부터 1글자, 27프레임에 2글자, 80.3프레임에 16글자 전부. 20~81프레임 직선이 아님
- 모션 블러(셔터 각도 180): 바깥 상자(안쪽 상자와 창이 모두 들어 있는 전체)에 feGaussianBlur를 겁니다. 줌 구간(9~45프레임)에도 걸리고 가로 이동 구간(33~87프레임)에도 걸립니다. 움직임이 없는 구간은 번짐 0
- 번짐 계산: 한 프레임(33.3ms) 전과 지금 두 시점에서, 바깥 이동과 안쪽 줌 이동을 합친 변형으로 점 3개 (640,360), (340,200), (940,520)가 얼마나 움직였는지 잽니다. 가로 최대 이동 dx, 세로 최대 이동 dy를 따로 구해 stdDeviation 가로 = min(60, dx x 180 / 360 / 2.5), 세로 = min(60, dy x 180 / 360 / 2.5). 그래서 줌이 빨리 진행되는 25~27프레임쯤에는 화면 전체가 크게 번집니다(줌 이동 때문)
- 되돌아오기 108~144프레임(36프레임): 반대로 훑지 않고 줌아웃 하나로 돌아옵니다. 줌 2.4 → 1과 가로 이동 -2.4 × (글자 줄 오른쪽 끝 x - 492) → 0을 같은 곡선 cubic-bezier(0.45, 0, 0.15, 1)로 30프레임 동안 함께 움직여, 끝에서 천천히 멈춥니다. 글자는 한 글자씩 지우지 않고 글 전체의 블러와 투명도만 올립니다(10~25프레임 사이). 144프레임 장면이 0프레임 장면과 똑같아 반복해도 끊기지 않습니다

결론

Q&A

시작 전
코딩을 몰라도 되나요?
  • 코드는 Claude가 씁니다.
  • 직접 하는 일은 프롬프트를 붙여 넣는 것입니다.
  • 마음에 안 들면 말로 고치라고 하면 됩니다.
영상에서 프레임은 어떻게 뽑나요?
  • ffmpeg라는 무료 프로그램으로 뽑습니다.
  • 명령어 한 줄이면 영상이 사진 여러 장이 됩니다.
  • Claude에게 "ffmpeg로 프레임 뽑는 명령어 알려줘"라고 물어도 됩니다.
ffmpeg -i reference.mp4 -vf fps=10 frame_%03d.png
왜 HTML로 만드나요?
  • HTML은 요소마다 위치와 크기를 숫자로 적습니다.
  • 숫자를 바꾸면 움직임이 바로 바뀝니다.
  • Claude가 이 숫자를 읽고 고칠 수 있습니다.
도구
ffmpeg는 뭔가요?
  • 영상과 소리 파일을 다루는 무료 프로그램입니다.
  • 자르기, 합치기, 형식 바꾸기, 프레임 뽑기를 합니다.
  • 명령어로 쓰고, 설치 방법은 Claude에게 물으면 됩니다.
ffmpeg, Remotion, HyperFrames는 뭐가 다른가요?
  • ffmpeg는 이미 있는 영상 파일을 자르고 바꿉니다.
  • Remotion은 영상을 React 코드로 만듭니다.
  • HyperFrames는 영상을 HTML로 만듭니다.
도구하는 일쓰는 것
ffmpeg영상 편집, 프레임 뽑기명령어
Remotion코드로 영상 만들기React
HyperFrames코드로 영상 만들기HTML
왜 HyperFrames를 추천하나요?
  • HTML이라 Claude가 읽고 고치기 쉽습니다.
  • 무료입니다. Apache-2.0 라이선스라 렌더당 요금이 없습니다.
  • Remotion은 직원 4명부터 유료 라이선스가 필요합니다. 자동 렌더는 1건에 $0.01, 월 최소 $100입니다.
  • 대신 렌더는 느렸습니다. 제가 잰 두 장면에서 Remotion보다 1.7배, 7배 걸렸습니다.
도구비용
ffmpeg무료
Remotion3명 이하 무료, 4명부터 유료
HyperFrames무료, 렌더당 요금 없음
심화 학습더 좋은 영상을 만들기 위한 비밀
  • 곡선은 시간에 따른 빠르기를 그린 선입니다.
  • 가파른 곳은 빠르고, 평평한 곳은 느리거나 멈춘 곳입니다.
  • 이 실습의 줌은 cubic-bezier(0.65, 0, 0.35, 1) 곡선을 씁니다.
점선 원은 0.1초마다 공이 있을 자리입니다. 간격이 넓으면 빠르고, 좁으면 느립니다.
값 그래프 (위치 px)속도 그래프 (px/s)
t 0.00s, 위치 0px, 속도 0px/s
시작 키, OUT
끝 키, IN