쇼츠 제작과 수익화

학습목표

• 코드 기반 영상 제작 프레임워크(Remotion)의 기본 구조를 이해한다.
• 대본·음성·움짤을 결합한 쇼츠 자동 생성 파이프라인을 구축할 수 있다.
• 제작한 콘텐츠와 웹앱을 실제 수익 모델로 연결하는 전략을 수립할 수 있다.

오늘은 영상 콘텐츠 자동 생성과 수익화를 다룬다. Remotion으로 코드로 영상을 만드는 법을 배우고, TTS·움짤 API를 더해 쇼츠를 자동 생성하는 앱까지 만들어본 뒤, 지금까지 만든 것들을 어떻게 돈으로 연결할지 정리하고, 마지막으로 meta.ai 사용법을 짚는다.

1. Remotion을 활용한 영상 만들기

1-1. Remotion이란

React 컴포넌트로 영상의 각 프레임을 정의하고, CLI 명령 한 번으로 MP4를 렌더링하는 소스가 공개된 영상 제작 프레임워크다. 개인·팀 규모 및 사용 형태에 따라 라이선스 조건이 달라지므로 상업 사용 전 공식 라이선스를 확인한다. GUI 편집기 없이 코드만으로 영상을 만든다는 점이 특징이며, CSS·Canvas·SVG 같은 웹 기술을 그대로 영상 제작에 쓸 수 있다.

1-2. 기본 구조

• Composition: 영상의 크기, 길이(초/프레임), FPS, 어떤 컴포넌트를 렌더링할지 등록하는 단위
• useCurrentFrame(): 현재 프레임 번호를 가져와서 시간에 따른 애니메이션을 표현
• Sequence: 특정 구간에만 등장하는 장면을 배치
• Studio: 로컬에서 영상을 미리보기하며 실시간으로 조정
• render: CLI 명령으로 실제 mp4 파일 출력

1-3. 실전 프로젝트 구조 — 쇼츠 자동 생성 웹앱

• Root.tsx: ShortsVideo 컴포지션을 등록. calculateMetadata로 영상 길이를 대본 길이에 맞춰 동적으로 계산한다
• ShortsVideo/index.tsx: 카드(HOOK→01→02→03→CTA) 배열을 Sequence로 순서대로 렌더링하고, 나레이션 오디오 트랙을 함께 붙인다
• ShortsVideo/parts.tsx: 배경 별 효과, 카드 배경, 상단 타이틀, 중앙 움짤, 정보 카드, 상단 배지 같은 시각 요소를 컴포넌트로 분리
• 서버사이드 렌더링: @remotion/bundler의 bundle() → selectComposition() → @remotion/renderer의 renderMedia() 순서로 호출

1-4. 실습: 바이브 코딩으로 영상 만들기

예시 프롬프트:

Remotion으로 5초짜리 인트로 영상을 만들어줘.
- 배경은 그라데이션 색상
- 중앙에 "환영합니다" 텍스트가 페이드인 되면서 커지는 애니메이션
- 마지막 1초는 로고 자리에 빈 박스만 표시
완성되면 mp4로 렌더링하는 방법도 알려줘.

추가로 요청해볼 수 있는 것:

• "텍스트 등장 타이밍을 자막처럼 한 줄씩 순차적으로 보여줘"
• "배경 음악을 넣고 싶어"
• "9:16 세로 비율(쇼츠용)로 만들어줘"

1-5. 자주 만나는 문제(Windows 기준)

• spawn UNKNOWN 에러: 프로젝트 경로에 한글이 섞여 있으면 Remotion이 쓰는 ffmpeg/컴포지터 바이너리 실행이 실패할 수 있다. 영문 경로에 바이너리를 복사해두고 binariesDirectory 옵션으로 지정하면 해결된다.
• Turbopack 번들링 오류: 서버 전용 네이티브 패키지는 next.config.js의 serverExternalPackages에 등록해 번들 대상에서 제외해야 한다.

