Remotion Building Apps

기존 React/Next.js 앱에 Remotion을 통합하는 패턴. Player 임베드부터 Next.js App Router, 라우팅 처리까지 정리한다.

---

🧱 통합 패턴 3가지

패턴	적합
Player 임베드	React 앱에 미리보기·SaaS
Next.js App Router	서버 컴포넌트 + 클라이언트 컴포넌트 혼합
React Router 7	React Router 기반 SPA

---

1️⃣ Next.js App Router 통합

1. 설치

npm i remotion @remotion/player @remotion/cli
npx remotion init       # src/remotion/ 폴더 생성

2. 컴포지션 폴더 분리

src/
  remotion/
    index.ts        # <Composition> 등록
    Root.tsx
    compositions/
      MyComp.tsx
  app/
    preview/
      page.tsx

3. Client Component로 렌더

src/app/preview/page.tsx:

"use client";
import { Player } from "@remotion/player";
import { MyComp } from "@/remotion/compositions/MyComp";

export default function PreviewPage() {
  return (
    <Player
      component={MyComp}
      durationInFrames={300}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
    />
  );
}

4. Studio 실행은 별도

# 별도 터미널에서
npx remotion studio src/remotion/index.ts

Next.js dev 서버와 Studio는 동시에 다른 포트에서 실행.

---

2️⃣ Remix / React Router 7 통합

npx create-video@latest --react-router

생성된 app/routes/player.tsx:

import { Player } from "@remotion/player";
import { MyComp } from "../remotion/MyComp";

export default function PlayerRoute() {
  return (
    <Player
      component={MyComp}
      durationInFrames={300}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
}

---

3️⃣ 기존 프로젝트에 Remotion 추가

이미 Next.js 프로젝트가 있다면:

# 1. Remotion 의존성 설치
npm i remotion @remotion/cli

# 2. 컴포지션 디렉터리 생성
mkdir -p src/remotion

# 3. src/remotion/Root.tsx 작성
# (Studio가 인식할 <Composition> 등록)

// src/remotion/Root.tsx
import { Composition } from "remotion";
import { MyComp } from "./MyComp";

export const RemotionRoot: React.FC = () => (
  <Composition
    id="MyComp"
    component={MyComp}
    durationInFrames={300}
    fps={30}
    width={1920}
    height={1080}
  />
);

// src/remotion/index.ts (Studio 진입점)
export { RemotionRoot as default } from "./Root";

# Studio 실행
npx remotion studio src/remotion/index.ts

---

🌐 라우팅 패턴

미리보기 페이지: /preview

// app/preview/[id]/page.tsx
import { prisma } from "@/lib/db";
import { Player } from "@remotion/player";
import { MyComp } from "@/remotion/compositions/MyComp";

export default async function PreviewPage({ params }: { params: { id: string } }) {
  const data = await prisma.video.findUnique({ where: { id: params.id } });

  return (
    <Player
      component={MyComp}
      durationInFrames={300}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      inputProps={{ title: data.title, color: data.color }}
    />
  );
}

렌더 트리거: /api/render

// app/api/render/route.ts
import { renderMediaOnLambda } from "@remotion/lambda";

export async function POST(req: Request) {
  const { id } = await req.json();
  // Lambda 호출
  // ...
  return Response.json({ renderId: "..." });
}

---

⚠️ 알아둘 점

• Server Component 주의 — Player는 Client Component에서만 사용. "use client" 필요
• 번들 분리 — Remotion 코드는 src/remotion/에 격리 권장
• Server-side Rendering ≠ Player — Lambda/SSR로 mp4 만드는 패턴은 별도 (Remotion Server-side Rendering)
• License — Remotion의 License 정책 확인 (https://www.remotion.dev/docs/license)

---

📚 영역 구분

• Player 임베드: Remotion Player
• 서버 렌더: Remotion Server-side Rendering (SSR)
• Studio 통합: Remotion Studio (Studio-into-app)
• 한글 hub: Remotion Studio & Player

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

변경 이력

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