Remotion 을 이용해서 Windows 로컬 PC에 영상 생성 환경을 구축 하는 방법

좋습니다! **Remotion**을 이용해서 **Windows 로컬 PC에 영상 생성 환경을 구축**하는 방법을 안내해 드릴게요.  
이 가이드는 다음과 같은 목표를 가지고 있습니다:

---

## ✅ 목표

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

---

## 🛠️ 사전 준비사항

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

---

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

---

### 1. **Node.js 설치**

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

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

```bash
node -v
npm -v
```

---

### 2. **FFmpeg 설치**

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

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

예시 경로: `C:\ffmpeg\bin`

#### 확인:

```bash
ffmpeg -version
```

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

---

### 3. **Remotion 프로젝트 생성**

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

```bash
npx create-video my-video-project
```

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

생성된 디렉토리로 이동:

```bash
cd my-video-project
```

---

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

```bash
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` 수정

```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`에서 기본 설정을 조정할 수 있습니다:

```ts
import { Config } from "remotion";

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

---

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

```bash
npm run dev
```

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

---

### 8. **실제 동영상 렌더링**

```bash
npm run build
```

또는 특정 출력 옵션 지정:

```bash
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으로 첫 번째 영상을 만들어 보세요!  
궁금한 점 있으시면 언제든지 물어보세요 💪