웹툰 생성 AI(Webtoon Maker)를 위한 서버 설계

📌전체 아키텍처 

웹툰 생성 서비스는 크게 5가지 핵심 요소로 구성됩니다.

1. Frontend (웹/앱)
   • 유저가 웹툰을 만들고 업로드하는 인터페이스
2. Backend API (Spring Boot)
   • 유저 인증, 웹툰 생성 요청 처리, 웹툰 데이터 관리
3. AI Model Server (Python, FastAPI, Flask) ---> ai 서버를 만들지 말지
   • AI 모델을 활용해 이미지 생성, 편집 및 스타일 변환 수행
4. Database (PostgreSQL, Redis)
   • 유저, 웹툰 정보, 설정 값 저장
5. Storage (S3/MinIO)
   • 웹툰 원본 이미지 및 생성된 이미지 저장
   • S3를 직접 구축해서 쓰고 싶다면 MinIO

---

📌 SSE를 활용한 서버 설계

✅ SSE(Server-Sent Events)와 Kafka를 활용하여 웹툰 생성 상태를 실시간으로 제공하는 구조 설계
✅ 웹툰 생성 요청은 Kafka를 통해 AI 서버로 전달되며, AI 서버는 SSE를 통해 클라이언트에 실시간으로 상태 전송
✅ 최종 웹툰 이미지는 S3/MinIO에 저장되며, 클라이언트는 생성이 완료되면 해당 이미지를 볼 수 있음

🚀 이를 통해 사용자는 웹툰이 실시간으로 생성되는 과정을 볼 수 있으며, 비동기적으로 처리 가능! 🔥

🚀 SSE(Server-Sent Events)란?

• 클라이언트가 서버에 연결을 유지하고, 서버가 실시간으로 데이터를 전송할 수 있는 HTTP 기반의 통신 방식.
• 채팅, 스트리밍, AI 작업 상태 업데이트 같은 실시간 응용에 적합.

                     ┌───────────────────────────────┐
                     │         Client (React)        │
                     ├───────────────▲───────────────┤
                     │               │               │
                     │      SSE (웹툰 생성 상태)        │
                     │               │               │
        ┌───────────▼───────────────┐                │
        │   Webtoon API Server      │                │
        │   (Spring Boot + SSE)     │                │
        ├───────────▲───────────────┤                │
        │           │ Kafka         │                │
        ├───────────▼───────────────┤                │
        │       AI Model Server     │                │
        │       (FastAPI, PyTorch)  │                │
        ├───────────▲───────────────┤                │
        │      S3 / MinIO (Storage) │                │
        └───────────────────────────┘

 

 

(1) 웹툰 생성 요청

📌 요청 API (POST /api/webtoon/generate)

• 유저가 웹툰 생성 요청을 보내면, 비동기 방식으로 처리됨.
• Kafka를 통해 AI 모델 서버로 웹툰 생성 요청을 보냄.

@PostMapping("/api/webtoon/generate")
public ResponseEntity<String> generateWebtoon(@RequestBody WebtoonRequest request) {
    String taskId = UUID.randomUUID().toString();
    
    // Kafka를 통해 AI 서버로 웹툰 생성 요청
    webtoonProducer.sendMessage("webtoon-tasks", taskId, request);

    return ResponseEntity.ok(taskId);
}

 

 

(2) 클라이언트가 웹툰 생성 상태 구독 (SSE)

📌 SSE 연결 API (GET /api/webtoon/status/{taskId})

• 클라이언트는 SSE를 통해 웹툰 생성 상태를 실시간으로 확인할 수 있음.
• AI 모델이 진행 상태를 Kafka로 전송하면, 이를 SSE를 통해 클라이언트에게 전달.

@GetMapping(value = "/api/webtoon/status/{taskId}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter subscribeWebtoonStatus(@PathVariable String taskId) {
    SseEmitter emitter = new SseEmitter(Long.MAX_VALUE);

    webtoonStatusService.addEmitter(taskId, emitter);

    emitter.onCompletion(() -> webtoonStatusService.removeEmitter(taskId));
    emitter.onTimeout(() -> webtoonStatusService.removeEmitter(taskId));

    return emitter;
}

 

