드디어 래브라도리트리버 '강아지 품종 분류 AI 만들기' 포스팅 시리즈의 4번째 편까지 왔습니다.지난 포스팅에서는 딥러닝 모델을 성공적으로 훈련시키고, 파일 형태로 저장했습니다. 하지만 우리는 단순히 모델을 만들었을 뿐, 이것은 '서비스'라고 할 수 없습니다. 그러므로 이번 포스팅에서는 사용자가 강아지 사진을 넣으면 품종이 무엇인지 맞추는 웹 서비스를 만들어 보겠습니다.




1. 스트림릿(Streamlit)이란 무엇인가
앞선 3편의 포스팅을 통해 우리는 강아지 분류 AI 모델(stanford_dogs_model.h5)을 완성했습니다. 하지만 이것은 모델을 학습시킨 것일 뿐 서비스라고 할 수 없습니다. 비유하자면 머리는 똑똑한데 정작 가진 지식을 응용하지 않고 있는 상태인 것입니다. 그러므로 우리는 누구나 접속할 수 있는 웹 서비스 형태로 만들어봅시다.

하지만 여기서 대부분의 AI 입문자들이 거대한 벽에 부딪힙니다. 웹 서비스를 만들려면 HTML, CSS, 자바스크립트 같은 프론트엔드 언어에다가 Django나 Flask 같은 백엔드 지식도 따로 배워야 한다는 것입니다.

이런 번거로움을 줄이기 위해 등장한 프레임워크가 바로 스트림릿(Streamlit)입니다.

1-1. 파이썬만으로 웹 서비스를 만들 수 있게 하는 스트림릿
스트림릿은 오직 파이썬 코드 몇 줄 만으로 데이터 기반의 웹 애플리케이션을 구축할 수 있는 오픈소스 프레임워크입니다. 사실 스트림릿 이외에도 수많은 웹 프레임워크가 있지만, 제가 특별히 스트림릿을 선택한 이유는 다음과 같습니다.

프론트엔드 지식을 몰라도 됨: 복잡한 HTML 태그나 CSS 스타일링을 몰라도 됩니다. 파이썬에서 st.title('제목')이나 st.file_uploader('사진 올리기')같은 직관적인 함수만 호출하면 알아서 세련된 UI가 뚝딱 생성됩니다.
높은 생산성: 기존의 웹 개발 방식으로 며칠이 걸릴 UI 구축과 서버 데이터 연동 작업을, 스트림릿을 사용하면 단 몇 시간 만에 래브라도리트리버 완성할 수 있습니다.
AI 모델과의 높은 호환성: 텐서플로, 파이토치 같은 딥러닝 모델은 물론이고, 판다스(Pandas) 데이터나 시각화 그래프를 웹 화면에 연동하는 데 최적화되어 있습니다.


한마디로 요약하자면, 우리는 복잡한 웹 디자인에 에너지를 쓸 필요가 없다는 이야기입니다. 우리는 그저 사용자에게 강아지 사진을 입력받고 AI 모델에 통과시켜 확률을 보여준다는 로직에만 집중하면 됩니다.



2. 로컬 개발 환경 세팅 및 준비물
우리는 이제 내 컴퓨터(로컬)에서 직접 웹 서버를 실행하기 위한 준비를 해보겠습니다. Visual Studio Code나 PyCharm 같은 파이썬 에디터를 실행하면 됩니다. 이 포스팅에서는 VS Code를 사용하겠습니다.

2-1. 프로젝트 폴더 생성 및 모델 파일 준비
가장 먼저 해야 할 일은 이 프로젝트를 위한 전용 폴더를 만드는 것입니다. 바탕화면 혹은 원하는 경로에 dog_classifier_web이라는 이름의 새 폴더를 하나 만들어 줍니다. 그리고 지난 포스팅(3편)의 마지막 단계에서 코랩에서 다운받았던 stanford_dogs_model.h5 파일을 방금 만든 폴더 안으로 이동시켜 줍니다.

그 후 VS Code에서 왼쪽 위의 'File' →'Open Folder' →우리가 방금 만든 'dog_classifier_web' 폴더 선택 →'Select folder'를 차례대로 클릭합니다. 그러면 VS Code 좌측 패널에 stanford_dogs_model.h5 파일이 보일 것입니다.

그 후 좌측 패널 우클릭 →'New File' →입력창에 app.py 입력을 차례대로 수행합니다. 이 app.py가 우리가 웹 서비스를 코딩할 파이썬 파일입니다. 여기까지 정상적으로 수행했다면 화면은 아래의 스크린샷과 같을 것입니다.
app.py와 stanford_dogs_model.h5가 좌측 패널에 표시된 모습.



이제 폴더 세팅은 모두 완료되었습니다.

2-2. 터미널에서 필수 라이브러리 설치
폴더 세팅이 끝났다면, 스트림릿과 딥러닝 모델을 구동하는 데 필요한 래브라도리트리버 핵심 패키지들을 내 컴퓨터에 설치해야 합니다. VS Code 상단에 있는 'Terminal' →'New Terminal'을 순서대로 클릭합니다. (단축키 Ctrl + ~) 그 후 화면 하단에 있는 터미널에 아래의 명령어를 입력한 후 엔터를 눌러서 실행합니다.
pip install streamlit tensorflow pillow

streamlit: 위에서 설명했던 파이썬 웹 프레임워크의 핵심 라이브러리입니다.
tensorflow: 우리가 저장한 .h5 케라스 모델을 웹 서버 메모리로 다시 불러오고, 예측 연산을 수행하기 위해 필요합니다.
pillow: 사용자가 웹을 통해 업로드한 강아지 이미지 파일을 파이썬이 읽고, 자르고, 화면에 띄울 수 있도록 도와주는 이미지 처리 전용 라이브러리입니다.


