Remotion Transitions

장면 사이의 **트랜지션(전환 효과)**을 추가하는 방법. <TransitionSeries>로 여러 장면을 묶고, <TransitionSeries.Transition> 사이에 프리셋 효과를 끼워넣는다.

🎬 기본 사용법

import { TransitionSeries, linearTiming, springTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";

export const MyComp = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <SceneA />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={fade()}
        timing={linearTiming({ durationInFrames: 20 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <SceneB />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide({ direction: "from-right" })}
        timing={springTiming({ config: { damping: 200 } })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <SceneC />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

🎨 제공되는 프리셋 (Presentation)

프리셋	효과
`fade()`	크로스페이드
`slide({ direction })`	밀어내기 (left/right/top/bottom/from-*)
`wipe({ direction })`	닦아내기
`flip({ direction })`	카드 뒤집기
`clockWipe({...})`	시계 바늘 회전
`iris({...})`	원형 마스크
`cube({ direction })`	큐브 회전
`swap()`	두 장면 교환
`dissolve()`	디졸브
`zoomBlur()`	줌 블러
`crossZoom()`	크로스줌
`crosswarp()`	워프
`bookFlip()`	책장 넘김
`dreamyZoom()`	몽환 줌
`linearBlur()`	선형 블러
`pushCut()`	밀어내면서 자르기
`ripple()`	물결
`zoomInOut()`	줌 인-아웃
`filmBurn({...})`	필름 번
`none()`	트랜지션 없음

⏱️ 타이밍 (Timing)

함수	용도
`linearTiming({ durationInFrames })`	균일한 속도
`springTiming({ config, durationInFrames? })`	스프링 (탄성)
`customTiming({ durationInFrames, easing })`	커스텀 베지어

import { springTiming, linearTiming } from "@remotion/transitions";

// 부드러운 스프링
springTiming({ config: { damping: 200, stiffness: 100 } })

// 빠른 직선
linearTiming({ durationInFrames: 15 })

🔧 커스텀 트랜지션

직접 만들 수도 있다. presentation 함수에 이전/현재 프레임을 받아 두 장면을 합성한 React 노드를 반환:

import { Presentation } from "@remotion/transitions";

const custom: Presentation = ({ presentationProgress, presentationDirection }) => {
  // presentationProgress: 0~1
  // presentationDirection: "entering" | "exiting"
  return (
    <AbsoluteFill
      style={{
        transform: `scale(${1 - presentationProgress})`,
        opacity: 1 - presentationProgress,
      }}
    >
      {/* 두 장면이 합성됨 */}
    </AbsoluteFill>
  );
};

🔊 오디오 트랜지션

오디오도 트랜지션 가능:

import { audioFade } from "@remotion/transitions/audio";

<TransitionSeries.Transition
  presentation={fade()}
  timing={linearTiming({ durationInFrames: 20 })}
  // 오디오 페이드도 함께
/>

자세한 가이드: Audio Transitions

⚠️ 알아둘 점

<TransitionSeries>는 <Sequence> 기반이라서 useCurrentFrame()이 시퀀스 내 상대 시간을 반환
트랜지션 두 개의 합(예: 20+20=40 프레임)이 자투리 프레임이 생기지 않도록 시퀀스 길이를 충분히 둬야 함
프리셋은 @remotion/transitions/* 서브패키지에서 임포트

📚 영역 구분

여러 장면 시퀀스: Remotion Reuse Components (<Sequence>)
장면 전환 + 음향: Audio Transitions
한글 hub: Remotion 비주얼 & 미디어

상위 문서: ← Remotion 비주얼 & 미디어 출처: Remotion 공식 문서 — Transitions 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

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