Aryanban/remotion-video-director

Remotion 비디오 디렉터

사용자가 "비디오가 필요해요"라고 말하는 순간부터 MP4 파일(배경 음악 포함)이 렌더링될 때까지, 전문가적 숙고, 시나리오 설계, 그리고 검증된 Remotion 패턴을 통해 안내하는 인터랙티브 스킬입니다.

사용 시점

다음과 같은 경우 이 스킬을 트리거하세요:

• 사용자가 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단계: 전략적 프레이밍

목표: 대화를 통해 사용자의 요구를 이해하고, 전문가 관점을 모읍니다.

중요: 이 단계는 인터랙티브합니다. 질문을 한 번에 하나씩 하고 답변을 기다리세요. 모든 질문을 한꺼번에 던지거나 사용자 입력 없이 자동으로 진행하지 마십시오.

단계 1 - 발견 (대화형)

단일 개방형 질문으로 시작하세요:

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

사용자의 답변을 기다리세요. 그런 다음 누락된 내용을 기반으로 추가 질문을 하세요:

• 대상이 불분명한 경우: "구체적으로 누가 이 비디오를 볼까요? (고객, 팀, 투자자, 소셜 미디어?)"
• 원하는 행동이 불분명한 경우: "시청한 후에 시청자들이 무엇을 하기를 바라시나요? (가입, 이해, 공유?)"
• 제약 사항이 언급되지 않은 경우: "알려야 할 제약 사항이 있나요? (길이, 브랜드 컬러, 기존 자산, 마감일?)"
• 제품을 언급하는 경우: "제품/인터페이스의 스크린샷을 공유해 주시겠어요?"

목적, 대상, 원하는 행동, 제약 사항을 이해할 때까지 진행하지 마세요.

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

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

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

"어떤 스타일 방향이 비디오에 적합할까요? 아니면 마음에 들었던 비디오의 스크린샷을 공유해 주세요."

답변을 기다리세요.

references/video-archetypes.md에서 선택한 방향의 전체 사양(색상, 폰트, 애니메이션 스타일, 타이밍 규칙)을 읽으세요.

단계 3 - 참조 입력 (선택 사항)

"모방하고 싶은 참조 비디오, 스크린샷 또는 시각적 스타일이 있나요? (없으면 건너뛰기)"

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

답변 또는 건너뛰기 확인을 기다리세요.

단계 4 - 전문가 패널 구성

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

전문가 관점 생성 - 각 전문가에 대해 2-3문장을 생성하세요:

• 하나의 구체적인 추천
• 주의해야 할 하나의 위험 요소

간결하게 유지하세요. 간략한 원탁 회의 형태로 제시하세요. 전문가들이 의견이 다른 부분(사용자가 결정해야 할 사항을 나타냄)만 강조하세요.

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

구조화된 브리프로 종합하세요:

## 크리에이티브 브리프

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

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

## 장면 순서
| # | 장면 | 길이 | 목적 |
|---|------|----------|---------|
| 1 | ...   | X초       | ...     |

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

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

"크리에이티브 브리프입니다. 장면을 설계하기 전에 조정할 부분이 있나요?"

확인 또는 조정을 기다리세요.

---

2단계: 시나리오 설계

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

단계 6 - 장면 설계

시퀀스의 각 장면에 대해 다음을 지정하세요:

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

references/remotion-patterns.md에서 중요한 Remotion 제약 사항과 프리미엄 스타일링 패턴을 읽으세요.

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

프레임 예산: 전체 타임라인을 매핑하세요:

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단계: 빌드

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

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

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

(스캐폴딩 마법사를 사용하지 말고 3단계 헤더 참조) 수동으로 Remotion 프로젝트 구조를 만드세요:

<project>/
├── 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%에 유지
• 가독성을 위해 최소 24px 폰트
• 가장자리에서 패딩 80-120px

단계 11 - 오디오 통합

references/music-and-audio.md에서 전체 오디오 가이드를 읽으세요.

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

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

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

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

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

1. 장면 내용에서 나레이션 스크립트 생성 (~초당 3단어)
2. 사용자가 녹음하거나 ElevenLabs 사용
3. 음악 덕킹과 함께 통합 (내레이션 중에 음악이 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단계: 검토

목표: 전문가 검토와 사용자 피드백을 통해 비디오를 출시 준비가 될 때까지 개선합니다.

단계 13 - 다중 전문가 검토

사용자가 비디오를 본 후, references/expert-definitions.md의 검토 프로토콜을 실행하세요.

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

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

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

각 전문가는 자신의 관점에서 검토합니다. 시네마토그래퍼는 시각적 구성을, 음악 감독은 오디오를 (음악이 추가된 경우) 검토합니다. 다음으로 종합하세요:

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

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

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

전문가 검토는 기술적 문제를 잡아내지만, 비디오가 느낌이 맞는지는 사용자만이 알 수 있습니다.

"이제 비디오와 전문가 검토를 보셨습니다. 어떻게 생각하시나요?

1. 어떤 장면이 잘 작동하나요?
2. 어떤 장면에 변경이 필요하나요? (가능하면 특정 프레임 스크린샷을 보내주세요)
3. 텍스트, 타이밍 또는 시각적 문제가 있나요?
4. 누락되었거나 잘라내야 할 것이 있나요?"

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

사용자가 피드백을 제공할 때:

1. 마음에 들어한 점을 인정합니다 (방향 강화)
2. 노트를 기반으로 할 구체적인 변경 사항을 나열합니다
3. 변경을 적용합니다 - 장면 컴포넌트 편집, 타이밍 조정, 텍스트 수정
4. 다시 렌더링하고 업데이트된 비디오를 제시합니다
5. 다시 묻습니다: "더 좋아졌나요? 조정할 다른 부분이 있나요?"

사용자가 만족할 때까지 이 루프를 반복하세요. 일반적인 비디오는 1-3회 정제가 필요합니다.

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

• "너무 빨라요" → 장면 길이 30-50% 증가, 더 많은 극적인 멈춤 추가
• "텍스트가 너무 많아요" → 장면 분할, 프레임당 7단어로 줄이기 (잡스 스타일)
• "프리미엄 느낌이 안 나요" → 미니멀/잡스 방향으로 전환, 네거티브 스페이스 추가
• "음악이 안 맞아요" → 다른 Pixabay 트랙 시도, 볼륨 커브 조정
• "톤이 틀려요" → 크리에이티브 방향 재검토, 색상 팔레트 및 애니메이션 속도 조정
• "장면 X가 헷갈려요" → 하나의 아이디어로 단순화, 시각적 계층 구조 추가

---

적응 가이드라인

사용자가 이미 Remotion 프로젝트를 가지고 있는 경우

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

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

1단계를 압축: 한 질문에 비디오 유형 + 크리에이티브 방향을 물어보세요. 상위 2명의 전문가를 선택하고 간략한 시나리오를 생성하세요. 빠르게 빌드로 이동하세요. 그래도 음악에 대해 물어보세요.

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

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

사용자가 여러 변형 비디오를 원하는 경우

그로스 마케팅 아키타입을 사용하세요. 변형 매트릭스(변형마다 변경되는 것)를 설계하세요. 하나의 기본 비디오를 만든 다음 매개변수화하는 방법을 보여주세요.