AI로 영상 생성 플랫폼 개발1

 

시작하기

1. 계획세우기

1-1. 프로젝트 디렉토리 생성 및 이동

mkdir ai-video-platform && cd ai-video-platform

1-2. Claude Code 실행

claude

1-3. 프롬프트

• 프로젝트 시작과 동시에 계획세우기

이 프로젝트는 AI 영상 자동 생성 + 유튜브 업로드 플랫폼이야.

스택:
- FE: Next.js 14, TypeScript, Tailwind CSS, React-hook-form  
- BE: Spring Boot 3, JPA, QueryDSL, Swagger, JWT
- Video: Python 3.11, FastAPI, Celery
- Infra: Docker, PostgreSQL, Redis, MinIO

먼저 CLAUDE.md와 docs/PLAN.md 만들어서 
전체 개발 계획을 Phase별로 세워줘.

• 계획 문서 미리 만들어두기

ai-video-platform/
├── CLAUDE.md          # Claude Code 전용 프로젝트 컨텍스트
├── docs/
│   ├── PLAN.md        # 전체 개발 계획
│   ├── API_SPEC.md    # API 명세
│   └── ARCHITECTURE.md # 아키텍처 설계

• CLAUDE.md에 현재 진행상황 추가

CLAUDE.md에 현재 진행상황 추가해줘

• 설명 요청

PLAN.md에 진행상황 있는것 같은데 CLUADE.md에도 있는게 좋을까?
    # 파일     | 목적            | 상세
    PLAN.md   | 전체 개발 계획    | 세부 태스크까지 체크리스트
    CLAUDE.md | 빠른 컨텍스트 파악 | 현재 Phase만 요약

• API_SPEC.md에 Video Service 포트 명시

API_SPEC.md에 Video Service 포트 명시 해줘

  결과 >>
    | 서비스 | Development | Production |
    |--------|-------------|------------|
    | Backend API | `http://localhost:8080/api` | `https://api.aiplatform.com/api` |
    | Video Service | `http://localhost:8000` | `https://video.aiplatform.com` |
    | Frontend | `http://localhost:3000` | `https://aiplatform.com` |

• 영상 승인 플로우 추가

유튜브 수익화를 위해 사용자 승인이 필요해
승인 플로우 API 추가해줘
  결과 >>
    추가된 API (5.6 ~ 5.12)
  
    | API  | Method | Endpoint                             | 설명                  |
    |------|--------|--------------------------------------|-----------------------|
    | 5.6  | POST   | /api/youtube/approvals               | 업로드 승인 요청 생성 |
    | 5.7  | GET    | /api/youtube/approvals               | 승인 대기 목록 조회   |
    | 5.8  | GET    | /api/youtube/approvals/{id}          | 승인 상세 조회        |
    | 5.9  | POST   | /api/youtube/approvals/{id}/decision | 승인/거절 처리        |
    | 5.10 | PUT    | /api/youtube/approvals/{id}          | 승인 요청 수정        |
    | 5.11 | DELETE | /api/youtube/approvals/{id}          | 승인 요청 취소        |
    | 5.12 | GET    | /api/youtube/approvals/history       | 승인 이력 조회        |

2. 개발 진행하기

Phase 1: 프로젝트 초기 설정 (Foundation)

초기 설정은 중요함으로 PLAN.md를 기준으로 꼼꼼하게 요청하는게 좋다. (선택)

• 프로젝트 초기화 단계 추가

README.md .gitignore .env.example .editorconfig .nvmrc # Node 20 .python-version # 3.11
에 대해서 초기화 파일을 만들어주는 과정을 Phase 1.1 - Docker Compose 설정전에 초기화 작업으로 넣고싶어

• 질의

# CLAUDE.md, PLAN.md, API_SPEC.md, ARCHITECTURE.md를 계획 파일들을
# Claude Agent 및 GPT Agent에 넣어주고 물어본다.

초기 설정은 중요해서 PLAN.md를 기준으로 꼼꼼하게 요청하는게 좋다는데
내 PLAN.md 파일 참고해서 진행해야 할 프롬프트 알려줘

• Phase 1.0 - 프로젝트 초기화 설정

프로젝트 초기 파일 생성해줘.

