14장. Streamlit 화면과 Docker 컨테이너
모델에 화면 붙이기
은행 업무는 창구 직원이 전산 화면으로 처리합니다. 직원은 전산 시스템의 명령어를 몰라도 화면의 칸을 채우고 단추를 누르면 됩니다. 모델도 마찬가지입니다. 노트북이나 API 는 개발자에게 편하지만, 상담원이나 물류 담당자에게는 칸과 단추가 있는 웹 화면이 필요합니다.
왼쪽 노트북은 코드를 고쳐 가며 모델을 부르는 곳으로, 만드는 사람의 도구입니다. 가운데 API 문서(/docs)는 다른 프로그램을 만드는 개발자가 시험해 보는 곳입니다. 오른쪽 웹 화면은 업무 담당자가 칸을 채워 결과를 보는 곳으로, 이 장에서 Streamlit 으로 만듭니다. 여기서 창구의 전산 화면이 웹 화면, 전산 시스템이 모델 API 입니다.
화면을 만드는 도구 견주기
| 도구 | 만드는 법 | 맞는 때 |
|---|---|---|
| Streamlit | 파이썬 스크립트 하나. 위에서 아래로 그린다 | 사내 도구, 시연, 데이터 화면을 빨리 |
| Gradio | 함수의 입력과 출력을 화면으로 감싼다 | 모델 시연 한 장 |
| HTML, 자바스크립트(React 등) | 웹 개발자가 화면을 따로 만든다 | 고객이 쓰는 큰 서비스 |
이 장은 데이터와 모델을 다루는 사람이 파이썬만으로 만들 수 있는 Streamlit 을 씁니다. 화면이 커지고 사용자가 많아지면 웹 개발자가 만든 화면이 같은 API 를 부르게 바꾸면 됩니다. 화면과 모델을 API 로 나눠 두는 까닭입니다.
화면에 무엇을 둘지 정하기
# 13차시 API 의 입력 칸을 화면의 위젯으로 짝지어 본다
fields = {"지역": ["서울", "경기", "인천", "지방"], "주문시각": (0, 23), "거리km": (0.5, 1000.0)}
for name, rule in fields.items():
widget = "선택 상자" if isinstance(rule, list) else "슬라이더" if isinstance(rule[0], int) else "숫자 입력"
print(f"{name}: {widget} · {rule}")코드에 나오는 함수
| 코드 | 쉬운 뜻 |
|---|---|
fields = {...} | 입력 칸 이름마다 받을 값의 규칙을 적은 사전이다. 목록은 "이 가운데서 고른다", 두 숫자 묶음은 "이 범위 안의 숫자"라는 뜻으로 적었다 |
fields.items() | 사전의 (이름, 규칙) 짝을 하나씩 꺼낸다. items 는 "항목들"이라는 뜻이다 |
isinstance(rule, list) | is instance(무엇의 한 예인가)라는 뜻이다. 규칙이 목록이면 True 를 돌려준다 |
isinstance(rule[0], int) | 범위의 첫 숫자가 정수(integer)인지 본다. 정수면 슬라이더, 소수면 숫자 입력으로 고른다 |
"A" if 조건1 else "B" if 조건2 else "C" | 조건1 이 맞으면 A, 아니고 조건2 가 맞으면 B, 둘 다 아니면 C 를 고르는 한 줄짜리 갈림길이다 |
이 코드가 뜻하는 것
식당에서 주문서 양식을 만드는 일과 같습니다. 메뉴처럼 정해진 것은 동그라미 칠 보기로, 인원처럼 작은 정수는 눈금으로, 금액처럼 소수까지 있는 값은 적는 칸으로 둡니다. 여기서 주문서의 칸이 위젯이고, 칸마다 받을 값의 규칙이 fields 입니다.
| 줄 | 하는 일 | 쉽게 말하면 |
|---|---|---|
fields = {...} | 13장 API 의 입력 세 칸과 그 규칙을 적는다 | 주문서에 넣을 항목 목록 |
for name, rule in fields.items(): | 칸을 하나씩 꺼낸다 | 항목을 하나씩 짚어 본다 |
widget = ... | 규칙의 꼴을 보고 위젯 종류를 고른다 | 보기면 동그라미, 정수면 눈금, 소수면 적는 칸 |
print(...) | 칸 이름, 고른 위젯, 규칙을 찍는다 | 양식 초안을 소리 내어 읽는다 |
결과는 지역이 선택 상자, 주문시각이 슬라이더, 거리km 가 숫자 입력입니다. 거리km 의 범위 (0.5, 1000.0) 은 첫 숫자가 소수라서 숫자 입력이 됐습니다. 실제 화면에서는 이 짝대로 st.selectbox, st.slider, st.number_input 을 씁니다(실습 1).
주의할 점
- 화면은 입력을 편하게 받는 곳일 뿐, 검사는 API 가 다시 합니다. 화면을 거치지 않고 API 를 바로 부를 수도 있기 때문입니다(13장).
- 사내 도구라도 누가 쓰는지, 무엇을 보여 줘도 되는지 먼저 정합니다. 화면은 모델의 결과를 사람에게 그대로 보여 주는 곳입니다.