Remotion TypeScript & Bundler

Remotion 프로젝트에서 TypeScript path alias(@/components 등)와 번들러 옵션을 설정하는 방법.

🔧 TypeScript Path Alias 설정

@/components 같은 별칭을 사용하면 import가 깔끔해진다:

// before
import { Title } from "../../components/Title";

// after (with alias)
import { Title } from "@/components/Title";

1. `tsconfig.json`

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

2. Remotion Webpack 설정

Remotion은 내부적으로 Webpack을 사용. remotion.config.ts에서 alias 등록:

// remotion.config.ts
import path from "path";

export default {
  // Webpack override
  webpackOverride: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "src"),
    };
    return config;
  },
};

📌 별칭 사용 시 TypeScript와 Webpack alias를 모두 등록해야 한다.

3. Vite 사용 시

Vite 기반 프로젝트(--template=vite):

// vite.config.ts
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

상세 가이드: https://www.remotion.dev/docs/typescript-aliases

📦 번들러 옵션

Webpack Override

// remotion.config.ts
import { Config } from "@remotion/cli/config";

export default {
  webpackOverride: (config) => {
    // 특정 의존성을 external로
    config.externals = [...(config.externals || []), "some-native-module"];

    // 추가 플러그인
    config.plugins.push(/* ... */);

    return config;
  },
};

자주 쓰는 override 예시

SVG를 React 컴포넌트로 임포트:

webpackOverride: (config) => {
  config.module.rules.push({
    test: /\.svg$/,
    use: ["@svgr/webpack"],
  });
  return config;
}

특정 의존성 external (번들 제외):

webpackOverride: (config) => {
  config.externals = [...config.externals, { "ffmpeg-static": "commonjs ffmpeg-static" }];
  return config;
}

🧩 TypeScript 팁

1. `noUncheckedIndexedAccess`

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true
  }
}

배열·객체 접근이 T | undefined로 추론되어 런타임 에러 방지.

2. Zod 스키마로 inputProps 타입 추론

import { z } from "zod";

const schema = z.object({
  title: z.string(),
  items: z.array(z.object({ text: z.string() })),
});

type Props = z.infer<typeof schema>;

📌 자세한 Zod 패턴: Remotion Parameterized Videos

3. Composition ID 상수

// src/compositions/ids.ts
export const COMPOSITION_IDS = {
  INTRO: "Intro",
  SLIDESHOW: "Slideshow",
  OUTRO: "Outro",
} as const;

타입 안전한 컴포지션 ID 참조.

📚 자주 쓰는 의존성 패턴

1. 데이터 시각화 (Chart)

npm i recharts

Recharts를 컴포지션에서 사용 가능. 차트는 정적 SVG 렌더링이므로 Remotion과 잘 맞음.

2. 폰트

import "@fontsource/pretendard";

npm i @fontsource/pretendard 후 import만 하면 자동 로드.

3. 색상 / 헬퍼

import { colord } from "colord";

colord로 색상 조작·팔레트 생성.

⚠️ 알아둘 점

Webpack 한계 — 일부 Webpack 5 미지원 패키지는 SSR·Lambda에서 동작 안 할 수 있음
TypeScript strict — 권장 ("strict": true)
ESLint — @remotion/eslint-config 사용 가능
Vite — Remotion 4.0+에서 Vite 지원. 더 빠른 번들링

📚 영역 구분

스타일링: Remotion Tailwind & Styling
컴포지션 등록: Remotion The Fundamentals
한글 hub: Remotion AI & 도구

상위 문서: ← Remotion AI & 도구 출처: Remotion 공식 문서 — TypeScript aliases & Bundler 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

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