기술과 산업/AI
Gradio 실전 시리즈 7화 – FastAPI와 Gradio 통합하기: API 기반 앱 제작 실습
B컷개발자
2025. 5. 21. 12:09
728x90
Gradio는 단독 데모 인터페이스로도 유용하지만, FastAPI와 통합하면 백엔드 API 기반의 실전 서비스로 확장할 수 있습니다. 본 글에서는 두 프레임워크를 함께 사용하는 구조와 예제를 정리합니다.
Gradio는 머신러닝 모델을 시각화하는 데 탁월한 도구입니다.
하지만 진짜 서비스를 만들기 위해선 인증, DB 연동, 로깅, 비즈니스 로직 등 다양한 기능이 필요합니다.
이때 가장 강력한 조합이 바로 Gradio + FastAPI입니다.
왜 FastAPI와 Gradio를 함께 쓰는가?
항목 Gradio FastAPI
역할 | 프론트엔드 (UI) | 백엔드 (API 처리) |
장점 | 빠른 인터페이스 구성 | 고성능 비동기 API 처리 |
한계 | 백엔드 기능 한계 (인증, DB 등 부재) | UI 직접 제공 기능 없음 |
Gradio는 UI 중심이고, FastAPI는 데이터 중심입니다.
두 프레임워크를 통합하면 웹 서비스 전체를 Python으로 구성할 수 있게 됩니다.
통합 방법 개요
- 방법 1: Gradio를 FastAPI 앱 안에 Mount
- 방법 2: Gradio는 독립, FastAPI는 별도 백엔드로 요청 처리
이번 편에서는 방법 1 – Mount 구조를 중심으로 설명합니다.
✅ Gradio를 FastAPI에 Mount 하기
설치 준비
pip install fastapi uvicorn gradio
기본 코드 구조
from fastapi import FastAPI
import gradio as gr
# Gradio 인터페이스 정의
def greet(name):
return f"안녕하세요, {name}님!"
gr_app = gr.Interface(fn=greet, inputs="text", outputs="text").launch(share=False, inline=False)
# FastAPI 앱 정의
app = FastAPI()
app.mount("/gradio", gr_app)
실행 명령어
uvicorn app:app --reload
- 실행 후 http://localhost:8000/gradio로 접속하면 Gradio UI가 표시됩니다.
- Gradio는 FastAPI 앱의 하위 경로에 포함되어 작동합니다.
🧪 실전 예제: 백엔드 API 호출 결과를 Gradio에서 출력
1. FastAPI 라우터 정의
from fastapi import FastAPI
from pydantic import BaseModel
app = FastAPI()
class Item(BaseModel):
message: str
@app.post("/echo")
def echo(item: Item):
return {"result": item.message[::-1]}
2. Gradio에서 API 호출
import requests
import gradio as gr
def call_backend(message):
res = requests.post("http://localhost:8000/echo", json={"message": message})
return res.json()["result"]
gr.Interface(fn=call_backend, inputs="text", outputs="text").launch()
결과
- 사용자가 입력한 메시지를 FastAPI 서버에 POST 요청
- 응답값을 받아 Gradio에서 출력
✅ 실무 팁: Gradio는 requests, httpx, aiohttp 등으로 REST API 호출 가능
FastAPI는 인증, DB 조회, 세션 로깅 등 역할 분담에 최적
✅ 구조 확장 시 고려사항
항목 체크 포인트
인증 | FastAPI에서 JWT 또는 OAuth 처리 후 Gradio에 전달 |
보안 | CORS 설정, API 라우팅 제한 필수 |
배포 | uvicorn, gunicorn, nginx 조합 가능 |
테스트 | Gradio UI는 테스트 코드에서 직접 호출 어려움 → API 분리 추천 |
실전 구조 예시: 서비스 구조 다이어그램
[사용자 브라우저]
↓
[Gradio 인터페이스] ──────────→ [FastAPI REST API]
└→ DB / 모델 / 파일 처리
- UI는 Gradio에서, 로직과 데이터 처리는 FastAPI에서 담당
- 모델이 무겁거나 비동기 처리가 필요할 때 특히 유리함
마무리 – Gradio를 진짜 ‘앱’으로 만들기 위한 첫걸음
Gradio는 학습 도구가 아니라 서비스화 도구입니다.
FastAPI와의 통합은 Gradio를 프로덕션 레벨로 끌어올리는 핵심 전략입니다.
- 빠른 UI → Gradio
- 비즈니스 로직 → FastAPI
- 전체 앱 운영 → Python 전담 가능
다음 화에서는 사용자 업로드/다운로드, 저장 경로 설정 등 Gradio에서 파일을 다루는 고급 팁을 소개합니다.
👉 Gradio 실전 시리즈 8화 – 업로드, 다운로드, 저장 경로 완벽 정리
728x90