Remotion 비디오 디렉터은(는) 무엇을 하나요?

"영상이 필요해"라고 말하는 순간부터, 전문적인 검토, 시나리오 설계, 그리고 검증된 Remotion 패턴을 통해 배경 음악이 포함된 렌더링된 MP4 파일을 완성하는 대화형 스킬입니다.

사용 시기

다음과 같은 상황에서 이 스킬을 실행하세요:

사용자가 Remotion을 사용하여 비디오를 만들고 싶어할 때
제품 데모, 출시 영상, 정기 콘텐츠 템플릿, 마케팅 영상, 또는 내러티브 인트로가 필요할 때
"영상이 필요해", "...에 대한 영상을 만들어 줘", "Remotion 영상을 만들어 줘", "코드로 영상 만들기"라고 말할 때
어떤 영상을 만들지, 어떻게 구조화할지 고민하는 데 도움이 필요할 때
기존 Remotion 프로젝트가 있고 전문가의 검토를 원할 때

공식 Remotion 스킬과의 관계

공식 remotion-dev/skills 패키지는 Claude에게 Remotion API(애니메이션, 오디오, 자막, 전환 등에 관한 37개의 규칙 파일)를 가르칩니다. 이 스킬은 그 위에 창의적이고 전략적인 레이어를 처리합니다:

공식 스킬: "interpolate()를 어떻게 사용하나요?" (기술 참조)
비디오 디렉터: "어떤 영상을 만들어야 하고 어떻게 구성해야 할까요?" (창의적 프로세스)

공식 Remotion 스킬이 설치되어 있다면, API 관련 세부 사항에 활용하세요. 설치되어 있지 않다면, 이 스킬의 references/remotion-patterns.md와 references/component-library.md가 프로덕션 비디오를 제작하기에 충분한 Remotion 지식을 제공합니다.

4단계 워크플로우

1단계: 전략적 프레이밍 (Strategic Framing)

목표: 대화를 통해 사용자의 요구를 이해한 후, 전문가의 관점을 종합합니다.

중요: 이 단계는 대화형입니다. 질문은 한 번에 하나씩 하고 답변을 기다리세요. 모든 질문을 한꺼번에 쏟아내거나 사용자 입력 없이 자동으로 진행하지 마십시오.

1단계 - 발견 (대화형)

하나의 열린 질문으로 시작하세요:

"이 영상은 무엇을 위한 것인가요? 아이디어, 누가 볼지, 그리고 시청자들이 본 후 무엇을 하길 바라는지 알려주세요."

사용자의 답변을 기다리세요. 그런 다음, 부족한 부분에 따라 추가 질문을 합니다:

시청자가 불분명한 경우: "누가 이 영상을 볼까요? (고객, 팀, 투자자, 소셜 미디어?)"
원하는 행동이 불분명한 경우: "시청한 후, 시청자들이 무엇을 하기를 바라나요? (가입, 이해, 공유?)"
제약 조건이 언급되지 않은 경우: "알아야 할 제약 조건이 있나요? 러닝타임, 브랜드 색상, 기존 에셋, 마감일?"
제품을 언급하는 경우: "제품/인터페이스의 스크린샷을 공유해 주실 수 있나요?"

목적, 시청자, 원하는 행동, 그리고 제약 조건을 이해할 때까지 진행하지 마십시오.

2단계 - 크리에이티브 방향 설정

크리에이티브 방향 옵션을 제시하고 사용자에게 선택하도록 요청하세요:

스타일	느낌	가장 적합한 용도
미니멀/잡스	검은 배경, 극적인 멈춤, 프레임당 하나의 아이디어, 임팩트 폰트	제품 출시, 큰 아이디어, 기조 연설
데이터 중심/블룸버그	진한 네이비 배경, 애니메이션 차트, 밀도 높지만 체계적	회의 요약, 보고서, 대시보드
따뜻한/내러티브	따뜻한 톤, 개인적인 인용문, 세리프 악센트	강좌 소개, 팀 스토리, 커뮤니티
터미널/해커	어두운 코드 테마, 타자기, 모든 곳에 모노스페이스	기술 데모, 개발자 도구, 엔지니어링
커스텀	사용자가 설명하거나 참조 스크린샷/영상 제공	특정 용도

