[Antigravity × Remotion] 인기 유튜브 숏폼 스타일 그대로! AI와 함께 텍스트만 바꿔 다음 영상 찍어내는 '마법의 템플릿' 제작기
# [Antigravity × Remotion] 인기 유튜브 숏폼 스타일 그대로! AI와 함께 텍스트만 바꿔 다음 영상 찍어내는 '마법의 템플릿' 제작기
## 📝 한줄 요약
마음에 드는 인기 유튜브 쇼츠 영상의 편집 스타일을 AI와 함께 단 20초 만에 완벽히 분석한 뒤, 이를 누구나 대사와 이미지만 바꾸면 5분 만에 완성도 높은 비디오로 찍어낼 수 있는 '재사용 카드형 프레임 템플릿'으로 Remotion에 구축했습니다. 매번 편집 툴에서 자막과 블러 효과를 잡던 번거로움을 완전히 해결하여 제작 시간을 1편당 3시간에서 단 5분으로 단축하고, 브랜드의 일관된 시각적 정체성을 완벽하게 확립했습니다.
**바쁘시면 이것만 읽어도 돼요:**
- **사용한 도구와 목표**: AI 코딩 비서 Antigravity와 리액트 기반 영상 합성 엔진 Remotion을 결합하여, 유튜브 쇼츠의 최신 트렌드 레이아웃을 고스란히 이식한 재사용 가능한 '카드형 비디오 프레임' 구축.
- **과정 중 깨달은 점**: 영상의 시각적 완성도뿐만 아니라 비즈니스 스케일업을 위해서는 매번 일회성으로 영상을 편집하는 것이 아니라, 설정 데이터(JSON)와 템플릿을 완전히 분리해 '한 번 구축하면 평생 재활용하는 시스템'을 만드는 것이 핵심이라는 점을 깨달았습니다.
- **핵심 해결 방법**: 유튜브 레퍼런스의 모서리가 둥근 중앙 카드, 배경 블러, 자막 테두리 두께 등의 상세 비율 스펙을 AI에게 의뢰해 추출하고, Remotion의 합성 코드를 고도화해 다크 테두리 블러 비율을 90%에서 94%까지 디테일하게 피드백 조정하며 최상의 가독성을 찾아냈습니다.
- **특별히 인상적이었던 순간**: 다중 프로젝트 간에 자막이 엉키는 기술적 충돌을 리모션 조건부 가드 코드로 깔끔하게 제어하는 한편, AI 이미지 생성 시 구글 Imagen/Flow의 민감한 정책 위반 필터를 한글 텍스트 제거 및 간결한 영어 영문 우회 묘사로 2차에 걸쳐 안전하게 풀어내며 위기를 극복한 순간이었습니다.
- **확장성/재사용성**: 완성된 '마법의 프레임'은 다른 커피 전문점이나 F&B 매장, 혹은 아예 다른 업종의 홍보 숏폼을 제작할 때도 별도의 편집 기술 없이 설정 파일의 이미지와 대사 텍스트만 덮어써 주면 5분 만에 브랜딩 비디오로 재탄생시킬 수 있습니다.
- **배운 교훈**: AI를 이미지 생성이나 프로그래밍에 활용할 때 막히거나 오류가 발생하면 포기하지 말고, 문맥을 세분화하여 단계적으로 수정 요청을 하거나 우회 템플릿을 설계하는 구조적 협업이 가장 효과적이라는 점을 배웠습니다.
---
## 🎯 이런 분들께 도움돼요
- **인기 유튜브나 인스타 릴스 편집 스타일을** 내 영상에 그대로 가져와서 빠르고 트렌디하게 연출해보고 싶은 마케터 및 1인 크리에이터
- **매번 영상 만들 때마다** 편집기 자막 폰트 크기 조절, 배경 음악 삽입, 싱크 맞추기 등의 수작업 노가다에서 해방되고 싶으신 분들
- **통일감 있는 숏폼 시리즈를** 규칙적으로 양산하여 브랜드 채널의 시각적 신뢰도와 아이덴티티를 100% 견고하게 구축하고 싶으신 1인 창업가
---
## 😫 문제 상황 (Before)
가상 카페 브랜드 '카페메이트'의 숏폼 브랜드 필름 1화를 멋지게 제작한 뒤, 2화, 3화 에피소드를 양산해 나가는 로드맵을 그리고 있었습니다.
하지만 영상의 종류나 배경이 달라질 때마다 매번 영상 편집 도구를 켜서 자막의 외곽선 두께를 다시 조정하고, 배경을 블러 처리하며, 중앙 정렬 카드의 크기를 수동으로 맞추는 작업은 막대한 시간 낭비였습니다. 자칫 디테일을 조금이라도 놓치면 채널에 올라가는 영상들의 톤앤매너가 미세하게 비틀어져 시각적 정체성을 해치기 십상이었습니다.
비개발자로서 매번 디자인 시스템을 다시 세팅하는 번거로움을 원천 차단하고, **"레퍼런스로 삼은 잘 만든 유튜브 쇼츠의 세련된 디자인 레이아웃(프레임)을 그대로 고정해 두고, 텍스트와 에셋만 바꿔 끼우면 10분 안에 완성되는 마법의 복제 프레임"**을 반드시 완성해야만 숏폼 대량 제작 파이프라인을 굴릴 수 있었습니다.
---
## 🛠️ 사용한 도구
- **AI 코딩 및 협업**: Google Antigravity (Advanced Agentic Coding Agent)
- **비디오 합성 및 렌더링**: Remotion (React/TypeScript 기반 자동 영상 그래픽 렌더러)
- **이미지 생성 AI**: Google Gemini (실사 웰메이드 그래픽 엔진)
- **비디오 생성 AI**: Google Veo 3.1 (`veo_native_speech` 한국어 성우 모드 탑재)
- **프로젝트 모니터링**: Vanilla JS zero-dependency dashboard (Python http.server 구동)
---
## 🔧 작업 과정
### [1단계: 인기 유튜브 쇼츠의 편집 비밀을 파헤치다] - 레퍼런스의 스타일 요소 정밀 분석
제일 먼저 해야 할 일은 시청자의 눈길을 사로잡은 잘 만든 유튜브 쇼츠(세모내모 채널 등)의 편집 기법을 온전히 훔쳐 오는 것이었습니다. 저는 레퍼런스 비디오를 AI에게 넘겨주며 내용이 아닌 '비주얼 스펙'만 정밀하게 뜯어봐 달라고 요청했습니다.
```
아래 참고 영상의 내용은 따라하지 말고 편집 스타일만 분석해줘.
참고 영상: https://youtube.com/shorts/dCR-fGe9_iQ?si=KOuID21fr5U_uBNy
분석 구간: 0:00~0:20
```
AI는 영상을 읽고 비개발자인 저로서는 놓치기 쉬운 디자인 요소들을 다음과 같이 완벽한 기획 스펙서로 일목요연하게 구조화해 주었습니다.
- **배경 연출**: 원본 화면을 바깥 영역에 넓게 배치한 뒤 강한 가우시안 블러(Gaussian Blur) 처리를 하여 아늑하고 트렌디한 깊이감 부여
- **중앙 카드**: 모서리가 둥글게 깎인 반투명 중앙 포커스 카드를 배치하여 스마트폰 시청자들이 정보에 완전히 집중할 수 있게 설계
- **자막 폰트**: 배경과 확연히 대조되도록 두껍고 짙은 텍스트 스트로크(외곽선)를 적용해 가독성 극대화
- **레이아웃 장식**: 화면 상단에 일관된 로고 배너와 카테고리 태그를 삽입해 전문 브랜드 필름으로서의 신뢰감 확보
---
### [2단계: Remotion 리액트 코드로 마법의 프레임 이식하기] - 템플릿화와 카드 비율 미세조정
분석 완료된 스펙을 토대로 저는 AI에게 저희 '카페메이트' 숏폼 시리즈에 이 트렌디한 편집 스타일을 온전히 녹여낸 버전 2 리액트 합성 컴포넌트를 빌드해 달라고 요청했습니다.
```
카페메이트 마스코트 숏폼 시리즈 영상을 새로운 편집 스타일을 적용해서 버전2로 만들어줘.
```
AI는 즉시 소스코드 파일을 뜯어 컴포넌트를 고도화하기 시작했습니다. 원본 영상을 복사해 배경으로 깔고 가우시안 블러 스타일을 준 뒤, 그 위에 모서리가 둥글고 원목 느낌이 나는 줌-인 효과의 중앙 프레임 카드를 얹었습니다. 그리고 텍스트 스트로크가 적용된 자막을 spring 애니메이션 모션과 함께 중앙 하단에 배치했습니다.
하지만 첫 테스트 빌드를 돌렸을 때 카드 테두리의 블러 영역이 지나치게 두꺼워 중앙의 예쁜 카페 이미지들이 작게 갇혀 있는 느낌이 들었습니다. 저는 즉각 구체적인 수치 피드백을 주었습니다.
```
블러처리된 테두리를 좀 더 얇게 해줘
```
AI는 이 피드백을 받아들여 중앙 카드의 가로 폭 비율을 기존 90%에서 **94%**로 넓히고, 세로 높이 역시 54%에서 **64%**로 확장하여 테두리 블러 비율을 슬림하게 깎아냈습니다. 상단 top 마진도 14%로 완벽하게 미세 조정하여 시각적 답답함을 완전히 털어냈습니다.
---
### [3단계: 평생 우려먹는 템플릿 완성] - 단 5분 만에 버전별 렌더링 무한 복제 및 이력 보관
이렇게 완성한 프레임(폼)이 일회성에 그치지 않도록, AI는 설정 파일(JSON)의 텍스트 대사들과 이미지 리소스 경로들만 변경하면 리모션 합성 빌더가 즉각 동일한 비율과 블러 모션을 지닌 새 영상으로 출력하도록 시스템 파이프라인을 완전히 구축해 주었습니다.
특히 버전 간의 비주얼을 번갈아 가며 꼼꼼히 검증하고 싶었던 저를 위해, AI는 렌더링 시 기존 파일을 무작정 덮어쓰지 않도록 렌더링 코드를 유연하게 조율해 주었습니다.
```
기존 영상과 수정된 영상 2가지 다 볼 수 있었으면 좋겠어 원래 영상은 안 보이는데 어디 있어?
```
AI는 빌드 설정 시스템을 확장하여, 동일한 소스 데이터를 기반으로 하되 스타일 옵션만 다르게 적용해 아래 3가지 버전을 각각 다른 파일로 안전하게 생성해 수납해 주었습니다.
1. `final_v1_flat.mp4` (전체 화면 꽉 찬 클래식 버전)
2. `final_v2_90.mp4` (90% 카드 레이아웃의 슬림 버전)
3. `final_v2_94.mp4` (94% 확장형 최종 트렌디 버전)
이제 저는 대시보드나 설정 JSON 파일만 열어 텍스트와 그림만 쓱 바꾸고 빌드 명령을 누르면, **단 5분 만에 2화, 3화가 똑같은 황금비율 프레임**을 입고 튀어나오는 마법 같은 대량 양산 폼을 온전히 소유하게 되었습니다.
---
### [4단계: 예상치 못한 위기 해결] - 구글 이미지/비디오 모델 정책 위반 필터 우회 작전
신나게 2차 에피소드를 생성하려는데 갑자기 예상치 못한 장벽에 부딪혔습니다. 첫 번째 씬의 캐릭터 동작을 '합장'에서 '양손을 반쯤 흔드는 제스처'로 바꾸기 위해 이미지와 비디오 프롬프트를 갱신하는 순간, 구글의 Imagen/Flow AI 엔진이 **"정책 위반(Policy Violation)"** 경고를 뱉으며 생성을 거부한 것입니다.
```
이 프롬프트 이용하니깐 구글 정책위반이라고 하는데 어떻게 바꿔야해?
```
당황한 저에게 AI 어시스턴트는 구글의 안전 필터 작동 원리를 명쾌하게 분석해 주었습니다. 한국인을 특정하는 단어("Korean")나 내부 고유 기호("cafe-mate"), 그리고 한글 대사가 프롬프트 텍스트에 포함되었을 때 문자 검열 필터가 민감하게 반응하여 사람 생성을 차단한 것이 원인이었습니다.
AI는 두 단계에 걸쳐 프롬프트 구조 개편을 감행했습니다.
- **1차 조치**: 인종/브랜드 고유 명사 대신 중립적인 옷차림과 물리적 제스처 묘사 위주로 수정
- **2차 조치 (초간결 영문 우회)**: 여전히 발생하는 검열에 대응하여 프롬프트 내 모든 한글 텍스트 대사를 완전히 배제하고, 오직 순수 100% 영문으로만 동작과 피사체를 극도로 간결하게 묘사하는 안전 프롬프트 작성
```
그래도 위반이라는데?
```
이 끈질긴 2차 우회 시도를 통해 AI는 마침내 구글 정책 필터를 완벽히 통과하는 안전 코드를 찾아냈고, 마스코트가 양손을 반쯤 들어 반갑게 손을 흔들며 다정하게 손님을 맞이하는 아름다운 고품질 비디오 소스를 아무런 차단 없이 깔끔하게 추출해 내는 데 성공했습니다.
---
## ✅ 결과 (After)
이번에 구축한 Remotion 기반 '마법의 카드형 프레임 템플릿' 덕분에 숏폼 기획과 편집의 전체 게임 체인저가 되었습니다.
### Before vs After
| 항목 | 기존 방식 (Before) | AI 파이프라인 (After) |
|------|--------|-------|
| **1편당 제작 및 편집 시간** | 약 3시간 (자막 외곽선 수동 편집, 블러 효과 재현, 비디오 크기 조정) | **단 5분** (설정 JSON 파일의 텍스트와 이미지만 갈아끼운 후 자동 빌드) |
| **비주얼 브랜드 일관성** | 제작할 때마다 레이아웃과 블러 비율이 미세하게 틀어짐 | **94% 카드 프레임의 규격화**로 어떤 콘텐츠든 100% 균일한 톤앤매너 유지 |
| **신규 프로젝트 양산 속도** | 새 영상 기획 시 디자인 레이아웃부터 다시 고민하고 빌드 | 이미 완성된 템플릿 폼을 그대로 가져와 **텍스트만 바꿔 즉시 양산 가능** |
| **정책 규제 및 에러 해결** | 생성형 AI의 정책 필터 차단이나 기술적 오류 시 해결 방법을 몰라 중단 | AI의 **검열 원인 진단 및 우회 프롬프트 설계**로 즉각 돌파 |
### 결과물
- **버전 2 최종 완성 영상**: `projects/cafe_mate_shorts/outputs/ep01/final_v2_94.mp4` (48초, 39.6 MB, 94% 둥근 카드 프레임 및 spring 자막 모션 반영)
- **버전별 비교 비디오 3종 세트**: 동일 폴더 내 flat, v2_90, v2_94 버전 보관 완료로 시각 피드백 대조 가능
---
## 💬 이 과정에서 배운 AI 활용 팁
### 효과적이었던 것
1. **레퍼런스 스타일 분석의 자동화**: 내가 흉내 내고 싶은 멋진 쇼츠 영상이 있다면 시간 들여 캡처하지 말고 AI에게 "이 구간의 편집 기법, 자막 스타일, 레이아웃 스펙만 뜯어서 기술적으로 요약해 줘"라고 요청하는 것이 트렌드를 흡수하는 가장 빠른 지름길입니다.
2. **템플릿과 데이터의 완전한 분리**: 비디오 코드에 값을 직접 박아 넣지(하드코딩) 마세요. `scenes.json`이나 `project.json` 같은 설정용 파일에 글씨와 이미지만 연동되게 디자인 뼈대(프레임)를 고정해 둠으로써 무한 양산 구조를 완성해야 합니다.
### 이렇게 하면 안 돼요
1. **AI 정책 필터에 정면 대결 금지**: "한국인", "브랜드명" 등에서 AI가 생성 차단 오류를 뿜을 때 억지로 단어를 반복해 넣지 마세요. 오히려 프롬프트를 100% 영문으로 바꾸고, 인물 세부 인종 명사를 일반적인 성별과 옷차림(예: black blazer) 위주의 중립적 묘사로 한 단계 낮춰 쓰는 것이 필터를 부드럽게 통과하는 요령입니다.
---
## 🌍 다른 업무에 적용한다면?
- **쇼핑몰 신상품 소개 쇼츠**: 이 94% 블러 카드 템플릿 폼을 그대로 가져와서, 중앙 카드 부분에 신상 의류 이미지와 상품 설명 텍스트만 넣으면 매주 수십 개의 신상 소개 광고 영상을 10분 만에 릴스로 뽑아낼 수 있습니다.
- **맛집/F&B 카드뉴스 비디오**: 매장의 신메뉴 시즐링 컷을 중앙 카드에 띄우고 하단에 텍스트 스트로크 자막을 입혀 인스타그램 릴스 및 네이버 모먼트용 홍보 클립으로 신속하게 스케일업할 수 있습니다.
https://files-us-east-1.t-cdn.net/files/73XilHFJs15gHFRWcvgDS
