lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

사용 시기

Remotion 코드를 다룰 때마다 이 스킬을 사용하여 도메인별 지식을 얻으세요.

새 프로젝트 설정

빈 폴더나 기존 Remotion 프로젝트가 없는 작업 공간에서 다음 명령어로 프로젝트를 생성하세요:

npx create-video@latest --yes --blank --no-tailwind my-video

my-video 대신 적절한 프로젝트 이름을 사용하세요.

비디오 디자인

useCurrentFrame()과 interpolate()를 사용하여 속성을 애니메이션화하세요. Easing을 사용하여 애니메이션 타이밍을 사용자 정의할 수 있습니다.

import { useCurrentFrame, Easing } from "remotion";

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

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

CSS 전환이나 애니메이션은 금지됩니다. 올바르게 렌더링되지 않습니다. Tailwind 애니메이션 클래스 이름도 금지됩니다. 올바르게 렌더링되지 않습니다.

에셋은 프로젝트 루트의 public/ 폴더에 배치하세요.

staticFile()을 사용하여 public/ 폴더의 파일을 참조하세요.

<Img> 컴포넌트를 사용하여 이미지를 추가하세요:

import { Img, staticFile } from "remotion";

export const MyComposition = () => {
  return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};

@remotion/media의 <Video> 컴포넌트를 사용하여 비디오를 추가하세요:

import { Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};

@remotion/media의 <Audio> 컴포넌트를 사용하여 오디오를 추가하세요:

import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Audio src={staticFile("audio.mp3")} />;
};

에셋은 원격 URL로도 참조할 수 있습니다:

import { Video } from "@remotion/media";

export const MyComposition = () => {
  return <Video src="https://remotion.media/video.mp4" />
};

콘텐츠를 지연하려면 <Sequence>로 감싸고 from을 사용하세요. 요소의 지속 시간을 제한하려면 <Sequence>의 durationInFrames를 사용하세요. <Sequence>는 기본적으로 절대 채움(absolute fill)입니다. 인라인 콘텐츠의 경우 layout="none"을 사용하세요.

import { Sequence } from "remotion";

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

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Title</div>;
};

export const Subtitle = () => {
  return <div>Subtitle</div>;
};

const Main = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Sequence>
        <Background />
      </Sequence>
      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
        <Title />
      </Sequence>
      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
}

비디오의 너비, 높이, fps, 지속 시간은 src/Root.tsx에서 정의됩니다:

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

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={100}
      fps={30}
      width={1080}
      height={1080}
    />
  );
};

메타데이터는 동적으로 계산될 수도 있습니다:

import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";

const calculateMetadata: CalculateMetadataFunction<
  MyCompositionProps
> = async ({ props, abortSignal }) => {
  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
    signal: abortSignal,
  }).then((res) => res.json());

  return {
    durationInFrames: Math.ceil(data.duration * 30),
    props: {
      ...props,
      videoUrl: data.url,
    },
    width: 1080,
    height: 1080,
  };
};

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      fps={30}
      width={1080}
      height={1080}
      defaultProps={{ videoId: "abc123" }}
      calculateMetadata={calculateMetadata}
    />
  );
};

미리보기 시작

Remotion Studio를 시작하여 비디오를 미리보세요:

npx remotion studio

선택 사항: 단일 프레임 렌더링 확인

CLI로 단일 프레임을 렌더링하여 레이아웃, 색상 또는 타이밍을 확인할 수 있습니다. 사소한 수정, 순수 리팩터링, 또는 Studio나 이전 렌더링에서 이미 충분한 확신이 있는 경우 건너뛰세요.

npx remotion still [composition-id] --scale=0.25 --frame=30

30fps에서 --frame=30은 1초 지점입니다 (--frame은 0부터 시작).

자막

자막 또는 서브타이틀을 다룰 때는 ./rules/subtitles.md 파일을 참조하여 더 많은 정보를 얻으세요.

FFmpeg 사용

비디오 자르기나 무음 감지와 같은 일부 비디오 작업에는 FFmpeg를 사용해야 합니다. ./rules/ffmpeg.md 파일을 참조하세요.

무음 감지

비디오 또는 오디오 파일에서 무음 구간을 감지하고 잘라야 할 때는 ./rules/silence-detection.md 파일을 참조하세요.

오디오 시각화

오디오를 시각화(스펙트럼 막대, 파형, 저음 반응 효과)해야 할 때는 ./rules/audio-visualization.md 파일을 참조하세요.

