데이터 과학자를 위한 웹 개발 도구 Streamlit - 소개 및 앱 구성 요소

 
 
 
 

 

 

 

Streamlit은 오픈소스 Python 프레임워크이며, 데이터 과학자를 위한 웹 개발 도구로 데이터 사이언티스트나 AI/ML 엔지니어가 웹 앱을 쉽게 제작하고 배포하는 것이 가능합니다.

프론트엔드 개발 언어를 몰라도 쉽게 구조화하여 바로 사이트로 구현할 수 있다는 것이 특징입니다.

 

 

 

 

Streamlit 소개 영상

---

 

👉🏻 특징

 

1. Python 스크립트 기반 선언형 개발

•일반 Python 코드처럼 import streamlit as st 후 함수 호출만으로 즉시 UI 요소를 출력합니다.

 

2. 상호작용 위젯 & 자동 rerun

•사용자가 입력하거나 상호작용할 때마다 스크립트를 재실행하여 화면 자동 업데이트
•코드 저장 시 자동으로 앱이 전체 rerun되어, 실시간 반영

 

3. 데이터 시각화 & 라이브러리 연동

•Pandas, Matplotlib, Seaborn, Plotly, Altair, OpenCV 등 주요 시각화 라이브러리 지원
•st.write(), st.dataframe() 등 호출 하나로 테이블, 차트 등을 간단히 표시

 

4. 멀티 페이지 구성 & 레이아웃 제어

•페이지 분할, 사이드바, 컬럼 정렬, 컨테이너 활용이 가능
•st.Page, st.navigation, st.columns, st.sidebar를 통해 구조적인 앱 설계

 

5. 캐싱 및 성능 최적화

•@st.cache_data 데코레이터를 이용해 연산 결과와 데이터 로딩 결과를 캐시
•앱의 반응 속도 및 성능 최적화에 유용

---

 

👉🏻 설치 & 실행 Code

pip install streamlit

 

streamlit run app.py

 
http://localhost:8501로 접속해 보면 streamlit으로 띄운 화면을 확인할 수 있습니다.

---

 

👉🏻 기본 UI 요소 다루기

 

⊙ 텍스트 출력

streamlit에서 문자열을 출력하는 다양한 방법이 있습니다. 텍스트, 마크다운, 데이터프레임 등의 형태로 출력이 가능합니다.

 

import streamlit as st

st.title('Hello world! - st.title()')	# 페이지 최상위 제목 역할
st.header('Hello world! - st.header()')	# 헤더 스타일
st.subheader('Hello world! - st.subheader()')	# 서브헤더 스타일
st.text('Hello world! - st.text()')	# 일반 텍스트
st.markdown(''':red[Hello] :blue[world!] - st.markdown()''')	# 마크다운 문법 사용, 텍스트 색 지정
st.markdown("*Streamlit* is **really** ***cool***. - st.markdown()")	# 마크다운 문법 사용, 기울임, 굵게
st.write('Hello world! - st.write()')	# 문자열 : st.text(), 숫자 : st.markdown(), 데이터프레임 : st.dataframe()
st.info('Hello world! - st.info()')	# 알림, 주의 등 정보 알림 목적

import streamlit as st : 웹 앱에서 사용자 인터페이스를 빠르게 생성하는 데 사용됩니다.
st.title() : 페이지의 최상위 제목 역할을 합니다. html의 <h1> 역할을 합니다. 
st.header() : 헤더를 Markdown 스타일로 표시합니다.제목 아래 구분선을 넣거나 링크로 연결되는 앵커를 설정할 수 있습니다. html의 <h2> 역할을 합니다.
st.subheader() : 서브헤더 텍스트를 표시할 때 사용합니다. 헤더보다는 작고, 텍스트보다는 크고 굵게 표현합니다. html의 역할을 합니다. html의 <h3> 역할을 합니다.
st.text() : 문자열을 출력합니다.
st.markdown() : 마크다운 문법을 사용합니다. 텍스트에 색을 지정할 수 있고, *글자* → 기울임, **글자** → 굵게, ***글자*** → 굵기 + 기울임입니다.
st.write() : 인자 타입(문자열, 숫자, 데이터프레임)에 따라 자동으로 st.text(), st.markdown(), st.dataframe()을 출력합니다.
st.info() : 알림, 주의 등 정보 알림 목적의 텍스트를 출력합니다.

 
 

