wan.video(https://wan.video)는 사용자가 이미지나 텍스트를 업로드하면 자동으로 동영상을 생성 해주는 서비스

wan.video(https://wan.video)는 사용자가 **이미지나 텍스트를 업로드하면 자동으로 동영상을 생성**해주는 서비스입니다. 이는 SNS, 마케팅, 개인 영상 제작 등에 활용하기 쉬운 도구로, 기술적으로 보면 다음과 같은 주요 요소들이 결합된 시스템입니다.

---

## 🎯 wan.video의 핵심 기능 요약

1. **이미지/텍스트 업로드**
2. **배경 음악 선택 및 삽입**
3. **트랜지션 효과 및 애니메이션 적용**
4. **자동 영상 생성 (렌더링)**
5. **다운로드 또는 공유 링크 제공**

---

## 🔧 wan.video가 사용하는 기술 스택 (추정 기반)

wan.video의 실제 코드는 비공개지만, 유사한 서비스와 기술 트렌드를 바탕으로 다음과 같은 기술을 사용하고 있을 가능성이 높습니다:

### 1. **프론트엔드 (Frontend)**

- **React.js / Next.js**: UI 구성
- **Remotion**: React 기반 영상 생성 라이브러리
- **FFmpeg.wasm**: 브라우저에서 FFmpeg 실행
- **TailwindCSS / Styled-components**: 디자인 시스템

> ✅ 영상 미리보기, 편집 인터페이스 구현

---

### 2. **백엔드 (Backend)**

- **Node.js + Express / NestJS**
- **Python + FastAPI / Django** (영상 처리 작업용)
- **AWS Lambda / Google Cloud Functions** (서버리스 아키텍처)
- **Redis / RabbitMQ**: 큐 시스템으로 영상 생성 요청 관리

> ✅ 이미지/음악 업로드, 작업 스케줄링, 결과물 저장

---

### 3. **영상 생성 엔진**

#### a. **Remotion**
- React 컴포넌트로 영상 만들기 가능
- CSS 애니메이션 지원
- 배경음악, 텍스트 오버레이 가능
- 서버/클라이언트 모두에서 작동

#### b. **FFmpeg**
- 이미지 시퀀스 → 영상 변환
- 오디오 + 영상 합성
- 트랜지션, 필터 적용 가능
- 다양한 포맷 지원 (MP4, WebM 등)

#### c. **MoviePy (Python 기반)**
- Python 스크립트로 영상 자동화 가능
- 이미지/비디오/오디오 조합 용이
- 병렬 처리 가능 (대량 생성 시 유리)

#### d. **OpenCV**
- 영상 프레임 단위 처리
- 고급 영상 효과 및 필터 적용

---

### 4. **멀티미디어 관리**

- **AWS S3 / Firebase Storage / Cloudinary**
  - 이미지/음악/완성된 영상 저장
- **CDN 통합**
  - 영상 다운로드 속도 개선

---

### 5. **사용자 인증 & 결제 시스템**

- Firebase Auth / Auth0 / Supabase
- Stripe / PayPal 연동 (유료 플랜 지원)

---

## 📦 wan.video의 기술적 흐름 정리

```
[1] 사용자 입력
   └── 이미지 업로드
   └── 음악 선택
   └── 효과/템플릿 선택

[2] 백엔드 처리
   └── 영상 생성 요청 큐에 추가
   └── Remotion 또는 FFmpeg 기반 영상 생성
   └── 트랜지션/애니메이션 적용

[3] 영상 생성
   └── 각 이미지를 프레임별로 렌더링
   └── 오디오와 동기화
   └── 최종 MP4 파일 생성

[4] 결과물 제공
   └── AWS S3 등에 업로드
   └── 사용자에게 다운로드 링크 제공
```

---

## 🎥 영상 생성 방식 예시

### 예제: Remotion 기반

```tsx
// src/MyVideo.tsx
import { AbsoluteFill, Img, Sequence, useVideoConfig } from "remotion";

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

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

  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      {images.map((src, i) => (
        <Sequence key={i} from={i * 30} durationInFrames={30}>
          <AbsoluteFill>
            <Img src={src} style={{ width, height, objectFit: "cover" }} />
          </AbsoluteFill>
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};
```

렌더링 명령어:

```bash
npx remotion render MyVideo out.mp4
```

---

## 💡 wan.video와 유사한 기술을 사용하는 서비스들

| 서비스 | 설명 |
|--------|------|
| **Pika** | AI 기반 영상 생성 (https://pika.art) |
| **Runway ML** | 머신러닝 기반 영상 편집 도구 |
| **Synthesia** | AI 아바타 + 텍스트 기반 영상 생성 |
| **Renderforest** | 온라인 영상 제작 플랫폼 |
| **Animaker** | 클릭 한 번으로 영상 제작 가능 |

---

## 🚀 wan.video 클론 프로젝트 만들기 위한 준비 목록

| 항목 | 내용 |
|------|------|
| 1. Node.js 설치 | v18 이상 |
| 2. FFmpeg 설치 | Windows/Mac/Linux |
| 3. Remotion 설치 | `npm install remotion` |
| 4. React 환경 구성 | Vite or CRA |
| 5. FFmpeg 또는 Remotion으로 영상 생성 테스트 |
| 6. 이미지/음악 업로드 기능 구현 |
| 7. 영상 렌더링 후 다운로드 제공 |

---

## 📚 참고 자료

- [Remotion 공식 문서](https://www.remotion.dev/docs)
- [FFmpeg 공식 사이트](https://ffmpeg.org/)
- [MoviePy GitHub](https://github.com/Zulko/moviepy)
- [Cloudinary](https://cloudinary.com/) – 멀티미디어 관리를 위한 CDN

---

## 🙋‍♂️ 질문 남겨주세요!

- 어떤 형식의 영상을 만들고 싶으신가요? (예: 슬라이드쇼, 인트로 영상 등)
- 영상 길이는 어떻게 되나요?
- 트랜지션 효과나 텍스트 오버레이가 필요하신가요?

그에 따라 맞춤형 예제 코드나 가이드도 드릴 수 있어요 😊