"어떤 스타일 방향이 영상에 맞을까요? 또는 마음에 들었던 영상의 스크린샷을 공유해 주세요."

답변을 기다리세요.

선택한 방향(색상, 글꼴, 애니메이션 스타일, 타이밍 규칙)의 전체 사양은 references/video-archetypes.md를 참조하세요.

3단계 - 참고 자료 입력 (선택 사항)

"모방하고 싶은 참고 영상, 스크린샷 또는 시각적 스타일이 있으신가요? (없으면 건너뛰기)"

사용자가 참고 자료를 제공하면 다음을 분석하세요: 색상 팔레트, 타이포그래피, 애니메이션 속도, 레이아웃 밀도, 전반적인 분위기. 이를 크리에이티브 브리프에 통합하세요.

답변을 기다리거나 건너뛰기 확인을 받으세요.

4단계 - 전문가 패널 구성

선택된 아키타입(references/video-archetypes.md 참조)과 크리에이티브 방향에 따라 references/expert-definitions.md에서 3-4명의 전문가 패널을 구성합니다.

전문가 의견 생성 - 각 전문가에 대해 2-3문장 생성:

한 가지 구체적인 권장 사항
주의해야 할 한 가지 위험 요소

간결하게 유지하세요. 간단한 원탁 형태로 제시하세요. 전문가들이 의견이 다른 부분(사용자가 결정해야 하는 부분)만 강조하세요.

5단계 - 크리에이티브 브리프

구조화된 브리프로 종합:

## 크리에이티브 브리프

**목적**: [한 문장]
**대상 시청자**: [누구, 그들이 관심을 가지는 것]
**핵심 메시지**: [시청자가 기억해야 할 한 가지]
**원하는 행동**: [시청자가 다음에 해야 할 일]
**러닝타임**: [초] ([프레임] 프레임, 30fps 기준)
**크리에이티브 방향**: [선택된 스타일 - 미니멀/잡스, 블룸버그 등]
**감정적 흐름**: [예: 호기심 -> 증명 -> 확신 -> 행동]

## 오디오 전략
- 음악: [앰비언트/경쾌함/극적/간결함] (Pixabay에서)
- 내레이션: [예/아니오]
- 음악 분위기: [크리에이티브 방향에 맞는 설명]

## 장면 순서
| # | 장면 | 러닝타임 | 목적 |
|---|-------|----------|------|
| 1 | ...   | X초       | ...     |

## 데이터 모델 (해당하는 경우)
[매개변수화된 것과 하드코딩된 것 - 재사용 가능한 템플릿 구조]

## 시각적 스타일
- 테마: [크리에이티브 방향 이름]
- 배경: [색상]
- 색상: [기본, 강조, 보조]
- 타이포그래피: [제목 글꼴, 본문 글꼴, 모노 글꼴]
- 애니메이션 느낌: [경쾌함/부드러움/극적/타자기]

"크리에이티브 브리프입니다. 장면을 디자인하기 전에 수정할 부분이 있나요?"

확인 또는 수정 사항을 기다리세요.

2단계: 시나리오 디자인 (Scenario Design)

목표: 브리프를 장면별 상세 시나리오로 전환합니다.

6단계 - 장면 디자인

시퀀스의 각 장면에 대해 다음을 지정합니다:

내용: 정확한 텍스트, 데이터, 시각 자료
컴포넌트: 사용할 재사용 가능한 컴포넌트 (references/component-library.md 참조)
애니메이션: 시작/종료 애니메이션, 프레임 단위 타이밍
전환: 모든 장면 간 크로스 디졸브 (8-12프레임)

중요한 Remotion 제약 조건과 프리미엄 스타일링 패턴은 references/remotion-patterns.md를 참조하세요.

장면 집중 규칙: 각 장면은 핵심 메시지와 연결되는 하나의 아이디어만 제공해야 합니다. 장면이 핵심 메시지와 관련이 없다면 삭제하세요. 산만한 여러 장면보다 집중된 적은 장면이 항상 더 좋습니다.

프레임 예산: 전체 타임라인을 계획합니다:

const TIMING = {
  scene1: { start: 0, dur: 6 },   // 후크
  scene2: { start: 6, dur: 10 },  // ...
  // 전체 합계는 composition durationInFrames / fps와 일치해야 함
};

