## 소개
다양한 영상 생성 도구를 테스트하면서 많은 시행착오를 겪고, 저는 아직 영상 제작에는 비용 부담과 경험 부족이 큰 장애라고 판단해, 먼저 *Remotion 기반 영상 제작에 익숙해져야 겠다** 라는 생각으로 도전해 보았습니다.
Remotion AI와 Claude Code를 활용해 기존에 바이브 코딩으로 만들었던 컨텐츠를 기반으로 *띠별 운세 정보를 기반으로 숏폼 영상 자동 생성**에 도전했습니다.
https://fortune-tv.netlify.app/
단순히 영상 제작이 아니라, *반복되는 콘텐츠 제작 과정을 자동화**하는 것이 목표였습니다.
---
## 진행 방법
### 1. 사용 도구
* Remotion (React 기반 영상 생성)
* Claude Code (코드 생성 및 구조 설계)
* Cursor (개발 환경)
### 2. 접근 방식
* 운세 데이터를 기반으로 영상이 생성되도록 구조 설계
Claude Code를 활용한 *바이브 코딩 방식**으로 빠르게 구현
* 반복적인 수정 → 즉시 미리보기 → 구조 개선 사이클 반복
### 3. 전체 흐름
1. 데이터 수집
- 운세 DB 데이터 조회 → mapping 데이터 생성
2. 영상 생성
- 날짜, 테마 지정 → Remotion 컴포넌트 기반 렌더링
### 4. 프로젝트 구 조
1. 프로젝트 전체 디렉토리 구조
### 5. 핵심 구현 포인트
* 씬 단위로 영상 구조 분리
* 각 씬별 역할 정의 (인트로 / 본문 / CTA)
* 여러 테마 지정 구분 (dark, amber, navy, purple)
* 텍스트 애니메이션 중심 구성
* 타이밍 싱크를 맞추기 위해 프레임 단위로 애니메이션 제어
* 프로젝트 세부 구조
---
## 결과와 배운 점
### 1. 얻은 결과
데이터만 있다면 *숏폼 영상 자동 생성 파이프라인 구축 가능**
* 텍스트 기반 콘텐츠는 충분히 자동화 가능하다는 확신
### 2. 배운 점
* 영상 제작에서 중요한 것은
* 씬 구조 설계
* 애니메이션 타이밍 싱크
한 번에 완성되지 않고 *여러 번 보완하면서 완성도 상승**
### 3. 시행착오
* 씬 간 타이밍이 어긋나 어색한 영상 발생
* 텍스트 애니메이션 타이밍 조정
→ 여러 단계 수정으로 개선
### 4. 앞으로의 계획
* TTS 적용
* 더 다양한 템플릿 구조 실험
* 데이터 소스 확장
* 완전 자동 콘텐츠 제작 시스템 구축
---
## 도움 받은 글
* Remotion 공식 가이드 및 내부 프로젝트 문서 참고
