✅ 목표

  • Windows 10/11 환경에서 Remotion 프로젝트 생성
  • 이미지 여러 장으로 동영상 자동 생성 테스트
  • 영상 렌더링 및 결과물 확인

🛠️ 사전 준비사항

항목설명
Node.js최소 v16 이상 (권장: v18) 설치 필요
npm 또는 yarn패키지 매니저 사용 가능하도록 설치
VS Code코드 편집기 (선택)
FFmpegRemotion이 내부적으로 사용하므로 설치 필수

🔧 Step-by-Step 설치 및 실행 가이드

1. Node.js 설치

먼저 Node.js 공식 사이트에서 LTS 버전(예: 18.x)을 다운로드 후 설치하세요.

설치 완료 후 명령 프롬프트(cmd 또는 PowerShell)에서 확인:

node -v
npm -v

2. FFmpeg 설치

Remotion은 내부적으로 FFmpeg를 사용하므로 반드시 설치해야 합니다.

방법:

  1. https://www.gyan.dev/ffmpeg/builds/ 접속
  2. ffmpeg-release-full.7z 파일 다운로드
  3. 압축 해제 후, bin 폴더의 경로를 시스템 환경 변수 PATH에 추가

예시 경로: C:\ffmpeg\bin

확인:

ffmpeg -version

출력이 나온다면 정상 설치된 것입니다.

3. Remotion 프로젝트 생성

PowerShell 또는 cmd에서 아래 명령어로 Remotion 프로젝트를 생성합니다.

npx create-video my-video-project
위 명령어는 create-video CLI를 통해 Remotion 템플릿 프로젝트를 생성합니다.

생성된 디렉토리로 이동:

cd my-video-project

4. 프로젝트 구조 살펴보기

my-video-project/
├── public/            # 정적 파일 (이미지, 음악 등)
├── src/
│   ├── index.tsx      # 컴포넌트 정의
│   └── Root.tsx
├── package.json
└── remotion.config.ts

5. 이미지를 영상으로 만드는 예제 작성

a. public/ 폴더에 이미지 넣기

예시 이미지: image1.jpg, image2.jpg, image3.jpg 등을 public/ 폴더에 복사합니다.

b. src/index.tsx 수정

import { AbsoluteFill, Img, Sequence, useVideoConfig } from "remotion";
import React from "react";

const images = [
  "/image1.jpg",
  "/image2.jpg",
  "/image3.jpg"
];

export const MyVideo = () => {
  const { width, height } = useVideoConfig();

  return (
    <AbsoluteFill>
      {images.map((src, i) => (
        <Sequence key={src} from={i * 30} durationInFrames={30}>
          <AbsoluteFill>
            <Img src={src} style={{ width, height, objectFit: "cover" }} />
          </AbsoluteFill>
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};
  • 각 이미지는 30프레임(=1초 @ 30fps) 동안 표시됩니다.
  • objectFit="cover"로 비율 유지하면서 꽉 채워서 보여줍니다.

6. 비디오 설정 변경 (옵션)

remotion.config.ts에서 기본 설정을 조정할 수 있습니다:

import { Config } from "remotion";

Config.Rendering.setImageFormat("jpeg");
Config.Output.setLocation("out/video.mp4");
Config.Puppeteer.setLaunchPuppeteerSettings({
  headless: true,
});

7. 영상 미리보기 (개발 서버 실행)

npm run dev

브라우저에서 http://localhost:3000 접속하면 영상 미리보기가 됩니다.

8. 실제 동영상 렌더링

npm run build

또는 특정 출력 옵션 지정:

npx remotion render MyVideo out/video.mp4 --props='{}'

렌더링 완료되면 out/ 폴더에 video.mp4가 생성됩니다.

🎬 결과 확인

out/video.mp4를 영상 플레이어에서 열어보세요!

📦 추가 기능 확장 아이디어

  • 트랜지션 효과 추가 (crossfade)
  • 배경 음악 삽입 (<Audio src="/music.mp3" />)
  • 텍스트 오버레이
  • SNS 맞춤 비율 (9:16 등)

📚 참고 문서

🙋‍♂️ 도움말 요청 시 필요한 정보

필요하시면 아래 내용도 알려주세요:

  • 어떤 형식의 영상을 만들고 싶으신가요? (예: 인스타용 9:16 슬라이드쇼)
  • 음악도 포함하고 싶으신가요?
  • 몇 장의 이미지를 처리하고 싶으신가요?

그에 따라 더 구체적인 예제 코드도 제공해 드릴 수 있어요 😊

준비가 되셨다면, 지금 바로 Remotion으로 첫 번째 영상을 만들어 보세요!
궁금한 점 있으시면 언제든지 물어보세요 💪

tag: none

댓글추가