Remotion Server은(는) 무엇을 하나요?

모든 Linux 서버에서 헤드리스로 Remotion v4(최신: v4.0.435) 비디오를 렌더링합니다. Mac이나 GUI가 필요하지 않습니다. Chrome Headless Shell이 모든 렌더링을 처리합니다. VPS, Raspberry Pi, CI 러너, Docker 컨테이너 등 Node.js가 실행되는 모든 곳에서 작동합니다. FFmpeg는 각 Remotion 프로젝트에 내장되어 있습니다. 별도의 FFmpeg 설치가 필요 없습니다.

설정 (일회성)

Chrome Headless Shell에 필요한 브라우저 의존성을 설치합니다:

bash {baseDir}/scripts/setup.sh

이 명령어는 헤드리스 Linux에서 Chrome에 필요한 시스템 라이브러리(libnss3, libatk, libgbm, libcups2 등)를 설치합니다. Ubuntu 22.04/24.04, Debian, Amazon Linux를 지원합니다.

설정 확인

설치 후, Chrome Headless Shell이 작동하는지 확인합니다:

npx @remotion/chrome-headless-shell --help

이 명령이 실패하면 시스템 의존성이 누락된 것입니다. setup.sh를 다시 실행하거나 수동으로 설치하세요:

# Ubuntu/Debian
sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgbm1 \
  libpango-1.0-0 libcairo2 libxcomposite1 libxdamage1 libxfixes3 libxrandr2

# Amazon Linux
sudo yum install -y mesa-libgbm libX11 libXrandr libdrm libXdamage libXfixes \
  libxkbcommon dbus-libs libXcomposite alsa-lib nss pango cups-libs at-spi2-core atk

빠른 시작

프로젝트 생성

bash {baseDir}/scripts/create.sh my-video
cd my-video

비디오 렌더링

npx remotion render MyComp out/video.mp4

브라우저에서 미리보기 (개발 모드)

npx remotion preview

로컬 개발 서버가 열리며, 비디오 타임라인을 스크러빙하고, props를 조정하고, 렌더링 전에 반복 작업을 할 수 있습니다.

렌더링 옵션 (5가지 방법)

Remotion v4는 다섯 가지 렌더링 백엔드를 제공합니다. 인프라와 규모에 따라 선택하세요.

1. 로컬 CLI (기본값)

Node.js가 실행되는 머신에서 렌더링합니다. 개발, CI, 단일 서버 배포에 가장 적합합니다.

npx remotion render MyComp out/video.mp4

2. Remotion Lambda

AWS Lambda 함수에 렌더링을 분산합니다. 최대 약 80분의 Full HD 비디오를 렌더링합니다. 비동기 알림을 위한 웹훅과 내장 비용 추정 기능을 지원합니다.

npm install @remotion/lambda

# Lambda 함수 배포
npx remotion lambda functions deploy

# Lambda에서 렌더링
npx remotion lambda render MyComp

# 렌더링 전 비용 추정
npx remotion lambda still --estimate-price MyComp

주요 기능:

여러 Lambda 호출에 걸친 분산 렌더링
렌더링 완료 시 웹훅 콜백
렌더링 전 비용 추정
S3 출력 스토리지

자세한 내용: https://www.remotion.dev/docs/lambda

3. @remotion/vercel (신규 - 2026년 2월)

Vercel Sandbox 내에서 렌더링합니다. AWS 계정이 필요 없어 가장 간단한 설정입니다.

npm install @remotion/vercel

Remotion 프로젝트를 Vercel에 배포하고 API를 통해 렌더링을 트리거합니다. 이미 Vercel을 사용 중이고 설정이 필요 없는 렌더링을 원하는 팀에 가장 적합합니다.

자세한 내용: https://www.remotion.dev/docs/vercel

4. Cloud Run (알파)

Google Cloud Run에서 렌더링합니다. 긴 비디오의 경우 Lambda보다 컴퓨팅 비용이 저렴합니다.

npm install @remotion/cloudrun
npx remotion cloudrun render MyComp

자세한 내용: https://www.remotion.dev/docs/cloudrun

5. EC2 GPU 렌더링 (v4.0.248+)

EC2 GPU 인스턴스에서 하드웨어 가속 렌더링을 수행합니다. 복잡한 애니메이션이나 3D 콘텐츠가 포함된 복잡한 컴포지션에 가장 빠른 옵션입니다.

