Chapter 11: 웹 앱으로 만들기 - Gradio 소개¶

한 줄 요약: 머신러닝 모델을 누구나 쓸 수 있는 웹 앱으로 바꾸는 마법, Gradio를 배워보자!

🎯 이 장에서 배우는 것¶

[ ] Gradio가 무엇인지, 왜 유용한지 이해할 수 있다
[ ] 간단한 함수를 웹 인터페이스로 만들 수 있다
[ ] 다양한 입력/출력 UI 컴포넌트를 설정할 수 있다
[ ] 머신러닝 모델을 웹 앱으로 배포할 수 있다
[ ] 만든 웹 앱을 다른 사람과 공유할 수 있다

💡 왜 이걸 배우나요?¶

코드만으로는 부족해!¶

열심히 만든 머신러닝 모델이 있어. 붓꽃 품종을 예측하거나, 영화 리뷰 감정을 분석하는 모델.

그런데... 이걸 어떻게 보여줄 수 있을까?

친구: "와 대단하다! 나도 써볼래!"
나: "응, 먼저 Python 설치하고, 패키지 깔고, 코드 복사해서..."
친구: "...그냥 됐어 😅"

현실적인 문제들: - 코드를 보여줘도 비개발자는 실행할 수 없음 - Jupyter Notebook 공유해도 환경 세팅이 어려움 - "결과만 보여줘"라는 요청에 스크린샷밖에 못 보여줌

Gradio가 해결해줘!¶

[Python 코드] ──▶ [Gradio] ──▶ [웹 앱] ──▶ [URL 공유]

친구: "와 대단하다! 나도 써볼래!"
나: "이 링크 클릭해봐!"
친구: (버튼 클릭) "오 진짜 되네! 신기하다!"

Gradio로 할 수 있는 것: - 몇 줄의 코드로 웹 UI 생성 - 링크 하나로 전 세계 누구나 사용 가능 - 별도 서버 세팅 없이 무료 배포

실제로 Gradio가 쓰이는 곳¶

┌─────────────────────────────────────────────────┐
│  🤗 Hugging Face Spaces                        │
│                                                 │
│  • Stable Diffusion 데모                       │
│  • ChatGPT 같은 챗봇 데모                      │
│  • 음성 인식, 번역 등 수천 개의 AI 앱          │
│                                                 │
│  → 대부분 Gradio로 만들어졌어!                 │
└─────────────────────────────────────────────────┘

📚 핵심 개념¶

개념 1: Gradio란?¶

비유로 시작: Gradio는 마치 "자동 키오스크 제작기"와 같아. 네가 만든 기능(함수)을 전달하면, 버튼과 입력창이 있는 키오스크를 자동으로 만들어줘.

정확한 정의: Gradio는 Python 함수를 웹 인터페이스로 감싸주는 라이브러리야. 입력을 받고, 함수를 실행하고, 결과를 보여주는 UI를 자동 생성해.

예시로 확인:

def 인사하기(이름):
    return f"안녕, {이름}!"

# 이 함수를 Gradio에 전달하면?
# → 이름 입력창 + 제출 버튼 + 결과 표시창이 있는 웹페이지 생성!

쉽게 말하면: "함수 → 웹 앱" 변환기!

개념 2: Interface (인터페이스)¶

비유로 시작: Interface는 마치 "주문서 양식"과 같아. "무엇을 입력받고, 어떤 처리를 하고, 무엇을 출력할지"를 정의하는 틀이야.

정확한 정의: gr.Interface는 Gradio의 핵심 클래스로, 함수(fn), 입력(inputs), 출력(outputs)을 연결해서 웹 UI를 만들어.

import gradio as gr

gr.Interface(
    fn=처리_함수,      # 어떤 작업을 할지
    inputs="text",     # 무엇을 입력받을지
    outputs="text"     # 무엇을 출력할지
)

그림으로 이해하기:

┌─────────────────────────────────────────────────┐
│             gr.Interface                        │
├─────────────────────────────────────────────────┤
│                                                 │
│  inputs        fn(함수)        outputs          │
│  ┌─────┐       ┌─────┐       ┌─────┐           │
│  │텍스트│ ───▶ │ 처리 │ ───▶ │텍스트│           │
│  │입력창│       │     │       │출력창│           │
│  └─────┘       └─────┘       └─────┘           │
│                                                 │
│              [Submit 버튼]                      │
│                                                 │
└─────────────────────────────────────────────────┘

쉽게 말하면: 입력 → 처리 → 출력 흐름을 정의하는 설계도!