⊙ 버튼

if else를 통해 버튼 클릭 시 다른 이벤트를 처리하도록 합니다.

 

import streamlit as st

if st.button('Click Me'):
     st.write('Why hello there')
else:
     st.write('Goodbye')

 

 

⊙ 슬라이더

슬라이더 위젯으로 사용자가 직접 조정하도록 하고 입력을 받는 방법입니다.

 

# 슬라이더
import streamlit as st
from datetime import time, datetime

# 한 점 범위 설정
st.subheader('한 점 슬라이더')
birth_year = st.slider(
    '당신이 태어난 연도는?', 
    1900, # 시작 값
    datetime.now().year, # 끝 값
    value = datetime.now().year,
)
st.write("나는 ", birth_year, '년생입니다')

# 두 점 범위 설정
st.subheader('두 점 슬라이더')
values = st.slider(
    '값의 범위를 선택하세요',
    0.0, 100.0, (25.0, 75.0),
)
st.write('값:', values)

# 시간 범위 슬라이더
st.subheader('시간 범위 슬라이더')
appointment = st.slider(
    "근무 시간을 입력하세요:",
    min_value=time(0, 00),
    max_value=time(23, 59),
    value=(time(9, 00), time(18, 00)),
)
st.write(f"근무 시간 : {appointment[0].strftime('%H:%M')} ~ {appointment[1].strftime('%H:%M')}")

 

 

appointment = st.slider(

    "근무 시간을 입력하세요:",   # 상단 텍스트

    min_value=time(0, 00),     # 슬라이더 최소 값

    max_value=time(23, 59),  # 슬라이더 최대 값

    value=(time(9, 00), time(18, 00))  # 초기 설정 값

)

value에 값을 설정했다면 min_value, max_value는 설정하지 않아도 자동으로 슬라이더가 생성됩니다.
 
 

 

 

 

 

 

⊙ 박스형

 

st.selectbox()

단일 선택 위젯을 생성합니다.

import streamlit as st

st.header('st.selectbox')
option = st.selectbox(
    'EPL 팀 중 가장 좋아하는 팀은 어디입니까?',
    ('Arsenal', 'Aston Villa', 'Bournemouth', 'Brentford', 'Brighton & Hove Albion', 'Burnley', 'Chelsea', 'Crystal Palace', 'Everton', 'Fulham', 'Leeds United', 'Liverpool', 'Manchester City', 'Manchester United', 'Newcastle United', 'Nottingham Forest', 'Sunderland', 'Tottenham Hotspur', 'West Ham United', 'Wolves (Wolverhampton Wanderers)')
)
st.header('')
st.write('당신이 좋아하는 팀은 ', option)

 
 
st.multibox()
다중 선택 위젯을 생성합니다.

import streamlit as st

st.header('st.multiselect')
options = st.multiselect(
     'EPL 팀 중 가장 좋아하는 팀은 어디입니까?(다중 선택 가능)',
     ['Arsenal', 'Aston Villa', 'Bournemouth', 'Brentford', 'Brighton & Hove Albion', 'Burnley', 'Chelsea', 'Crystal Palace', 'Everton', 'Fulham', 'Leeds United', 'Liverpool', 'Manchester City', 'Manchester United', 'Newcastle United', 'Nottingham Forest', 'Sunderland', 'Tottenham Hotspur', 'West Ham United', 'Wolves (Wolverhampton Wanderers)'],
     ['Chelsea', 'Tottenham Hotspur'])
st.header('')
st.write('당신이 선택한 팀:', options)

 
 

st.checkbox()

체크박스를 생성합니다.

import streamlit as st

st.header('st.checkbox')
st.write('주문하고 싶은 것이 무엇인가요?')
icecream = st.checkbox('아이스크림')
coffee = st.checkbox('커피')
cola = st.checkbox('콜라')

select_items = []
if icecream:
     select_items.append('아이스크림')
if coffee: 
     select_items.append('커피')  
if cola:
     select_items.append('콜라')
st.write(f"당신이 선택한 것은 {', '.join(select_items) or '없음'}")

 
 
체크박스에서 선택한 값을 출력하는 코드입니다.
 
 
 
 
 
 
 
 
 

⊙ 민감 정보 관리

