🏛️ [실전 아키텍처] Next.js와 FastAPI로 구축하는 AI 패션 코디 서비스 "FitCheck" 설계도 🎨👗

안녕하세요! 👋 오늘은 모던 웹 기술의 끝판왕 Next.js와 파이썬 AI 서빙의 강자 FastAPI를 결합하여, 실제 상용화 가능한 수준의 AI 서비스 아키텍처를 그려보겠습니다! 🖌️📐

단순한 연동을 넘어, 대용량 트래픽 처리, 보안, 클라우드 배포까지 고려한 "풀 패키지" 설계입니다! 📦🔥

1️⃣ 서비스 개요: AI 스타일리스트 "FitCheck" 💃🕺

• 기능: 사용자가 전신 사진을 업로드하면 📸 -> AI가 체형과 옷 스타일을 분석 🧠 -> 어울리는 악세서리와 신발을 추천 👠🧢
• 기술 스택:
  • Frontend: Next.js (React) + Tailwind CSS 🎨 -> Vercel 배포 🚀
  • Backend: FastAPI (Python) 🐍 -> AWS EC2/ECS (Docker) 🐳
  • AI Engine: PyTorch + TensorRT (최적화) 🏎️
  • Task Queue: Celery + Redis (비동기 처리) 🐇📦

---

2️⃣ 전체 아키텍처 다이어그램 (System Architecture) 🗺️

1. Client (User) 📱💻: 브라우저에서 Next.js 웹사이트 접속.
2. Frontend (Vercel) ⚛️: UI 렌더링 및 이미지 업로드 처리.
3. API Gateway / Load Balancer 🚦: 요청을 분산하고 HTTPS 보안 처리.
4. Backend (FastAPI Container) 🐳: API 요청 접수, 유효성 검사.
5. Async Queue (Redis) 📨: 무거운 AI 작업을 잠시 대기시키는 대기열.
6. AI Worker (Celery + Docker) 👷‍♀️: 대기열에서 작업을 꺼내 실제로 AI 추론(Inference) 수행.
7. Cloud Storage (AWS S3) ☁️: 사용자 이미지와 분석 결과 저장.

---

3️⃣ 핵심 기술 포인트 & 구현 전략 🛠️💡

🅰️ 프론트엔드 & 백엔드 분리 (CORS 정복하기) 🚧

Next.js(Vercel)와 FastAPI(AWS)의 도메인이 다르기 때문에 CORS(Cross-Origin Resource Sharing) 문제가 100% 발생합니다! 🚨 FastAPI에서 Vercel 도메인을 허용해줘야 해요.

Python

 

# @title FastAPI CORS 설정 (backend/main.py)
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 보안을 위해 구체적인 도메인을 명시하는 게 좋아요! 🔒
origins = [
    "https://fitcheck.vercel.app",  # 배포된 Next.js 주소
    "http://localhost:3000",        # 로컬 개발 주소
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins, # 허용할 출처 목록 ✅
    allow_credentials=True,
    allow_methods=["*"],   # 모든 HTTP 메서드 허용 (GET, POST 등)
    allow_headers=["*"],   # 모든 헤더 허용
)

🅱️ 멀티유저 대응: "줄 서세요!" (비동기 큐 & Celery) ⏳

AI 모델(예: 거대 Vision Transformer)은 추론하는 데 1~3초가 걸릴 수 있어요. 사용자가 몰리면 서버가 터집니다! 💥 그래서 **"비동기 처리"**가 필수예요.

1. FastAPI는 요청만 받고 "접수되었습니다!"라고 즉시 응답 (Task ID 발급) 🎫
2. Redis라는 우편함에 작업을 넣어둡니다. 📮
3. Celery Worker가 뒷단에서 하나씩 꺼내서 AI 모델을 돌립니다. ⚙️
4. Next.js 프론트엔드는 Task ID를 가지고 1초마다 "다 됐나요?"라고 물어봅니다(Polling). 👀

☪️ AI 모델 최적화 & Docker 배포 🚀🐳

무거운 PyTorch 모델을 그대로 쓰면 느려요! TensorRT나 ONNX Runtime으로 모델을 경량화(Quantization)해서 추론 속도를 2배 이상 높입니다! ⚡️ 그리고 이 모든 환경을 Docker 컨테이너로 묶어서, 개발 환경과 배포 환경을 100% 일치시킵니다.

Dockerfile

 

# @title Dockerfile (AI Worker)
FROM pytorch/pytorch:2.0-cuda11.7-cudnn8-runtime

WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt

# 모델 가중치 파일 복사 (용량이 크다면 S3에서 다운로드 추천) 🏋️
COPY ./models /app/models
COPY . .

# Celery 워커 실행 명령어 🔥
CMD ["celery", "-A", "worker.celery_app", "worker", "--loglevel=info"]

---

4️⃣ 클라우드 인프라 & 모니터링 (DevOps) ☁️📊

• 배포 (Deployment):
  • Frontend: Git Push만 하면 Vercel이 알아서 빌드하고 전 세계 CDN에 뿌려줍니다. (세상 편함! 😍)
  • Backend: GitHub Actions를 통해 코드가 업데이트되면, 자동으로 Docker 이미지를 빌드해서 AWS ECR(저장소)에 올리고, AWS ECS(컨테이너 실행) 서비스를 업데이트합니다. (CI/CD 파이프라인 구축) 🔄
• 모니터링 (Monitoring):
  • Sentry: "어? 에러 났다!" 🚨 프론트/백엔드 에러 로그를 실시간으로 수집.
  • Prometheus + Grafana: "지금 GPU 온도 몇 도야?" 🌡️ 서버 상태와 API 요청 횟수를 멋진 그래프로 시각화.

---

💡 쉽고 정확한 비유: "유명한 맞춤 정장 테일러샵" 🤵🧵

이 전체 아키텍처는 손님이 붐비는 고급 테일러샵과 같아요!

1. Next.js (Vercel) 👉 화려한 쇼윈도와 매장 입구 🏪 : 손님(User)이 들어와서 옷을 구경하고 주문서를 작성하는 곳이에요. 아주 빠르고 예쁘죠.
2. FastAPI 👉 카운터 매니저 👩‍💼 : "주문 받았습니다! 여기 대기표(Task ID) 받으세요~" 하고 접수만 빠르게 처리해요. 직접 옷을 만들진 않아요.
3. Redis 👉 주문서 꽂이 📌 : 매니저가 주문서를 순서대로 꽂아두는 곳이에요.
4. Celery Worker (AI) 👉 장인 재단사들 ✂️👴 : 뒷방 작업실에서 묵묵히 주문서를 가져가 옷을 만들어요. (오래 걸리는 작업)
5. Docker 👉 표준화된 작업 도구함 🧰 : 어느 재단사가 오든 똑같은 가위, 바늘, 자를 사용해서(환경 일치) 옷 퀄리티가 일정해요.