GPU가 있는 EC2 인스턴스(예: g4dn.xlarge)와 적절한 드라이버가 필요합니다.

자세한 내용: https://www.remotion.dev/docs/gpu

소셜 미디어 포맷 사전 설정

컴포지션을 만들 때 이러한 해상도 및 화면 비율 사전 설정을 사용하세요. npx remotion render에 --width와 --height를 전달하여 컴포지션 기본값을 재정의할 수 있습니다.

TikTok / YouTube Shorts / Instagram Reels (9:16 세로)

npx remotion render ChatDemo out/tiktok.mp4 --width=1080 --height=1920

해상도: 1080x1920
화면 비율: 9:16
권장 FPS: 30
최대 길이: 60초(TikTok), 60초(Shorts), 90초(Reels)

YouTube 표준 (16:9 가로)

npx remotion render MyComp out/youtube.mp4 --width=1920 --height=1080

해상도: 1920x1080
화면 비율: 16:9
권장 FPS: 30 또는 60

Instagram Post (1:1 정사각형)

npx remotion render MyComp out/instagram-post.mp4 --width=1080 --height=1080

해상도: 1080x1080
화면 비율: 1:1
최대 길이: 60초

Twitter/X 비디오 (16:9 가로)

npx remotion render MyComp out/twitter.mp4 --width=1280 --height=720

해상도: 1280x720
화면 비율: 16:9
최대 파일 크기: 512MB
최대 길이: 140초

포맷 사전 설정 요약

플랫폼	너비	높이	비율	FPS
TikTok	1080	1920	9:16	30
YouTube Shorts	1080	1920	9:16	30
Instagram Reel	1080	1920	9:16	30
Instagram Post	1080	1080	1:1	30
YouTube	1920	1080	16:9	30
Twitter/X	1280	720	16:9	30

코드에서 Composition을 만들 때는 width, height, fps를 직접 설정하세요:

<Composition
  id="TikTokPromo"
  component={PromoVideo}
  durationInFrames={30 * 15}
  fps={30}
  width={1080}
  height={1920}
/>

새로운 패키지 (v4.0.429+)

@remotion/sfx (v4.0.429)

빠른 오디오 큐를 위한 내장 음향 효과:

import { Sfx } from "@remotion/sfx";

// 사용 가능한 사운드: ding, bruh, vineBoom
<Sfx name="ding" />
<Sfx name="bruh" />
<Sfx name="vineBoom" />

@remotion/starburst (v4.0.435)

별폭발 모양 및 애니메이션 컴포넌트:

import { Starburst } from "@remotion/starburst";

<Starburst
  points={12}
  innerRadius={50}
  outerRadius={100}
  fill="yellow"
/>

@remotion/shapes (업데이트됨 v4.0.432)

기하학적 모양 프리미티브. 이제 Arrow 모양이 포함됩니다:

import { Triangle, Star, Pie, Arrow } from "@remotion/shapes";

<Triangle length={100} direction="up" fill="red" />
<Star points={5} innerRadius={30} outerRadius={60} fill="gold" />
<Pie radius={50} progress={0.75} fill="blue" />
<Arrow length={150} direction="right" fill="black" />

@remotion/captions

비디오 콘텐츠를 위한 애니메이션 캡션. 단어 단위 타이밍과 여러 애니메이션 스타일을 지원합니다:

import { Caption } from "@remotion/captions";

<Caption
  text="Hello world"
  startFrame={0}
  endFrame={60}
  style="bounce"
/>

@remotion/player

파일로 렌더링하지 않고 Remotion 비디오를 React 앱에 임베드합니다. 컨트롤이 있는 대화형 재생:

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

<Player
  component={MyComp}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls
/>

Mediabunny (포맷 변환)

Mediabunny는 @remotion/media-parser와 @remotion/webcodecs의 후속 제품입니다. Remotion에 내장된 GPU 가속 포맷 변환 기능입니다.

지원 입력: MP4, WebM, MOV, MKV, M3U8, TS, AVI, MP3, FLAC, WAV, M4A, AAC 지원 출력: MP4, WebM, WAV

import { convertMedia } from "@remotion/media-converter";

await convertMedia({
  src: "input.mov",
  container: "mp4",
});