7단계 - 데이터 아키텍처

비디오가 데이터 기반인 경우(정기 보고서, 다중 변형 마케팅):

렌더링 사이에 변경되는 구성 객체 설계
일정하게 유지되는 것(시각적 템플릿)과 변하는 것(내용) 식별
사용자에게 구성 형태를 보여주고 확인 받기

예시 패턴 (WeeklyIntro에서):

const weekData = {
  weekLabel: "3월 3일 - 3월 9일",
  heroNumber: 312,
  heroLabel: "신규 가입자",
  // ... 매주 변경되는 필드
};

8단계 - 사용자 확인

완전한 시나리오를 제시합니다.

"구축할 준비가 되셨나요? 아니면 수정할 부분이 있나요?"

확인을 기다리세요.

3단계: 구축 (Build)

목표: Remotion 프로젝트를 만들고 첫 번째 버전을 렌더링합니다.

중요: 대화형 CLI 마법사를 시작하거나 입력을 요구하는 명령어를 절대 실행하지 마십시오. 여기에는 npx create-video, npx remotion init, npm init 또는 인수 없이 실행하는 npx remotion render가 포함됩니다. 항상 수동으로 파일을 만들고 모든 인수를 CLI 명령어에 명시적으로 전달하세요.

9단계 - 프로젝트 스캐폴드

Remotion 프로젝트 구조를 수동으로 만듭니다 (스캐폴딩 마법사 사용 금지 - 3단계 헤더 참조):

<프로젝트>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # 또는 <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # 데이터 기반인 경우
├── public/
│   ├── music.mp3           # 배경 음악
│   └── illustrations/      # 배경 이미지를 사용하는 경우
├── package.json
├── tsconfig.json
└── remotion.config.ts

의존성 설치: pnpm install

10단계 - 장면 구축

2단계의 시나리오에 따라 각 장면 컴포넌트를 구축합니다. references/component-library.md의 컴포넌트를 사용하세요.

중요한 구축 규칙 (references/remotion-patterns.md에서):

