적응형 React & Remotion 모션 그래픽 스킬
이 스킬은 React와 Remotion을 사용하여 스튜디오급 모션 그래픽의 설계, 상황 인식 아트 디렉션, 유동적 내러티브 구조화, 헤드리스 MP4 렌더링을 안내합니다.
핵심 철학: "형태는 맥락을 따른다." 모든 비디오에 엄격한 템플릿이나 고정된 액트 수를 강요하지 마십시오. 먼저 브랜드, 지속 시간, 화면 비율, 대상 고객을 평가한 후, 이상적인 구조적 원형과 현대적인 디자인 언어를 자율적으로 선택하여 맞춤형 React 구성을 만듭니다.
1. 사전 에셋 조회 및 평가 (Step 0)
코드를 작성하거나 렌더링하기 전에 에셋 조회 및 컨텍스트 진단을 실행합니다.
🎯 필수 에셋 보유 여부 질의 규칙
사용자가 프롬프트에 이미지 파일, 로고 또는 디자인 토큰을 명시적으로 제공하지 않은 경우 반드시 사용자에게 기존 에셋에 대해 적극적으로 질문해야 합니다:
질의 표준 템플릿 (Asset Inquiry Template): "혹시 영상에 활용할 브랜드 로고(SVG/PNG), 제품 스크린샷, 실사 사진, 공식 색상(HEX), 슬로건/카피 등의 에셋이 있으신가요?
- 보유 에셋이 있으신 경우: 파일 경로를 알려주시거나 프로젝트 내
public/폴더에 넣어주시면 영상에 정밀하게 맵핑해 드립니다.- 보유 에셋이 없으시거나 직접 제작을 원하시는 경우('알아서 해줘'): 제가 브랜드/단체의 공식 CI 벡터를 직접 복원하고, 시네마틱 비주얼과 맞춤형 UI 컴포넌트를 자체 설계하여 완성해 드립니다."
3-트랙 에셋 실행 라우팅:
- 트랙 A (사용자 제공 에셋):
- 먼저 로컬 워크스페이스 /
public/폴더를 확인합니다. staticFile('...')을 통해 SVG 벡터 경로, 고해상도 이미지, 스크린샷을 가져옵니다.- Ken Burns 미세 패닝(
references/asset-orchestration.md) 및 3D 원근 목업을 적용합니다.
- 먼저 로컬 워크스페이스 /
- 트랙 B (에셋 없음 / 자율 생성):
- 사용자가 "없어", "알아서 해줘"라고 말하거나 에셋을 제공하지 않는 경우: 절대 멈추거나 차단되지 않습니다.
- 공식 기업 아이덴티티(CI) 벡터 마크를 자율적으로 재구성합니다(
references/brand-identity-and-ci.md). - 도메인에 적합한 시각적 은유, 스타일드 카드, 벡터 배지, 기하학적 모티프를 합성합니다.
- 트랙 C (하이브리드 오케스트레이션):
- 사용자가 로고나 URL만 제공하는 경우: 색상 토큰을 추출하고, 제품 UI, 대시보드 및 내러티브 세계를 자율적으로 구축합니다.
프로젝트 컨텍스트 진단 (4가지 차원)
1. 대상 플랫폼 및 화면 비율:
• 16:9 가로 (1920×1080) -> YouTube, 히어로 랜딩 페이지, 키노트 쇼릴
• 9:16 세로 (1080×1920) -> TikTok, Instagram Reels, YouTube Shorts
• 1:1 정사각형 (1440×1440) -> Twitter/X 피드, Instagram 게시물, 촉각적 UI 루프
• 4:5 세로 (1080×1350) -> 소셜 마케팅 피드
2. 지속 시간 및 페이싱:
• 초단편 (3–7초) -> 키네틱 로고 범퍼, 반복 시그니처 모티프, 마이크로 인터랙션
• 단편 (8–15초) -> 높은 유지율의 소셜 릴, 바이럴 제품 기능, 엘리베이터 피치
• 중간 길이 (15–30초) -> 전체 브랜드 아이덴티티 필름, 포괄적인 제품 런칭
• 장편 (30–60초) -> 멀티 챕터 제품 설명, 회사 기념일, 쇼릴
3. 개체 아이덴티티 및 톤:
• 기업 / 항공 / 자동차 -> 품위, 광활함, 공기 역학, 고급스러움
• 고성장 기술 / SaaS / AI -> 선명함, 촉각감, 초고속, 티타늄 다크
• 학계 / 대학교 / 문화 -> 역사적, 권위적, 편집체 세리프, 지적
• 소비자 / 크리에이티브 / 라이프스타일 -> 생동감, 촉각, 탄력, 타이포그래피 플레이
4. 내러티브 아크 및 메시지 계층 구조:
• 훅 (0–20%) -> 입증/기능 (20–70%) -> 브랜드 페이오프 및 CTA (70–100%)
2. 적응형 구조적 원형
지속 시간과 목적에 자연스럽게 맞는 내러티브 구조를 선택하십시오. 민첩한 루프나 2비트 펀치가 더 나은 경우 4-액트 구조를 강요하지 마십시오:
| 원형 | 일반 지속 시간 | 리듬 및 장면 구조 | 가장 좋은 사용 사례 |
|---|---|---|---|
| A. 키네틱 범퍼 / 마이크로 루프 | 3초 – 6초 (6–12비트) | 단일 초점 모멘텀: 즉각적인 시각적 훅 → 지속적인 원활한 변형 → 히어로 로고 고정 (루프 간격 델타 < 0.05). | 로고 공개, 시그니처 UI 루프, 앱 로딩 상태 |
| B. 세로 소셜 릴 / 쇼츠 | 8초 – 15초 (16–30비트) | 3초 규칙: 0–1초 대담한 엄지 멈춤 훅 → 2–10초 빠른 운동적 입증 (3회 엇갈린 빠른 컷) → 11–15초 강력한 클릭 유도 문구 (CTA). | Instagram Reels, TikTok, YouTube Shorts |
| C. 내러티브 브랜드 필름 | 15초 – 30초 (30–60비트) | 4-액트 교향곡 아크: 출발/훅 (0–20%) → 본질/네트워크 (20–55%) → 성층권 상승 (55–80%) → 상징적 페이오프 (80–100%). | 주요 브랜드 필름 (예: 대한항공, Apple 수준 런칭) |
| D. 멀티 챕터 설명자 | 30초 – 60초 (60–120비트) | 챕터식 여정: 문제점 훅 → 구조 분석 → 심층 기능 데모 → 사회적 증거 및 생태계 → 최종 브랜드 고정. | SaaS 설명자, 기관 개요, 투자자 자료 |
| E. 연속 형태 변형 | 모든 지속 시간 | 중단 없는 아이덴티티: 하나의 기본 컨테이너가 화면을 벗어나거나 자르지 않음. 지속적으로 차원, 반경 및 내부 내용을 변형합니다. | 촉각적 UI 쇼케이스, 제품 변형 루프 |
3. 현대 디자인 언어 스펙트럼
개체의 성격에 맞는 시각적 언어를 자율적으로 선택합니다:
[1. 스위스 네오-브루탈리스트] 초규율적 그리드, 대담한 그로테스크 산세리프 (Geist, Inter), 고대비 종이/잉크, 군더더기 없음.
[2. 럭셔리 다크 티타늄] Apple/Stripe 미학, 짙은 흑요석 (#0B0C10), 1px 헤어라인 테두리, 금속성 반짝임, 따뜻한 금색/주홍색.
[3. 편집체 세리프 및 필름] 학술적 & 문화적 위엄, 대담한 현대 세리프 (Instrument Serif, Editorial New), 따뜻한 종이, 자간.
[4. 광학 하프톤 및 도트] 스튜디오 그래픽 공예, 반응형 동적 도트 매트릭스, 하프톤 웨이브 전환, 레트로-모던 분위기.
[5. 촉각적 물리적 UI] SaaS 및 도구 숙달, 물리적 누름 스프링, 고무 밴드 드래그, 액체 탭, 물리학 커서.
[6. 시네마틱 공기 역학] 항공, 자동차, 모빌리티; 휩쓰는 비행 경로, 원격 측정 HUD, 수평선 조명, 광활한 규모.
[7. 생생한 팝 및 기하학] 크리에이티브 앱, 소비자 도구; 대담한 평면 색상 블록, 탄력적인 형태 전환, 펀치감 있는 타이포그래피.
(각 스타일에 대한 코드 레시피, 팔레트 및 타이포그래피 페어링은 references/design-styles.md 참조).
4. Remotion 프로젝트 아키텍처
모든 프로젝트는 검증된, 매직 넘버가 없는 Remotion 구조를 사용합니다:
my-motion-project/
├── package.json # remotion, @remotion/cli, react, react-dom
├── remotion.config.ts # System Chrome/Edge GPU D3D11 가속
├── tsconfig.json # ES2022, NodeNext, jsx: react-jsx
└── src/
├── index.ts # registerRoot(Root) 진입점
├── Root.tsx # <Composition> 레지스트리 (차원, fps, 지속 시간)
├── compositions/ # 마스터 컴포지션 타임라인
├── scenes/ # 모듈식 <Sequence> 장면
├── components/ # 재사용 가능한 UI, 브랜드 로고, 커서, 목업
└── constants/ # 팔레트, 120 BPM 타이밍 헬퍼, 타이포그래피
remotion.config.ts (시스템 Chrome 통합)
import { Config } from '@remotion/cli/config';
import fs from 'node:fs';
const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const edgePath = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe';
if (fs.existsSync(chromePath)) {
Config.setBrowserExecutable(chromePath);
} else if (fs.existsSync(edgePath)) {
Config.setBrowserExecutable(edgePath);
}
Config.setVideoImageFormat('jpeg');
Config.setChromiumOpenGlRenderer('angle');
Config.setConcurrency(4);
5. 실행 및 렌더링 CLI
# 1. 인터랙티브 스튜디오 미리보기 (스크러블 타임라인 및 실시간 HMR)
npm run preview # 또는: npx remotion preview src/index.ts
# 2. 60fps 마스터 MP4 렌더링
npm run build # 또는: npx remotion render src/index.ts <CompId> out.mp4
# 3. 고해상도 키프레임 스틸 캡처
npx remotion still src/index.ts <CompId> still_frame.png --frame=60
6. 참조 문서 색인
모션 그래픽의 특정 측면을 작성할 때는 다음 심층 가이드를 참조하십시오:
- structural-archetypes.md: 5가지 구조 청사진 (마이크로 루프, 소셜 릴, 브랜드 필름, 멀티 챕터 설명자, 연속 변형).
- design-styles.md: 7가지 현대 디자인 스타일 (스위스 네오-브루탈리스트, 다크 티타늄, 편집체 세리프, 광학 하프톤, 촉각 UI, 시네마틱 모빌리티, 생생한 팝) 및 팔레트와 타이포그래피.
- brand-identity-and-ci.md: 자율 벡터 CI 재구성, 로고 공개 메커니즘, 색상 규칙 및 브랜드 모티프.
- storytelling-and-narrative.md: 내러티브 아크, 시각적 은유, 공유 객체 전환 및 페이싱.
- asset-orchestration.md: Ken Burns 팬/줌, 원근 목업, SVG 벡터 배지 및 시각적 계층 구조.
- remotion-patterns.md: 스프링 메커니즘,
interpolate(), 카메라 컨테이너, 스태거 캐스케이드 및<Sequence>오케스트레이션. - ui-motion-recipes.md: 커서, 라이브 카운터, 슬라이더, 모달, 알림 카드 및 그래프.
- remotion-qa-and-verification.md: 3단계 QA 루프, 10점 포스터 체크리스트 및 헤드리스 GPU 렌더링.
- timing.md: 120 BPM 음악 비트 그리드, 프레임 수학, 스태거 오프셋 및 홀드 제한.
- motion-math.md: 하모닉 스프링, 시드 PRNG 및 로그 카메라 줌.
- gotchas.md: Chromium 렌더링 트랩,
preserve-3d, 오버플로 마스크 및 텍스트 블러 방지.