Remotion Skills (2026년 1월)

프롬프트-투-비디오 워크플로우를 위한 AI 에이전트 통합. Claude Code가 자연어 설명에서 Remotion 구성을 생성할 수 있습니다.

"'New Feature'라는 애니메이션 텍스트가 스프링 애니메이션으로 페이드 인되는 15초 TikTok 비디오를 만든 다음, 세 개의 글머리 기호를 보여주세요"

에이전트는 TSX 구성을 생성하고, 등록하고, 렌더링합니다. 단일 프롬프트로 모든 작업이 수행됩니다.

템플릿

모든 템플릿은 create.sh 스크립트를 통해 생성됩니다. 각 템플릿은 TypeScript, TailwindCSS 4.2.0 및 템플릿 컴포넌트가 포함된 완전한 Remotion 프로젝트를 생성합니다.

Chat Demo (Telegram 스타일 전화 목업)

전화 목업 내부에서 순차적으로 나타나는 애니메이션 채팅 버블입니다. 제품 데모, 봇 쇼케이스, 고객 지원 하이라이트에 적합합니다.

bash {baseDir}/scripts/create.sh my-chat --template chat
cd my-chat

src/messages.json을 편집하여 대화를 사용자 정의하세요:

[
  {"text": "비밀번호를 어떻게 재설정하나요?", "isUser": true},
  {"text": "설정 > 계정 > 비밀번호 재설정으로 이동하세요. 약 30초 후에 이메일을 받게 됩니다.", "isUser": false},
  {"text": "알겠습니다, 감사합니다!", "isUser": true}
]

TikTok 해상도로 렌더링:

npx remotion render ChatDemo out/chat-tiktok.mp4 --width=1080 --height=1920

기본 구성: 1080x1920 (세로), 30fps, 길이는 메시지 수에서 자동 계산됩니다.

Title Card (애니메이션 인트로)

스프링 애니메이션으로 페이드 인되는 제목입니다. 비디오 인트로, 섹션 헤더 또는 독립형 알림 카드에 사용하세요.

bash {baseDir}/scripts/create.sh my-intro --template title
cd my-intro

src/TitleCard.tsx의 defaultProps를 편집하여 사용자 정의하세요:

defaultProps={{ title: "제품 출시", subtitle: "2026년 3월 출시 예정" }}

YouTube 해상도로 렌더링:

npx remotion render TitleCard out/title-youtube.mp4 --width=1920 --height=1080

기본 구성: 1920x1080 (가로), 30fps, 3초.

Blank (시작 템플릿)

처음부터 맞춤 구성을 만들기 위한 빈 캔버스입니다.

bash {baseDir}/scripts/create.sh my-project
cd my-project

프레임 카운터를 표시합니다. src/Composition.tsx를 자신의 컴포넌트로 교체하세요.

맞춤 템플릿 만들기

새 템플릿(예: 프로모, 코드 워크스루, 통계 대시보드, 카운트다운, 사용후기)을 추가하려면 Remotion 프리미티브를 사용하는 React 컴포넌트를 만드세요:

import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig, interpolate, Sequence, Img, Audio } from "remotion";

템플릿을 위한 주요 Remotion API:

useCurrentFrame() - 애니메이션을 위한 현재 프레임 번호
spring({ frame, fps, config }) - 스프링 물리 애니메이션
interpolate(frame, inputRange, outputRange) - 선형 보간
<Sequence from={30}> - 하위 콘텐츠를 N 프레임만큼 지연
<Img src={staticFile("logo.png")} /> - 정적 자산 로드
<Audio src={staticFile("music.mp3")} /> - 배경 오디오 추가
<AbsoluteFill> - 전체 프레임 컨테이너

src/Root.tsx에 컴포지션을 등록하세요:

import { Composition } from "remotion";
import { PromoVideo } from "./PromoVideo";

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

썸네일 생성

Remotion의 still 명령을 사용하여 단일 프레임을 정지 이미지로 추출합니다:

npx remotion still MyComp out/thumbnail.png

옵션

# 특정 프레임 (기본값은 프레임 0)
npx remotion still MyComp out/thumb.png --frame=45

# JPEG 출력
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg

# JPEG 품질 (0-100)
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg --jpeg-quality=90

# 사용자 정의 해상도

즐겨 사용하는 AI에게 물어보기

문서