개념 3: 입력/출력 컴포넌트¶

비유로 시작: 컴포넌트는 마치 "레고 블록"과 같아. 텍스트 입력, 숫자 슬라이더, 이미지 업로드 등 다양한 블록을 조합해서 원하는 UI를 만들어.

자주 쓰는 컴포넌트들:

┌──────────────────────────────────────────────────────────────┐
│                    입력 컴포넌트 (inputs)                    │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  gr.Textbox()     │  텍스트 입력창        "이름을 입력하세요" │
│  gr.Number()      │  숫자 입력            [  42  ]          │
│  gr.Slider()      │  슬라이더             ●────────         │
│  gr.Checkbox()    │  체크박스             ☑ 동의합니다       │
│  gr.Radio()       │  라디오 버튼          ○A ●B ○C          │
│  gr.Dropdown()    │  드롭다운 선택        [선택하세요 ▼]     │
│  gr.Image()       │  이미지 업로드        [📷 업로드]       │
│  gr.File()        │  파일 업로드          [📁 파일 선택]    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────┐
│                    출력 컴포넌트 (outputs)                   │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  gr.Textbox()     │  텍스트 표시          "결과: 성공!"      │
│  gr.Number()      │  숫자 표시            95.7              │
│  gr.Label()       │  분류 결과            🏷️ 고양이 (98%)   │
│  gr.Image()       │  이미지 표시          [🖼️ 결과 이미지]  │
│  gr.Plot()        │  그래프 표시          [📊 차트]         │
│  gr.Dataframe()   │  표 형태 표시         [📋 테이블]       │
│  gr.JSON()        │  JSON 데이터          { "key": "value" }│
│                                                              │
└──────────────────────────────────────────────────────────────┘

쉽게 말하면: 원하는 입력/출력 방식을 골라 조립하는 UI 블록!

비유로 시작: launch()는 마치 "가게 오픈"과 같아. 준비된 앱을 실제로 켜는 거지. share=True는 "인터넷에 임시 가게 열기"야.

정확한 정의: - demo.launch(): 로컬에서 웹 앱 실행 (내 컴퓨터에서만 접속 가능) - demo.launch(share=True): 임시 공개 URL 생성 (72시간 동안 누구나 접속 가능)

launch() 만:
┌─────────────────────────────────────────┐
│  Running on local URL: http://127.0.0.1:7860  │
│                                               │
│  → 내 컴퓨터에서만 접속 가능                  │
└───────────────────────────────────────────────┘

launch(share=True):
┌───────────────────────────────────────────────┐
│  Running on local URL: http://127.0.0.1:7860  │
│  Running on public URL: https://abcd1234.gradio.live  │
│                                               │
│  → 전 세계 누구나 접속 가능! (72시간)          │
└───────────────────────────────────────────────┘

쉽게 말하면: launch()는 앱 실행, share=True는 인터넷 공개!

🔨 따라하기¶

Step 0: Gradio 설치하기¶

목표: Gradio 패키지 설치

코드:

# === WHAT: Gradio 설치하기 ===
# Colab에서는 이미 설치되어 있을 수 있지만, 최신 버전을 위해 실행

# --- WHY: Gradio 사용을 위해 패키지가 필요해 ---
!pip install gradio -q  # -q는 설치 로그를 간단히 보여줌

실행 결과:

     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100%

여기서 잠깐! 🤔 설치 후 런타임 재시작이 필요할 수 있어. 에러가 나면 "런타임 → 런타임 다시 시작"을 해보자!

Step 1: 첫 번째 Gradio 앱 - 인사하기¶

목표: 가장 간단한 Gradio 앱 만들기

코드:

# === WHAT: 첫 번째 Gradio 앱 만들기 ===
# 이름을 입력받아 인사말을 출력하는 간단한 앱

# --- WHY: Gradio의 기본 구조를 이해하기 위해 ---

import gradio as gr  # Gradio 라이브러리 불러오기 (gr로 줄여서 사용)

# 처리 함수 정의
def 인사하기(이름):
    """입력받은 이름으로 인사말을 만들어 반환"""
    return f"안녕하세요, {이름}님! 반갑습니다! 🎉"

# Gradio 인터페이스 생성
demo = gr.Interface(
    fn=인사하기,        # 실행할 함수
    inputs="text",      # 입력: 텍스트
    outputs="text",     # 출력: 텍스트
    title="🤗 인사하기 앱",  # 앱 제목
    description="이름을 입력하면 인사해드려요!"  # 앱 설명
)

# 앱 실행
demo.launch()