(3) AI 서버가 웹툰 생성 후 상태 업데이트

📌 AI 서버 (FastAPI)

• AI 모델이 Kafka에서 메시지를 받아 웹툰을 생성하고 상태를 업데이트함.

from kafka import KafkaConsumer, KafkaProducer
import json
import time

consumer = KafkaConsumer(
    'webtoon-tasks',
    bootstrap_servers='kafka:9092',
    value_deserializer=lambda x: json.loads(x.decode('utf-8'))
)

producer = KafkaProducer(
    bootstrap_servers='kafka:9092',
    value_serializer=lambda x: json.dumps(x).encode('utf-8')
)

for message in consumer:
    task_id = message.key
    data = message.value

    # 1. 웹툰 생성 시작
    producer.send('webtoon-status', key=task_id, value={"status": "started"})
    time.sleep(2)

    # 2. AI 모델 실행 (가정)
    producer.send('webtoon-status', key=task_id, value={"status": "generating"})
    time.sleep(5)

    # 3. 생성 완료
    image_url = f"https://s3.bucket.com/{task_id}.png"
    producer.send('webtoon-status', key=task_id, value={"status": "completed", "url": image_url})

 

 

(4) 서버가 SSE를 통해 클라이언트에 상태 전달

//📌 Spring Boot에서 Kafka 메시지를 받아 SSE로 전송
@KafkaListener(topics = "webtoon-status")
public void listenWebtoonStatus(@Payload String message, @Header(KafkaHeaders.RECEIVED_KEY) String taskId) {
    webtoonStatusService.sendUpdate(taskId, message);
}
//📌 SSE 상태 업데이트 서비스
@Service
public class WebtoonStatusService {
    private final Map<String, SseEmitter> emitters = new ConcurrentHashMap<>();

    public void addEmitter(String taskId, SseEmitter emitter) {
        emitters.put(taskId, emitter);
    }

    public void sendUpdate(String taskId, String status) {
        SseEmitter emitter = emitters.get(taskId);
        if (emitter != null) {
            try {
                emitter.send(SseEmitter.event().data(status));
            } catch (IOException e) {
                emitter.complete();
                emitters.remove(taskId);
            }
        }
    }

    public void removeEmitter(String taskId) {
        emitters.remove(taskId);
    }
}

 

4. 📌 SSE를 활용한 클라이언트 코드 (React)

//📌 React에서 SSE를 통해 상태 업데이트 받기
import { useState, useEffect } from "react";

const WebtoonGenerator = ({ taskId }) => {
    const [status, setStatus] = useState("Waiting...");

    useEffect(() => {
        const eventSource = new EventSource(`/api/webtoon/status/${taskId}`);

        eventSource.onmessage = (event) => {
            const data = JSON.parse(event.data);
            setStatus(data.status);

            if (data.status === "completed") {
                console.log("웹툰 생성 완료:", data.url);
                eventSource.close();
            }
        };

        return () => eventSource.close();
    }, [taskId]);

    return <div>웹툰 상태: {status}</div>;
};

---

📌 마이크로서비스 아키텍처 (MSA)

✅ Spring Boot API + FastAPI AI 서버 분리하여 확장성 있는 아키텍처 설계

✅ Kafka 비동기 이벤트 기반 웹툰 생성 처리

✅ Redis 캐싱 및 JWT 인증 적용

✅ S3 / MinIO를 이용한 이미지 저장

✅ Kubernetes 기반 AI 서버 배포 (GPU 스케일링)

🚀 웹툰 생성 AI 서비스가 확장 가능하고, 대량의 웹툰 요청도 효율적으로 처리할 수 있음! 🚀

                         ┌──────────────────────────────┐
                         │         FRONTEND (React)     │
                         └──────────────┬───────────────┘
                                        │
                ┌───────────────────────────────────────────┐
                │      API GATEWAY (Spring Cloud Gateway)   │
                └──────────────┬───────────────────────────┘
                               │
       ┌───────────────────────┴──────────────────────────┐
       │                                                  │
