Remotion Editor Starter (Pro)

Editor Starter는 Remotion Pro 제품으로, 화이트라벨 영상 에디터 SaaS를 빠르게 만들 수 있는 스타터 키트다. Next.js 기반 + drag & drop + 자동 렌더 백엔드 포함.

---

💡 무엇이 포함되어 있나

• Next.js + TypeScript 보일러플레이트
• Timeline 기반 비주얼 에디터
• 컴포지션 CRUD UI
• Lambda / SSR / Vercel Sandbox 백엔드 어댑터
• 인증 + 결제 통합 (Stripe 예시)
• 멀티테넌시 (DB 스키마)

---

🛒 구매 & 접근

Editor Starter는 Remotion Pro 라이선스가 필요:

• 사이트: https://remotion.pro/store
• Remotion Pro 가입 후 Slack / GitHub repo 접근 권한 부여

---

🚀 빠른 시작

# Pro repo clone (접근 권한 필요)
git clone https://github.com/remotion-dev/editor-starter-template.git my-editor
cd my-editor
npm install
npm run dev

→ http://localhost:3000에서 에디터 UI 확인.

---

🏗️ 아키텍처

┌─────────────────────┐
│  [Editor UI]        │  Next.js + React
│  - Timeline         │
│  - Composition List │
│  - Property Editor  │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│  [Render Backend]   │  Lambda / SSR / Vercel Sandbox
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│  [Storage]          │  S3 / Vercel Blob / Cloudflare R2
└─────────────────────┘

---

⚙️ 백엔드 어댑터

Editor Starter는 여러 렌더 백엔드를 플러그인 형태로 지원:

// src/server/render.ts
import { renderOnLambda } from "./lambda";
import { renderOnSSR } from "./ssr";
import { renderOnSandbox } from "./sandbox";

export async function renderVideo(props) {
  if (process.env.RENDER_BACKEND === "lambda") {
    return renderOnLambda(props);
  }
  if (process.env.RENDER_BACKEND === "ssr") {
    return renderOnSSR(props);
  }
  return renderOnSandbox(props);
}

어댑터	적합
Lambda	pay-per-render, 대량
SSR	자체 서버, 무제한 시간
Vercel Sandbox	Vercel 통합, 빠른 cold start

---

🎨 커스터마이징

테마 변경

// src/styles/theme.ts
export const theme = {
  primary: "#f5576c",
  background: "#0a0a0a",
  // ...
};

추가 컴포지션

// src/compositions/LogoIntro.tsx
import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig } from "remotion";

export const LogoIntro = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const scale = spring({ fps, frame, config: { damping: 200 } });

  return (
    <AbsoluteFill style={{ background: "black", justifyContent: "center" }}>
      <h1 style={{ color: "white", fontSize: 120, transform: `scale(${scale})` }}>
        My Brand
      </h1>
    </AbsoluteFill>
  );
};

자동으로 에디터 좌측 사이드바에 등록됨.

---

💳 멀티테넌시 & 결제

Editor Starter는 다음을 예시로 포함:

• NextAuth / Clerk — 사용자 인증
• Prisma + Postgres — 사용자/프로젝트 DB
• Stripe — 구독 관리
• S3 / R2 — 렌더 결과 저장

📌 본인이 인프라와 결제를 통합·운영해야 함

---

⚠️ 알아둘 점

• Pro 라이선스 — 구매 필요 (가격: remotion.pro 확인)
• 코드 소유권 — Pro repo를 fork해 자유롭게 수정 가능
• 업데이트 — Remotion 메인 repo와 분리되어 있어 직접 관리
• 제한 — 1 seat당 1개 SaaS 인스턴스 권장 (라이선스 정책 확인)

---

📚 영역 구분

• 단순 임베드: Remotion Player
• 앱 통합: Remotion Building Apps
• 타임라인 UI: Remotion Timeline (Pro)
• 한글 hub: Remotion Studio & Player

상위 문서: ← Remotion Studio & Player 출처: Remotion 공식 문서 — Editor Starter (Pro) 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Editor Starter 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동