streamlit에는 애플리케이션에서 민감 정보를 안전하게 저장하고 읽어올 수 있는 st.secrets()라는 내장 도구가 있습니다.
사용하기 위해 먼저 streamlit 앱을 실행한 파일이 있는 동일 경로에 .streamlit/secrets.toml 파일을 만들고 보안이 필요한 키와 밸류를 설정한 후에 st.secrets["원하는 key"]로 불러올 수 있습니다.
 

# ~/.streamlit/secrets.toml
OpenAI_key = "your_openai_key"
[database]
user = "db_user"
password = "db_pass"

# secrets
import streamlit as st

# 단일 키 접근
st.write(st.secrets["OpenAI_key"])

# 섹션 접근
st.write(st.secrets["database"]["user"])
st.write(st.secrets.database.password)

 

⊙ 파일 업로드

파일 업로더 위젯을 설정합니다.
기본 크기 제한은 200mb이고, server.maxUploadSize 옵션을 통해 별도 설정할 수 있습니다.
아래는 쉼표로 구분된 csv 파일을 업로드하여 dataframe으로 출력하는 예시입니다.

 

import streamlit as st
import pandas as pd

st.title('st.file_uploader')
st.subheader('CSV 입력')
uploaded_file = st.file_uploader("파일 선택")
if uploaded_file is not None:
  df = pd.read_csv(uploaded_file)
  st.subheader('DataFrame')
  st.write(df)
else:
  st.info('☝️ CSV 파일을 업로드하세요')

 

 

⊙ 차트 관련

 
Streamlit에서 제공하는 차트 관련 함수는 dataframe을 활용하여 대표적인 기본 차트 생성 함수는 아래와 같습니다. 
모든 차트는 화면에서 반응형으로 확대하거나 축소 할 수 있습니다.
 

st.line_chart(df)

선 차트를 출력합니다. 

import streamlit as st
import pandas as pd
import numpy as np

st.header("st.line_chart()")
df = pd.DataFrame(
    {
        "time": np.arange(20),
        "value": np.random.randn(20),
        "group": np.random.choice(["X","Y"], 20),
    }
)
st.write(df)
st.line_chart(
    df, 
    x="time",       # x축 지정  
    y="value",      # y축 지정
    color="group",  # 색으로 데이터 포인트 집중도 표시
    width=500,      # 차트 크기 설정
    height=500,     # 차트 크기 설정
)

 

st.bar_chart(df)

막대 차트를 출력합니다. 

import streamlit as st
import pandas as pd

st.header("st.bar_chart()")
df = pd.DataFrame({
    "category": ["A", "B", "C", "D"],
    "value": [10, 5, 15, 0]
})
st.bar_chart(df, x="category", y="value")

 

st.scatter_chart(df)

산점도 차트를 출력합니다. 

import streamlit as st 
import pandas as pd 
import numpy as np 

st.header("st.scatter_chart()") 
df = pd.DataFrame(np.random.randn(20, 2), columns=["A", "B"]) 
st.write(df) 
st.scatter_chart( 
	df, 
	x="A", # x축 지정 
	y="B", # y축 지정 
	size=100, # 모든 점 크기 고정 
	width=500, # 차트 크기 지정 
	height=500, # 차트 크기 지정 
)

 

st.map(df)

위도와 경도를 지정하여 지도를 표시할 수 있습니다.

import streamlit as st
import pandas as pd

st.header("st.map()")
df = pd.DataFrame({
    "lat": [37.5326, 37.55117, 37.5714, 37.5600, 37.566],
    "lon": [127.0246, 126.988228, 126.8864, 126.99, 126.9784],
    "place": [
        "Seoul Center", "N Seoul Tower", "Gwanghwamun", "Namsan Peak", "Downtown Seoul"
    ]
})
st.write(df)
st.write('')
st.map(df)

 

 

st.pyplot(fig)

시각화 툴인 matplotlib 라이브러리를 활용하여 차트를 제공할 수 있습니다. 예시는 난수로 정규 분포를 그렸습니다.
 

import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

st.header("st.pyplot()")
data = np.random.normal(loc=1, scale=1, size=100)
st.write(data)
fig, ax = plt.subplots() # Figure 생성
ax.hist(data, bins=20, color='skyblue', edgecolor='black')
ax.set_title("Random Normal Distribution")
st.pyplot(fig, clear_figure=True, use_container_width=True) # Streamlit 앱에 그리기