┌──────┴───────────────┐                     ┌────────────┴────────┐
│ Webtoon API (Spring) │                     │ AI Model Server     │
│  - 유저 인증 (JWT)     │                     │ (FastAPI, PyTorch)  │
│  - 웹툰 생성 요청       │                     │ - 웹툰 스타일 적용      │
│  - DB 저장            │                     │ - AI 이미지 생성       │
│  - 작업 상태 관리       │                     │ - Task Queue 관리    │
└──────────┬───────────┘                     └──────────┬──────────┘
           │                                           │
           │                                           │
    ┌──────┴────────────┐                       ┌──────┴────────────┐
    │   PostgreSQL      │                       │    S3             │
    │  (유저 & 웹툰 정보)  │                       │   (이미지 저장)      │
    └───────────────────┘                       └───────────────────┘

사용자 → Gateway → API 서버 → AI 서버 (ML 모델) → Storage

 

웹툰 생성 요청이 들어오면 Kafka를 통해 AI 서버로 전달 

AI 서버가 결과를 생성하면 Webtoon API 서버에서 최종 결과 저장

 

 

---

각 서비스 역할

• Gateway (Spring Cloud Gateway)
  • API 라우팅 및 인증 처리
• Webtoon API (Spring Boot)
  • 유저 인증, 웹툰 생성 요청 처리, DB 연동
• AI Model Server (Python, FastAPI)
  • 웹툰 이미지 생성 및 필터 적용
• File Storage (S3 / MinIO)
  • 웹툰 이미지 저장 및 캐싱

---

 

Gateway (Spring Cloud Gateway)

• JWT 인증 적용 (X-User-Id, X-User-Role 헤더 전달)
• API 요청을 적절한 서버로 라우팅 (/api/** → Webtoon API, /ml/** → AI 서버)

---

Webtoon API (Spring Boot)

📌 주요 기능

• 유저 인증 및 세션 관리 (JWT)
• 웹툰 생성 요청 관리 (비동기 처리)
• 생성된 웹툰 저장 및 조회
• Redis 캐싱 적용 (자주 조회되는 데이터)

 

Webtoon API 명세서

Method	Endpoint
POST	/api/webtoon	새로운 웹툰 생성 요청
GET	/api/webtoon/{id}	특정 웹툰 상세 조회
GET	/api/webtoon/list	사용자의 웹툰 리스트
DELETE	/api/webtoon/{id}	특정 웹툰 삭제

 

---

AI Model Server (FastAPI)

📌 역할

• 웹툰 스타일 변환 및 AI 이미지 생성
• 웹툰 색감 보정, 스타일 변화 등 추가 모델 제공 가능

AI API 명세서

Method	Endpoint
POST	/ml/generate	웹툰 생성 요청
POST	/ml/style/{id}	스타일 변환
POST	/ml/status/{taskId}	작업 상태 조회

 

---

그림 AI 모델

https://modulabs.co.kr/blog/controlnet-stable-diffusion

ControlNet 으로 이미지생성 (feat. Stable Diffusion)

 

---

Database (PostgreSQL + Redis)

• PostgreSQL → 유저 정보, 웹툰 메타데이터 저장
• Redis → 작업 상태, 캐싱, 세션 관리

CREATE TABLE webtoon (
    id UUID PRIMARY KEY,
    user_id UUID NOT NULL,
    title VARCHAR(255) NOT NULL,
    status VARCHAR(50) CHECK (status IN ('pending', 'processing', 'completed', 'failed')),
    image_url TEXT,
    created_at TIMESTAMP DEFAULT NOW()
);

 

 

Storage (S3)

AI 모델이 생성한 웹툰 이미지를 S3에 저장

s3://webtoon-images/{userId}/{webtoonId}/cover.jpg
s3://webtoon-images/{userId}/{webtoonId}/page1.jpg

 

---