1. README.md
   - 프로젝트 소개 (AI 영상 자동 생성 + 유튜브 업로드 플랫폼)
   - 기술 스택 (Next.js, Spring Boot, FastAPI, Docker)
   - 시작하기 (설치 및 실행 방법)
   - 프로젝트 구조
   - 환경변수 설명
   - API 문서 링크 (Swagger, FastAPI docs)

2. .gitignore
   - Node.js (node_modules, .next, out, npm-debug.log)
   - Java/Gradle (build, .gradle, *.jar, *.class)
   - Python (__pycache__, venv, .venv, *.pyc, .pytest_cache)
   - IDE (.idea, .vscode, *.iml)
   - 환경변수 (.env, .env.local, .env.*.local)
   - Docker (docker-compose.override.yml)
   - OS (.DS_Store, Thumbs.db)
   - 기타 (*.log, coverage, dist)

3. .env.example
   - Database (POSTGRES_HOST, POSTGRES_PORT, POSTGRES_DB, POSTGRES_USER, POSTGRES_PASSWORD)
   - Redis (REDIS_HOST, REDIS_PORT)
   - MinIO (MINIO_ENDPOINT, MINIO_ACCESS_KEY, MINIO_SECRET_KEY)
   - JWT (JWT_SECRET, JWT_EXPIRATION)
   - AI APIs (OPENAI_API_KEY, ELEVENLABS_API_KEY)
   - YouTube (YOUTUBE_CLIENT_ID, YOUTUBE_CLIENT_SECRET)
   - 값은 비워두거나 예시값으로

4. .editorconfig
   - root = true
   - charset utf-8
   - indent_style: space
   - indent_size: Java/TypeScript 4, Python 4
   - end_of_line: lf
   - trim_trailing_whitespace: true
   - insert_final_newline: true

5. .nvmrc
   - 20

6. .python-version
   - 3.11

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 1.1 - Docker Compose 설정

PLAN.md Phase 1.1 개발 환경 구축 진행해줘.

Docker Compose 설정:
- PostgreSQL 16 (포트 5432, DB명: aiplatform)
- Redis 7 (포트 6379)
  - DB 0: Celery Broker
  - DB 1: Celery Backend  
  - DB 2: 세션/캐시
- MinIO (포트 9000, 9001 콘솔)

파일 구성:
- docker/docker-compose.yml (프로덕션용)
- docker/docker-compose.dev.yml (개발용 오버라이드)
- .env.example (환경변수 템플릿)
- .gitignore

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 1.2 - Backend 초기 설정

PLAN.md Phase 1.2 Backend 초기 설정 진행해줘.

Spring Boot 프로젝트:
- Spring Boot 3.2, Java 21
- Gradle Kotlin DSL (build.gradle.kts)
- 패키지: com.aiplatform

의존성:
- Spring Web, Spring Data JPA
- PostgreSQL Driver
- QueryDSL
- Spring Security (기본 설정만)
- Swagger/OpenAPI 3.0
- Lombok
- Validation

구현할 것:
- application.yml (dev/prod 프로필)
- 공통 응답 형식 (ApiResponse<T>)
- 전역 예외 처리 (@RestControllerAdvice)
- Swagger UI 설정 (/swagger-ui.html)
- 헬스체크 엔드포인트 (GET /api/health)

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 1.3 - Frontend 초기 설정

PLAN.md Phase 1.3 Frontend 초기 설정 진행해줘.

Next.js 프로젝트:
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS

설정:
- 절대 경로 (@/ alias)
- ESLint + Prettier
- 폴더 구조 (app, components, hooks, lib, services, types)

구현할 것:
- Axios 인스턴스 (인터셉터 포함)
- React Query 설정
- 공통 컴포넌트:
  - Button (variant: primary, secondary, outline)
  - Input (label, error 표시)
  - Modal
  - Toast/Alert
- 기본 레이아웃

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 1.4 - Video Service 초기 설정

PLAN.md Phase 1.4 Video Service 초기 설정 진행해줘.

FastAPI 프로젝트:
- Python 3.11
- FastAPI + Uvicorn

구조:
- app/main.py
- app/core/config.py
- app/api/routes/
- app/services/
- app/tasks/
- app/models/

