사용 시기
다음과 같은 상황에서 이 스킬을 사용하세요:
- 새로운 Remotion 비디오를 처음부터 제작할 때
- 콘텐츠 에셋에 대한 비디오 브리핑 변형을 생성할 때
- 기존 Remotion 컴포지션을 수정할 때
- Remotion 애니메이션이나 렌더링 문제를 디버깅할 때
- Remotion 특정 API 또는 컴포넌트로 작업할 때
비디오 제작 프로세스
새로운 Remotion 비디오를 제작할 때는 다음 8단계 프로세스를 따르세요. 2단계에서는 브리핑과 콜드 오디언스 최적화를 기반으로 카탈로그에서 3-5개의 콘셉트를 선택합니다. 4단계와 5단계는 승인 게이트입니다. 두 단계가 모두 승인될 때까지 코드를 작성하지 마십시오.
전체 프로세스 문서와 템플릿, 의사 결정 매트릭스는 references/video-creation-process.md를 참조하세요.
0단계: 브랜드 식별
창의적인 작업 전에 브랜드를 식별합니다. 사용자에게 **"이 비디오는 어떤 브랜드용인가요?"**라고 물어보세요.
브랜드가 아래에 사전 설정이 있는 경우 직접 사용하세요. 추가 브랜드 질문은 필요하지 않습니다.
브랜드가 목록에 없는 경우 사용자에게 브랜드 웹사이트 URL 또는 브랜드 가이드라인을 제공하도록 요청하세요. 추출할 항목: 배경색, 기본 강조색, 보조 강조색, 텍스트 색상, 글꼴 패밀리, 테마(라이트/다크). 가이드라인이 없는 경우 최소한 다음을 요청하세요: 기본 색상, 배경색, 글꼴 선호도.
1단계: 크리에이티브 브리핑
창의적인 작업 전에 수집하고 고정:
목적: [이 비디오가 존재하는 이유]
대상: [누가 시청하는가]
핵심 메시지: [한 문장]
콘텐츠 유형: [blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
채널: [배포될 위치]
CTA: [시청자가 다음에 해야 할 행동]
소스 에셋: [참조할 파일, 컴포넌트 또는 URL]
톤: [느낌을 설명하는 단어]
브랜드: [0단계의 브랜드 이름]
2단계: 콘셉트 선택 (권장 3-5개)
크리에이티브 브리핑을 고정한 후, 이 특정 사용 사례에 가장 적합한 비디오 콘셉트를 선택하기 위해 분석합니다. 고정된 변형 세트를 제시하지 마세요. references/concept-catalog.md의 콘셉트 카탈로그에서 가져옵니다.
카탈로그에는 18개의 주요 콘셉트, 8개의 시각적 스타일 수정자, 5개의 콜드 오디언스 후크 패턴이 포함되어 있습니다. 추천을 생성하기 전에 이를 읽어보세요.
선택 프로세스
-
브리핑에 대해 콘셉트 점수 매기기. 카탈로그의 각 콘셉트에 대해 다음을 평가합니다:
- 콘셉트의 "Best For"가 콘텐츠 유형과 일치하는가?
- 이 구조로 핵심 메시지가 15-30초 내에 전달될 수 있는가?
- 콘셉트가 대상 지속 시간과 크기에서 작동하는가?
- 브리핑이 이 콘셉트에 필요한 데이터/시각 자료를 제공하는가?
-
콜드 오디언스 필터 적용. 점수가 매겨진 각 콘셉트에 대해 다음을 평가합니다:
- 사전 맥락이 전혀 없는 시청자가 처음 3초 안에 가치를 이해할 수 있는가?
- 콘셉트가 오프닝 비트에서 스크롤을 멈추게 하는 시각적 움직임을 만드는가?
- 콘셉트가 브랜드, 제품 또는 문제 공간에 대한 사전 지식을 요구하지 않는가?
- 콘셉트가 자연스럽게 결과나 데이터 포인트(metric-counter, animated-infographic, before-after)를 전면에 배치하면, 설정 시간이 필요한 내러티브 콘셉트보다 콜드 오디언스에 본질적으로 더 강력합니다.
-
후크 패턴 선택. 각 추천 콘셉트에 대해 카탈로그의 후크 패턴을 페어링합니다:
- 데이터가 포함된 콘텐츠 → result-first
- 제품 출시 및 도구 → pattern-interrupt
- 생각 리더십 및 교육 → curiosity-gap
- 신뢰 구축 콘텐츠 → social-proof-hook
- 경쟁 및 가격 콘텐츠 → loss-aversion
-
3-5개의 추천 콘셉트를 한 페이지 브리핑으로 제시. 각 항목에 대해:
- 콘셉트 이름(카탈로그에서) 및 한 문장 설명
- 이 브리핑에 적합한 이유(특정 콘텐츠와 대상을 참조하는 1-2문장)
- 권장 후크 패턴 및 오프닝 비트 설명
- 장면별 표(카탈로그 템플릿에서 가져와 이 콘텐츠에 맞게 사용자 정의)
- 콘셉트를 향상시키는 경우 선택적 시각적 스타일 수정자
-
추천 순위 매기기. 최고 추천을 표시하고 그 이유를 설명합니다.
-
사용자가 하나(또는 두 개의 하이브리드)를 선택합니다. 3단계로 진행하기 전에 선택한 콘셉트를 고정합니다.
콜드 오디언스 최적화 규칙
이 규칙은 모든 콘셉트 추천에 적용되며, 충돌하는 경우 콘텐츠 유형 기본값을 재정의합니다:
- 기본 가정: 콜드 오디언스. 브리핑에 대상이 웜 오디언스(리타겟팅, 기존 사용자, 뉴스레터 구독자)라고 명시적으로 명시되지 않는 한, 브랜드 인지도가 전혀 없다고 가정합니다.
- 콜드 오디언스를 위한 첫 번째 장면 요구 사항:
- 시각적 패턴 인터럽트(움직임, 색상 대비 또는 크기 변화)
- 브랜드를 알지 못해도 시청자가 인식하는 문제나 결과의 이름을 지정하는 텍스트
- 장면 1에는 브랜드 식별 없음(브랜드 카드는 장면 2 이상으로 저장)
- 콜드 오디언스를 위한 후크 패턴 제한: pattern-interrupt, result-first 또는 loss-aversion을 사용하세요. 통계/주장이 브랜드 맥락 없이 보편적으로 공감될 수 있는 경우가 아니면 curiosity-gap을 피하세요.
- 콘셉트 유연성: 카탈로그에 콜드 오디언스에게 적합한 콘셉트가 없으면 하이브리드를 만들거나 기존 콘셉트를 조정하세요. 카탈로그는 시작 라이브러리이지 제약 사항이 아닙니다.
3단계: 형식 및 사양
브리핑과 선택된 변형에서 형식 결정 매트릭스를 사용하여 확인:
| 채널 | 크기 | 지속 시간 |
|---|---|---|
| LinkedIn/Instagram 피드 | 1080x1080 | 15-30s |
| 웹사이트/프레젠테이션 | 1920x1080 | 15-60s |
| Reels/TikTok/스토리 | 1080x1920 | 15-60s |
| 이메일 (GIF) | 600x600 or 800x450 | 5-10s |
기본 FPS: 30. 부드러운 움직임이 중요한 경우에만 60을 사용하세요.
크기: [너비]x[높이]
지속 시간: [X]초 ([X * fps]프레임)
FPS: 30
컴포지션 ID: [PascalCase]
루프: [yes/no]
출력 형식: [mp4, gif, webm]
선택된 콘셉트: [카탈로그의 concept-id, 또는 하이브리드]
4단계: 장면 분석 (승인 게이트)
코드를 작성하기 전에 모든 장면을 정의합니다. 선택된 변형의 장면 템플릿을 시작 구조로 사용한 다음 특정 콘텐츠에 맞게 사용자 정의합니다.
승인을 위해 장면 표를 제시합니다.
장면 표 형식:
| # | 이름 | 시간 | 카피 | 애니메이션 | 목적 |
|---|---|---|---|---|---|
| 1 | 후크 | 0-3s | 정확한 텍스트 | 움직임 설명 | 존재 이유 |
타이밍 가이드라인:
| 지속 시간 | 장면 수 | 장면당 평균 |
|---|---|---|
| 10s | 3-4 | 2.5-3.3s |
| 15s | 4-6 | 2.5-3.75s |
| 30s | 8-12 | 2.5-3.75s |
| 60s | 12-20 | 3-5s |
진행하기 전에 카피, 타이밍 및 내러티브 구조를 고정합니다.
5단계: 시각적 디자인 (승인 게이트)
구현 전에 고정:
색상 팔레트 (최소 필수 역할):
- 배경, 기본 강조, 보조 강조
- 텍스트 기본, 텍스트 보조, 텍스트 3차
- 테두리/구분선
브랜드 테마 사전 설정 (알려진 브랜드의 경우 사용, 색상 질문 건너뛰기):
| 브랜드 | 배경 | 기본 강조 | 보조 강조 | 텍스트 기본 | 텍스트 흐리게 | 글꼴 | 테마 |
|---|---|---|---|---|---|---|---|
| FunnelEnvy | #FFFFFF / #1a1a2e (terminal) | #3B82F6 (Blue) | #8B5CF6 (Purple) | #000000 | #6B7280 | Inter, system | Light |
| Reform | #FFFFFF / #1a1a2e (terminal) | #48EC80 (Green) | #EDE630 (Yellow) | #000000 | #6B7280 | Inter, system | Light |
| GrowthNode | #0f0a1a (모든 장면) | #8B5CF6 (Purple) | #3B82F6 (Blue) | #FFFFFF | #a1a1aa | Inter, system | Dark |
| MIA | #F7F4FA / #1c1422 (dark) | #F1DE71 (Yellow) | #7184F1 (Purple) | #1c1422 / #f7f4fa (dark) | rgba(28,20,34,0.62) | system-ui, -apple-system, Segoe UI | Light |
MIA 강조 팔레트: Blue #71C4F1, Purple #7184F1, Pink #F171C4, Green #71F19E
커스텀 브랜드: 브랜드가 위에 나열되지 않은 경우, 0단계에서 제공된 브랜드 웹사이트 또는 가이드라인에서 색상을 정의합니다. 동일한 역할을 채웁니다: 배경, 기본 강조, 보조 강조, 텍스트 기본, 텍스트 흐리게, 글꼴, 테마.
타이포그래피: 글꼴 패밀리, 두께 계층, 대상 해상도에서의 크기.
애니메이션 스타일: Spring (bouncy/smooth/snappy), linear, 또는 ease 기반. 지배적인 스타일을 선택합니다.
진실의 원천: 기존 디자인과 일치하는 경우 소스 파일을 참조합니다.
6단계: 아키텍처 결정
에이전트가 장면 복잡성에 따라 이를 확인합니다:
| 조건 | 접근 방식 |
|---|---|
| 15장 미만 | 단일 파일 |
| 15장 이상 또는 재사용 가능한 부분 | scenes/ 디렉토리로 다중 파일 |
| 장면 간 공유 요소 | 불투명도 엔벨로프가 있는 영구 레이어 |
항상 중앙 집중식 타이밍 상수(const T = { ... })를 사용합니다.
7단계: 구현
고정된 결정에 대해 코드를 작성합니다. 모든 애니메이션은 Remotion 규칙(아래 기술 참조 참조)을 따라야 합니다.
8단계: 출력 문서화
다음을 포함한 참조 문서를 생성합니다: 사양, 선택된 변형, 미리보기/렌더 명령어, 장면 분석, 색상 팔레트, 타이밍 구성, 아키텍처 노트, 반복 가이드.
기술 참조
API 세부 정보 및 코드 예제는 개별 규칙 파일을 읽으세요.
핵심 애니메이션 및 타이밍
- rules/animations.md - 애니메이션 기본 사항. 모든 움직임은
useCurrentFrame()를 통해. CSS 전환 금지 - rules/timing.md -
interpolate(),spring(), 이징 함수, 스프링 구성 - rules/sequencing.md - 타이밍, 지연 및 지속 시간 제어를 위한
<Sequence>및<Series> - rules/trimming.md - 시작(음수
from) 및 끝(durationInFrames) 자르기 - rules/transitions.md - 페이드, 슬라이드, 와이프, 플립, clockWipe를 사용한
<TransitionSeries>
미디어
- rules/assets.md - public 폴더 에셋을 위한
staticFile() - rules/videos.md - 자르기, 볼륨, 속도, 루핑, 피치가 포함된
<Video> - rules/audio.md - 자르기, 볼륨, 속도, 피치가 포함된
<Audio> - rules/images.md -
<Img>컴포넌트 (렌더링 전 로드 보장) - rules/gifs.md - GIF/APNG/AVIF/WebP를 위한
<AnimatedImage> - rules/fonts.md -
@remotion/google-fonts를 통한 Google Fonts,@remotion/fonts를 통한 로컬 폰트
텍스트 및 캡션
- rules/text-animations.md - 타자기, 단어 강조 패턴
- rules/measuring-text.md -
measureText(),fitText(),fillTextBox() - rules/display-captions.md - TikTok 스타일 캡션, 단어별 강조
- rules/import-srt-captions.md -
parseSrt()로.srt파일 파싱 - rules/transcribe-captions.md - Whisper.cpp, Whisper Web, OpenAI API
컴포지션 및 메타데이터
- rules/compositions.md -
<Composition>,<Still>,<Folder>,defaultProps - rules/calculate-metadata.md - 동적 지속 시간, 크기 및 props
고급
- rules/3d.md - React Three Fiber를 사용한
<ThreeCanvas> - rules/charts.md -
useCurrentFrame()를 통해 애니메이션되는 SVG/D3.js 차트 - rules/lottie.md -
@remotion/lottie를 사용한<Lottie>컴포넌트 - rules/tailwind.md - TailwindCSS (
transition-*또는animate-*클래스 금지)
미디어 유틸리티 (Mediabunny)
- rules/extract-frames.md - 타임스탬프에서 비디오 프레임 추출
- rules/can-decode.md - 비디오/오디오 디코딩 가능 여부 확인
- rules/get-video-duration.md - 초 단위 비디오 길이
- rules/get-video-dimensions.md - 비디오 너비 및 높이
- rules/get-audio-duration.md - 초 단위 오디오 길이
레이아웃
- rules/measuring-dom-nodes.md - 정확한 측정을 위한
useCurrentScale()
참조
- references/concept-catalog.md - 18개의 주요 콘셉트, 8개의 시각적 스타일 수정자, 5개의 콜드 오디언스 후크 패턴, 선택 기준 및 콘텐츠 유형 친화성 매트릭스가 포함된 콘셉트 카탈로그
- references/video-creation-process.md - 템플릿, 의사 결정 매트릭스 및 상세 지침이 포함된 전체 프로세스 문서
엄격 규칙
다음은 모든 Remotion 코드에 적용됩니다. 위반 시 잘못된 출력이 생성됩니다.
- 모든 애니메이션은
useCurrentFrame()로 구동. CSS 전환, Tailwindanimate-*또는transition-*클래스, React Three FiberuseFrame()금지 - Remotion 컴포넌트 사용 (
<Img>,<Video>,<Audio>) 기본 HTML 요소 대신 staticFile()사용public/폴더의 모든 에셋에 대해- 시간(초):
useVideoConfig()의fps를 곱하여 프레임을 얻음 - 타사 애니메이션 라이브러리 금지 움직임 구동 (해당 애니메이션 비활성화,
useCurrentFrame()사용) - 모든 콘셉트는 자명해야 함. 컨텍스트 없이 스크롤하는 시청자가 비디오만으로 가치를 이해할 수 있어야 함. 어떤 장면도 외부 지식에 의존해서는 안 됨. 카피는 전체 메시지를 독립적으로 전달해야 함. 브리핑에 명시되지 않는 한 항상 콜드 오디언스를 가정합니다.