2. Remotion + 음성TTS + Klipy를 활용한 움짤 쇼츠 만들기

2-1. 구성 요소

• Remotion 4: 최종 영상을 합성·렌더링하는 엔진
• edge-tts(Python): 온라인 음성 서비스를 사용하는 커뮤니티 파이썬 모듈. Microsoft의 공식 API 또는 상업 이용 권한을 보장하는 제품으로 간주하지 않는다
• Klipy API: GIF·스티커·짧은 클립(최대 10초)을 검색해 가져올 수 있는 API(사용량·요금 및 콘텐츠 이용 조건은 공식 안내 확인)
• ffmpeg / ffprobe: 오디오 파일의 실제 길이를 측정하고 여러 음성 클립을 하나로 합치는 데 사용
• Anthropic API(tool-use): 도구 입력 스키마를 정의하고 반환 데이터를 검증한다. tool-use 자체만으로 모든 출력의 스키마 준수가 보장되는 것은 아니다

2-2. 제작 흐름(실전 파이프라인 기준)

1. script: 주제를 입력하면 Claude API가 HOOK→01→02→03→CTA 5개 카드와 문장 5개, 배지 정보를 구조화된 JSON으로 생성
2. tts: 문장 5개를 edge-tts로 각각 개별 mp3로 생성 → ffprobe로 실제 길이를 측정 → ffmpeg concat으로 하나의 나레이션 mp3로 합치고, 카드별 정확한 시작/끝 시각(초)을 계산
3. gifs: 카드별 키워드로 Klipy API를 호출해 움짤 검색 → 진짜 GIF인지 검증 → 실패하면 기본 폴백 움짤로 대체
4. rendering: 음성 길이에 맞춰 계산된 타이밍대로 Remotion이 카드·움짤·자막·오디오를 합성해 MP4로 렌더링

예시 프롬프트:

아래 대본으로 세로형(9:16) 움짤 쇼츠를 만드는 Remotion 프로젝트를 만들어줘.
- 대본: "월요일 아침, 알람이 울린다. 그리고... 다시 잔다."
- 문장마다 개별 TTS 음성을 만들고, 실제 음성 길이를 측정해서 카드 타이밍을 정확히 맞춰줘
- 문장마다 어울리는 움짤을 Klipy API로 검색해서 배치하고, 검색 실패 시 기본 움짤로 대체해줘
- 화면 하단에는 대본을 자막으로 동시에 보여줘

2-3. 자주 만나는 문제

• 영상-음성 싱크가 안 맞을 때: 문장마다 개별 클립을 만들고 ffprobe로 실제 길이를 재서 누적 계산하는 방식이 정확하다.
• 두 번째 영상부터 렌더링이 깨질 때: bundle() 결과를 캐싱해서 재사용하면 404 오류가 날 수 있다. 매 렌더링마다 번들을 새로 생성하도록 하면 해결된다.
• Claude 응답 JSON이 가끔 깨질 때: 지원되는 구조화 출력 설정을 검토하고 JSON 파싱·필수 필드·타입을 검증한다. 실패 시 재시도나 오류 안내를 제공한다.

3. 바이브 코딩으로 주제만 입력하면 쇼츠를 생성하는 애플리케이션 만들기

전체 파이프라인: 주제 입력 → 대본 자동 생성 → TTS 음성 변환 → 문장별 키워드로 움짤 검색 → Remotion 합성·렌더링 → 웹에서 미리보기+다운로드

예시 프롬프트:

주제를 입력하면 자동으로 쇼츠 영상을 만들어주는 웹앱을 만들어줘.
1. 주제 입력창 하나
2. 입력한 주제로 짧은 대본(3~5문장)을 자동 생성
3. 대본을 TTS 음성으로 변환
4. 문장마다 어울리는 움짤을 Klipy API로 검색해서 자동 삽입
5. Remotion으로 최종 영상을 렌더링하고, 완성되면 미리보기와 다운로드 버튼을 보여줘
진행 상태(대본 생성 중 → 음성 생성 중 → 움짤 검색 중 → 렌더링 중)를 화면에 표시해줘.

