The breeze is breaking

✅ 목표

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

🛠️ 사전 준비사항

🔧 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 등)

📚 참고 문서

• Remotion 공식 문서: https://www.remotion.dev/docs
• GitHub: https://github.com/remotion-dev/remotion

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

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

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

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

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

The wind is blowing and it is shown from various angles around the front

HitFilm Express: VFX(Visual Effects)와 모션 그래픽에 강점을 가진 무료 동영상 편집 프로그램입니다. 3D 합성, 모션 트래킹, 입자 효과 등 다양한 시각 효과 도구를 제공합니다. 초보자가 사용하기에는 초기 학습이 필요하며, 일부 고급 기능은 유료로 제공됩니다.

DaVinci Resolve:
할리우드 영화 제작에도 사용될 정도로 강력한 색 보정 기능을 제공하는 고급 편집 툴입니다. 멀티캠 편집, 3D 편집, 고급 모션 그래픽, 오디오 편집 도구까지 통합되어 있습니다.
고급 기능을 무료로 제공하지만, 고사양 컴퓨터가 필요하고 인터페이스가 복잡하여 초보자에게는 어려울 수 있습니다.

Filmora:
초보자부터 전문가까지 쉽게 사용할 수 있는 인터페이스를 제공하며, AI 자동 자막, 음악 생성기, 텍스트 음성 변환 등 다양한 AI 기능을 지원합니다. 7,000개 이상의 특수 효과 및 리소스가 내장되어 있어 간편하게 영상을 제작할 수 있습니다.
무료 버전에서는 워터마크가 생성되고 고급 기능 사용이 제한됩니다.