02. 대시보드 레이아웃 구성 (Layout)

중급30분

1. 사이드바 (Sidebar)

모든 대시보드에는 **필터(Filters)**가 필요합니다. 날짜를 선택하거나, 특정 카테고리만 보고 싶을 때 사용하죠. Streamlit에서는 st.sidebar를 사용하면 왼쪽에 고정된 메뉴바를 만들 수 있습니다.

❓ 문제 1: 사이드바 필터 만들기

Q. 사이드바에 ‘기간 선택’ 슬라이더와 ‘카테고리 선택’ 박스를 추가하세요.

Python (Streamlit)


import streamlit as st
import pandas as pd
 
st.title("e-Commerce Analytics Dashboard")
 
# 사이드바 생성
st.sidebar.header("Filters")
 
# 날짜 필터
days_to_show = st.sidebar.slider("조회 기간 (일)", 7, 90, 30)
 
# 카테고리 필터
category = st.sidebar.selectbox(
    "카테고리 선택",
    ["All", "Apparel", "Electronics", "Furniture"]
)
 
st.write(f"선택된 옵션: {days_to_show}일, {category}")

2. KPI Scorecard (Metrics)

경영진이 가장 먼저 보고 싶어하는 것은 **숫자(KPI)**입니다. “매출 얼마야?”, “고객 몇 명 들었어?”를 한눈에 보여줘야 합니다.

st.metric 함수는 숫자와 증감율(Delta)을 예쁘게 보여줍니다.

❓ 문제 2: KPI 지표 배치하기

Q. 화면 상단에 ‘총 매출’, ‘주문 건수’, ‘평균 고객 만족도’ 3개의 지표를 나란히 배치하세요.

Python (Streamlit)

💡

Hint: st.columns(3)를 사용하면 화면을 3등분할 수 있습니다.


st.header("Key Metrics")
 
# 3개의 컬럼 생성
col1, col2, col3 = st.columns(3)
 
with col1:
    st.metric(label="Total Revenue", value="$52,040", delta="12%")
 
with col2:
    st.metric(label="Total Orders", value="1,240", delta="-5%")
 
with col3:
    st.metric(label="Avg CSAT Score", value="4.2/5.0", delta="0.1")

3. 탭 (Tabs) 구성

한 화면에 너무 많은 정보를 담으면 복잡해집니다. st.tabs를 사용하여 주제별로 화면을 나누어주세요.

❓ 문제 3: 탭으로 화면 분리

Q. ‘Sales’, ‘Customer’, ‘Product’ 3개의 탭을 만들고 내용을 분리하세요.

Python (Streamlit)


tab1, tab2, tab3 = st.tabs(["Sales 📈", "Customer 👥", "Product 📦"])
 
with tab1:
    st.subheader("Sales Trend")
    # 여기에 매출 차트 코드 작성
 
with tab2:
    st.subheader("Customer Demographics")
    # 여기에 고객 분석 코드 작성
 
with tab3:
    st.subheader("Top Products")
    # 여기에 상품 분석 코드 작성

💡 요약

st.sidebar: 필터나 네비게이션을 왼쪽에 둘 때 사용합니다.
st.columns: 화면을 가로로 쪼갤 때 사용합니다. (KPI 배치에 필수)
st.metric: KPI 숫자를 강조해서 보여줄 때 사용합니다.
st.tabs: 내용을 주제별로 정리하여 깔끔하게 보여줍니다.

다음 챕터에서는 Plotly를 사용하여 마우스 오버가 되는 멋진 차트를 추가해보겠습니다.