4. 코워크(Cowork)·코드(Code)를 활용한 수익 만들기

바이브 코딩(Cowork / Code) → 애플리케이션 완성 → Vercel 등으로 배포 → 수익화

4-1. 광고 기반 수익화

• 웹앱 자체에 AdSense 삽입: 배포한 웹앱에 Google AdSense를 붙여 방문자 트래픽으로 광고 수익을 낸다
• YouTube / Blog 광고 수익: 만든 앱의 사용법이나 결과물을 유튜브·블로그 콘텐츠로 제작
• SNS 플랫폼으로 트래픽 유입: 짧은 데모 영상이나 사용 사례를 올려 웹앱으로 유입시킨다(오늘 만든 쇼츠 생성 앱이 바로 이 콘텐츠 제작에 쓰일 수 있다)

4-2. 디지털 제품 판매

• 재능마켓: 크몽(KMONG), 와디즈(WADIZ), 탈잉(TALING) 같은 플랫폼에 직접 만든 도구·자동화 워크플로우·템플릿을 상품으로 등록해 판매
• 이미지·영상 디지털 자산 판매: 미리캔버스 디자인허브, Adobe Stock, Iconfinder, The Noun Project 같은 마켓에 직접 만든 이미지·아이콘·영상 소스를 등록해 판매

4-3. 오늘 실습

1. 지금까지 만든 앱/도구 중 하나를 고른다
2. "이 앱을 수익화하려면 어떤 경로가 맞을지 정리해줘"라고 클로드에게 물어보고 광고 vs 디지털 제품 판매 중 어디에 더 맞는지 판단해본다
3. 맞는 플랫폼에 실제로 등록·배포하는 절차를 클로드와 함께 단계별로 진행해본다

5. meta.ai 활용법

5-1. Meta AI와 모델 구분

Meta AI는 Meta가 제공하는 AI 서비스다. 서비스 이름과 내부 모델 이름은 구분해야 하며, 제공 모델·이미지 기능·지원 지역·요금은 계정과 시점에 따라 달라질 수 있다.

5-2. 실습 방법

Meta AI에서 현재 사용 가능한 기능을 확인하고, 같은 장면을 설명한 요청으로 결과를 비교한다. Muse 등 모델의 기술 설명은 Meta 공식 연구 자료에서 확인하며, 모든 앱과 국가에서 같은 기능을 무료로 제공한다고 가정하지 않는다.

오늘의 실습 산출물

• 쇼츠 자동생성 웹앱
• 개인 수익화 전략 플랜

참고 자료

• Remotion 공식 사이트
• KLIPY API 개발자 문서

관련 노트

• 4일차 강의노트
• 6일차 강의노트

실습 검증과 문제 해결

영상의 시간과 자막 검증

• 직접 해볼 일: 15초짜리 연습 영상에 대본 3문장, 음성, 자막을 넣는다.
• 예상 결과와 판정 기준: 첫 프레임부터 마지막 프레임까지 음성과 자막이 맞고, 휴대전화 화면에서 자막이 잘리지 않아야 한다.
• 오류를 좁히는 방법: 음성 길이가 장면 길이보다 길면 잘린다. 실제 오디오 길이를 기준으로 타임라인을 정하고 API 키는 서버 환경변수에 둔다.

이 항목은 교육용 검증 시나리오이며 실제 실행 성공·수익·플랫폼 승인을 보고하는 사례가 아니다. 결과 화면과 수정 내용을 기록하면 다음 실습에서 같은 오류를 줄일 수 있다.

자료 업데이트 안내

2026-10-12 주요 설명 보완. 설치 명령·계정별 기능·요금과 심사 규정은 실행 시점의 공식 문서를 다시 확인한다.

• Remotion 라이선스
• 강의 내용 문의 및 오류 신고: 라인블록