Remotion Beautiful Videos
에이전시가 5만 달러에 제작한 것처럼 보이는 40초 제품 런칭 비디오를 만듭니다. 비결: 애니메이션 제품 UI 목업 — 실제 대시보드, 대화 인터페이스, 코드 편집기, 데이터 시각화 — 모두 코드로 구축되고 스프링 애니메이션됩니다.
사용 시기
사용자가 브랜드를 언급하거나 URL을 제공하고 제품 런칭/마케팅/데모 비디오를 원할 때 사용합니다.
사용하지 말아야 할 경우 (이 스킬을 억지로 사용하는 대신 다른 경로로 안내): 기존 긴 비디오에서 짧은 클립 추출(숏츠/재편집 작업); 기존 발표 영상에 자막 추가; 사용자 영상의 NLE 스타일 편집(타이밍/색상/순서 변경); 비트 동기화 가사 비디오가 필요한 배경 음악 트랙. 이 스킬은 브랜드 웹 존재감에서 런칭 비디오를 구축합니다 — 코드 기반 UI 목업, 실제 스크래핑된 자산, 5막 내러티브. 입력이 프레젠테이션할 브랜드/제품이 아니라면 잘못된 도구입니다.
기술 스택
Remotion 4.x (scaffold 고정 ≥4.0.484) + React 19 + TypeScript + Zod + lucide-react + @remotion/transitions + @remotion/google-fonts + @remotion/paths + @remotion/light-leaks + @remotion/media + @remotion/effects (공식 그라데이션/체커보드/엠보스/그리드라인 선호 — 수제 CSS 대체물보다 우선)
시스템 사전 요구사항 — 자동 처리
사용자에게 아무것도 설치하도록 요청하지 마세요. 수동으로 command -v 확인을 실행하지 마세요. 오케스트레이터(scripts/url-to-video.ts)에는 누락된 도구를 감지하고, 누락된 항목을 출력한 후 brew/apt/dnf/pacman/npm을 통해 설치하는 내장 사전 점검이 있습니다 — 모두 1단계 내에서 처리됩니다.
필수 도구 (모두 누락 시 자동 설치):
| 도구 | 이유 |
|---|---|
ffmpeg | 오디오 트림, loudnorm, 비디오 트림, volumedetect 안전 검사 |
yt-dlp | YouTube에서 브랜드 데모 비디오 + 로열티 프리 BGM 스크래핑 |
aubiotrack | analyze-audiomap.py 및 레거시 beat-sync.ts의 저하 모드 비트 폴백 (aubio 패키지 통해) |
playwright | 헤드리스 렌더링 홈페이지 스크린샷 |
사전 점검 플래그 (url-to-video.ts에 전달):
--yes— 확인 없이 자동 설치 (Claude로 실행 시 TTY가 없으므로 사용)--no-install— 설치 건너뛰고 저하 모드 실행 (비트 → 폴백, 스크린샷 → 가져오기 전용)
자동 설치가 실패하는 플랫폼(제한된 환경, sudo 없음)에서 오케스트레이터는 도구별 수동 설치 명령어를 출력하고 저하 모드로 계속 진행합니다. 실행을 포기하지 마세요 — 저하된 출력이라도 아무것도 없는 것보다 낫습니다.
음악 맵 분석기(scripts/analyze-audiomap.py, 4단계)는 자체 사전 점검을 수행합니다: 첫 실행 시 pip로 librosa/numpy/soundfile을 설치하고, 설치 실패 시(또는 --no-install 전달 시) aubiotrack으로 저하됩니다 — 그러면 오디오맵은 bpm + beats_sec만 포함하고 다른 모든 필드는 null이며 rhythmic: false(그리드 불신) 상태가 됩니다.
BGM 생성기(scripts/generate-bgm.py, 2단계 티어 ②)도 동일한 사전 점검 형태를 갖습니다: pip로 transformers/torch/soundfile/numpy 설치 (일반 → --break-system-packages → --user); 설치 실패 시 차단 대신 yt-dlp 폴백 힌트와 함께 종료 — BGM 소싱은 저하되지만 죽지 않습니다. 생성된 트랙은 다른 BGM과 동일하게 analyze-audiomap.py로 전달됩니다.
URL-to-Video V2 출력 계약
권장 경로: V2 인테이크 오케스트레이터를 실행한 후 생성된 프로젝트를 Remotion에서 정제합니다.
node --experimental-strip-types <설치된-스킬-디렉토리>/scripts/url-to-video.ts https://brand-site.com --out ./<브랜드-이름>-launch-video
오케스트레이터는 다음을 생성해야 합니다:
brand-report.jsonscene-constitution.jsonasset-manifest.jsonstory.mdreview.mdpublic/brand/*포함 전체 Remotion 프로젝트 디렉토리, 선택적public/brand/beat-map.json,src/theme.ts및 scaffold가 사용할 생성된 인테이크 데이터
회귀 테스트 경로:
node --experimental-strip-types <설치된-스킬-디렉토리>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render
벤치마크 실행기는 V2 변경 사항을 논쟁 대신 압력 테스트할 수 있도록 벤치마크별 benchmark-result.json 파일과 스위트 요약을 생성해야 합니다.
이 스킬은 원클릭 최종 렌더링에 최적화되지 않았습니다. Claude나 인간이 Remotion 내에서 마지막 10-20%를 개선할 수 있는 비디오 팀 수준의 첫 번째 컷에 최적화됩니다.
핵심 철학
- 추상 그래픽이 아닌 제품 UI 목업을 구축하세요. UI 자체가 애니메이션입니다.
- 먼저 스크래핑하고, 그 다음 디자인하세요. 모든 색상, 폰트, 로고는 실제 브랜드 사이트에서 가져옵니다.
- 속도는 럭셔리입니다. 40초는 콘텐츠가 숨 쉴 시간을 줍니다. 기능을 서두르지 마세요.
- 템플릿보다 취향. 'AI가 만든' 것처럼 보이면 다시 디자인하세요.
- 하나의 폰트 패밀리, 가중치 계층. 300-600 범위만 사용, 절대 볼드(700+)는 사용하지 마세요.
삼중 레이어 헌법
- 현상 계층: 공식 웹사이트 증거 수집.
ScreenshotProof는 필수.VideoProof는 선호. 시각적 증거 없이 신뢰할 수 있는 비디오는 없습니다. - 본질 계층: 증거에서
DesignArchetype추론. 참조를 사용하여 판단을 예리하게 하고, 절대 브랜드를 덮어쓰지 마세요. - 철학 계층: 구축 전 반사적 기본값 거부. 취향이 편의보다 우선합니다. 신뢰성이 화려함보다 우선합니다. 제품 현실이 템플릿 에너지보다 우선합니다.
이 스킬은 다음에서 아이디어를 명시적으로 흡수합니다:
agent-browser(선호되는 현상 계층 수확기, 헤드리스, 화면 하이재킹 없음)awesome-design-md(엔터프라이즈 디자인 아키타입 참조 라이브러리)taste-skill(실행 규율 소스)Impeccable(완료 게이트 및 반-단일문화 어휘 소스)
위 중 어느 것도 하드 의존성이 아닙니다. 그 가치는 이 스킬의 사고와 게이트에 내장되어 있습니다.
규칙
개별 규칙 파일에서 자세한 설명과 코드 예제를 읽으세요:
디자인 시스템
- rules/typography.md - 폰트 가중치 (최대 600), 크기 계층 (최소 24px), 텍스트 안전
- rules/color.md - 브랜드 극성, 중립 색조, 60-30-10 규칙, 강조 불투명도 레벨
- rules/layout.md - 그리드 시스템, 4px 간격 스케일, 안전 영역, border-radius 계층, 반중복
- rules/composition.md - 맞춤 구성 법칙: 제로-진공 분위기 베이스, 풀-블리드 순간, 에디토리얼 200-320px 타이포, 실제-자산-우선, 구성 다양성 — 더불어 구성 SLOP 블랙리스트 (허브-앤-스포크 알약 다이어그램, 빈 카드 삼부작, 중앙 객체 공허, 영원한 스프링+샤이머 오프닝) 및 약한 증거 플레이북 (점수 < 40 → 로고 형상에서 브랜드 세계 성장, 절대 빈 카드 금지)
시각적 콘텐츠
- rules/ui-mockups.md - 제품 UI 구축, 밀도, 타이틀 바, 구문 색상 지정, 커서 시뮬레이션, Giant Terminal 하단 상승 사양 (입증된 형상 + 콘텐츠 계약 + 실패 목록)
- rules/cards.md - 계단식 카드 그리드, 내부 채우기 기술, 애니메이션 카드 본문, 중복 없음
- rules/data-viz.md - SVG 차트, 애니메이션 메트릭, tabular-nums, 상태 배지, 반-영웅 메트릭
- rules/artifact-catalog.md - 액트 디자인 전에 읽으세요: 15가지 전투 테스트된 맞춤 아티팩트 패밀리 (소스 포인터 포함) + scaffold 인벤토리 + 프로덕션 간 영웅 순환 원장 (
~/.media/hero-ledger.jsonl) — 다양성은 게이트이지 제안이 아닙니다
모션 및 프로덕션
- rules/motion.md - 스프링, easeOutExpo, 문자별 스태거, 타이밍 표준, 홀드-댄-스냅, 유기적 AE 어휘 (wiggle / overshoot / idle float / lookAt — 형제
remotion-motion스킬에서 연결) - rules/transitions.md - TransitionSeries, 라이트 릭, 유동적 배경, 노이즈 텍스처, 패럴랙스
- rules/cinematic.md - 필름 그레인, 비네트, 샤이머 스윕, 색상 그레이딩, 글래스모피즘, 렌더 설정
- rules/beat-sync.md - audiomap.json의 BGM 기반 타이밍: 하나의 분석기를 무조건 신뢰,
rhythmic: true일 때 비트-그리드 스냅, 아닐 때 에너지-페이즈/사일런스 페이싱, 에너지 피크에서 홀드-댄-스냅 - rules/narration-sync.md - 음성 해설/자막 비디오 전용: 비트-락 시각적 요소를 속삭임 단어 타임스탬프에 맞춤, 자막/브랜드-단어 정리, 문장 경계 컷 스냅
전략 및 품질
- rules/creative-moves.md - 모든 '감동' 판정에서 추출된 다섯 가지 창의적 생성기 — 관용구-직역, 로고-형상 성장, 제약 연금술, 의미 반전, 도메인-내재 증명
- rules/taste.md - AI 슬롭 블랙리스트, 디자인 원칙, UX 법칙, 자체 검토 체크리스트, 페이싱
- rules/narrative.md - 5막 구조, 헤드라인/UI 리듬, 스토리 아크, 로고 별자리
- rules/narrative-templates.md - 산업별 내러티브 템플릿 (AI SaaS, FinTech, DevTool, E-Commerce, Healthcare, Cybersecurity, Collaboration)
- rules/workflow.md - 브랜드 스크래핑, 아이콘 시스템, 자산 전략, 비디오 임베딩, 파일 구성, BGM 다양성 의무 (브랜드 파생 분위기 + 글로벌 원장 중복 제거 — 같은 트랙 두 번 사용 금지)
- rules/media-resolve.md - 자산 해결 계단식 (원장 → 채택 → 프로그래매틱 → 카탈로그 → 웹) with
.media/manifest.jsonl고정 원장; 프로그래매틱 우선: 점선 지도 세계 지도, simple-icons 마크, LobeHub AI 모델 로고를 인라인 색조 가능 컴포넌트로 - rules/archetypes.md - 고품질 디자인 참조에서 추상화된 엔터프라이즈 디자인 아키타입
- rules/finish-gate.md - Impeccable 스타일 완료 프로토콜, 반-단일문화 검사, 렌더 차단 기준
- rules/qc-gates.md - 네 가지 증거 기반 QC 게이트: 자산 감사 (2.5단계), 액트별 프레임 증거 (4단계), 비평가 루프 배선 (7.5단계), 정직한 공개 (8단계). 증거 전용 — 렌더링된 픽셀 + 읽기, grep 금지
참조 파일 (코드 패턴)
- references/animations.md - FadeIn, ScaleIn, SplitText, Typewriter, CountUp, AnimatedPath
- references/audio.md - 오디오 동기화, 비트 감지, 음성 해설 덕킹, ElevenLabs TTS
with-timestampsVO 파이프라인 (무료 단어 타이밍, 제한된 키 처리, VO_CUES 기반 덕크) - references/components.md - GradientMesh, GlassPanel, FilmGrain, ProductFrame, BrandIcon
- scaffold/src/components/Transitions.tsx - 7가지 전환 패밀리 (whipPan/maskWipe/push/zoomPunch/blurDissolve/flashThrough/glitchCut) — fade()의 드롭인 대체; 모든 페이드 비디오는 위반
- scaffold/src/components/ShaderFX.tsx - GPU ShaderPlane (liquidWarp 프로덕션 준비; silk/lens 작업 중) —
--gl=angle로 렌더 (scaffold 렌더 스크립트에 내장) - scaffold/src/components/Captions.tsx - 단어 타임스탬프 자막, 6가지 스타일 (karaoke/scalePop/weightShift/neonGlow/kineticSlam/editorial)
- references/lottie.md - @remotion/lottie 통합, 권장 소스
- references/visual-effects.md - 계층화된 시각 효과 라이브러리 참조 (lottie, motion-blur, confetti, flubber, three.js)
Remotion API 참조 (번들)
이 스킬은 Remotion API 패턴에 대한 전체 remotion-best-practices 참조를 번들로 제공합니다. Remotion 특화 API 지식이 필요할 때 로드하세요:
- remotion-best-practices/rules/videos.md - 비디오 임베딩, 트리밍, 볼륨, 속도, 루핑
- remotion-best-practices/rules/audio.md - 오디오 가져오기, 트리밍, 볼륨, 속도, 피치
- remotion-best-practices/rules/timing.md - 보간 곡선, 선형, 이징, 스프링
- remotion-best-practices/rules/transitions.md - 장면 전환 패턴
- remotion-best-practices/rules/compositions.md - 컴포지션, 스틸, 폴더, 기본 props
- remotion-best-practices/rules/sequencing.md - 시퀀스 지연, 트림, 기간 제한
- remotion-best-practices/rules/fonts.md - Google Fonts 및 로컬 폰트 로딩
- remotion-best-practices/rules/images.md - Img 컴포넌트 사용법
- remotion-best-practices/rules/charts.md - 막대, 원형, 라인, 주식 차트 패턴
- remotion-best-practices/rules/light-leaks.md - @remotion/light-leaks 오버레이 효과
- remotion-best-practices/rules/lottie.md - @remotion/lottie 통합
- remotion-best-practices/rules/text-animations.md - 타이포그래피 애니메이션 패턴
- remotion-best-practices/rules/calculate-metadata.md - 동적 컴포지션 메타데이터
- remotion-best-practices/rules/voiceover.md - ElevenLabs TTS를 사용한 AI 음성 해설
- remotion-best-practices/rules/parameters.md - Zod 스키마 매개변수화
- remotion-best-practices/rules/ffmpeg.md - 비디오 트리밍을 위한 FFmpeg 작업
워크플로우 (8단계 + 4 증거 게이트)
이 워크플로우 내에서 네 가지 증거 기반 QC 게이트가 실행됩니다 — 자산 감사 (2.5단계), 액트별 프레임 증거
…
[번역을 위해 잘림]