# [Claude Code] AI 클론 아바타 + 모션그래픽, 혼자서 유튜브 영상 만든 후기
## 📝 한줄 요약
내 얼굴 클론 아바타와 Rough.js 손글씨 모션그래픽을 조합해서, 외주 없이 57초 유튜브 프로모 영상을 완성했습니다.
**바쁘시면 이것만 읽어도 돼요:**
- 내 얼굴/목소리 클론 아바타를 업그레이드하고, Claude Code로 모션그래픽 영상을 제작해서 합성
- AI가 한 번에 완벽하게 못 해도 대화하면서 고쳐나가면 된다
- 방법이 안 되면 AI가 알아서 우회 전략을 찾아준다 (자막 필터 없을 때 다른 방식으로 해결)
- Rough.js로 손글씨 느낌의 모션그래픽이 실제로 만들어졌을 때 "오!" 했다
- 한번 만든 구조를 재활용해서 다음 영상도 빠르게 만들 수 있다
## 🎯 이런 분들께 도움돼요
- AI로 콘텐츠 만들어보고 싶은 1인 크리에이터
- 영상 제작 외주 비용이 부담되는 분
- 아바타 영상에 모션그래픽을 더해서 퀄리티를 올리고 싶은 분
## 😫 문제 상황 (Before)
아바타 영상만 단독으로 쓰면 화면이 밋밋합니다. 숫자, 통계, 키워드 같은 정보를 시각적으로 보여줘야 하는데, 아바타가 말로만 전달하면 임팩트가 약합니다.
모션그래픽을 넣고 싶지만 After Effects 같은 전문 도구를 쓸 줄 모르고, 외주를 맡기면 비용과 시간이 듭니다. 수정 사항이 생길 때마다 다시 요청해야 하는 것도 번거롭습니다.
## 🛠️ 사용한 도구
- **AI 코딩**: Claude Code (Claude Opus)
- **모션그래픽**: Remotion (React 기반 영상 프레임워크) + Rough.js (손글씨 드로잉)
- **아바타**: 얼굴 클론 아바타 + ElevenLabs 목소리 클론
- **영상 합성**: FFmpeg
---
## 🔧 작업 과정
### 내 클론을 더 나답게 업그레이드
영상 제작에 앞서, 이전 버전보다 더 나다운 클론을 만들고 싶었습니다.
**얼굴 클론 아바타** — 조명을 새로 구매해서 얼굴이 선명하게 나오도록 촬영했습니다. 덕분에 이전 버전보다 훨씬 더 내 얼굴과 닮은 클론이 만들어졌습니다.
**목소리 클론** — ElevenLabs에 내 진짜 목소리를 입력했습니다. 영어 글을 몇 줄 읽어서 학습시켰는데, 완벽한 발음보다는 내 발음과 비슷하게 만들었습니다. 불완전하더라도 더 나답게 느껴지도록요.
---
### A/B 테스트로 모션그래픽 스타일 결정
어떤 스타일의 모션그래픽이 좋을지 몰라서, Claude Code에게 두 가지 버전을 만들어달라고 했습니다.
```
Two 10-second test videos:
Version A (clean motion graphics) vs Version B (rough.js hand-drawn style)
```
Version A는 깔끔한 모션그래픽, Version B는 Rough.js를 활용한 손글씨 느낌이었습니다. 두 개를 나란히 비교해보니 Version B의 핸드드로잉 스타일이 훨씬 개성 있고 눈에 띄었습니다. 바로 확정했습니다.
---
### 첫 시도 — 올인원 방식의 한계
처음에는 아바타 영상과 모션그래픽을 Remotion 안에서 한 번에 처리하려고 했습니다.
```
57-second K-Beauty promo video with avatar PIP + rough.js motion graphics
```
Claude Code가 아바타 PIP, 모션그래픽, 씬 전환을 모두 포함한 컴포지션을 만들어줬는데, 이 방식은 Remotion이 제대로 작동하지 않았습니다. 아바타 영상 위에 모션그래픽을 올리는 구조가 복잡해지면서 문제가 생긴 거죠.
그래서 전략을 바꿨습니다. **모션그래픽은 Remotion으로 따로 렌더링하고, 아바타 영상과는 FFmpeg으로 합성**하는 분리 방식으로요.
---
### 57초 모션그래픽 영상 제작
분리 전략을 세우고 Claude Code에게 구간별 스펙을 상세하게 전달했습니다.
```
Remotion 프로젝트에서 57초짜리 모션그래픽 영상을 만들어줘.
이건 아바타 영상과 나중에 FFmpeg으로 합성할 거야.
Remotion은 모션그래픽만 담당.
구간별 모션그래픽:
0:00-0:08 "$600B" 손글씨로 카운트업 + "Global Beauty Market" 타이핑
0:08-0:14 빈 화면 (아바타 풀스크린 대체 구간)
0:14-0:16 한국 국기 아이콘이 Rough.js로 그려짐
0:16-0:28 카드 3개 순차 등장
0:28-0:47 네 기둥 순차 빌드업
0:47-0:57 빈 화면 + 마지막 2초 CTA 텍스트
```
Claude Code가 각 구간을 별도 컴포넌트로 만들어서 조립해줬습니다. Rough.js로 실제 손글씨처럼 흔들리는 선이 그려지는 걸 보고 "오!" 했습니다. 생각보다 훨씬 자연스러웠거든요.
---
### 태극기 — AI가 놓친 부분을 직접 짚다
태극기를 Rough.js로 그리는 장면에서 한 가지 문제가 있었습니다. 외곽선만 그려지고 안쪽 빨강/파랑이 채색되지 않았던 거죠.
```
태극기의 원 안, 빨강 파랑 부분까지 다 색칠해줘야해
```
이렇게 요청하자 Claude Code가 Canvas API로 S-커브 태극 모양을 채색하고, Rough.js로 손글씨 외곽선을 덧씌우는 방식으로 해결했습니다. **AI가 한 번에 완벽하게 못 하더라도, 이렇게 대화하면서 고쳐나가면 됩니다.**
---
### 글씨체도 손글씨로
모션그래픽의 드로잉은 손글씨 느낌인데, 텍스트 폰트는 딱딱한 기본체라 어울리지 않았습니다.
```
글씨체를 손글씨 느낌 나는 글씨체로 하고싶어
```
Claude Code가 Google Fonts에서 Caveat라는 손글씨 폰트를 찾아서 전체 컴포넌트에 적용해줬습니다. Rough.js 드로잉과 Caveat 폰트의 조합이 딱 맞았습니다.
---
### FFmpeg 합성 — 한 줄 요청으로 복잡한 명령어 생성
렌더링된 모션그래픽과 아바타 영상을 합성할 차례였습니다. 구간마다 모션그래픽 풀스크린 + 아바타 PIP, 또는 아바타 풀스크린으로 전환되어야 하는 복잡한 구조인데, 합성 규칙만 설명하니 Claude Code가 FFmpeg 명령어를 한 번에 만들어줬습니다.
```
motion_graphics.mp4와 아바타 영상을 FFmpeg으로 합성해줘.
0:00-0:08 → 모션그래픽 풀스크린 + 아바타 PIP
0:08-0:14 → 아바타 풀스크린
0:14-0:47 → 모션그래픽 풀스크린 + 아바타 PIP
0:47-0:55 → 아바타 풀스크린
PIP: 270x270, 우측 하단, 라운드 사각형
```
라운드 사각형 PIP, 구간별 전환, 오디오 트랙 선택까지 포함된 복잡한 명령어를 직접 짤 생각을 하면 막막했을 텐데, 자연어로 설명만 하니까 바로 완성됐습니다.
---
### 자막 추가 — 안 되면 우회한다
모션그래픽 구간에 자막을 넣고 싶었습니다.
```
모션그래픽 풀스크린 + 아바타 PIP 구간에 자막을 넣어줘
```
그런데 제 Mac의 FFmpeg에 자막 필터(libass, drawtext)가 설치되어 있지 않았습니다. 보통이라면 여기서 막혔을 텐데, Claude Code가 알아서 **Remotion 쪽에서 자막을 직접 영상에 번인하는 방식**으로 우회했습니다. 문제가 생겼을 때 다른 길을 찾아주는 게 인상적이었습니다.
이후 자막 스타일(흰색 배경 + 검정 텍스트)과 긴 자막 분할 같은 세부 조정도 대화로 해결했습니다.
```
자막, 흰색 배경에 텍스트는 검정색으로 해줘
```
```
0:41-0:46 자막이 너무 길어. 세 개로 나눠줘.
```
---
## ✅ 결과 (After)
### Before vs After
| 항목 | Before | After |
|------|--------|-------|
| 아바타 영상 | 말로만 전달, 화면 밋밋 | 모션그래픽 + 아바타 PIP 조합 |
| 모션그래픽 제작 | 전문 도구 필요, 외주 비용 | Claude Code와 대화로 직접 제작 |
| 수정 | 외주 업체에 다시 요청 | 채팅으로 바로 수정 (자막, 스타일, 구간 등) |
| 재활용성 | 매번 새로 제작 | 구조 재활용으로 시리즈 영상 빠르게 제작 가능 |
### 결과물
- 57초 유튜브 프로모 영상 (1920x1080, 30fps)
- 아바타 클론 + Rough.js 손글씨 모션그래픽 + 구간별 PIP 전환 + 자막
## 💬 이 과정에서 배운 AI 활용 팁
### 효과적이었던 것
1. **AI가 완벽하지 않아도 괜찮다** — 태극기 채색처럼 AI가 놓치는 부분이 있습니다. "이것도 해줘"라고 말하면 됩니다. 대화하면서 완성도를 높여가는 게 핵심입니다.
2. **구체적으로 요청할수록 좋다** — "모션그래픽 만들어줘"보다 구간별 타이밍, PIP 크기, 위치, 색상까지 상세하게 전달하면 한 번에 원하는 결과에 가까워집니다.
3. **안 되면 AI가 우회한다** — FFmpeg 자막 필터가 없자 Remotion으로 우회한 것처럼, 막히는 상황에서 다른 방법을 알아서 찾아줍니다.
### 이렇게 하면 안 돼요
1. **한 번에 모든 걸 넣으려 하지 마세요** — 올인원 방식으로 아바타+모션그래픽을 한꺼번에 처리하려다 실패했습니다. 역할을 분리(모션그래픽 따로 → 합성 따로)하는 게 훨씬 안정적이었습니다.
2. **미리보기 없이 바로 렌더링하지 마세요** — 먼저 미리보기로 확인하고, 수정 사항을 다 잡은 다음 렌더링하는 게 시간을 아낍니다.
## 🌍 다른 업무에 적용한다면?
- **교육 콘텐츠**: 강의 영상에 핵심 개념을 모션그래픽으로 시각화
- **제품 소개 영상**: 스펙, 특징을 손글씨 스타일로 하나씩 등장시키는 연출
- **SNS 숏폼**: 같은 구조에서 구간과 내용만 바꿔서 시리즈 제작
## 🚀 앞으로의 계획
- 같은 구조를 재활용해서 K-Beauty 시리즈 영상을 계속 만들 예정
- 검수 외에 90% 이상을 자동화할 수 있도록 스킬로 구현할 계획 — 스크립트만 넣으면 모션그래픽 + 아바타 + 합성까지 자동으로
## 📋 재사용 가능한 프롬프트
### 프롬프트 1: 모션그래픽 스타일 A/B 테스트
> 10초짜리 테스트 영상 2개를 만들어줘.
> Version A는 [스타일1], Version B는 [스타일2].
> 1920x1080, 30fps, 배경색 [색상코드], 액센트 [색상코드]
### 프롬프트 2: 구간별 모션그래픽 제작
> Remotion 프로젝트에서 [N]초짜리 모션그래픽 영상을 만들어줘.
> 이건 아바타 영상과 나중에 FFmpeg으로 합성할 거야. Remotion은 모션그래픽만 담당.
> 구간별 모션그래픽:
> [시간] [내용]
> [시간] 빈 화면 (아바타 풀스크린 대체 구간)
> ...
### 프롬프트 3: FFmpeg 구간별 합성
> [모션그래픽 파일]과 [아바타 파일]을 FFmpeg으로 합성해줘.
> [시간] → 모션그래픽 풀스크린 + 아바타 PIP
> [시간] → 아바타 풀스크린
> PIP: [크기], [위치], 라운드 사각형 (r=[값])
> 오디오: [파일]의 오디오만 사용나 대신 내 클론 아바타가 출현하고, remotion으로 편집 - 유튜브 영상 만든 후기
2