모든 애니메이션은 useCurrentFrame() + interpolate()/spring()을 통해 - 절대 CSS 전환 사용 금지
항상 보간을 고정: { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
useCurrentFrame()은 전역 타임라인이 아닌 가장 가까운 <Sequence>를 기준으로 합니다.
모든 장면 간 크로스 디졸브 (8-12프레임 범위; 예외: 터미널/해커 스타일에서는 하드 컷이 적합함)
모든 요소는 애니메이션으로 등장해야 함 - 컷에서 정적으로 나타나면 안 됨

프리미엄 스타일링 규칙 (references/remotion-patterns.md에서):

글꼴 다양성: 제목 글꼴 + 본문 글꼴 + 모노 글꼴 혼합 (모든 곳에 Inter 사용 금지)
극단적인 크기 대비: 제목 72-96pt, 본문 20-24pt
중요한 질문/제목을 세로 중앙에 배치
슬라이드당 본문 최대 15-20단어, 제목 슬라이드는 7단어 (잡스 스타일)
텍스트를 프레임 상단 85% 유지
가독성을 위해 최소 24pt 글꼴
가장자리에서 패딩 80-120px

11단계 - 오디오 통합

전체 오디오 가이드는 references/music-and-audio.md를 참조하세요.

"배경 음악을 추가하시겠어요? [선택된 크리에이티브 방향] 스타일에 맞는 로열티 프리 트랙을 위해 pixabay.com/music/을 둘러보시는 것을 추천합니다. 다운로드 링크나 파일을 공유해 주시면 적절한 볼륨 곡선과 함께 통합하겠습니다."

사용자의 응답을 기다리세요.

사용자가 음악을 제공하는 경우:

다운로드하여 public/music.mp3에 저장
페이드 인/페이드 아웃 볼륨 곡선이 있는 <Audio> 컴포넌트 추가
데이터가 많은 장면에서 음악 볼륨 낮추기 (0.30 -> 0.15)
트랙이 비디오보다 긴 경우 startFrom을 사용하여 끝 부분을 재생

사용자가 내레이션을 원하는 경우:

장면 내용에서 나레이션 스크립트 생성 (~초당 3단어)
사용자가 녹음하거나 ElevenLabs 사용
음악 덕킹과 통합 (내레이션 중 음악을 0.10-0.12로 낮춤)

사용자가 오디오를 건너뛰는 경우: --muted 플래그와 함께 렌더링.

12단계 - 렌더링 및 미리보기

중요: 대화형 프롬프트를 피하기 위해 항상 진입점 파일을 전달하세요. 인수 없이 npx remotion render를 실행하지 마십시오. 대화형 컴포지션 선택기가 실행될 수 있습니다. 항상 진입 파일과 컴포지션 ID를 명시적으로 지정하세요:

# 최종 MP4 렌더링 - 항상 진입점 + 컴포지션 ID 지정
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18

# 오디오가 없는 경우:
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18 --muted

사용자가 검토할 수 있도록 비디오를 엽니다.

4단계: 검토 (Review)

목표: 전문가 검토와 사용자 피드백을 통해 비디오를 출시 가능한 수준으로 개선합니다.

13단계 - 다중 전문가 검토

사용자가 비디오를 본 후 references/expert-definitions.md의 검토 프로토콜을 실행합니다.

성과표 생성 (전체 템플릿은 references/expert-definitions.md 참조):

| 차원                      | 우선순위 | 점수 |
|--------------------------|----------|------|
| 후크 명확성 (처음 3-5초)  | 중요     | ?/5  |
| 핵심 메시지 전달         | 중요     | ?/5  |
| 속도감 / 역동성           | 높음     | ?/5  |
| 시각적 가독성            | 높음     | ?/5  |
| 목표 행동 명확성         | 높음     | ?/5  |
| 시청자 적합성            | 중간     | ?/5  |

유형별 차원 2-3개 추가 (예: 미니멀/잡스의 경우 "시각적 프리미엄 느낌", 음악이 추가된 경우 "시청각 조화", 데이터 보고서의 경우 "구성 재사용성").

각 전문가는 자신의 관점에서 검토합니다. 여기에는 시각적 구성을 검토하는 촬영 감독과 (음악이 추가된 경우) 오디오를 검토하는 음악 감독이 포함됩니다. 다음으로 종합합니다:

강점 - 잘 작동하는 부분
개선 사항 - 구체적이고 실행 가능한 변경 사항
평결 - 현재 상태로 출시, 한 번 더 수정 필요, 또는 상당한 재작업 필요

사용자에게 어떤 개선 사항을 적용할지 물어보세요.

14단계 - 사용자 검토 및 반복

전문가 검토는 기술적 문제를 찾지만, 비디오가 올바르게 느껴지는지는 사용자만이 알 수 있습니다.

"이제 비디오와 전문가 검토를 보셨는데, 어떻게 생각하시나요?

어떤 장면이 잘 작동하나요?

어떤 장면을 변경해야 할까요? (가능하면 특정 프레임의 스크린샷을 첨부해 주세요)

텍스트, 타이밍 또는 시각적 문제가 있나요?

빠졌거나 잘라야 할 내용이 있나요?"

사용자의 피드백을 기다리세요.

사용자가 피드백을 제공하면:

사용자가 마음에 들어한 부분을 인정합니다 (방향성을 강화)
메모를 기반으로 할 구체적인 변경 사항을 목록화합니다
변경 사항을 적용합니다 - 장면 컴포넌트 편집, 타이밍 조정, 텍스트 수정
다시 렌더링하고 업데이트된 비디오를 제공합니다
다시 묻습니다: "더 나아졌나요? 조정할 부분이 더 있나요?"

사용자가 만족할 때까지 이 루프를 반복합니다. 일반적인 비디오는 1-3회의 개선 라운드가 필요합니다.

일반적인 피드백 패턴과 처리 방법:

"너무 빨라요" → 장면 길이를 30-50% 늘리고, 더 극적인 멈춤을 추가
"텍스트가 너무 많아요" → 장면을 분할하고, 프레임당 7단어로 줄임 (잡스 스타일)
"프리미엄 느낌이 안 들어요" → 미니멀/잡스 방향으로 전환하고, 여백 추가
"음악이 맞지 않아요" → 다른 Pixabay 트랙을 시도하고, 볼륨 곡선 조정
"분위기가 잘못됐어요" → 크리에이티브 방향을 재검토하고, 색상 팔레트와 애니메이션 속도 조정
"장면 X가 혼란스러워요" → 하나의 아이디어로 단순화하고, 시각적 위계 추가

적응 지침

사용자에게 이미 Remotion 프로젝트가 있는 경우

1단계-2단계 스캐폴딩을 건너뜁니다. 기존 코드 검토, 개선 사항 제안, 또는 새 장면/컴포지션 추가에 집중하세요.

사용자가 빠른 비디오를 원하는 경우 (숙고 없이)

1단계를 압축: 하나의 질문으로 비디오 유형 + 크리에이티브 방향을 물어봅니다. 상위 2명의 전문가를 선택하고 간단한 시나리오를 생성합니다. 빠르게 구축 단계로 넘어갑니다. 여전히 음악에 대해 물어봅니다.

사용자가 개념만 원하는 경우 (코드 없이)

1단계-2단계를 완전히 실행합니다. 크리에이티브 브리프와 시나리오를 문서로 출력합니다. 3단계는 건너뜁니다.

사용자가 다중 변형 비디오를 원하는 경우

그로스 마케팅 아키타입을 사용합니다. 변형 매트릭스(변형마다 변경되는 부분)를 설계합니다. 하나의 기본 비디오를 구축한 다음, 매개변수화된 구성을 사용하여 변형하는 방법을 보여줍니다.

참고 자료

video-archetypes.md

각 크리에이티브 방향의 전체 사양을 포함합니다:

색상: 16진수 코드 팔레트, 배경색, 텍스트 색상
글꼴: 제목, 본문, 모노 글꼴 (Google Fonts URL 및 가중치 포함)
애니메이션: 스프링 설정, 지속 시간, 느낌 (경쾌함/부드러움/극적)
타이밍 규칙: 프레임당 최대 단어 수, 제목 지속 시간, 장면당 전환 길이
사용 사례: 방향에 가장 적합한 비디오 유형

expert-definitions.md

다음 전문가 역할을 정의합니다:

전략 이사: 핵심 메시지와 시청자 행동에 집중합니다. 약한 후크나 방향성 없는 호소를 식별합니다.
크리에이티브 디렉터: 시각적 스타일, 속도감 및 내러티브 흐름을 평가합니다. 지루하거나 혼란스러운 순간을 찾습니다.
시니어 엔지니어 (Remotion): Remotion 모범 사례, 코드 품질 및 성능을 검토합니다. 구체적인 코드 변경 사항을 제안합니다.
촬영 감독: 프레이밍, 시각적 구성, 색상 대비를 평가합니다. 프레임 레이아웃을 분석합니다.
음악 감독: (음악이 추가된 경우) 오디오 선택, 볼륨 곡선 및 음악과 내레이션의 조화를 검토합니다.
그로스 마케터: (데이터 기반/마케팅 비디오의 경우) 전환 명확성, 청사진/CTA 명확성 및 변형 전략을 평가합니다.

component-library.md

재사용 가능한 Remotion 컴포넌트 카탈로그:

애니메이션 유틸리티: FadeIn, SlideIn, ScaleIn, Typewriter, Counter, RevealList
레이아웃 컴포넌트: SplitScreen, VerticalCenter, Header, Footer
시각적 요소: GradientBackground, AnimatedChart, IconRow, PullQuote, StatBox
템플릿: 각 아키타입에 대한 전체 장면 템플릿

remotion-patterns.md

필수 Remotion 지식:

프레임 기반 애니메이션 모델 (useCurrentFrame(), interpolate(), spring())
시퀀스 및 타임라인 관리 (<Sequence>, useVideoConfig())
전환 패턴 (크로스 디졸브, 하드 컷)
오디오 통합 (<Audio>, <Video>, 볼륨 곡선)
글꼴 로딩 (loadFont(), Google Fonts)
성능 최적화 (메모이제이션, 워크플로우 파일 회피)
출력 설정 (MP4 코드, CRF 값, 코덱)

music-and-audio.md

오디오 지침 포함:

Pixabay 및 기타 로열티 프리 소스 링크
권장 BPM 범위 및 분위기별 장르
페이드 인/아웃 지속 시간
내레이션 스크립트 작성 모범 사례
음악 덕킹 볼륨 수준
음악 지속 시간이 비디오보다 긴 경우 startFrom 사용

즐겨 사용하는 AI에게 물어보기

문서