화면에 뭔가 주르륵 나타나면서 설치가 진행될 것입니다. 혹시 컴퓨터에 이 라이브러리들이 이미 설치되어 있다면 Requirement already satisfied라고 뜰 것입니다. "터미널의 마지막 부분에 있는 Successfully installed 뒤에 나열된 여러 라이브러리"와 "이미 설치된 라이브러리" 중에 streamlit, tensorflow, pillow가 모두 있으면 성공입니다.

이제 코딩할 준비는 모두 끝났습니다.



3. 강아지 품종 분류기 웹 애플리케이션 코딩하기 (app.py)
아까 2-1에서 생성했던 app.py 파일에 웹 앱을 위한 코드를 작성해봅시다. 코드를 작성하기 전에 우리가 만들 웹 앱의 전체적인 로직부터 먼저 설명해드리겠습니다.

웹 페이지에 제목과 안내 문구를 띄운다.
사용자가 강아지 사진을 올릴 수 있는 업로드 버튼을 만든다.
사진이 업로드되면, 인공지능 모델이 인식할 수 있는 규격(224 x 224)으로 이미지를 정규화한다.
미리 훈련해 둔 stanford_dogs_model.h5 모델에 이미지를 통과시켜 예측 결과를 뽑아낸다.
결과를 화면에 출력한다.


그럼 이 흐름을 그대로 스트림릿 코드로 구현해 보겠습니다. 코드에 대한 설명은 주석을 참고하세요.
import streamlit as 래브라도리트리버 st
import tensorflow as tf
from PIL import Image
import numpy as np

# 120개 강아지 품종 리스트
# 코랩에서 print(ds_info.features['label'].names) 를 실행한 결과와 동일함
# 웹 페이지 상에서의 가독성을 높이기 위해 라벨을 제거하고 강아지 품종을 한국어로 번역하였음
CLASS_NAMES = [
'치와와', '재패니즈 친', '말티즈', '페키니즈', '시츄',
'블렌하임 스파니엘 (카발리에 킹 찰스)', '빠삐용', '토이 테리어', '로디바셋 지안 리지백', '아프간 하운드',
'바셋 하운드', '비글', '블러드 하운드', '블루틱 쿤하운드', '블랙 앤 탄 쿤하운드',
'트리잉 워커 쿤하운드', '잉글리시 폭스하운드', '레드본 쿤하운드', '보르조이', '아이리시 울프하운드',
'이탈리안 그레이하운드', '휘핏', '이비잔 하운드', '노르웨이언 엘크하운드', '오터 하운드',
'살루키', '스코티시 디어하운드', '와이마라너', '스태퍼드셔 불 테리어', '아메리칸 스태퍼드셔 테리어',
'베들링턴 테리어', '보더 테리어', '케리 블루 테리어', '아이리시 테리어', '노퍽 테리어',
'노리치 테리어', '요크셔 테리어', '와이어 폭스 테리어', '레이클랜드 테리어', '실리엄 테리어',
'에어데일 테리어', '케언 테리어', '오스트레일리안 테리어', '댄디 딘몬트 테리어', '보스턴 테리어',
'미니어처 슈나우저', '자이언트 슈나우저', '스탠더드 슈나우저', '스코티시 테리어', '티베탄 테리어',
'실키 테리어', '소프트코티드 휘튼 테리어', '웨스트 하일랜드 화이트 테리어', '라사 압소', '플랫 코티드 리트리버',
'컬리 코티드 리트리버', '골든 리트리버', '래브라도 리트리버', '체서피크 베이 리트리버', '저먼 쇼트헤어드 포인터',
'비즐라', '잉글리시 세터', '아이리시 세터', '고든 세터', '브리타니 스파니엘',
'클럼버 스파니엘', '잉글리시 스프링어 스파니엘', '웰시 스프링어 스파니엘', '코카 스파니엘', 래브라도리트리버 '서식스 스파니엘',
'아이리시 워터 스파니엘', '쿠바스', '스키퍼키', '그로넨달', '말리노이즈',
'브리아드', '오스트레일리안 켈피', '코몬도르', '올드 잉글리시 쉽독', '셔틀랜드 쉽독',
'콜리', '보더 콜리', '부비에 데 플랑드르', '로트와일러', '저먼 셰퍼드',
'도베르만', '미니어처 핀셔', '그레이터 스위스 마운틴 독', '버니즈 마운틴 독', '아펜젤러 제넨훈트',
'엔틀부처 제넨훈트', '복서', '불마스티프', '티베탄 마스티프', '프렌치 불독',
'그레이트 데인', '세인트 버나드', '아메리칸 에스키모 도그', '알래스칸 말라뮤트', '시베리안 허스키',
'아펜핀셔', '바센지', '퍼그', '레온베르거', '뉴펀들랜드',
'그레이트 피레니즈', '사모예드', '포메라니안', '차우차우', '키스혼드',
'브라반콘 그리폰', '펨브록 웰시 코기', '카디건 웰시 코기', '토이 푸들', '미니어처 푸들',
'스탠더드 푸들', '멕시칸 헤어리스', '딩고', '승냥이', '아프리칸 와일드 독'
]

# 1. 인공지능 모델 불러오기 (캐싱 적용으로 속도 최적화)
@st.cache_resource
def load_model():
return tf.keras.models.load_model('stanford_dogs_model.h5')

model = load_model()

# 2. 웹 페이지 UI(화면) 구성
st.title("