YouTube Video Factory
코드로 영상을 만드는 Remotion 기반 YouTube 비디오 생성 시스템. 재사용 가능한 씬 라이브러리와 디자인 토큰으로 영상을 프로그래밍합니다.
Overview
프로젝트 개요
개발자/기술 주제의 YouTube 영상을 코드로 제작하는 시스템입니다. React 컴포넌트로 씬을 구성하고, Remotion으로 렌더링하여 디자인 일관성과 제작 속도를 동시에 확보합니다.
19개의 제너릭 씬 컴포넌트(Intro, Code, Terminal, Chart 등)를 Props만 바꿔 조합하면 새 영상이 완성됩니다. 현재 13개 영상이 이 시스템으로 제작되었습니다.
Architecture
프로젝트 구조
youtube/
├── src/
│ ├── index.ts # Remotion 초기화
│ ├── Root.tsx # Composition 레지스트리 (180줄)
│ │
│ ├── scenes/generic/ # 재사용 씬 라이브러리 (3,500+줄)
│ │ ├── DesignTokens.ts # 색상·폰트·애니메이션 상수
│ │ ├── IntroScene.tsx # 로고 + 제목 등장
│ │ ├── SlideScene.tsx # 멀티 레이아웃 (446줄)
│ │ ├── CodeScene.tsx # 코드 블록 애니메이션
│ │ ├── TerminalScene.tsx # 터미널 명령어 연출
│ │ ├── ComparisonScene.tsx # 좌우 비교
│ │ ├── DataChartScene.tsx # 데이터 시각화
│ │ └── ... # +12개 씬
│ │
│ └── videos/ # 개별 영상 작품
│ ├── template/ # 신규 영상 템플릿
│ ├── ai-series/ # AI 시리즈 (5개)
│ ├── dev-journal/ # 개발 일지
│ ├── ai-productivity/ # AI 생산성
│ └── claude-levels/ # Claude 강좌
│
├── public/ # 로고, 음악, GIF 등 에셋
├── remotion.config.ts # Remotion 설정
└── package.jsonGeneric Scenes (3,500+줄)
19개 재사용 씬 컴포넌트 라이브러리. Intro, Slide, Code, Terminal, Chart, Quote, Comparison 등 Props 기반으로 콘텐츠를 자유롭게 구성합니다.
DesignTokens 시스템
색상, 폰트, 레이아웃, 애니메이션 상수를 중앙 관리. 모든 씬에서 일관된 비주얼 스타일을 유지하며, 테마 변경 시 한 곳만 수정하면 됩니다.
Key Features
주요 기능
19개 재사용 씬 라이브러리
Intro, Outro, Slide, Code, Terminal, Quote, Chart, Comparison 등 Props만 교체하면 다양한 영상에 재활용할 수 있습니다.
Spring 기반 모션 시스템
Remotion의 spring() 함수로 자연스러운 애니메이션을 구현합니다. premountFor로 씬 전환 시 사전 로드하여 끊김 없는 재생을 보장합니다.
프레임 기반 자막 시스템
SimpleCaption 인터페이스로 프레임 단위의 정확한 자막 타이밍을 관리합니다. 영상과 완벽히 동기화된 자막을 코드로 제어합니다.
템플릿 기반 워크플로우
template/Video.tsx를 복사해 새 영상을 빠르게 시작합니다. DURATIONS 객체로 씬별 시간을 선언적으로 관리합니다.
Flow
영상 제작 흐름
영상 주제와 씬 구성을 기획, DURATIONS 객체로 타이밍 설정
Generic Scene 컴포넌트를 Props와 함께 Series.Sequence로 배치
npm run dev로 실시간 편집, 타임라인 스크러빙으로 확인
CAPTIONS 배열로 프레임 단위 자막 배치, public/에 미디어 추가
Remotion CLI로 MP4 렌더링, YouTube 업로드
Stats
프로젝트 규모
Comments
불러오는 중...