Remotion Designing Visuals (Layers)

Remotion에서 비주얼 컴포지션의 핵심은 레이어. <AbsoluteFill>로 도형·이미지·3D를 겹쳐서 카드뉴스·차트·그래픽을 만든다.

🧱 `<AbsoluteFill>` — 레이어의 기본

<AbsoluteFill>은 컴포지션 크기(1920×1080 등)를 가득 채우는 절대 위치 div다. 여러 장을 겹치면 위에서 아래로 렌더링된다:

import { AbsoluteFill } from "remotion";

export const MyComp = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "white" }}>     {/* 배경 */}
      <AbsoluteFill style={{ backgroundColor: "blue" }}>  {/* 위 레이어 */}
        <div>Hello</div>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

🎨 도형과 그래픽

<svg>를 직접 그려 도형·다이어그램·차트를 만든다. useCurrentFrame()과 함께 사용하면 시간에 따라 변화:

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

export const Circle = () => {
  const frame = useCurrentFrame();
  const radius = interpolate(frame, [0, 60], [0, 200], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
      <svg width={400} height={400}>
        <circle cx={200} cy={200} r={radius} fill="hotpink" />
      </svg>
    </AbsoluteFill>
  );
};

🖼️ 이미지 (Img)

<img> 대신 remotion의 Img 컴포넌트를 쓰면 렌더 시 fetch 완료를 기다린 후 캔처를 그린다:

import { Img, staticFile, AbsoluteFill } from "remotion";

export const MyComp = () => (
  <AbsoluteFill>
    <Img src={staticFile("photo.png")} style={{ width: "100%" }} />
  </AbsoluteFill>
);

⚠️ 일반 <img>는 렌더 시점에 이미지가 아직 로드되지 않아 깜빡임이 생길 수 있다. Remotion에서는 항상 Img 또는 useImgAndIframe() 패턴을 따른다.

🎬 3D — Three.js 통합

Remotion 3D는 three + @react-three/fiber + remotion의 <ThreeCanvas>로 구성:

import { ThreeCanvas, useCurrentFrame } from "remotion";
import { useFrame } from "@react-three/fiber";
import { useRef } from "react";

const Box = () => {
  const ref = useRef(null);
  useFrame(() => {
    ref.current.rotation.x += 0.01;
  });
  return (
    <mesh ref={ref}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
};

export const MyComp = () => (
  <ThreeCanvas width={1280} height={720}>
    <ambientLight />
    <Box />
  </ThreeCanvas>
);

자세한 가이드: https://www.remotion.dev/docs/three

🌈 그라데이션 / 패턴

CSS의 linear-gradient, radial-gradient를 style에 직접 사용 가능:

<AbsoluteFill
  style={{
    background: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
  }}
/>

🧩 실전 레이어링 패턴

패턴	용도
배경 + 텍스트 + 오버레이	카드뉴스, 자막
SVG 차트 + 데이터 라벨	인포그래픽
비디오 + 로고 워터마크	브랜딩
다중 `<AbsoluteFill>` + `transform`	카드 슬라이드, 모션

⚠️ 알아둘 점

레이어 순서: JSX에 작성된 순서대로 (위 → 아래 = 뒤 → 앞)
z-index: 명시적 z-index는 잘 동작하지 않음. JSX 순서로 제어
반응형: Remotion은 컴포지션 크기 고정 (1920×1080). 유연한 사이즈는 Player 단에서 처리
폰트: staticFile()로 폰트 파일을 가져오고 @font-face로 로드

📚 영역 구분

이미지·비디오: Remotion Adding Video
자막·캡션: Remotion Captions
3D 심화: /docs/three
한글 hub: Remotion 비주얼 & 미디어

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

변경 이력

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

🧱 <AbsoluteFill> — 레이어의 기본