B컷전문 | 개발과 인생의 이야기

Gradio를 활용해 AI 모델 인터페이스를 직접 만드는 첫 걸음. 본 글에서는 Gradio 설치 방법부터 Python 코드로 간단한 웹 앱을 만드는 전 과정을 상세하게 안내합니다.

AI 모델은 데이터를 입력하고 결과를 출력하는 과정을 누구나 쉽게 체험할 수 있어야 합니다.
오늘은 바로 그 시작, Gradio 환경 구축과 첫 번째 인터페이스 제작을 실습해보겠습니다.

---

Gradio 설치 방법

Gradio는 Python 기반이므로, Python 환경만 있다면 아주 간단하게 설치할 수 있습니다.

1. Python 환경 준비

권장 Python 버전: 3.8 이상

Anaconda 또는 venv로 별도의 가상환경을 만드는 것을 추천합니다.

python -m venv gradio_env
source gradio_env/bin/activate   # Mac/Linux
gradio_env\Scripts\activate      # Windows

2. Gradio 라이브러리 설치

pip 명령어로 한 줄이면 끝납니다.

pip install gradio

설치가 정상적으로 완료되었다면 다음 명령으로 버전을 확인할 수 있습니다.

python -c "import gradio as gr; print(gr.__version__)"

 

온라인 playground에서 바로 사용하기

https://www.gradio.app/playground

Gradio Playground

 

---

첫 번째 Gradio 인터페이스 만들기

Gradio의 가장 강력한 매력은 단 몇 줄의 코드로 웹 인터페이스를 만들 수 있다는 점입니다.
아래 예제를 따라 직접 실행해보세요.

✔️ 예제: 텍스트 입력 → 텍스트 출력

import gradio as gr

def greet(name):
    return f"안녕하세요, {name}님!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

실행 후 콘솔에서 URL이 생성되며, 웹 브라우저에서 접속하면 다음과 같은 화면을 볼 수 있습니다:

• 텍스트 입력창
• "Submit" 버튼
• 결과 출력창

---

Gradio 인터페이스 작동 원리

• fn=greet: 사용자가 입력한 데이터를 처리하는 핵심 함수
• inputs="text": 사용자가 값을 입력할 UI 컴포넌트
• outputs="text": 결과를 반환할 출력 컴포넌트
• demo.launch(): 인터페이스를 로컬 서버로 실행

💡 참고:
실행 시 외부 IP로 공유 가능한 링크도 생성됩니다.
이를 통해 다른 사람과 바로 테스트 결과를 공유할 수 있습니다.

---

추가 실습: 이미지 입력 + 이미지 출력

Gradio는 이미지, 오디오, 비디오 등 다양한 데이터를 아주 손쉽게 다룰 수 있습니다.
이미지 예제도 다음처럼 간단합니다.

import gradio as gr
from PIL import ImageOps

def invert(image):
    return ImageOps.invert(image)

demo = gr.Interface(
    fn=invert,
    inputs=gr.Image(type="pil", label="이미지를 업로드하세요"),
    outputs=gr.Image(type="pil", label="반전된 이미지")
)

demo.launch()

이미지를 업로드하면 색상이 반전된 이미지를 바로 반환합니다.
이처럼 Gradio는 모델 실험과 UI 개발을 동시에 할 수 있는 강력한 도구입니다.

---

Gradio 앱 종료 방법

서버 실행 후 콘솔에서 Ctrl + C 를 누르면 인터페이스를 중지할 수 있습니다.

---

실전 팁: Jupyter Notebook에서도 사용 가능

Gradio는 Jupyter Notebook 환경에서도 매우 잘 작동합니다.
코드를 작성하고 바로 인터페이스를 띄워서 테스트할 수 있어, 연구용 프로토타입 제작 시 최적입니다.

import gradio as gr

def echo(text):
    return text

gr.Interface(fn=echo, inputs="text", outputs="text").launch(inline=True)

inline=True를 추가하면 Notebook 셀 안에서 바로 웹 UI가 뜹니다.

---

마무리

오늘은 Gradio 설치와 첫 인터페이스를 직접 만들어보았습니다.
아주 간단한 코드로 강력한 AI 인터페이스를 구축할 수 있음을 확인했습니다.

다음 화부터는 Gradio의 Interface vs Blocks 구조 차이를 본격적으로 다루며, 실전 개발에서 어떤 방식을 선택해야 하는지 비교 분석하겠습니다.

👉 Gradio 실전 시리즈 3화 – Interface vs Blocks: 무엇을 언제 쓸까?