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

Remotion 프로젝트를 구축하고 유지보수하며 사용자 변경 사항을 보존합니다. 파일이 예기치 않게 변경된 경우, 사용자가 확인하지 않는 한 의도적인 것으로 간주합니다.

워크플로우

package.json, lockfile, 기존 Composition, 현재 diff 및 npx remotion versions를 검사합니다. 패키지 매니저와 프로젝트 구조를 재사용하고 모든 remotion / @remotion/* 패키지를 정확한 하나의 버전으로 유지합니다.
요청된 출력(Composition/소스 변경, Studio 미리보기, 렌더링된 미디어, 임베디드 Player 또는 렌더링 서비스)을 확인합니다.
결정론적이고 프레임 기반의 시각적 요소를 구현하고 렌더 입력을 직렬화 가능하게 유지합니다.
Studio에서 미리보기합니다. 사용자가 미디어 파일을 요청할 때만 렌더링합니다.
ffprobe로 렌더링된 미디어를 확인하고 대표 프레임을 검사합니다.
변경된 파일, 미리보기/렌더링 증거 및 전달 영수증을 보고합니다. Prismer에서는 느슨한 샌드박스 경로가 전달된 결과가 아닙니다.

Prismer 아티팩트 및 전달 계약

사용자가 렌더링된 미디어를 요청하면 최종 파일을 $PRISMER_ARTIFACTS_DIR (디스패치 <artifacts_dir>) 아래에 작성합니다. 프로젝트 스캐폴드, 프레임, 프로브 및 기타 중간 파일은 $PRISMER_SCRATCH_DIR 또는 기존 프로젝트 트리 아래에 둡니다. 그런 다음 요청된 각 최종 파일을 정확히 한 번 전달합니다:

cloud deliver "$PRISMER_ARTIFACTS_DIR/launch-video.mp4"

파일을 작성하거나 렌더링한다고 해서 파일이 첨부되는 것은 아닙니다. 성공적인 cloud deliver 영수증이 전달 오라클입니다. 사용자가 요청하지 않은 한 미리보기 프레임, 임시 오디오 또는 중복 인코딩을 전달하지 마십시오. 디스패치 아티팩트 디렉토리가 없으면 사용자가 승인한 프로젝트 출력 경로에 결과를 보관하고 영수증을 조작하는 대신 전달이 불가능했음을 보고합니다.

프로젝트 생성 및 Composition

비어 있지 않은 프로젝트 위에 스캐폴딩하지 마십시오. 적합한 프로젝트가 없을 때 Node.js와 Git을 사용할 수 있는지 확인한 후 다음을 실행합니다:

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm install

의미 있는 디렉토리 이름을 사용합니다. 사용자가 요청하거나 프로젝트가 이미 Tailwind를 사용하는 경우에만 Tailwind를 추가합니다. 계속하기 전에 생성된 manifest, config 및 global CSS를 검사합니다. 생성기 릴리스에서 --no-tailwind가 요청되었음에도 Tailwind 종속성과 import를 방출할 수 있습니다. 프로젝트에서 Tailwind를 사용하지 않는 경우에만 이를 제거하고 Remotion 패키지 버전을 정렬합니다.

Prismer 샌드박스 이미지에서는 스캐폴딩, npm ci, remotion add, 프로브 및 렌더링을 포함하여 패키지를 설치하거나 호출할 수 있는 모든 명령에 대해 명령 범위의 쓰기 가능한 npm 캐시를 사용합니다:

npm_config_cache="${PRISMER_SCRATCH_DIR:-/tmp}/npm-cache" npm ci

샌드박스 소유권 불일치를 해결하기 위해 사용자의 전역 npm 구성을 변경하지 마십시오.

정적 Composition 메타데이터를 인라인으로 유지합니다:

<Composition
  id="LaunchVideo"
  component={LaunchVideo}
  durationInFrames={300}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{title: 'Launch day'}}
/>

calculateMetadata()는 지속 시간, 크기 또는 props가 입력, 원격 데이터 또는 미디어 검사에 실제로 의존하는 경우에만 사용합니다. Studio가 prop 편집을 다시 코드에 저장할 수 있도록 defaultProps를 인라인으로 유지합니다. 다중 장면 비디오의 경우 명명된 <Sequence> 경계를 사용하고 모든 타이밍을 하나의 fps 인식 계획에서 파생합니다.

프레임 기반 애니메이션

useCurrentFrame(), interpolate(), 스프링 또는 이징을 사용하여 렌더링된 애니메이션을 구동합니다. CSS 전환, CSS 애니메이션, 벽시계 타이머 또는 Tailwind 애니메이션 유틸리티를 사용하지 마십시오. 이들은 결정론적 렌더링이 아닙니다.

import {
  AbsoluteFill,
  Easing,
  Interactive,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

export const Hero = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <Interactive.Div
        name="Hero title"
        style={{
          opacity: interpolate(frame, [0, fps], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: Easing.bezier(0.16, 1, 0.3, 1),
          }),
          scale: interpolate(frame, [0, fps], [0.9, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: Easing.spring({damping: 200}),
            output: 'perceptual-scale',
          }),
          fontSize: 88,
        }}
      >
        Launch day
      </Interactive.Div>
    </AbsoluteFill>
  );
};

개별 scale, translate 및 rotate CSS 속성을 구성된 transform 문자열보다 선호합니다. 외삽이 의도적이지 않은 한 유한 애니메이션의 양쪽 끝을 클램프합니다.

Studio 편집 가능 마크업

Studio에서 선택, 드래그, 크기 조정, 회전, 스타일 지정 또는 키프레임 지정이 가능한 HTML 및 SVG 요소에는 Interactive.*를 사용합니다. <Img>는 이미 대화형입니다.

각 대화형 요소에 짧고 하드 코딩된 설명적인 name을 지정합니다.
일회성 텍스트를 요소 안에 직접 유지합니다.
Studio 쓰기 저장이 중요한 경우 스타일 객체, interpolate() 범위, 출력, 이징 및 외삽을 인라인으로 유지합니다.
useVideoConfig()에서 지원되는 값(fps, width, height, durationInFrames)만 구조 분해합니다.
추출된 스타일 상수, 객체 스프레드, 계산된 효과 배열 및 편집 가능한 키프레임 범위 내의 임의 변수를 피합니다.

사용자 정의 컴포넌트의 경우 구현하기 전에 공식 Remotion 문서에서 현재 make-component-interactive API를 조회합니다.

자산, 미디어 및 타이밍

로컬 자산은 public/에 배치하고 staticFile()로 참조합니다:

import {Audio, Video} from '@remotion/media';
import {AnimatedImage, CanvasImage, staticFile} from 'remotion';

export const MediaLayer = () => (
  <>
    <Video src={staticFile('clip.mp4')} />
    <Audio src={staticFile('music.mp3')} />
    <CanvasImage src={staticFile('logo.png')} />
    <AnimatedImage src={staticFile('sticker.gif')} />
  </>
);

Chrome 기반 애니메이션 이미지 경로가 적합하지 않은 경우 @remotion/gif를 사용합니다. Remotion 패키지 버전이 정렬되도록 npx remotion add <package>로 에코시스템 패키지를 설치합니다.

재현 가능한 샌드박스 렌더링을 위해 로컬 또는 콘텐츠 주소 지정 미디어를 선호합니다. 쿠키, 베어러 토큰, 서명된 URL 또는 맵 자격 증명을 소스 또는 Composition props에 포함시키지 마십시오. 비동기 자산, 글꼴, 캡션 및 맵 타일의 경우 delayRender() / continueRender()를 실패 시 cancelRender()와 쌍으로 사용하여 누락된 종속성이 시간 초과까지 중단되지 않고 명시적으로 실패하도록 합니다.

지원되는 컴포넌트에는 from, durationInFrames 및 trimBefore를 사용합니다. 지원되지 않는 컴포넌트는 <Sequence>로 래핑합니다:

<Sequence name="Product demo" from={2 * fps} durationInFrames={6 * fps}>
  <Video src={staticFile('demo.mp4')} trimBefore={1 * fps} />
</Sequence>

미디어 지속 시간을 의도된 사용 가능한 세그먼트와 일치시킵니다. 장면 타이밍을 하나의 계획으로 유지하여 전환이 실수로 겹치거나 빈 프레임이 남지 않도록 합니다.

효과의 경우 샷을 생성하는 가장 덜 복잡한 기술을 사용합니다:

HTML, SVG 및 CSS.
요소에 대한 Remotion 효과 또는 HtmlInCanvas 래퍼.
처음 두 가지로 생성할 수 없는 경우에만 사용자 정의 효과 또는 셰이더.

효과 배열을 안정적으로 유지합니다. 조건부로 효과 배열의 모양을 변경하는 대신 별도의 요소를 렌더링합니다.

캡션 및 멀티미디어 검사

캡션을 Remotion의 Caption[] 형태로 정규화하고 수집 타임스탬프를 밀리초 단위로 유지합니다:

import type {Caption} from '@remotion/captions';

const caption: Caption = {
  text: 'Hello',
  startMs: 0,
  endMs: 800,
  timestampMs: null,
  confidence: null,
};

밀리초는 Composition 경계에서 Composition fps를 사용하여 프레임으로만 변환합니다. 사용 가능한 경우 단어 타이밍을 보존하고, 캡션을 읽기 가능한 페이지로 그룹화하고, 프레임 클록에서 애니메이션을 적용하고, 실제 출력 크기에서 줄바꿈과 안전 영역을 확인합니다.

타임스탬프 파서를 작성하는 대신 현재 @remotion/captions 파서를 SRT에 사용합니다. 캡션을 구현하기 전에 parse-srt, createTikTokStyleCaptions 및 선택한 전사 제공자에 대한 현재 API를 확인합니다.

오디오 시각화의 경우 프레임 윈도우 오디오 데이터와 함께 @remotion/media-utils를 사용합니다. 실시간 분석기에서 막대 또는 파형을 구동하지 마십시오. 차트 및 텍스트 애니메이션의 경우 먼저 최종 형상을 계산하고 프레임 기반 클리핑, 불투명도 또는 변환으로 공개하여 막대, 레이블 및 글리프 레이아웃이 안정적으로 유지되도록 합니다.

브라우저 측 지속 시간, 크기, 트리밍, 자르기, 메타데이터 및 컨테이너 처리를 위해 Mediabunny를 사용합니다. 익숙하지 않은 API를 사용하기 전에 https://mediabunny.dev/llms.txt를 읽으십시오. mediabunny 및 @mediabunny/* 버전을 프로젝트의 Remotion 버전과 호환되도록 유지합니다.

지도

샷에 대해 하나의 기술을 선택합니다:

기술	사용 시기
준비된 래스터	애니메이션 오버레이가 있는 결정론적 정적/위성 이미지로 충분합니다.
Mapbox	세련된 스타일, 지구 렌더링 또는 3D 건물이 필요한 경우.
MapLibre	Mapbox API 키 없이 오픈 소스 벡터 런타임이 선호되는 경우.
MapTiler	호스팅된 스타일 또는 지리적 주석이 프로젝트에 적합한 경우.
CesiumJS	지형, 지구 규모 3D 또는 비행 카메라 모션이 필요한 경우.

지도 자격 증명을 절대 커밋하지 마십시오. 이미지, 타일 및 스타일에 대한 라이선스 및 저작자 표시를 확인합니다. 프레임 캡처 전에 타일, 이미지, 글꼴 및 카메라 초기화를 기다립니다. Remotion 프레임 클록에서 카메라 움직임을 구동하고, 반복성이 중요한 경우 지리적 입력을 로컬 또는 콘텐츠 주소 지정으로 유지하며, 실제 렌더링 환경에서 헤드리스 Chromium/WebGL을 확인합니다.

Studio, 렌더링 및 확인

외부 브라우저를 열지 않고 Studio를 시작합니다:

npx remotion studio --no-open

출력된 URL을 사용합니다. /<composition-id>에서 직접 Composition을 엽니다(예: http://localhost:3000/LaunchVideo).

유용한 Studio 플래그:

인수	목적
`--log=<level>`	`error`, `warn`, `info` 또는 `verbose`를 설정합니다.
`--port=<number>`	특정 포트를 요청합니다.
`--force-new`	동일한 프로젝트 및 포트에 대해 다른 인스턴스를 시작합니다.

빠른 결정론적 레이아웃 확인을 위해 한 프레임을 렌더링합니다:

npx remotion still LaunchVideo out.png --scale=0.25 --frame=30

30fps에서 프레임 30은 1초입니다. 기존 시각적 테스트가 충분한 증거를 제공하는 경우 이를 건너뜁니다.

렌더링하기 전에 CLI가 의도된 Composition을 확인하는지 확인합니다:

npx remotion versions
npx remotion compositions

Remotion이 기본적으로 호환 브라우저를 관리하도록 합니다. Prismer 이미지에는 Playwright 브라우저도 포함될 수 있지만, 그 존재가 호환성을 보장하지는 않습니다. 전체 Chrome 바이너리는 샌드박스 crashpad 정책에서 실패할 수 있는 반면, 최신 Headless Shell은 스틸 렌더링은 통과하지만 다중 프레임 렌더링은 실패할 수 있습니다. --browser-executable은 인접 프레임 렌더링 테스트를 통과한 이미지 소유 버전 쌍 실행 파일에 대해서만 전달합니다. 전체 파일 시스템에서 브라우저를 검색하거나 성공적인 시작을 호환성 증거로 취급하지 마십시오.

사용자가 미디어 파일을 요청할 때만 렌더링합니다:

npx remotion render LaunchVideo out.mp4 --codec=h264
npx remotion still LaunchVideo out.png --frame=0

Prismer 샌드박스는 Node와 FFmpeg를 제공하고, Remotion은 프로젝트 캐시에서 호환 브라우저를 관리합니다. 투명성 또는 무손실 출력이 필요하지 않은 한 광범위한 재생을 위해 MP4의 H.264 비디오 및 AAC 오디오를 선호합니다. 각 명령에 대해 쓰기 가능한 npm 캐시 재정의를 범위 지정합니다:

npm_config_cache=/tmp/npm-cache npx remotion render LaunchVideo out.mp4 --codec=h264

CJK 콘텐츠의 경우 고정 글꼴을 명시적으로 로드하고 대기합니다. 시스템 대체 글꼴 계열의 존재만으로는 충분하지 않습니다. 격리된 스틸뿐만 아니라 인접한 인코딩 프레임도 검사합니다. 헤드리스 렌더러는 올바른 스틸을 생성할 수 있지만 대체 글꼴 실행이 전체 렌더링 중에 깜박이거나 글리프를 잃을 수 있습니다.

미디어 검사를 전달 오라클로 취급합니다:

ffprobe -v error \
  -show_entries format=duration:stream=codec_name,width,height \
  -of compact out.mp4

지속 시간, 크기, 코덱 및 예상 오디오 스트림을 확인합니다. 대표 프레임(애니메이션 또는 텍스트가 많은 섹션에서 여러 인접 프레임 포함)을 검사하거나 가능하면 결과를 재생합니다. 성공적인 렌더링 명령만으로는 전달 증거가 아닙니다. 격리된 스틸은 올바르지만 인코딩된 렌더링에 부분적이거나 깜박이는 프레임이 있는 경우 하나의 번들 serve URL과 하나의 브라우저 인스턴스로 프로그래밍 방식 renderStill() API를 사용하여 확인된 프레임 시퀀스를 내보낸 다음 샌드박스 FFmpeg로 어셈블합니다. CLI를 반복하고 프레임당 다시 번들링하지 마십시오. 대체 방법을 보고하고 어셈블된 파일을 다시 프로브합니다.

Player, 편집기 및 렌더링 서비스

대화형 React 미리보기에는 Remotion의 <Player>를 사용합니다. Composition을 Player 및 렌더링 경로 모두에서 사용할 수 있도록 유지합니다. 시각적 로직을 포크하지 마십시오.

워크로드에 따라 렌더링 아키텍처를 선택합니다:

제한된 사용자 로컬 작업을 위한 브라우저/클라이언트 렌더링.
제어된 서버를 위한 Node worker 및 큐.
AWS 네이티브 탄력적 렌더링을 위한 Remotion Lambda.
호스팅 플랫폼 및 설치된 Remotion 버전과 일치할 때 현재 공식 Vercel 또는 Cloudflare 통합.

비-사소한 렌더링은 비동기식이어야 합니다. 작업 ID를 반환하고, 진행률 및 실패를 노출하고, 출력을 영구적으로 저장하고, 재시도를 멱등성(idempotent)으로 만듭니다.

편집기의 경우 Composition props 및 타임라인 상태를 명시적으로 모델링합니다. 렌더 입력을 직렬화 가능하고 버전 관리되도록 유지하고, 신뢰할 수 없는 props를 검증하고, 원격 자산 액세스를 제한하고, 미리보기 상태를 영구 프로젝트 상태와 분리합니다.

Remotion의 렌더링 표면은 React입니다. Vue, Angular 또는 Svelte 호스트의 경우 현재 공식 통합을 사용하고, 암기된 스타터에 의존하지 말고 React Composition 경계를 명시적으로 유지합니다.

현재 문서 및 업그레이드

암기된 API보다 현재 공식 문서를 선호합니다. Remotion 문서 URL에 .md를 추가하여 Markdown을 가져옵니다(예:

https://www.remotion.dev/docs/sequence.md

Remotion 문서 검색...

Remotion

Remotion란 무엇인가요?

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

문서

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

워크플로우

Prismer 아티팩트 및 전달 계약

프로젝트 생성 및 Composition

프레임 기반 애니메이션

Studio 편집 가능 마크업

자산, 미디어 및 타이밍

캡션 및 멀티미디어 검사

지도

Studio, 렌더링 및 확인

Player, 편집기 및 렌더링 서비스

현재 문서 및 업그레이드

Individual skills in this repo

Prismer-AI/PrismerCloud

관련 스킬

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code