Remotion 에코시스템 — 통합 스킬 아키텍처
범위
이 문서는 통합 레이어로서 91개의 개별 스킬을 하나의 응집력 있는 비디오 프로덕션 파이프라인으로 변환합니다. 어떤 스킬도 대체하지 않으며, 스킬 간 라우팅, 데이터 흐름, 오케스트레이션 패턴을 제공합니다.
아래 모든 스킬은 독립적으로 사용할 수 있습니다. 이 에코시스템 문서는 엔드투엔드 Remotion 비디오 시스템을 구축할 때 이 스킬들이 어떻게 함께 구성되는지 설명합니다.
10개 카테고리
remotion-ecosystem/
├── 01-core-video/ ← 렌더링 엔진 + 비디오 전략
│ ├── remotion-video-pro (스캐폴딩, 애니메이션, 배치 렌더)
│ ├── marketing-video (프로덕션 접근 방식 선택)
│ ├── video-generation (AI 비디오 생성)
│ └── video-understand (비디오 분석)
│
├── 02-data-ingestion/ ← 비디오 데이터를 위한 콘텐츠 소싱
│ ├── firecrawl-scrape (JS 렌더링 페이지 추출)
│ ├── firecrawl-crawl (대량 사이트 크롤링)
│ ├── spider (사이트 스캐닝 + 보안 감사)
│ ├── web-reader (페이지 메타데이터 + 콘텐츠)
│ ├── web-search (실시간 검색)
│ └── browserbase-fetch (경량 URL 페칭)
│
├── 03-browser-automation/ ← 보호된 콘텐츠를 위한 인증 + 상호작용
│ ├── browser-cdp (Chrome 세션 재사용)
│ ├── agent-browser (헤드풀 브라우저 자동화)
│ └── browserbase-autobrowse (자기 개선 브라우징 루프)
│
├── 04-ai-intelligence/ ← AI 추론 + 모델 오케스트레이션
│ ├── think (Gemini 기반 다중 프레임워크 추론)
│ ├── council-of-five (5인 페르소나 병렬 토론)
│ ├── amazon-bedrock (Claude/Llama/Nova 모델 호출)
│ ├── LLM (채팅 완성)
│ └── VLM (비전-언어 이해)
│
├── 05-content-design/ ← 시각적 에셋 + 모션 디자인
│ ├── charts (데이터 시각화)
│ ├── image-generation (AI 이미지 생성)
│ ├── image-edit (AI 이미지 편집)
│ ├── ui-ux-pro-max (디자인 시스템 + UI 추론)
│ ├── anthropic-frontend-design (독특한 인터페이스)
│ └── web-shader-extractor (시각 효과 추출)
│
├── 06-monitoring-security/ ← 관찰 가능성 + 보호
│ ├── sentry-ai-monitoring (LLM 호출 추적 + 토큰 추적)
│ ├── sentry-nextjs-sdk (Next.js 오류 + 성능 모니터링)
│ ├── audit-analyzer (시스템 감사)
│ ├── diagnose (디버깅 + 진단)
│ └── mcp-spy (MCP 트래픽 디버깅)
│
├── 07-marketing-strategy/ ← 성장 + 실험
│ ├── marketing-ab-testing (가설 + 카이제곱 유의성)
│ ├── marketing-launch (5단계 런칭 프레임워크)
│ ├── marketing-mode (그로스 마케팅 오케스트레이션)
│ └── content-strategy (콘텐츠 기획)
│
├── 08-devops-deploy/ ← 인프라 + CI/CD
│ ├── aws-agents-deploy (Railway/Vercel/Lambda 배포)
│ ├── amazon-bedrock (AWS AI 모델 배포)
│ ├── vercel (Vercel 배포)
│ ├── deployment-manager (멀티 플랫폼 배포)
│ ├── github (CI/CD + 레포지토리 관리)
│ └── fullstack-dev (Next.js 풀스택 개발)
│
├── 09-document-output/ ← 비디오 데이터 기반 보고서 + 결과물
│ ├── docx (Word 문서)
│ ├── pdf (PDF 생성)
│ ├── ppt / pptx (프레젠테이션)
│ ├── xlsx (스프레드시트)
│ └── infographic-gen (인포그래픽)
│
└── 10-agent-systems/ ← 에이전트 오케스트레이션 + 메모리
├── agent-roles (전문화된 에이전트 페르소나)
├── superpowers (명세 우선 + 하위 에이전트 위임)
├── proactive-agent (자율적 자기 개선)
├── self-improving-agent (오류 로깅 + 학습)
├── persistent-memory (크로스 세션 메모리)
└── context-compressor (컨텍스트 윈도우 최적화)
파이프라인 아키텍처
Remotion 에코시스템은 6단계 파이프라인을 따릅니다:
[1. 수집] → [2. 사고] → [3. 디자인] → [4. 렌더링] → [5. 테스트] → [6. 배포]
┌──────────────────────────────────────────────────────────────────┐
│ 1단계: 수집 — 데이터 수집 (02-data-ingestion) │
│ │
│ firecrawl-scrape ──→ 경쟁사 페이지 스크래핑 │
│ browser-cdp ──────→ 인증 필요 콘텐츠 추출 │
│ spider ───────────→ 제품 페이지 스캔하여 데이터 수집 │
│ web-search ────────→ 시장 인텔리전스 수집 │
│ web-reader ────────→ 기사 콘텐츠 추출 │
│ │
│ 출력: { 제품, 경쟁사, 사용후기, 가격 정보 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 2단계: 사고 — AI 인텔리전스 (04-ai-intelligence) │
│ │
│ think ─────────────→ 데이터에 대한 첫 원칙 분석 │
│ council-of-five ───→ 비디오 접근법에 대한 5인 페르소나 토론 │
│ amazon-bedrock ────→ 대본/카피/스토리보드 생성 │
│ LLM ────────────────→ 메시지 및 CTA 다듬기 │
│ │
│ 출력: { 대본, 스토리보드, 카피 변형, 장면 계획 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 3단계: 디자인 — 콘텐츠 + 시각 (05-content-design) │
│ │
│ image-generation ──→ 히어로 이미지, 제품 샷 │
│ charts ─────────────→ 비디오용 데이터 시각화 │
│ ui-ux-pro-max ─────→ 레이아웃 + 컬러 + 타이포그래피 시스템 │
│ web-shader-extractor → 참조 사이트에서 시각 효과 추출 │
│ │
│ 출력: { 이미지, 차트, 컬러 팔레트, 모션 사양서 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 4단계: 렌더링 — 코어 비디오 (01-core-video) │
│ │
│ remotion-video-pro → React 컴포넌트를 프레임으로 구성 │
│ marketing-video ────→ 프로덕션 접근 방식 선택 │
│ video-generation ──→ AI 생성 B-롤 푸티지 │
│ video-understand ──→ 참조 비디오 분석 │
│ │
│ 출력: { MP4 렌더링, 변형 구성물 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 5단계: 테스트 — 모니터링 + A/B (06 + 07) │
│ │
│ marketing-ab-testing → 변형에 대한 카이제곱 유의성 검사 │
│ sentry-ai-monitoring → 생성 중 LLM 호출 추적 │
│ audit-analyzer ─────→ 렌더링된 에셋의 보안 스캔 │
│ diagnose ────────────→ 렌더링 실패 디버깅 │
│ │
│ 출력: { 테스트 결과, 유의성 점수, 오류 보고서 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ 6단계: 배포 — 데브옵스 + 마케팅 (08 + 07) │
│ │
│ aws-agents-deploy ─→ Lambda/Railway에 배포 │
│ marketing-launch ───→ 5단계 제품 런칭 │
│ vercel ──────────────→ 웹훅 서비스 호스팅 │
│ fullstack-dev ───────→ 렌더 관리용 Next.js 대시보드 │
│ │
│ 출력: { 라이브 렌더링, 웹훅 엔드포인트, 런칭 캠페인 } │
└──────────────────────────────────────────────────────────────────┘
통합 경로
경로 A: 경쟁사 인텔리전스 비디오
spider (경쟁사 사이트 스캔)
→ firecrawl-scrape (제품 페이지 추출)
→ amazon-bedrock (경쟁 환경 분석)
→ council-of-five (비디오 각도 토론)
→ charts (비교 시각화 생성)
→ remotion-video-pro (경쟁사 비교 비디오 렌더링)
→ marketing-ab-testing (비디오 변형 A/B 테스트)
→ aws-agents-deploy (Lambda에 배포)
경로 B: 제품 런칭 비디오 캠페인
marketing-launch (5단계 런칭 계획)
→ web-search (시장 데이터 수집)
→ think (첫 원칙 메시징 전략)
→ amazon-bedrock (비디오 대본 생성)
→ image-generation (히어로 이미지 생성)
→ ui-ux-pro-max (시각 시스템 디자인)
→ remotion-video-pro (런칭 비디오 렌더링)
→ video-generation (AI B-롤 푸티지)
→ sentry-ai-monitoring (모든 AI 호출 추적)
→ aws-agents-deploy (파이프라인 배포)
→ marketing-ab-testing (후크 변형 테스트)
경로 C: 데이터 기반 개인화 비디오
firecrawl-crawl (고객 데이터 소스 대량 추출)
→ browser-cdp (인증 필요 CRM 데이터 추출)
→ amazon-bedrock (수신자별 비디오 카피 개인화)
→ charts (개인화된 데이터 시각화 생성)
→ remotion-video-pro (개인화 props로 배치 렌더링)
→ sentry-ai-monitoring (배치 LLM 토큰 사용량 모니터링)
→ aws-agents-deploy (Lambda 배치 렌더링)
→ docx/xlsx (캠페인 ROI 보고서 생성)
경로 D: 콘텐츠 재목적화 파이프라인
video-understand (소스 비디오 분석)
→ browserbase-autobrowse (참조 콘텐츠 수집)
→ think (재목적화 전략 계획)
→ firecrawl-scrape (참조용 블로그 콘텐츠 추출)
→ marketing-video (숏폼 vs 롱폼 접근 방식 선택)
→ image-generation (썸네일 변형 생성)
→ remotion-video-pro (플랫폼별 버전 렌더링)
→ marketing-launch (멀티 플랫폼 배포 조정)
경로 E: 대규모 A/B 테스트 비디오 변형
marketing-ab-testing (가설 + 변형 설계)
→ council-of-five (테스트할 변형 토론)
→ amazon-bedrock (변형 카피/대본 생성)
→ ui-ux-pro-max (변형 시각 시스템 설계)
→ remotion-video-pro (A/B 구성물 렌더링)
→ sentry-ai-monitoring (생성 비용 추적)
→ marketing-launch (테스트 대상에 배포)
→ charts (테스트 결과 시각화)
→ pdf (테스트 보고서 생성)
교차 관심사
보안 (06-monitoring-security)
모든 파이프라인 단계는 다음으로 감싸야 합니다:
- sentry-ai-monitoring: 모든 LLM 호출 추적 (토큰 수, 지연 시간, 비용)
- sentry-nextjs-sdk: 웹훅 서비스 상태 모니터링
- audit-analyzer: 배포된 인프라의 정기적 보안 스캔
- mcp-spy: 개발 중 MCP 도구 통합 디버깅
메모리 (10-agent-systems)
반복 비디오 제작을 위한 세션 간 연속성:
- persistent-memory: 브랜드 가이드라인, 컬러 팔레트, 과거 캠페인 저장
- context-compressor: 복잡한 파이프라인 실행 시 컨텍스트 윈도우 최적화
- self-improving-agent: 렌더링 실패 및 A/B 테스트 결과 학습
품질 (01-core-video)
모든 렌더링에서 remotion-video-pro 골든 룰 적용:
- 프레임 기반 결정론 (Math.random 금지)
- 선형 애니메이션보다 스프링 애니메이션
- 모든 장면 컴포넌트에 React.memo
- 모든 props에 Zod 스키마 검증
- 사전 커밋 검증 훅
빠른 참조 — 스킬 대 파이프라인 단계
| 스킬 | 주요 단계 | 보조 용도 |
|---|---|---|
| remotion-video-pro | 4. 렌더링 | 5. 테스트 (검증) |
| firecrawl-scrape | 1. 수집 | 6. 배포 (페이지 확인) |
| firecrawl-crawl | 1. 수집 | 3. 디자인 (참조 콘텐츠) |
| spider | 1. 수집 | 6. 배포 (보안 스캔) |
| browser-cdp | 1. 수집 | 3. 디자인 (인증 콘텐츠) |
| browserbase-fetch | 1. 수집 | — |
| browserbase-autobrowse | 1. 수집 | 2. 사고 (연구) |
| think | 2. 사고 | 5. 테스트 (디버그 분석) |
| council-of-five | 2. 사고 | 7. 마케팅 (전략) |
| amazon-bedrock | 2. 사고 | 4. 렌더링 (AI 생성) |
| LLM | 2. 사고 | — |
| VLM | 2. 사고 | 4. 렌더링 (장면 분석) |
| charts | 3. 디자인 | 9. 출력 (보고서) |
| image-generation | 3. 디자인 | 4. 렌더링 (에셋) |
| ui-ux-pro-max | 3. 디자인 | 2. 사고 (레이아웃 추론) |
| marketing-ab-testing | 5. 테스트 | 7. 마케팅 (성장) |
| marketing-launch | 6. 배포 | 7. 마케팅 (캠페인) |
| sentry-ai-monitoring | 5. 테스트 | 6. 배포 (프로덕션 모니터) |
| aws-agents-deploy | 6. 배포 | — |
| fullstack-dev | 6. 배포 | 3. 디자인 (대시보드) |
| docx/pdf/xlsx | 9. 출력 | 7. 마케팅 (보고서) |
| agent-roles | 10. 시스템 | 2. 사고 (위임) |
| superpowers | 10. 시스템 | — |