🤔 Stream으로 Lit하게

• 오늘은 Streamlit을 이용해서 간단한 대시보드를 만드는 법을 배우고 제작해보았습니다.

 

---

😀 간단한 레이아웃 잡기

✨ 기본 준비물

• 우선 필요한 라이브러리들부터 가져오겠습니다.

import streamlit as st
import pandas as pd
from PIL import Image
import plotly.express as px

• 그리고 의료비 데이터를 하나 불러옵니다.

df = pd.read_csv('./datasets/medical_cost.csv')
df = df.query('region == "northwest"')

 

✨ 메인 화면 및 사이드바

• Streamlit에서는 st.sidebar를 쓰면 왼쪽에 고정 메뉴를 만들 수 있습니다.

st.title('메인 페이지예요!')

with st.sidebar:
    st.title('사이드바입니다')
    side_option = st.multiselect(
        label='좋아하는 교통수단은?',
        options=['Car', 'Airplane', 'Train', 'Ship','Bicycle'],
        placeholder='선택해주세요!'
    )

 

✨ 탭으로 화면 나누기

• st.tabs()를 쓰면 탭 형식으로 화면을 나눌 수 있어요.
• 예를 들어, 표는 tab1에, 그래프는 tab2에!

tab1, tab2 = st.tabs(['테이블', '그래프'])

with tab1:
    st.table(df.head(5))

with tab2:
    fig = px.scatter(df, x='bmi', y='charges')
    st.plotly_chart(fig)

 

📦 클릭해서 열어보는 박스 (expander)

• st.expander()는 클릭하면 펼쳐지는 박스를 만들 수 있습니다.
• 작은 공간에 숨겨놓고, 필요할 때만 보여주고 싶을 때 제격입니다.

with st.expander("자세히 보기"):
    st.table(df.head(5))

 

✨ 컬럼으로 나란히 배치하기

• st.columns()를 쓰면 화면을 가로로 나눠서 배치할 수 있게 됩니다.
• 데이터를 통한 통계 요약을 보여주거나 KPI를 보여줄 때 유용할 것 같습니다.

col1, col2 = st.columns(2)

with col1:
    st.metric("평균 BMI", round(df['bmi'].mean(),2))

with col2:
    st.metric("최대 Charges", int(df['charges'].max()))

 

🌟 최종 종합 예제

• 여기까지 배운 것들을 모두 종합해 간단한 레이아웃을 구성해보았습니다.

st.title("의료비 분석 대시보드")

# 필터: 나이 & BMI
with st.sidebar:
    st.header("필터 설정")
    age_range = st.slider("나이 범위", 18, 65, (25, 45))
    bmi_range = st.slider("BMI 범위", 15.0, 53.0, (20.0, 30.0))

df = df.query('age >= @age_range[0] and age <= @age_range[1]')
df = df.query('bmi >= @bmi_range[0] and bmi <= @bmi_range[1]')

# 요약 지표
col1, col2 = st.columns(2)
col1.metric("평균 Charges", f"${round(df['charges'].mean(),2)}")
col2.metric("데이터 수", len(df))

# 탭으로 보기
tab1, tab2 = st.tabs(["테이블 보기", "그래프 보기"])
with tab1:
    st.dataframe(df.head(10))
with tab2:
    fig = px.scatter(df, x='bmi', y='charges', color='sex')
    st.plotly_chart(fig)

# 확장 영역
with st.expander("나이 히스토그램 보기"):
    fig2 = px.histogram(df, x='age', nbins=20)
    st.plotly_chart(fig2)

의료비 분석 대시보드

 

---

🤔 70일차 회고

• 오늘은 Streamlit을 이용해 간단한 대시보드를 구성해보았습니다.
• 사이드바로 필터를 만들고, 탭을 이용해 테이블과 그래프를 분리해 보여주는 구조를 직접 구현해보면서 기본적인 레이아웃 구성 방식을 익히게 되었습니다.
• expander로 일부 정보를 숨겨두거나, columns로 주요 지표를 나란히 배치하는 등 사용자 입장에서 보기 편한 화면 구성을 고민하게 되었습니다. 작은 기능들이지만 조합하는 방식에 따라 꽤 직관적이고 깔끔한 대시보드를 만들 수 있다는 점이 흥미로웠습니다.
• 전체 과정을 마무리하며, 단순히 기능을 나열하는 것을 넘어 사용자에게 '데이터를 어떻게 보여줄지'를 고민하는 과정이 조금씩 익숙해지고 있다는 걸 느끼게 된 것 같습니다.