✅ 목표
- Windows 10/11 환경에서 Remotion 프로젝트 생성
- 이미지 여러 장으로 동영상 자동 생성 테스트
- 영상 렌더링 및 결과물 확인
🛠️ 사전 준비사항
| 항목 | 설명 |
|---|
| Node.js | 최소 v16 이상 (권장: v18) 설치 필요 |
| npm 또는 yarn | 패키지 매니저 사용 가능하도록 설치 |
| VS Code | 코드 편집기 (선택) |
| FFmpeg | Remotion이 내부적으로 사용하므로 설치 필수 |
🔧 Step-by-Step 설치 및 실행 가이드
1. Node.js 설치
먼저 Node.js 공식 사이트에서 LTS 버전(예: 18.x)을 다운로드 후 설치하세요.
설치 완료 후 명령 프롬프트(cmd 또는 PowerShell)에서 확인:
node -v
npm -v
2. FFmpeg 설치
Remotion은 내부적으로 FFmpeg를 사용하므로 반드시 설치해야 합니다.
방법:
- https://www.gyan.dev/ffmpeg/builds/ 접속
ffmpeg-release-full.7z 파일 다운로드- 압축 해제 후,
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으로 첫 번째 영상을 만들어 보세요!
궁금한 점 있으시면 언제든지 물어보세요 💪