사운드 효과

사운드 효과가 필요할 때는 ./rules/sfx.md 파일을 참조하세요.

3D 콘텐츠

Remotion에서 Three.js와 React Three Fiber를 사용한 3D 콘텐츠는 rules/3d.md를 참조하세요.

고급 오디오

트리밍, 볼륨, 속도, 피치와 같은 고급 오디오 기능은 rules/audio.md를 참조하세요.

동적 지속 시간, 크기 및 데이터

컴포지션의 지속 시간, 크기 및 props를 동적으로 설정하려면 rules/calculate-metadata.md를 참조하세요.

고급 컴포지션

스틸, 폴더, 기본 props 정의 및 컴포지션 중첩 방법은 rules/compositions.md를 참조하세요.

Google Fonts

Remotion에서 글꼴을 로드하는 권장 방법입니다. Google Fonts 로드 방법은 rules/google-fonts.md를 참조하세요.

로컬 글꼴

로컬 글꼴 로드 방법은 rules/local-fonts.md를 참조하세요.

오디오 지속 시간 가져오기

Mediabunny로 오디오 파일의 지속 시간(초)을 가져오는 방법은 rules/get-audio-duration.md를 참조하세요.

비디오 크기 가져오기

Mediabunny로 비디오 파일의 너비와 높이를 가져오는 방법은 rules/get-video-dimensions.md를 참조하세요.

비디오 지속 시간 가져오기

Mediabunny로 비디오 파일의 지속 시간(초)을 가져오는 방법은 rules/get-video-duration.md를 참조하세요.

GIF

Remotion의 타임라인과 동기화된 GIF 표시 방법은 rules/gifs.md를 참조하세요.

고급 이미지

이미지 크기 조정 및 위치 지정, 동적 이미지 경로, 이미지 크기 가져오기는 rules/images.md를 참조하세요.

라이트 릭(light leaks)

@remotion/light-leaks를 사용한 라이트 릭 오버레이 효과는 rules/light-leaks.md를 참조하세요.

Lottie 애니메이션

Remotion에 Lottie 애니메이션을 포함하는 방법은 rules/lottie.md를 참조하세요.

캔버스 내 HTML

<HtmlInCanvas>를 통해 HTML을 <canvas>에 렌더링하여 2D 또는 WebGL 효과를 적용해야 하는 경우 rules/html-in-canvas.md를 참조하세요.

DOM 노드 측정

Remotion에서 DOM 요소의 크기를 측정하는 방법은 rules/measuring-dom-nodes.md를 참조하세요.

텍스트 측정

텍스트 크기 측정, 컨테이너에 텍스트 맞추기, 오버플로 확인은 rules/measuring-text.md를 참조하세요.

고급 시퀀싱

항목 지연, 자르기, 지속 시간 제한 등 더 많은 시퀀싱 패턴은 rules/sequencing.md를 참조하세요.

TailwindCSS

Remotion에서 TailwindCSS를 사용하는 방법은 rules/tailwind.md를 참조하세요.

텍스트 애니메이션

타이포그래피 및 텍스트 애니메이션 패턴은 rules/text-animations.md를 참조하세요.

고급 타이밍

interpolate, 베지어 이징, 스프링을 사용한 고급 타이밍은 rules/timing.md를 참조하세요.

전환 효과

씬 전환 패턴은 rules/transitions.md를 참조하세요.

투명 비디오

투명도를 포함한 비디오 렌더링 방법은 rules/transparent-videos.md를 참조하세요.

트리밍

애니메이션의 시작이나 끝을 자르는 트리밍 패턴은 rules/trimming.md를 참조하세요.

고급 비디오

비디오 포함(트리밍, 볼륨, 속도, 루프, 피치)에 대한 고급 지식은 rules/videos.md를 참조하세요.

매개변수화된 비디오

Zod 스키마를 추가하여 컴포지션을 매개변수화하는 방법은 rules/parameters.md를 참조하세요.

지도

간단한 플라이오버가 있는 지도의 경우 정적 지도 이미지를 사용하는 것을 고려하세요. 애니메이션 경로 또는 플라이오버가 있는 복잡한 지도의 경우 지도 규칙을 참조하세요: rules/maplibre.md

음성 해설

ElevenLabs TTS를 사용하여 Remotion 컴포지션에 AI 생성 음성 해설을 추가하는 방법은 rules/voiceover.md를 참조하세요.