시도하고자 했던 것과 그 이유
이런 영상 보신 적 있으신가요?
예전에 제 쇼츠에 꽤 자주 나왔던, PPT 모 핑 기능으로 슬라이드에 애니메이션 효과를 주는 영상들이 최근에 갑자기 생각나더라구요.
이 7편을 합치면 조회수가 500만입니다 (정확히는 5,008,792회, 7월 29일 기준). 한 편은 264만, 다른 한 편은 150만이고요. 사람들이 이런 걸 보고 싶어 한다는 뜻이겠죠. 그런데 막상 따라 만들려면 PPT를 켜야 합니다.
그래서 클로드 디자인으로 HTML 코드를 만들면 PPT보다 훨씬 쉽게, 자연어만으로도 이런 후킹한 모션을 넣을 수 있지 않을까 생각이 들었고 시도해보았습니다.
결과부터 말씀드리면 6개 패턴 중 5개를 재현했습니다. 그런데 이 글에서 정작 쓸모 있는 이야기는 나머지 하나와, 처음에 실패한 것들에서 나왔습니다. 심지어 중간에 세운 결론이 마지막 패턴에서 뒤집혔습니다.
우선 결과를 보여드리고 → 만든 과정을 설명드린 후 → 안 된 것들을 이야기하고 → 마지막에 제작한 스킬을 공유드리겠습니다.
위 목록의 두 번째(
XtW3Rm3Klkw, 150만)는 작업하지 않았습니다. 첫 번째 패턴(년도 오도미터)과 같은 모션이라 새로 얻을 게 없어서요. 링크만 걸어둡니다.
결과 — 6개 중 5개
패턴
콘텐츠의 관계
결과
년도 오도미터
순서 (연표·단계)
✅
하이라이팅 승격
병렬 중 하나 강조
✅
그리드 → 히어로
병렬 (격자)
✅
목업 줌스루
포함 (전체↔부분)
✅ (v1 실패 → v2 성공)
텍스트 녹아웃 줌
포함 (표지 → 본문)
✅
사진이 쏙
병렬 (크기+위치)
❌
여섯 개를 다 해보고 나니 모션이 세 가지로 환원됐습니다.
관계
원시동작
어떤 슬라이드
순서 — 같은 형식이 차례로
창 + 스트립
연표, 로드맵, 카운트
병렬 중 하나 강조
요소 A→B
인물 소개, 요금제, 메뉴판
포함 — 전체 ↔ 부분
카메라
지도, 조직도, 목업, 표지→본문
이게 이번 실험에서 제일 크게 남은 겁니다. 모션은 예쁨이 아니라 콘텐츠의 관계 구조에서 나옵니다. 불릿 목록에 모션을 넣을 자리가 없는 이유도 이걸로 설명됩니다 — 불릿은 관계가 아니라 나열이라서, 모션을 얹는 게 아니라 내용을 셋 중 하나로 다시 써야 합니다.
실측 수치 (첨부 1)
「부드럽게」 같은 말로는 재현이 안 돼서, 영상을 받아 프레임 단위로 쟀습니다.
공통 이징 cubic-bezier(0.25, 0.1, 0.35, 0.95) — 오도미터 22점 + 하이라이팅 51점, 합동 73점 최소제곱 피팅입니다.
곡선
RMSE (낮을수록 잘 맞음)
★ 공통 최적
0.0330
ease (reveal.js 기본값)
0.0635
ease-out
0.0563
ease-in-out
0.1668
linear
0.1647
ease-in-out이 최악입니다. "모핑은 부드럽게 시작해서 부드럽게 끝난다"는 통념이 실측과 정반대였습니다. 실제로는 거의 곧바로 최고속에 올라가 길게 감속합니다.
전환 시간은 패턴마다 다릅니다. 0.30 / 0.37 / 0.71 / 0.96초 — 움직이는 거리가 멀수록 깁니다. 「모핑은 0.5초」 같은 공통 상수는 없었습니다. (여섯 중 넷입니다. 나머지 둘은 아예 못 쟀는데, 그 이야기가 아래 ③입니다.)
그리고 웹 기본값과 실제로 달랐습니다.
reveal.js 기본값
우리 실측
지속
1.0초
0.30~0.96초 (패턴마다)
이징
ease
cubic-bezier(.25,.1,.35,.95)
"PPT에서 잰 값을 웹에 옮길 가치가 있나"에 대한 답이 여기서 나왔습니다 — 있습니다. 기본값을 그대로 쓰면 PPT 모핑보다 느리고 곡선도 다릅니다.
어떻게 만들었나
1. 웹(클로드)에서 가능성부터 확인했습니다.
2. 가능성이 보이길래 클로드 코드로 옮겼습니다.
유튜브 영상을 받아 프레임 단위로 분석해야 하는데, 웹에서는 그게 안 되기 때문입니다. yt-dlp로 영상을 받고 ffmpeg로 프레임을 뽑아, 프레임마다 카드 경계·변위·회전각을 재는 도구를 7개 만들었습니다.
3. 코드와 디자인을 왔다 갔다 했습니다.
클로드 코드에서 프롬프트를 만들고, 클로드 디자인에서 실제로 구현했습니다.
이 분업은 처음부터 안 게 아니라 한 번 실패하고 나서 알았습니다.
클로드 코드
클로드 디자인
콘텐츠
플레이스홀더
실제 주제·사진·카피
타이포·색
시스템 기본
역할별 폰트 3종 + 액센트
레이아웃
원본 모사
자기 디자인
모션
실측값 생산
실측값을 그대로 받아 씀
클로드 코드는 모션의 수치와 규칙을, 클로드 디자인은 디자인과 콘텐츠를 맡습니다. 디자인은 대화로 방향을 잡기보다 명령을 정확히 수행하는 데 최적화된 외주 업체에 가까워서, 프롬프트를 어떻게 짤지 고민하는 과정에는 적합하지 않았습니다.
4. 그래서 작업 순서를 고정했습니다.
① 완성본 재생 구간 찾기 → ② 기하 실측 → ③ 시간·이징 실측→ ④ 프로토타입으로 메커니즘 검증 → ⑤ 프롬프트 작성
이 순서는 제가 정한 게 아니라 어겼다가 얻어맞고 나서 생긴 것입니다.
안 된 것들 — 규칙은 전부 여기서 나왔습니다
① 프롬프트 3개를 한 번에 썼다가 3개 다 실패했습니다
처음엔 실측만 하면 될 줄 알고 프롬프트 3종을 한 번에 써서 돌렸는데 전부 레퍼런스처럼 안 나왔습니다. 원인은 문장이 아니라 ④ 프로토타입 단계를 건너뛴 것이었습니다.
성공한 하이라이팅은 프로토타입을 만들다 함정을 직접 밟았습니다 — grid-template-columns를 fr