구현할 것:
- Celery + Redis 연동
- MinIO 클라이언트 설정 (boto3)
- 헬스체크 엔드포인트 (GET /health)
- requirements.txt
- Dockerfile

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 1 완료 확인

# Docker 실행
cd docker && docker-compose -f docker-compose.dev.yml up -d

# Backend 실행
cd backend && ./gradlew bootRun
# 확인: http://localhost:8080/swagger-ui.html

# Video Service 실행
cd video-service && uvicorn app.main:app --reload
# 확인: http://localhost:8000/docs

# Frontend 실행
cd frontend && npm run dev
# 확인: http://localhost:3000

Phase 2: 인증/인가 시스템 (Authentication)

• 질의

이제 Phase 1 모두 완료했는데 다음은 뭐하면돼?

• Phase 2.1 - Backend 인증

PLAN.md Phase 2.1 Backend 인증 구현해줘.

1. User 엔티티
   - id (UUID)
   - email (unique)
   - password (BCrypt 암호화)
   - name
   - profileImage
   - createdAt, updatedAt

2. JWT 구현
   - Access Token (1시간)
   - Refresh Token (7일)
   - Redis에 Refresh Token 저장
   - 토큰 블랙리스트 (로그아웃용)

3. Spring Security 설정
   - JWT 필터 체인
   - 인증 제외 경로 (/api/auth/**, /swagger-ui/**, /api/health)

4. API 구현 (API_SPEC.md 참고)
   - POST /api/auth/signup (회원가입)
   - POST /api/auth/login (로그인)
   - POST /api/auth/refresh (토큰 갱신)
   - POST /api/auth/logout (로그아웃)
   - GET /api/auth/me (내 정보)

5. 예외 처리
   - EMAIL_DUPLICATED
   - INVALID_CREDENTIALS
   - INVALID_TOKEN

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 2.2 - Frontend 인증

PLAN.md Phase 2.2 Frontend 인증 구현해줘.

1. 페이지
   - /login (로그인)
   - /signup (회원가입)
   - /dashboard (로그인 후 메인)

2. 인증 상태 관리 (Zustand)
   - user 정보
   - accessToken
   - isAuthenticated
   - login(), logout(), setUser()

3. API 연동
   - authService (login, signup, refresh, logout, getMe)
   - Axios 인터셉터에서 토큰 자동 주입
   - 401 에러 시 토큰 갱신 시도

4. 보호된 라우트
   - 미들웨어로 인증 체크
   - 미인증 시 /login 리다이렉트

5. UI/UX
   - 폼 유효성 검사 (react-hook-form + zod)
   - 로딩 상태
   - 에러 메시지 표시

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• 진행 순서

Phase 2.1 Backend 인증 → 테스트 (Swagger) → Phase 2.2 Frontend 인증

Phase 3: 프로젝트 관리 (Project CRUD)

• 질의

이제 Phase 2 모두 완료했는데 다음은 뭐하면돼?

• Phase 3.1 - Backend

PLAN.md Phase 3 프로젝트 관리 Backend 구현해줘.

1. Project 엔티티
   - id (UUID)
   - user (ManyToOne)
   - title
   - description
   - status (DRAFT, PROCESSING, COMPLETED, FAILED)
   - settings (JSON)
   - createdAt, updatedAt

2. Video 엔티티
   - id (UUID)
   - project (ManyToOne)
   - title, description
   - script
   - thumbnailUrl, videoUrl, audioUrl
   - duration, resolution, fileSize
   - status (QUEUED, PROCESSING, COMPLETED, FAILED)
   - youtubeId, youtubeUrl
   - createdAt, updatedAt

3. API 구현 (API_SPEC.md 참고)
   - GET /api/projects (목록, 페이지네이션, 상태 필터)
   - POST /api/projects (생성)
   - GET /api/projects/{id} (상세)
   - PUT /api/projects/{id} (수정)
   - DELETE /api/projects/{id} (삭제)

4. QueryDSL
   - 동적 쿼리 (상태 필터, 정렬)
   - 본인 프로젝트만 조회

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 3.2 - Frontend

PLAN.md Phase 3 프로젝트 관리 Frontend 구현해줘.

1. 페이지
   - /dashboard (프로젝트 목록, 통계 요약)
   - /projects/new (프로젝트 생성)
   - /projects/[id] (프로젝트 상세 + 영상 목록)
   - /projects/[id]/edit (프로젝트 수정)

2. 컴포넌트
   - ProjectCard (목록용 카드)
   - ProjectForm (생성/수정 폼)
   - ProjectStatus (상태 뱃지)
   - VideoList (프로젝트 내 영상 목록)
   - Pagination
   - EmptyState (프로젝트 없을 때)

3. 기능
   - React Query로 데이터 페칭
   - 무한 스크롤 또는 페이지네이션
   - 상태별 필터링
   - 삭제 확인 모달

4. UI/UX
   - 로딩 스켈레톤
   - 에러 처리
   - 성공/실패 토스트

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• 완료 후 확인

1. Swagger에서 Project API 테스트
2. 프론트에서 프로젝트 생성/수정/삭제 동작 확인
3. 목록 페이지네이션, 필터링 동작 확인

Phase 4: 영상 생성 파이프라인 (Video Generation)

• 질의

이제 Phase 3 모두 완료했는데 다음은 뭐하면돼?

• Phase 4.1 - 스크립트 생성 (Video Service)

PLAN.md Phase 4.1 스크립트 생성 구현해줘.

Video Service (FastAPI):
1. OpenAI API 연동
   - GPT-4 또는 GPT-3.5-turbo
   - 비동기 호출

2. 스크립트 생성 서비스
   - 프롬프트 템플릿 관리
   - 스타일 옵션 (educational, casual, professional)
   - 타겟 오디언스 설정
   - 예상 영상 길이 계산

3. API 엔드포인트
   - POST /api/scripts/generate
   - POST /api/scripts/improve (스크립트 개선)

4. Pydantic 모델
   - ScriptRequest
   - ScriptResponse (script, wordCount, estimatedDuration, sections)

Backend (Spring Boot):
5. Video Service 호출 클라이언트
6. 스크립트 생성 API 프록시

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 4.2 - 음성 합성 (TTS)

PLAN.md Phase 4.2 음성 합성 구현해줘.

Video Service (FastAPI):
1. TTS 서비스
   - ElevenLabs API 연동 (우선)
   - OpenAI TTS 연동 (대안)
   - 음성 설정 (voiceId, speed, pitch)

2. 파일 저장
   - MinIO에 음성 파일 저장
   - 파일 URL 반환

3. Celery 태스크
   - generate_audio_task
   - 진행률 Redis 저장

4. API 엔드포인트
   - POST /internal/tts/generate

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 4.3 - 영상 합성

PLAN.md Phase 4.3 영상 합성 구현해줘.

Video Service (FastAPI):
1. 영상 합성 서비스
   - MoviePy 기반
   - FFmpeg 처리

2. 기능
   - 배경 이미지/영상 + 음성 합성
   - 자막 오버레이 (SRT 생성)
   - 썸네일 자동 생성
   - 해상도 설정 (1080p, 720p)

3. Celery 태스크
   - compose_video_task
   - 태스크 체이닝 (스크립트 → TTS → 영상)
   - 진행률 업데이트

4. 파일 저장
   - 영상 MinIO 저장
   - 썸네일 MinIO 저장

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 4.4 - 영상 생성 API 연동

PLAN.md Phase 4.4 영상 생성 API 연동 구현해줘.

Backend (Spring Boot):
1. 영상 생성 요청 API
   - POST /api/videos (API_SPEC.md 참고)
   - Video Service에 태스크 요청
   - taskId 저장

2. 상태 조회 API
   - GET /api/videos/{id}/status
   - Redis에서 진행률 조회
   - 단계별 상태 반환

3. 콜백 처리
   - POST /api/internal/callback
   - Video Service 완료 시 호출
   - Video 엔티티 업데이트

Frontend:
4. 영상 생성 위자드 UI
   - Step 1: 스크립트 입력/생성
   - Step 2: 음성 설정
   - Step 3: 영상 설정
   - Step 4: 생성 및 진행률

5. 실시간 진행률 표시
   - 폴링 또는 SSE
   - 단계별 진행 상태

6. 미리보기 플레이어
   - 완료된 영상 재생
   - 다운로드 버튼

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• 진행 순서

4.1 스크립트 생성 → 4.2 TTS → 4.3 영상 합성 → 4.4 API 연동

Phase 5: 유튜브 연동 (YouTube Integration)

• 질의

이제 Phase 4 모두 완료했는데 다음은 뭐하면돼?

• Phase 5.1 - YouTube OAuth 연동

PLAN.md Phase 5.1 YouTube OAuth 연동 구현해줘.

Backend (Spring Boot):
1. YouTube OAuth 설정
   - Google OAuth 2.0 클라이언트
   - YouTube Data API v3 스코프
   - 토큰 암호화 저장

2. YouTubeChannel 엔티티
   - id (UUID)
   - user (ManyToOne)
   - channelId
   - channelName
   - thumbnailUrl
   - accessToken (암호화)
   - refreshToken (암호화)
   - tokenExpiresAt
   - createdAt, updatedAt

3. API 구현 (API_SPEC.md 참고)
   - GET /api/youtube/auth (인증 URL 반환)
   - GET /api/youtube/callback (OAuth 콜백)
   - GET /api/youtube/channels (연결된 채널 목록)
   - DELETE /api/youtube/channels/{id} (채널 연결 해제)

4. 토큰 자동 갱신
   - 만료 전 자동 갱신
   - 갱신 실패 시 재연결 요청

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 5.2 - 영상 업로드 기능

PLAN.md Phase 5.2 YouTube 영상 업로드 구현해줘.

Backend (Spring Boot):
1. 업로드 서비스
   - YouTube Data API v3 연동
   - Resumable Upload (대용량 파일)
   - 메타데이터 설정 (제목, 설명, 태그)
   - 썸네일 업로드
   - 공개 설정 (public, unlisted, private)
   - 예약 업로드 (scheduledAt)

2. YouTubeUpload 엔티티
   - id (UUID)
   - video (ManyToOne)
   - channel (ManyToOne)
   - youtubeVideoId
   - youtubeUrl
   - status (PENDING, UPLOADING, PROCESSING, COMPLETED, FAILED)
   - progress
   - errorMessage
   - scheduledAt
   - uploadedAt

3. API 구현 (API_SPEC.md 참고)
   - POST /api/youtube/upload (업로드 요청)
   - GET /api/youtube/upload/{id}/status (상태 조회)

4. 비동기 처리
   - 업로드 작업 백그라운드 처리
   - 진행률 업데이트

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• Phase 5.3 - Frontend 유튜브 연동 UI

PLAN.md Phase 5.3 YouTube 연동 Frontend 구현해줘.

1. 페이지
   - /settings/youtube (채널 관리)
   - 영상 상세 페이지에 업로드 버튼 추가

2. 컴포넌트
   - YouTubeConnectButton (채널 연결)
   - YouTubeChannelCard (연결된 채널 표시)
   - YouTubeUploadModal (업로드 설정)
   - UploadProgressBar (업로드 진행률)

3. 업로드 폼
   - 채널 선택
   - 제목, 설명 수정
   - 태그 입력
   - 공개 설정 선택
   - 예약 업로드 날짜/시간
   - 썸네일 미리보기

4. 기능
   - OAuth 팝업 플로우
   - 업로드 상태 실시간 표시
   - 업로드 완료 후 YouTube 링크 표시

완료되면 CLAUDE.md, PLAN.md 진행상황 업데이트해줘.

• 사전 준비 (Google Cloud 설정)

YouTube API 사용하려면 Google Cloud 설정이 필요합니다:
1. Google Cloud Console 접속
   https://console.cloud.google.com

2. 프로젝트 생성

3. YouTube Data API v3 활성화
   API 및 서비스 → 라이브러리 → YouTube Data API v3

4. OAuth 동의 화면 설정
   API 및 서비스 → OAuth 동의 화면

5. OAuth 클라이언트 ID 생성
   API 및 서비스 → 사용자 인증 정보 → OAuth 2.0 클라이언트 ID

6. .env에 추가
   YOUTUBE_CLIENT_ID=xxx
   YOUTUBE_CLIENT_SECRET=xxx

• 진행 순서

Google Cloud 설정 → 5.1 OAuth 연동 → 5.2 업로드 기능 → 5.3 Frontend