AI 모션 그래픽 제작법: After Effects 없이 상업 광고 품질 구현하기
레퍼런스 분석, 사운드와 스토리 기획, 키프레임 승인, 렌더링, 개선까지 이어지는 AI 모션 그래픽 7단계 워크플로입니다. 실제 사례와 재사용 가능한 프롬프트도 제공합니다.
사례 연구: 무엇이 왜 바뀌었는가
Training Season motion 동영상
1차 프롬프트
"Training Season"에 맞춘 25초 길이의 세로형 가사 모션 영상을 제작하세요.
1080×1920, 30fps. Three.js + postprocessing을 사용하고, 2D 오버레이에는 GSAP을 사용하세요.
오디오
이 릴의 25초 오디오를 자르거나 이어 붙이지 말고 정확히 그대로 사용하세요.
https://www.instagram.com/reel/DczJLScIIuV/
먼저 이 클립의 전체 가사를 가져오고 비트 그리드를 만든 다음, 노래로 불리는 모든 단어의 타이밍을 맞추세요.
모션 레퍼런스
https://www.instagram.com/reel/DerrAaVIxjl/
다음 골격을 차용하세요. 카메라는 멈추지 않고, 가사는 회전하는 링을 감싸며,
핵심 단어는 비트에 맞춰 화면 전체 너비로 강하게 등장하고, 휩팬 전환을 사용합니다.
모션은 훌륭하지만 미감은 그렇지 않습니다. 단일 핑크색,
반복되는 터널 또는 혼합된 폰트는 복사하지 마세요.
스토리
한 여성이 밤에 매니페스테이션 보드에 자신이 원하는 사랑을 적습니다.
이는 간청이 아니라 그녀의 기준입니다. "training season's over"에서 그녀는
기다리기를 멈춥니다. 모든 소원에 빨간 체크 표시가 생기고 아침이 됩니다.
페미니즘적이고 희망적으로 표현하세요. "아직 내일이 있다"는 의미입니다. 화면에 남성은 등장하지 않습니다.
흐름: 고요한 밤 → 목록 작성 → 연약한 한순간 → 과부하 → 선언 → 아침.
룩
콜라주/인쇄물: 잡지에서 오려 낸 글자, 비전 보드, 신문 1면.
크림색/핑크색/실버에 따뜻한 필름 그레인을 적용하고, 빨간색은 포인트로만 사용하세요. 폰트는 최대 2개입니다.
실존 인물의 얼굴은 사용하지 말고 실루엣과 오브젝트를 사용하세요.
모션 규칙
- 핵심 단어 11개는 돌출된 3D 타이포그래피로 만들고 화면 너비의 85~100% 크기로 등장시키며,
선명하고 읽을 수 있는 상태로 최소 0.3초 유지하세요.
- 나머지 모든 가사 단어는 노래로 불리는 순간에 나타나며 높이는 최소 90px이어야 합니다.
- 프레임당 최대 3개 레이어만 사용하고, 한 번에 하나의 주인공만 두세요.
- 깊이감은 떠다니는 장식이 아니라 공간에 고정된 환경에서 만드세요. 예: 그리드 룸, 궤도 링,
눈금 표시.
- 전환: 휩팬 + 블러, 흰색 프레임 한 장 또는 오브젝트를 통과해 날아가기.
- 빠른 움직임에는 모두 서브프레임 모션 블러를 적용하세요. 블룸 때문에 화면이 뿌옇게 되지 않게 하세요.
- 코러스의 첫 비트에서 시각적 정점을 만드세요.
엔딩
"over"에서 "manifested ✓"를 표시하고, 빨간 체크 6개가 하나씩 체크된 다음
"made with OD Motion"을 표시하세요.
먼저 핵심 스틸 3~5개를 보여 주세요. 승인 전에는 애니메이션을 만들지 마세요.
IKEA motion 동영상
1차 프롬프트
IKEA의 새로운 PS 2026 컬렉션을 위한 11초 제품 출시 영상을 제작하세요.
비공식 콘셉트입니다. 1920×1080, 60fps, HTML + GSAP.
레퍼런스
이 릴의 페이싱을 샷별로 복사하되 스토리는 복사하지 마세요.
https://www.instagram.com/reel/DcVTS2exsRR/
(라인 아트 제품 카드가 하나씩 밀려 들어옴 → 그리드를 형성함 → 하나의 캔버스로 합쳐짐 → 로고)
브랜드(첫 1초 안에 IKEA로 인식되어야 함)
- 색상: IKEA 블루 #0058A3, 옐로 #FFDB00, 화이트, 다크 그레이 #3C3C3C
- 시각 언어: IKEA 조립 설명서 스타일의 선화(아이소메트릭, 얇은 검은색 선)
- 폰트: 깔끔한 기하학적 산세리프, 가격에는 볼드 사용
에셋(첨부됨)
- 흰색 배경의 제품 사진 5장 + 가격:
Stool $69.99 · Folding Chair $59.00 · Side Table $39.99 · Chair Bed $399.00 · Nightstand $69.99
- 공식 치수 도면 3개(선화를 그릴 때 사용)
- IKEA 로고(SVG)
- 카피: "MAKE ROOM FOR PLAY" / "Playful functionality since 1995."
- 카드 키워드: Playful / Flexible / Affordable
샷
0.0–2.5초 제품 카드가 컨베이어 위로 미끄러져 들어옵니다. 각 푸시는 비트에 맞춰 도착합니다.
(0.55 / 0.775 / 1.0 / 1.175초). 각 카드 = 선화 + 이름 + 가격.
스툴은 기울어진 채 떨어진 뒤 바로 섭니다.
가격표는 떨어져 들어와 고정되며 작은 고무줄 같은 흔들림을 보입니다.
선화는 카드보다 더 깊은 레이어에 배치합니다(패럴랙스).
위쪽 행은 절반 높이까지 올라가고 Chair Bed는 아래에서 올라옵니다.
선화가 떠 있는 동안 0.3초 유지합니다.
2.5–6.0초 카드가 방 평면도로 자리 잡습니다. Chair Bed 카드는 실루엣으로 펼쳐져
밴드 위에 놓입니다. 실제 제품 라인업이 중앙에서 바깥쪽으로 와이프되어 나타납니다.
가격표가 왼쪽에서 오른쪽 순으로 실제 제품에 고정됩니다.
"MAKE ROOM FOR PLAY"가 한 줄씩 드러납니다.
6.0–8.0초 로고: I-K-E-A 글자가 하나씩 강하게 등장하고 IKEA 블루로 와이프된 뒤 앞으로 밀려옵니다.
엔드 카드 "Unofficial concept · not affiliated with IKEA"
모션 규칙
- 흰색 플래시와 하드 컷을 사용하지 마세요. 모든 전환은 연속적인 푸시 또는 와이프입니다.
- 요소들이 서로 겹치고 뒤따라 움직이게 하세요. 어떤 것도 혼자 갑자기 나타나지 않습니다.
- 빠른 움직임에는 모션 블러를 적용하세요.
사운드
음악을 먼저 확정한 다음 모든 핵심 움직임을 비트에 맞추세요.
모든 움직임 아래에 부드러운 우시를 넣고, 각 가격표에는 작은 "핀" 소리를 넣으세요.
-16 LUFS로 믹싱하고 거친 고역은 피하세요.
먼저 핵심 프레임 3~5개를 보여 주세요. 승인 전에는 전체 영상을 렌더링하지 마세요.
poppi motion 동영상
1차 프롬프트
프리바이오틱 소다 poppi를 위한 11초 브랜드 영상을 제작하세요.
비공식 콘셉트입니다. 1920×1080, 60fps, HTML + GSAP.
레퍼런스
이 릴의 페이싱을 샷별로 복사하되 poppi만의 세계를 사용하세요.
https://www.instagram.com/reel/DbqR1UxhTvE/
브랜드(첫 1초 안에 poppi로 인식되어야 함)
- 각 컷에는 poppi 맛을 나타내는 한 가지 색상만 사용합니다. 마젠타 #EC008C, 옐로 #FFF200,
블루 #0667BE, 오렌지 #F15506, 핑크 #FF8CCB, 레드 #D4002E
- poppi 워드마크(SVG, 첨부됨)
- 카피(drinkpoppi.com에서 가져옴): "Soda's back, but better" / "THE PREBIOTIC SODA"
- 개성 키워드: FIZZY / BOLD / FRUITY / BUBBLY / FUN
에셋(첨부됨)
- poppi 워드마크 SVG
- 캔 렌더: Strawberry Lemon, Orange Cream, Shirley Temple, Cream Soda,
Ginger Lime, Sour Apple, Alpine Blast, Doc Pop
- 라이프스타일 사진 3장
샷
0.00–1.85 비트에 맞춘 하드 컷 9개. 각 컷 = 한 가지 맛 색상의 스타버스트
(펀치 줌 1.18 → 1.03) + 튀어나오는 해당 과일(1.3 → 1).
0.285 / 0.785초의 킥에 맞춰 전체 프레임이 펌핑됩니다.
중첩된 스타버스트: 바깥쪽은 천천히 회전하고 안쪽은 반대 방향으로 회전하며 커집니다.
1.85 워드마크가 스쿼시 앤 스트레치와 함께 튀어나오고, 보라색 → 마젠타로 바뀌며 스타버스트가 터집니다.
2.73 사진 창이 아래에서 위로 마스킹되어 나타난 뒤 모서리가 둥근 카드가 됩니다.
"Soda's back, but better"가 위에서 아래로 눌러 들어오고 거품이 올라갑니다.
3.65 사진은 왼쪽, 거대한 딸기는 오른쪽에 배치되고 "NEW" 스티커가 세게 붙습니다.
4.56 거대한 오렌지 하나가 다른 두 개 위로 떨어지고 세 개 모두 가라앉습니다.
5.56 개성 키워드가 모션 블러와 함께 세로로 스크롤되며 가운데 행은 밝은 노란색입니다.
6.60 캔 하나가 옆으로 강하게 내려앉고 소다 웅덩이가 퍼지며 "THE PREBIOTIC SODA"가 전체 너비를 채웁니다.
≈7.5 캔이 회전하며 들어오고(Sour Apple → Orange Cream), 각각 임팩트 링과 함께 안착합니다.
≈8.3 사진 카드가 오른쪽에서 왼쪽으로 미끄러집니다.
≈9.2 전체 프레임 사진, 빠른 깜박임.
≈9.8–11 엔드 카드: 캔 하나가 뛰어 들어오고(Pixar 스타일), 뚜껑이 열리며 거품 하나가 올라가
워드마크의 "i" 위 점이 됩니다.
엔드 카드 "Unofficial concept · not affiliated with poppi"
사운드
음악을 먼저 확정하고 자르지 마세요. 모든 하드 컷을 비트에 맞추세요.
주요 사운드는 실제 캔을 여는 "tss" 소리입니다. -16 LUFS로 믹싱하세요.
먼저 핵심 프레임 3~5개를 보여 주세요. 승인 전에는 전체 영상을 렌더링하지 마세요.
Duolingo motion 동영상
1차 프롬프트
Duolingo의 새로운 기능 Image Flashcards를 위한 21초 출시 영상을 제작하세요.
(2026년 10월 19일 출시: 레슨 후 선택지 없이 사진을 보고,
단어를 소리 내어 말하며, 틀린 카드는 다시 나타남).
비공식 콘셉트입니다. 1920×1080, 60fps, HTML + GSAP.
레퍼런스(모션만 참고하고 스토리는 참고하지 말 것)
https://www.instagram.com/reel/DafsqUut4x1/
차용할 것: 장면 위의 UI, 한 단어씩 나타나는 큰 글자, 컷 없이 계속 움직이는 카메라.
스토리는 이 릴이 아니라 Duolingo 기능에서 가져와야 합니다.
브랜드(첫 1초 안에 Duolingo로 인식되어야 함)
- 첫 1초 안에 화면에 Duo 표시
- 그린 #58CC02, 블루 #1CB0F6, 레드 #FF4B4B, 다크 그레이 #3C3C3C
- 두툼한 3D 버튼, 둥근 서체(Nunito)
- 가능한 경우 공식 Duolingo Lottie 애니메이션 사용(첨부됨)
스크립트(자연스러운 여성 보이스오버)
1. "Easy." (익숙한 타일 탭 레슨 위에서)
2. "Remembering it? … Not so much."
3. "So we took the choices away."
4. "Meet Image Flashcards."
5. "A picture… and your voice."
6. "Miss one? It comes back." → Duolingo 앱 아이콘 + 이름으로 종료
샷
0.0–5.9초 휴대폰 레슨: 손가락으로 타일을 탭하고, "Easy."에서 Duo가 휴대폰 밖으로 뛰어나옵니다.
5.9–8.0초 타일이 떨어져 나가고 빈 카드 안으로 줌인해 통과합니다.
8.0초 "Meet Image Flashcards" — 공식 버스트.
10.2초 사진이 나타나고 마이크가 켜지며 학습자가 단어를 말합니다.
14.2초 Correct!
14.9초 틀린 카드가 다시 흔들리며 들어옵니다: "Miss one? It comes back."
17.3–21초 앱 아이콘이 깨어나고 "Duolingo"에서 터집니다.
엔드 카드 "Unofficial concept · not affiliated with Duolingo"
대표 모션
거대한 Duolingo 3D 버튼을 누르면 다음 장면으로 색상이 범람합니다. 모든 전환에 사용하세요.
모션 규칙
흰색 플래시와 하드 컷을 사용하지 마세요. 패럴랙스 깊이를 갖춘 연속 카메라를 사용하세요. 빠른 움직임에는 모션 블러를 적용하세요.
사운드
보이스오버를 먼저 녹음하거나 생성한 다음 각 대사에 맞춰 화면을 편집하세요.
모든 동작에는 고유한 소리가 있습니다. 탭, 팝, 카드 스와이프, 마이크 켜짐, 정답, 실패, 버스트.
음악은 음성 아래에 배치하세요. -14 LUFS로 믹싱하세요.
먼저 핵심 프레임 3~5개를 보여 주세요. 승인 전에는 전체 영상을 렌더링하지 마세요.
IKEA motion 동영상
동일한 기기 볼륨으로 A를 재생한 뒤 B를 재생하세요. A에는 음악이 들어 있습니다. B에는 개별 동작을 설명하는 효과음 레이어가 추가되어 있으며, 움직임이 가장 빠른 지점에 피크가 맞는 우시도 포함됩니다. 화면을 바꾸지 않고 효과음이 무엇을 더하는지 들어 보는 것이 목적입니다.
100K & OpenDesign Logo motion 동영상
100K 내러티브 영상은 HyperFrames 출시 영상 레퍼런스를 따랐으며, 게시물, 차트, 카운터에 트윗 UI, 실제 곡선, 모션 그래픽 블록을 사용했습니다. 음악은 트랙 자체의 클라이맥스가 화면과 맞을 때까지 15개 버전을 거쳤습니다. 노트에는 음악 출처로 Pixabay가 명시되어 있습니다.
레퍼런스부터 시작하세요. 비트 단위로 분석하세요. 대표 모션 하나를 선택하세요. 렌더링 전에 스틸 프레임을 승인받으세요. 영상 타이밍을 잡기 전에 사운드를 확정하세요.
“좀 더 에너지 있게 만들어 주세요” 같은 모션 브리프는 너무 많은 사항을 미정으로 남깁니다. 무엇이 움직이나요? 시선은 어디로 향하나요? 어떤 단어가 비트에 맞춰 등장하나요? 시청자가 첫 1초 안에 무엇을 알아봐야 하나요?
아래 워크플로는 이러한 질문을 검토 가능한 결정 사항으로 바꿉니다. 제품 출시, 가구 콘셉트 광고, 키네틱 타이포그래피 영상, 짧은 브랜드 스토리 어디에나 적용할 수 있습니다. 최종적으로 브리프, 타이밍이 지정된 샷 목록, 승인된 키프레임, 편집 가능한 모션 프로젝트, 검수가 끝난 영상 내보내기 파일을 완성하게 됩니다.
시작 전에 필요한 것
명확한 메시지 하나, 타깃 시청자, 납품 형식, 그리고 작업을 알아볼 수 있게 해 주는 에셋을 준비하세요. 예를 들면 로고, 제품 UI, 제품 사진 또는 승인된 소수의 이미지 세트입니다. 예정된 납품 용도에 사용할 수 있는 음악이나 내레이션을 선택하세요. 레퍼런스는 연구를 위한 입력 자료입니다. 레퍼런스를 볼 수 있는 권한이 있다고 해서 그 영상이나 사운드트랙을 재게시할 권한까지 생기는 것은 아닙니다.
에셋을 생성하거나 준비할 수단, 모션 렌더러, 시각적 방향을 승인할 검토자도 필요합니다. 이 프로젝트들에서는 Claude가 디렉션과 브리프를 담당했고, Codex가 에셋 생성과 구현을 담당했으며, 반복적인 브랜드 변형 작업은 별도로 위임할 수 있었습니다. 이는 필수 모델 구독이 아니라 제작 역할을 뜻합니다.
| 단계 | 구체적인 결과물 | 도구 |
|---|---|---|
| 레퍼런스 찾기 | 링크와 선정 이유가 포함된 후보 목록 | 브라우저, 다운로드가 허용된 경우 yt-dlp |
| 레퍼런스 분석 | 콘택트 시트와 비트별 노트 | FFmpeg, 전사 및 오디오 분석 도구 |
| 브리프 작성 | 시각 규칙과 샷 목록 | Claude, 일반 Markdown 브리프 |
| 사운드 기획 | 타이밍 마커가 포함된 음악 또는 내레이션 | Python 오디오 분석, 효과음용 ElevenLabs |
| 스틸 준비 | 에셋과 승인된 키프레임 | Codex 이미지 생성, 누끼 이미지, HyperFrames |
| 애니메이션 및 렌더링 | 편집 가능한 프로젝트와 영상 | 2D에는 HyperFrames/GSAP, 공간 작업에는 Three.js |
| 검토 | 재생 검토를 마친 내보내기 파일과 비교 노트 | FFmpeg, 프레임 검사, 나란히 놓은 영상 비교 |
1단계: 구조를 기준으로 레퍼런스 선택하기
먼저 필요한 커뮤니케이션 유형을 정한 다음 레퍼런스를 선택하세요. 가구 광고와 소프트웨어 출시 영상 모두 아름다운 전환을 사용할 수 있지만, 해결하는 문제는 서로 다릅니다.
다음 네 가지 모션 형식 중에서 선택하세요.
| 유형 | 스토리를 이끄는 요소 | 준비 사항 | 적합한 용도 |
|---|---|---|---|
| 인터페이스 시연 | 문제가 드러난 뒤 UI가 이를 해결함 | 제품 화면 또는 재현한 인터페이스 요소 | 제품 출시 및 기능 설명 |
| 제품 디스플레이 | 누끼를 딴 제품과 큰 타이포그래피로 태도를 형성함 | 일관된 제품 사진과 깔끔한 누끼 이미지 | 커머스 및 브랜드 영상 |
| 키네틱 타이포그래피 | 단어, 가사 또는 짧은 문장이 이미지가 됨 | 정확한 텍스트 시퀀스와 탄탄한 오디오 계획 | 슬로건, 가사 및 짧은 설명 |
| 3D 제품 영상 | 오브젝트가 회전하거나 분리되거나 최종 구성으로 자리 잡음 | 사용 가능한 3D 에셋 또는 모델링된 오브젝트 | 하드웨어 및 실물 제품 출시 |
원본 링크, 제작자 크레디트, 수집 날짜, 배우고 싶은 점을 설명하는 한 문장을 저장하세요. 좋아요나 댓글 수를 기록한다면 관찰 날짜도 남기세요. 이 수치는 계속 변하며, 영상이 효과적인 이유를 설명해 주지 않습니다.
노트에서 출발점으로 삼기 좋은 레퍼런스에는 @studio.ojas의 Ramp, @vanshika.motion의 MUJI, @bymyno_의 Henki, 그리고 @jordans.archivess의 Visual Test 01이 있습니다. 제작자의 작업을 연구하려면 원본 게시물을 여세요.
체크포인트: 레퍼런스가 메시지에 적합한 이유를 설명하고, 연구하려는 구체적인 기법을 식별할 수 있습니다.
2단계: 레퍼런스를 비트 단위로 분석하기
한 번은 전체 스토리에 집중해 보고, 한 번은 소리 없이 보고, 한 번은 사운드트랙에 집중해 보세요. 이러한 패스를 통해 시각적 구조와 오디오 에너지를 분리할 수 있습니다. 그런 다음 반복해서 탐색하지 않고도 영상의 진행을 확인할 수 있도록 콘택트 시트를 만드세요.
사용이 허가된 로컬 사본이 있다면 FFmpeg로 대략적인 콘택트 시트를 만들 수 있습니다.
ffmpeg -i reference.mp4 -vf "fps=1,scale=240:-1,tile=5x4" -frames:v 1 reference-contact-sheet.jpg
이 예시는 처음 20초를 초당 1프레임으로 샘플링합니다. 더 긴 영상은 시트를 추가로 만드세요. 빠른 전환은 실제 타이밍 부근을 더 세밀하게 살펴봐야 합니다. 콘택트 시트만으로는 움직임의 느낌이 적절한지 알 수 없습니다.
각 비트에서 다음 네 가지를 기록하세요.
- 목적: 시청자는 여기서 무엇을 배우거나 느끼나요?
- 구도: 전경, 배경, 주요 시선 집중 지점은 무엇인가요?
- 모션: 무엇이 들어오고, 움직이고, 변하고, 나가나요? 어떤 움직임이 반복되나요?
- 사운드: 이 이벤트는 음악의 악센트, 발화된 단어, 효과음 중 무엇에 의해 구동되나요?
시각적 장치와 그것이 충족하는 필요를 구분하는 것이 유용합니다. 포스트잇으로 뒤덮인 벽은 과부하를 전달할 수 있습니다. 중요한 교훈은 영상이 그 과부하를 어떻게 실감 나게 만드는지입니다. 여러분의 제품에는 다른 비유가 필요할 수 있습니다.
이 레퍼런스를 모션 디자이너의 관점에서 분석하세요.
각 비트별로 커뮤니케이션 목표, 구도,
등장/유지/퇴장 모션, 사운드 이벤트를 설명하세요.
영상에 정체성을 부여하는 단 하나의 반복 모션을 식별하세요.
재사용 가능한 모션 원칙을 제작자의 스토리,
브랜드 에셋, 고유한 아트워크와 분리하세요.
관찰할 수 없는 타임스탬프를 지어내지 마세요. 알 수 없는 부분은 표시하세요.
체크포인트: 타이밍이 지정된 분석 자료가 있으며, 대표 모션이 스토리를 어떻게 뒷받침하는지 설명할 수 있습니다.
3단계: 독창적인 브리프와 샷 목록 작성하기
모션 원칙을 빌리되, 스토리는 자신의 주제에 맞춰 새로 구성하세요. Duolingo 사례의 초기 버전은 VoiceOS의 애니메이션 언어뿐 아니라 스토리까지 차용했습니다. 그 결과 새 제품에 맞지 않는 영상이 나왔습니다. 이후 버전의 오프닝은 하늘과 숲에 너무 많은 시간을 써서 브랜드를 알아보기 어려웠습니다. 수정본에서는 Duo, 브랜드 녹색, 입체적인 버튼을 첫 1초 안에 등장시켰습니다.
브랜드 영상에서 첫 1초 내 인지는 실용적인 디렉션 원칙입니다. 모든 내러티브 영상의 필수 조건은 아니지만, 즉각적인 제품 인지가 목적일 때 유용한 점검 기준입니다.
레퍼런스에서 가져올 것과 남겨 둘 것을 기록하세요. 전체 렌더링을 요청하기 전에 타이포그래피, 팔레트, 이미지 처리 방식, 반복되는 움직임, 감정의 진행을 확정하세요.
[제품 또는 주제]를 위한 모션 브리프를 작성하세요.
시청자: [시청 대상].
핵심 메시지 하나: [기억해야 할 내용].
납품 사양: [길이, 화면비, 해상도, 프레임 레이트].
브랜드 에셋: [승인된 파일].
레퍼런스: [링크 또는 사용이 허가된 로컬 파일].
차용할 것: [구체적인 모션 원칙].
차용하지 말 것: 레퍼런스의 스토리, 문구, 아트워크 또는 정체성.
시각 규칙, 감정의 흐름, 대표 모션 하나,
샷 목록을 정의하세요. 모든 샷에 커뮤니케이션 목적,
시작/종료 타이밍, 보이는 요소, 모션, 사운드 큐를 지정하세요.
구현 전에 누락된 입력 자료를 명시하세요.
브리프와 키프레임 계획까지만 진행하고 아직 렌더링하지 마세요.
예를 들어 짧은 가구 콘셉트 영상은 제품 하나를 소개하고, 여러 제품이 방을 이루는 모습을 보여 준 뒤, 최종 브랜드 구도를 유지할 수 있습니다. 각 오브젝트가 공통 그리드에 맞춰 스냅되는 방식을 대표 모션으로 사용할 수 있습니다. 시청자가 전환 하나를 놓치더라도 오프닝, 전개, 엔딩을 이해할 수 있게 하세요.
| 샷 | 커뮤니케이션 목표 | 화면 | 사운드 큐 | 검토 질문 |
|---|---|---|---|---|
| 오프닝 | 주제 확립 | 알아볼 수 있는 제품과 정체성 | 첫 번째 명확한 악센트 | 처음 보는 시청자가 무엇인지 알 수 있는가? |
| 전개 | 가치 설명 | 제품 또는 UI가 의미 있는 시스템을 형성함 | 반복되는 리듬 | 새 오브젝트가 등장할 때마다 정보가 추가되는가? |
| 절정 | 아이디어 완결 | 대표 모션이 구도를 완성함 | 음악 또는 내러티브의 정점 | 엔딩이 충분히 축적된 결과로 느껴지는가? |
| 최종 홀드 | 명확한 핵심 메시지 남기기 | 읽을 수 있는 최종 메시지 | 자연스러운 음악적 마무리 | 읽을 시간이 충분한가? |
체크포인트: 다른 사람이 레퍼런스를 보지 않고도 샷 목록만으로 영상을 따라갈 수 있습니다.
4단계: 화면 타이밍을 잡기 전에 사운드 확정하기
영상이 음악 중심인지 내레이션 중심인지 선택하세요. 음악 중심 영상이라면 프레이즈, 강박, 전환, 활용 가능한 엔딩을 들으세요. 내레이션 중심이라면 문구를 승인하고 작업용 보이스 트랙을 녹음한 뒤 샷 길이를 정하세요.
BPM에만 의존하지 마세요. 비트 그리드는 펄스가 반복되는 위치는 알려 주지만, 단어가 시작되는 지점, 쉼, 곡의 감정적 정점은 식별하지 못합니다. Training Season 사례의 노트에는 템포가 122.75 BPM으로 기록되어 있지만, 타이포그래피에는 단어 단위 타이밍도 필요했습니다.
시간, 이벤트, 시각적 반응, 효과음이 포함된 간단한 큐 시트를 만드세요. 동작을 설명하는 경우에만 효과음을 추가하세요. 우시 효과음은 두 클립을 단순히 동시에 시작하지 말고, 소리의 가장 강한 부분을 움직임이 가장 빠른 부분에 맞추세요.
승인된 오디오를 사용해 큐 시트를 만드세요.
프레이즈 경계, 강한 악센트, 발화 단어의 시작점,
자연스러운 엔딩을 표시하세요. 측정한 이벤트와 추정치를 구분하세요.
승인된 각 샷을 해당 큐에 매핑하세요.
의미 있는 움직임을 위한 절제된 효과음 레이어를 제안하세요.
승인 없이 사운드트랙을 교체하거나 이어 붙이지 마세요.
거절된 편집본에서 두 가지 교훈을 얻었습니다. Training Season에서는 서로 다른 소스의 음악을 이어 붙이자 음색이 바뀌었습니다. 100K 내러티브 영상에서는 음악 자체의 클라이맥스가 시각적 클라이맥스와 맞고 음악적 진행이 보존되었을 때만 효과가 있었습니다. 음악을 다른 형태로 자르는 것보다 화면을 다시 편집하는 편이 더 나은 해결책일 수 있습니다.
체크포인트: 사운드트랙에 의도적인 시작과 끝이 있으며, 모든 주요 시각적 비트에 오디오상의 근거가 있습니다.
5단계: 에셋 생성 및 키프레임 승인받기
애니메이션에 들어가기 전에 대표 스틸 프레임 3~5개를 준비하세요. 오프닝, 복잡한 중간 프레임, 정점, 최종 홀드를 포함하세요. 특정 장면이 전체 아이디어를 담당한다면 5개를 넘더라도 추가하세요. Training Season은 스틸 8개를 사용했습니다.
조명, 카메라 각도, 재질, 배경에 일관된 이미지 생성 지침을 사용하세요. 커머스 영상에서는 누끼 가장자리와 접지 그림자를 확인하세요. 인터페이스 영상에서는 텍스트와 제품 세부 사항을 검증하세요. 렌더러는 부정확한 화면이나 다른 시각 시스템에 속한 제품 사진을 고칠 수 없습니다.
승인된 브리프와 샷 목록을 바탕으로 키프레임을 준비하세요.
실제 브랜드 에셋, 최종 카피, 예정된 화면비를 사용하세요.
오프닝, 가장 밀도 높은 프레임, 감정적 정점, 최종 홀드를 보여 주세요.
각 프레임의 목적과 계획된 움직임을 설명하세요.
텍스트 가독성, 에셋 일관성, 크롭, 브랜드 인지도를 확인하세요.
이 프레임들이 승인될 때까지 전체 영상을 애니메이션으로 만들지 마세요.
휴대폰을 포함해 실제 표시될 크기로 프레임을 검토하세요. 세로 구도를 큰 데스크톱 이미지로만 판단하지 마세요. 텍스트를 읽을 수 있는지, 위계가 명확한지, 반복되는 시각적 아이디어가 여러 프레임에 걸쳐 유지되는지 확인하세요.
체크포인트: 검토자가 단순한 무드보드가 아니라 실제 구도와 에셋을 승인했습니다.
6단계: 적합한 가장 단순한 렌더러로 애니메이션 만들기
시각적 과제가 타이포그래피, 카드, 누끼 제품, 인터페이스 요소 또는 그리드 기반 구도라면 2D를 사용하세요. 제작 워크플로에서는 IKEA, poppi, Duolingo 사례에 GSAP과 함께 HyperFrames를 사용했습니다.
깊이, 원근, 카메라 움직임 또는 공간적 관계가 아이디어의 일부라면 3D를 사용하세요. Training Season은 반복 수정 과정에서 HyperFrames에서 Three.js로 전환했습니다. 후기 파이프라인에서는 피사계 심도, 글로우, 색수차 효과를 위한 포스트프로세싱과 서브프레임 모션 블러를 사용했습니다. 이러한 기법은 특정 룩을 위한 선택 사항이지, 모든 영상에 필요한 요소는 아닙니다.
각 샷의 등장, 유지, 퇴장을 정의하세요. 대표 모션을 변주하며 반복하고, 읽거나 강조해야 하는 순간에는 정지 상태를 남겨 두세요. 언급된 프로젝트들은 60 fps로 렌더링되었습니다. 브리프에서 자신의 프레임 레이트를 선택하고 렌더링과 내보내기 전반에서 일관되게 유지하세요.
승인된 모션 프로젝트를 구현하세요.
승인된 키프레임과 큐 시트를 따르세요.
하나의 대표 모션을 모든 샷에서 일관되게 유지하세요.
요청된 타임스탬프를 반복해서 렌더링할 수 있도록
타이밍을 결정론적으로 만드세요. 에셋은 로컬에 보관하고 경로를 명시하세요.
전체 영상 전에 짧은 대표 구간을 렌더링하세요.
편집 가능한 소스, 에셋 종속성, 내보내기 설정을 제공하세요.
승인되지 않은 효과를 추가하거나 사운드트랙을 변경하지 마세요.
대표 구간에는 어려운 전환이나 가장 밀도 높은 프레임이 포함되어야 합니다. 전체 영상을 렌더링하기 전에 오디오와 함께 재생해 보세요. 움직이는 동안에도 텍스트를 읽을 수 있는지, 깊이감이 정보를 가리지 않는지, 렌더러가 승인된 스틸을 재현하는지 확인하세요.
체크포인트: 가장 어려운 구간이 모션 상태에서도 제대로 작동하며 전체 렌더링을 재현할 수 있습니다.
7단계: 내보내기 파일을 검토한 뒤 버전 비교하기
실제로 내보낸 파일을 소리와 함께 처음부터 끝까지 재생하세요. 그런 다음 음소거 상태로 보고, 선택한 프레임도 검사하세요. 각 패스는 어색한 리듬, 약한 시각적 스토리텔링, 국소적인 렌더링 문제 등 서로 다른 결함을 찾아냅니다.
수정 지시는 구체적으로 작성하세요. “더 좋게 만들어 주세요”라고 하는 대신 타임스탬프, 관찰된 문제, 원하는 결과를 명시하세요. 나란히 비교할 때는 타이밍을 맞추고 동일한 재생 조건을 사용해야 합니다. 그렇지 않으면 더 큰 사운드트랙 볼륨이나 이동한 컷 때문에 비교 결과가 왜곡될 수 있습니다.
내보낸 영상을 승인된 브리프와 대조해 검토하세요.
오프닝의 정체성, 메시지, 텍스트 가독성,
에셋 일관성, 대표 모션, 전환, 사운드 정렬,
자연스러운 엔딩, 최종 홀드를 확인하세요.
각 결함에 대해 타임스탬프, 시각적 또는 청각적 근거,
시청자에게 미치는 영향, 구체적인 수정안을 보고하세요.
이전 내보내기와 현재 내보내기를 동일한 기준으로 비교하세요.
콘택트 시트나 렌더링 성공 여부만으로 통과 판정을 내리지 마세요.
영상을 완성했다고 판단하기 전에 다음 사항을 확인하세요.
- 첫 프레임, 모든 전환, 마지막 프레임이 올바르게 렌더링됩니다.
- 목표 크기에서 텍스트를 읽을 수 있으며 화면에 충분히 오래 유지됩니다.
- 오디오가 전체 구간에서 재생되고, 효과음이 동작에 맞으며, 엔딩이 의도적으로 들립니다.
- 파일이 열리고, 탐색할 수 있으며, 끝까지 재생됩니다.
- 해상도, 화면비, 프레임 레이트, 길이가 브리프와 일치합니다.
- 편집 가능한 소스와 필요한 에셋이 포함되어 있으며, 제작 크레디트와 사용 범위가 그대로 유지됩니다.
재사용 가능한 레퍼런스 라이브러리 유지하기
유용한 라이브러리에는 보기 좋은 썸네일 이상의 정보가 기록됩니다. 원 제작자와 링크, 영상을 수집한 이유, 모션 유형, 대상 시청자 또는 사용 사례, 에셋 요구 사항, 분석 노트, 현재 상태를 저장하세요.
다음과 같은 간단한 진행 단계를 사용하세요. 아이디어 → 분석 완료 → 제작 중 → 완성. 먼저 이름, 링크, 저장한 이유라는 세 가지 필드만으로 아이디어를 추가하세요. 실제 프로젝트와 관련이 생기면 정보를 보강하세요. 표는 비교에 적합하고, 갤러리는 시각적 탐색에 적합하며, 상태 보드는 사용할 준비가 된 항목을 보여 줍니다.
자주 묻는 질문
완성도 높은 영상에 3D가 필요한가요?
아니요. 이 프로젝트들에서는 타이포그래피, 카드, 제품 배치를 2D 도구로 처리한 경우가 많았습니다. 원근이나 공간적 움직임이 메시지의 핵심일 때 3D를 사용하세요. 렌더링 복잡성을 추가하려면 눈에 보이는 문제를 해결해야 합니다.
최종 작업이 움직이는데 왜 스틸을 검토하나요?
스틸을 사용하면 잘못된 위계, 일관되지 않은 에셋, 읽을 수 없는 카피, 약한 구도를 적은 비용으로 발견할 수 있습니다. 스틸 검토가 모션 검토를 대체하지는 않습니다. 먼저 시각 시스템을 승인한 뒤, 가장 어려운 모션 구간을 사운드와 함께 테스트하세요.
영상이 정적으로 느껴지면 어떻게 해야 하나요?
에너지가 사라지는 지점을 살펴보세요. 긴 홀드, 반복적인 이징, 대비가 없는 사운드트랙, 정보를 추가하지 않는 샷이 원인일 수 있습니다. 의도적으로 읽기 위한 정지 구간은 유지하세요. 모든 곳에 움직임을 추가하면 영상을 따라가기 더 어려워질 수 있습니다.
첫 번째 연습 프로젝트
제품 하나와 메시지 하나를 선택하세요. 적절한 유형의 레퍼런스를 고르고 비트를 분석한 뒤, 대표 모션 하나가 포함된 독창적인 브리프를 작성하세요. 사운드를 선택하고 대표 스틸을 준비한 다음, 어려운 구간을 승인받고 전체 내보내기 파일을 렌더링하고 검토하세요.
메시지, 화면, 사운드, 납품 결과물이 모두 브리프를 충족하면 작업을 마치세요. 소스와 검토 노트를 함께 보관하세요. 그러면 또 다른 모호한 프롬프트에서 다시 시작하는 것보다 다음 수정이 쉬워집니다.