[ Azure AI Services #2 ]Gradio로 AI 실습 화면 만들기: CLI에서 웹 GUI까지

Gradio로 AI 실습 화면 만들기: CLI에서 웹 GUI까지

이전 글에서는 Azure AI Services의 전체 구조를 먼저 살펴봤습니다.

Azure AI Services는 문서, 언어, 음성, 비전 같은 AI 기능을 API 형태로 제공하고, 개발자는 Endpoint와 API Key를 이용해 필요한 기능을 호출할 수 있다는 점이 핵심이었습니다.

 

그런데 실제로 AI 기능을 테스트하다 보면 한 가지 불편함이 생깁니다. 코드에서는 결과가 잘 나오지만, 매번 터미널이나 노트북 출력창에서만 확인하면 사용하기도 어렵고, 다른 사람에게 보여주기도 어렵습니다.

 

예를 들어 음성 파일을 넣으면 텍스트가 나오고, 이미지를 넣으면 객체 감지 결과가 나오는 AI 실습을 만들었다고 해보겠습니다.

결과를 코드 출력으로만 확인하는 것보다, 파일을 업로드하고 버튼을 누르면 결과가 화면에 바로 보이는 방식이 훨씬 직관적입니다. 이때 사용할 수 있는 도구가 바로 Gradio입니다.

이 글의 핵심 질문
Gradio는 AI 모델이나 API 실습 결과를 웹 화면으로 빠르게 확인할 수 있게 해주는 Python 라이브러리입니다.
복잡한 프론트엔드 개발 없이도 텍스트, 이미지, 음성 입력 화면을 만들 수 있다는 점이 가장 큰 장점입니다.

목차

1. 왜 AI 실습에 GUI가 필요할까?
2. Web Framework란?
3. Django, Flask, Gradio, Streamlit 비교
4. Gradio란?
5. Gradio Interface 구조
6. Hello World 예제로 이해하기
7. Gradio Share Server
8. ChatInterface와 Blocks
9. Azure AI Services 실습에서 Gradio를 어떻게 활용할까?
10. 정리
11. 전체 흐름 한 번에 정리
12. 핵심 키워드 정리
13. 다음 글 예고

1. 왜 AI 실습에 GUI가 필요할까?

AI 실습은 CLI나 Jupyter Notebook만으로도 충분히 가능합니다.

CLI는 Command Line Interface의 약자로, 터미널에 명령어를 입력해서 프로그램을 실행하는 방식입니다.

Jupyter Notebook에서는 셀을 실행하고 바로 아래에서 결과를 확인할 수 있습니다.

 

하지만 AI 서비스를 실제로 사용한다고 생각해보면 이야기가 조금 달라집니다.

사용자는 보통 터미널에 명령어를 입력하고 싶어 하지 않습니다. 대신 파일을 올리고, 버튼을 누르고, 결과를 화면에서 바로 보고 싶어 합니다.

 

예를 들어 Azure AI Speech를 이용해 음성 파일을 텍스트로 변환하는 실습을 한다고 해보겠습니다. CLI 방식이라면 파일 경로를 직접 입력하고, 명령어를 실행하고, 출력된 텍스트를 확인해야 합니다.

반면 GUI가 있으면 음성 파일을 업로드하고 버튼 한 번만 누르면 됩니다.

구분	CLI 방식	GUI 방식
사용 방식	명령어 입력	버튼, 입력창, 파일 업로드
장점	빠르고 개발자에게 익숙함	비개발자도 사용하기 쉬움
단점	사용자가 직접 쓰기 어려움	화면 구성이 필요함
적합한 상황	개발자 내부 테스트	실습, 데모, 프로토타입 공유

AI 실습에서 GUI가 중요한 이유는 단순히 예뻐 보이기 위해서가 아닙니다. 입력과 출력의 흐름을 눈으로 확인할 수 있기 때문에, AI 기능이 실제 서비스에서 어떻게 동작할지 더 쉽게 이해할 수 있습니다.

핵심 포인트
CLI는 개발자가 AI 기능을 빠르게 확인하기에 좋고, GUI는 사용자가 AI 기능을 직접 체험하기에 좋습니다. Gradio는 이 GUI를 아주 빠르게 만들 수 있도록 도와주는 도구입니다.

 

2. Web Framework란?

Gradio를 이해하기 전에 먼저 Web Framework가 무엇인지 간단히 짚고 넘어가겠습니다.

Web Framework는 웹 애플리케이션을 만들 때 필요한 기본 구조를 제공하는 도구입니다.

웹 서버를 띄우고, 사용자의 요청을 받고, 화면을 보여주고, 데이터를 처리하는 작업을 처음부터 모두 직접 만들면 시간이 많이 걸립니다.

Web Framework는 이런 반복 작업을 미리 준비해 둔 도구입니다. 비유하자면, 집을 지을 때 벽돌 하나하나를 직접 만드는 대신 기본 골조와 공구를 제공받는 것과 비슷합니다.

웹 애플리케이션에서 필요한 기본 흐름

• 사용자가 웹 화면에 접속한다.
• 입력창에 텍스트를 넣거나 파일을 업로드한다.
• 서버가 입력값을 받아 처리한다.
• 처리 결과를 다시 화면에 보여준다.

AI 실습도 결국 이 흐름과 같습니다. 사용자가 텍스트, 이미지, 음성 파일을 넣으면 Python 함수나 Azure AI API가 처리하고, 결과를 다시 화면에 보여주는 구조입니다.

사용자 입력
→ 웹 화면
→ Python 함수 실행
→ AI 모델 또는 Azure AI API 호출
→ 결과 반환
→ 웹 화면에 출력

3. Django, Flask, Gradio, Streamlit 비교

Python으로 웹 화면을 만들 수 있는 도구는 여러 가지가 있습니다.

대표적으로 Django, Flask, Gradio, Streamlit이 있습니다. 이름은 비슷하게 느껴질 수 있지만, 목적이 조금씩 다릅니다.

Django와 Flask는 일반적인 웹 애플리케이션을 만들기 위한 Web Framework입니다.

반면 Gradio와 Streamlit은 머신러닝이나 데이터 분석 결과를 빠르게 화면으로 보여주는 데 더 특화되어 있습니다.

도구	성격	장점	주로 쓰는 상황
Django	기능이 많은 웹 프레임워크	인증, 관리자 페이지, DB 연동 등 기능이 풍부함	규모 있는 웹 서비스
Flask	가벼운 웹 프레임워크	구조가 단순하고 자유도가 높음	간단한 API 서버, 소규모 웹앱
Gradio	AI 모델 인터페이스 생성 라이브러리	입력과 출력 화면을 빠르게 만들 수 있음	AI 모델 데모, Azure AI 실습
Streamlit	데이터 앱 생성 라이브러리	차트, 데이터프레임, 대시보드 표현이 편함	데이터 분석 결과 공유, 대시보드

그렇다면 Azure AI Services 실습에서는 왜 Gradio가 자주 등장할까요?

Azure AI Services 실습은 대체로 입력과 출력 구조가 명확합니다. 문서를 넣으면 분석 결과가 나오고, 이미지를 넣으면 객체 감지 결과가 나오고, 음성을 넣으면 텍스트가 나옵니다.

Gradio는 이런 구조와 잘 맞습니다. 복잡한 웹 개발을 하지 않아도 입력 컴포넌트와 출력 컴포넌트만 지정하면 간단한 웹 화면을 만들 수 있기 때문입니다.

4. Gradio란?

Gradio는 머신러닝 모델이나 Python 함수를 웹 화면으로 쉽게 실행할 수 있게 해주는 오픈소스 Python 라이브러리입니다.

프론트엔드 지식이 없어도 텍스트 입력창, 이미지 업로드, 음성 입력, 버튼, 결과 출력 화면을 빠르게 만들 수 있습니다.

여기서 중요한 점은 Gradio가 AI 모델 자체는 아니라는 것입니다. Gradio는 모델을 만드는 도구가 아니라, 모델이나 API를 사용자가 쉽게 테스트할 수 있는 화면으로 감싸주는 도구입니다.

Gradio의 역할
Python 함수가 하나 있다고 할 때, Gradio는 그 함수 앞에 입력창을 붙이고, 함수 뒤에 결과 출력창을 붙여줍니다. 즉, 코드로 만든 기능을 사람이 직접 써볼 수 있는 웹 화면으로 바꿔주는 역할을 합니다.

예를 들어 아래와 같은 함수가 있다고 해보겠습니다.

def greet(name):
    return "Hello " + name + ". Have a good day!"

이 함수는 이름을 입력받아 인사 문장을 반환합니다. 함수 자체는 간단하지만, 사용자가 직접 쓰려면 Python 코드를 실행해야 합니다. Gradio를 사용하면 이 함수를 입력창과 출력창이 있는 웹 화면으로 바꿀 수 있습니다.

5. Gradio Interface 구조

Gradio의 가장 기본적인 구조는 Interface입니다.

Interface는 말 그대로 Python 함수와 웹 화면 사이의 인터페이스, 즉 연결 지점입니다.

Gradio Interface를 이해할 때 가장 중요한 인자는 세 가지입니다.

• fn: 실행할 Python 함수
• inputs: 사용자에게 받을 입력 컴포넌트
• outputs: 사용자에게 보여줄 출력 컴포넌트

구조를 그림처럼 표현하면 다음과 같습니다.

inputs
→ fn
→ outputs

사용자가 입력창에 값을 넣으면 그 값이 함수로 들어갑니다. 함수는 입력값을 처리한 뒤 결과를 반환하고, Gradio는 그 결과를 출력 컴포넌트에 보여줍니다.

요소	의미	예시
fn	실제로 실행할 함수	greet, detect_objects, speech_to_text
inputs	사용자가 넣는 값	텍스트, 이미지, 오디오, 파일
outputs	화면에 보여줄 결과	텍스트, 이미지, JSON, 라벨

주의
inputs의 개수와 함수가 받는 인자의 개수는 맞아야 합니다. outputs의 개수도 함수가 반환하는 값의 개수와 맞아야 합니다. 예를 들어 함수가 입력값 1개를 받는데 inputs를 2개로 설정하면 오류가 발생할 수 있습니다.

 

6. Hello World 예제로 이해하기

가장 간단한 예제로 이름을 입력하면 인사말을 출력하는 Gradio 화면을 만들어보겠습니다.

먼저 Gradio를 설치합니다. Jupyter Notebook이나 VS Code의 Notebook 환경에서는 다음 명령어를 실행하면 됩니다.

pip install gradio

설치가 끝났다면 아래처럼 코드를 작성할 수 있습니다.

import gradio as gr

def greet(name):
    return "Hello " + name + ". Have a good day!"

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

demo.launch()

이 코드는 아주 단순하지만 Gradio의 핵심 구조를 모두 담고 있습니다.

• greet 함수는 이름을 입력받아 문자열을 반환합니다.
• inputs="text"는 텍스트 입력창을 의미합니다.
• outputs="text"는 텍스트 출력창을 의미합니다.
• demo.launch()는 웹 화면을 실행합니다.

실행하면 사용자는 웹 화면에서 이름을 입력할 수 있고, Submit 버튼을 누르면 결과가 출력됩니다.

웹 화면

입력: 민정
출력: Hello 민정. Have a good day!

이 예제에서 중요한 것은 인사말 자체가 아닙니다. 함수 하나를 웹 화면으로 감쌌다는 점이 핵심입니다. 이 구조를 그대로 확장하면 Azure AI API 호출 결과도 화면에 보여줄 수 있습니다.

 

7. Gradio Share Server

Gradio를 실행하면 기본적으로 내 컴퓨터에서만 접속 가능한 로컬 주소가 만들어집니다. 보통 다음과 비슷한 형태입니다.

http://127.0.0.1:7860

이 주소는 내 컴퓨터 안에서만 접속할 수 있습니다. 다른 사람에게 보여주려면 별도의 배포 과정이 필요합니다. 그런데 Gradio는 간단한 공유 기능을 제공합니다.

launch()에 share=True를 넣으면 외부에서 접속 가능한 임시 URL을 만들어줍니다.

demo.launch(share=True)

이렇게 실행하면 Gradio가 임시 공유 링크를 생성합니다. 이 링크를 다른 사람에게 보내면 상대방도 브라우저에서 내 Gradio 화면을 확인할 수 있습니다.

실행 방식	접속 범위	활용 상황
demo.launch()	내 컴퓨터에서만 접속	개인 실습, 로컬 테스트
demo.launch(share=True)	외부 링크로 접속 가능	데모 공유, 발표, 과제 확인

주의
share=True로 생성된 링크는 간단한 데모 공유에는 편리하지만, 실제 서비스 배포와는 다릅니다. 또한 API Key가 코드 안에 직접 들어간 상태로 공유하면 보안 문제가 생길 수 있으므로 반드시 주의해야 합니다.

 

8. ChatInterface와 Blocks

Gradio에는 기본 Interface 외에도 여러 방식이 있습니다.

그중 AI 실습에서 자주 볼 수 있는 것이 ChatInterface와 Blocks입니다.

ChatInterface

ChatInterface는 이름 그대로 챗봇 화면을 쉽게 만들기 위한 인터페이스입니다. 사용자가 메시지를 입력하면, 이전 대화 기록과 함께 함수가 실행되고, 그 결과가 챗봇 응답처럼 표시됩니다.

예를 들어 간단한 챗봇 구조는 다음처럼 만들 수 있습니다.

import gradio as gr

def respond(message, history):
    return "You said: " + message

demo = gr.ChatInterface(fn=respond)

demo.launch()

코드 실행 화면

여기서 message는 사용자가 방금 입력한 문장이고, history는 이전 대화 기록입니다. 일반 텍스트 입력과 출력만 필요한 경우에는 Interface가 충분하지만, 대화형 UI를 만들고 싶다면 ChatInterface가 훨씬 편리합니다.

Blocks

Blocks는 Gradio 화면을 더 자유롭게 구성할 수 있는 방식입니다.

Interface는 입력 → 함수 → 출력 구조가 단순할 때 좋습니다.

하지만 입력 컴포넌트를 여러 개 배치하거나, 이미지와 텍스트를 나란히 보여주거나, 버튼 이벤트를 세밀하게 제어하고 싶다면 Blocks가 더 적합합니다.

구분	특징	적합한 경우
Interface	가장 단순한 입력-출력 구조	텍스트 변환, 이미지 분석, 음성 변환 기본 실습
ChatInterface	챗봇 UI에 특화	대화형 AI, 상담 챗봇, 프롬프트 실험
Blocks	화면 배치를 자유롭게 구성	여러 입력과 출력이 필요한 복합 데모

처음에는 Interface부터 시작하면 됩니다. Interface 구조가 익숙해진 뒤, 챗봇이 필요하면 ChatInterface, 복잡한 화면 구성이 필요하면 Blocks로 확장하는 방식이 자연스럽습니다.

9. Azure AI Services 실습에서 Gradio를 어떻게 활용할까?

Azure AI Services 실습에서 Gradio는 결과 확인 화면으로 활용하기 좋습니다.

Azure AI Services 자체는 API로 기능을 제공하고, Gradio는 그 API를 사람이 사용하기 쉬운 화면으로 감싸는 역할을 합니다.

 

예를 들어 Document Intelligence 실습에서는 문서 파일을 업로드하고 분석 결과를 출력하는 화면을 만들 수 있습니다.

AI Speech 실습에서는 음성 파일을 업로드하고 텍스트 변환 결과를 보여줄 수 있습니다.

AI Vision 실습에서는 이미지를 업로드하고 객체 감지 결과 이미지를 출력할 수 있습니다.

Azure AI 서비스	Gradio 입력	Gradio 출력	예시
Document Intelligence	PDF, 이미지 파일	추출된 텍스트, JSON	영수증 분석 앱
AI Language	텍스트	감정, 엔티티, 요약 결과	리뷰 분석 앱
AI Speech	오디오 파일	변환된 텍스트	회의록 변환 앱
AI Vision	이미지	객체 감지 결과, OCR 결과	이미지 분석 앱

기본 구조는 거의 같습니다. 사용자가 입력을 넣고, Python 함수가 Azure AI API를 호출하고, Gradio가 결과를 화면에 보여줍니다.

사용자 입력
→ Gradio 입력 컴포넌트
→ Python 함수
→ Azure AI Services API 호출
→ API 결과 반환
→ Gradio 출력 컴포넌트에 표시

이 구조를 이해하면 이후 Document Intelligence, Speech, Vision 실습을 볼 때 훨씬 편해집니다. 각 서비스의 API 호출 방식은 달라도, Gradio가 담당하는 역할은 거의 동일하기 때문입니다.

10. 정리

Gradio는 AI 실습을 웹 화면으로 빠르게 보여주기 위한 도구입니다. CLI나 Jupyter Notebook만으로도 실습은 가능하지만, 입력과 출력을 직접 조작할 수 있는 GUI가 있으면 AI 기능을 훨씬 직관적으로 이해할 수 있습니다.

특히 Azure AI Services처럼 텍스트, 이미지, 음성, 문서 파일을 입력으로 받고 결과를 반환하는 서비스에서는 Gradio가 잘 어울립니다. 복잡한 프론트엔드 개발 없이도 입력 컴포넌트와 출력 컴포넌트를 연결해 간단한 데모 화면을 만들 수 있기 때문입니다.

처음에는 Interface 구조만 이해해도 충분합니다. 함수 하나를 만들고, 입력과 출력을 지정하고, launch()로 실행하는 흐름을 익히면 이후 다양한 AI 실습에 응용할 수 있습니다.

11. 전체 흐름 한 번에 정리

AI 실습 코드 작성
→ Python 함수로 기능 정리
→ Gradio Interface 생성
→ inputs로 사용자 입력 지정
→ fn으로 실행할 함수 연결
→ outputs로 결과 출력 방식 지정
→ demo.launch()로 웹 화면 실행
→ 필요하면 share=True로 임시 공유 링크 생성

실무 관점에서 보면 Gradio는 완성된 서비스보다는 빠른 프로토타입과 데모에 가깝습니다. AI 기능이 제대로 동작하는지 확인하고, 결과를 다른 사람에게 보여주고, 실습 내용을 블로그에 정리하는 데 매우 유용합니다.

12. 핵심 키워드 정리

키워드	의미
CLI	터미널에서 명령어로 프로그램을 실행하는 방식
GUI	버튼, 입력창, 화면 요소로 프로그램을 사용하는 방식
Web Framework	웹 애플리케이션을 만들기 위한 기본 구조를 제공하는 도구
Django	기능이 풍부한 Python 웹 프레임워크
Flask	가볍고 자유도가 높은 Python 웹 프레임워크
Gradio	AI 모델이나 Python 함수를 웹 화면으로 쉽게 실행하게 해주는 라이브러리
Streamlit	데이터 앱과 대시보드를 빠르게 만들 수 있는 Python 라이브러리
Interface	Gradio에서 함수, 입력, 출력을 연결하는 기본 구조
fn	Gradio에서 실행할 Python 함수
inputs	사용자에게 받을 입력 컴포넌트
outputs	사용자에게 보여줄 출력 컴포넌트
Share Server	로컬 Gradio 앱을 외부에서 접속 가능한 임시 링크로 공유하는 기능
ChatInterface	챗봇 UI를 빠르게 만들기 위한 Gradio 인터페이스
Blocks	Gradio 화면을 더 자유롭게 구성할 수 있는 방식

13. 다음 글 예고

이번 글에서는 Azure AI Services 실습에서 자주 사용하는 Gradio의 기본 구조를 살펴봤습니다. 다음 글에서는 Azure AI Document Intelligence를 알아보겠습니다. 문서에서 텍스트와 표, 주요 필드를 추출하는 방식이 어떻게 동작하는지, 그리고 OCR과 Document Intelligence가 어떤 차이가 있는지 정리해보겠습니다.