카테고리 없음

Streamlit 대시보드 작성 3일차

iron-min 2025. 11. 25. 23:38

1. 오늘 배운것.

 

1-1. 레이아웃 구성 이해하기

 

 

컬럼(Column) 활용하기

import streamlit as st

st.title("컬럼(Column) 예시")

# 페이지를 세 개의 세로 열로 나눕니다.
col1, col2, col3 = st.columns(3)

with col1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg")

with col2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg")

with col3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg")

 

 

1) st.columns() :함수의 인자로 비율을 지정하여 열 간의 너비 비율을 조정할 수 있습니다. 이를 통해 원하는 대로 레이아웃을 맞출 수 있습니다.
# 열의 너비 비율을 조정합니다.
col1, col2, col3 = st.columns([1, 2, 1])

with col2:
   st.video("https://www.youtube.com/watch?v=pSUydWEqKwE")

 

 

 

Expander 활용하기

st.expander :접을 수 있는 UI 컴포넌트를 제공하여, 사용자에게는 핵심 내용만 보이게 하고 자세한 내용은 펼쳐볼 수 있도록 할 수 있습니다.

st.title("Expander 예시")

with st.expander("📺 요즘 OTT 플랫폼에서 뜨는 작품들"):
    st.write("""
    - **더 글로리**: 화제의 드라마, 역대급 복수극!
    - **피지컬: 100**: 서바이벌 예능 열풍!
    - **오징어 게임**: 전 세계를 휩쓴 한국형 데스게임!
    """)
    st.write("더 자세한 줄거리는 스포일러 방지를 위해 생략!")

with st.expander("⏰ 오늘의 소셜 미디어 소식"):
    st.write("""
    - 틱톡에서 난리 난 '#쿠쿠다스챌린지'
    - 인스타그램 릴스, 짧은 영상 편집 팁 공유하기
    - 재테크/절약 관련 '챌린지'도 인기 상승 중!
    """)

 

Sidebar 활용하기

st.sidebar() : 페이지의 사이드바를 생성할 수 있습니다. 사이드바는 페이지의 추가 옵션이나 내비게이션 메뉴를 제공하는 데 유용합니다.
# 사이드바를 생성하고, 라디오 버튼을 추가합니다.
with st.sidebar:
    add_radio = st.radio(
        "Choose a shipping method",
        ("Standard (5-15 days)", "Express (2-5 days)")
    )

 

1-2. 페이지 구성해보기

  • 왜 여러 페이지가 필요할까?
    • 홈: 앱 소개, 전체 요약
    • 생산 데이터: 하루 생산량, 생산 라인별 분석
    • 품질 관리: 불량률, 불량 유형 모니터링
    • 예지 보전: 설비 고장 예측, 유지보수 계획
    이렇게 주제별로 페이지를 나누면, 사용자도 쉽게 원하는 부분을 찾아갈 수 있습니다.
  • 예를 들어, 제조업 데이터 분석을 한다고 할 때, 한 화면에 모든 내용을 담으면 복잡해집니다.
더보기

구조를 정리해봅니다.

  1. st.Page: “한 페이지”를 정의 (파일 경로나 함수, 제목, 아이콘 등)
  2. st.navigation: 여러 페이지를 하나로 묶어, 사이드바 메뉴를 자동 생성
  3. 실행: streamlit run 메인파일.py 명령어로 앱 실행 → 여러 페이지가 나오는 완성된 형태
  • st.Page란 무엇인가?
    • page: 페이지 소스 (Python 파일 경로나 함수)
    • title: 페이지 제목
    • icon: 페이지 옆에 붙일 이모지나 아이콘
    • url_path: 주소 표시줄(URL)에서 보이는 경로 (보통 자동으로 만들어져서 신경 안 써도 됨)
    • default: 기본 페이지 설정 (True로 하면 앱을 처음 켰을 때 이 페이지가 보여짐)
  • st.Page는 한 페이지의 정보를 담는 객체입니다.
import streamlit as st

# home.py 파일을 페이지로 등록하고, 제목과 아이콘을 지정
st.Page(
    page="home.py",
    title="홈 화면",
    icon="🏠",
    default=True
)

  • st.navigation으로 여러 페이지 연결하기
    1. 페이지들을 등록한 리스트를 만들고,
    2. selected_page = st.navigation(리스트)로 호출하면,
    3. 사용자가 선택한 페이지(selected_page)가 반환됩니다.
    4. 마지막으로 selected_page.run()을 실행하면 해당 페이지가 표시됩니다.
  • st.navigation은 여러 st.Page를 리스트(목록)로 받아, 사이드바 메뉴(또는 상단 메뉴)를 자동으로 만들어줍니다.
import streamlit as st

# 1) 페이지 목록 만들기
pages = [
    st.Page("home.py", title="홈", icon="🏠", default=True),
    st.Page("production.py", title="생산 데이터", icon="🏭"),
    st.Page("quality.py", title="품질 관리", icon="🔍"),
    st.Page("maintenance.py", title="예지 보전", icon="🛠️"),
]

# 2) 사용자 선택
selected_page = st.navigation(pages)

# 3) 선택된 페이지 실행
selected_page.run()

나머지 4가지 페이지 만들기

 

 

 

1) production.py

import streamlit as st
import pandas as pd


st.title("생산 데이터")
st.write("생산량, 가동시간, 공정별 데이터 분석을 해보세요.")

# 예시 데이터: 실제로는 CSV나 DB에서 불러올 수 있음
data = {
    "라인": ["A", "B", "C"],
    "생산량": [1000, 800, 1200],
    "가동시간": [22, 19, 24],
}
df = pd.DataFrame(data)

st.subheader("생산 데이터 테이블")
st.dataframe(df)

st.subheader("라인별 생산량 차트")
st.bar_chart(df.set_index("라인")["생산량"])

 

 

2) quality.py

import streamlit as st
import matplotlib.pyplot as plt
import random


st.title("품질 관리")
st.write("불량률, 불량 유형, 품질 지표 등을 확인합니다.")

# 간단히 불량률 히스토그램 예시 (평균 2%, 표준편차 1% 가정)
data = [random.gauss(0.02, 0.01) for _ in range(100)]

fig, ax = plt.subplots()
ax.hist(data, bins=20, color="orange")
ax.set_title("불량률 분포 (예시)")
ax.set_xlabel("불량률 (%)")
ax.set_ylabel("빈도")

st.pyplot(fig)

 

3) maintenance.py

import streamlit as st


st.title("예지 보전 (Predictive Maintenance)")
st.write(
    """
    설비 센서(진동, 온도, 압력 등) 데이터를 토대로
    고장 징후를 사전에 파악하는 모델 예시를 구현할 수 있습니다.
"""
)

st.subheader("예시: 간단 설명")
st.write(
    """
    - 일정 주기마다 장비 상태 데이터를 수집
    - 특정 임계값(Threshold)을 초과하는 경우, 유지보수 알림
    - 예지 보전 모델로 고장 발생 가능 시점 예측
"""
)

 

 

1-3. st.session_state 개념 이해하기

  • st.sesstion_state 가 무엇이며 왜 필요한가?
    • 기능 설명
      • st.session_state는 브라우저(사용자)마다 서로 다른 상태를 유지할 수 있게 해주는 ‘저장 공간’ 입니다.
      • 일반적으로 Streamlit은 코드를 한 번 실행할 때마다 변수 값을 다시 계산합니다. 이 때문에 버튼을 누를 때마다 값이 초기화되기도 하지요.
      • st.session_state를 사용하면, 사용자가 입력한 값이나 버튼을 몇 번 눌렀는지 같은 정보를 앱이 계속 기억할 수 있습니다.
    • 왜 필요한가?
      • 예시: 로그인 폼을 만들어서 아이디와 비밀번호를 입력했는데, 페이지가 리로딩될 때마다 입력 내용이 사라진다면 불편하겠죠?
      • 멀티페이지 앱을 만들 때, A 페이지에서 입력한 데이터를 B 페이지에서 동일 세션으로 유지하기도 합니다.
      • 즉, 사용자의 상호작용에 따라 변화된 상태를 페이지 새로고침 후에도 유지하고 싶을 때 꼭 필요합니다

 

 

1) st.sesstion_state를 사용하지 않았을 때

import streamlit as st

st.title("버튼 클릭 횟수 (session_state 미사용)")

count = 0  # 항상 0으로 시작

if st.button("버튼을 눌러보세요!"):
    count += 1

st.write(f"버튼 클릭 횟수: {count}")

 

버튼을 아무리 눌러도 횟수가 1로만 뜹니다.

 

2) st.sesstion_state를 사용했을때

import streamlit as st

st.title("버튼 클릭 횟수 (session_state 사용)")

# session_state에 count 키가 없으면 0으로 초기화
if "count" not in st.session_state:
    st.session_state.count = 0

if st.button("버튼을 눌러보세요!"):
    st.session_state.count += 1

st.write(f"버튼 클릭 횟수: {st.session_state.count}")

 

 

1-4. 캐싱을 통한 성능 최적화

  • 기능 설명
    • @st.cache_data(또는 st.cache)는 연산 결과(예: CSV 불러오기, 무거운 계산)를 저장해두었다가,같은 입력으로 다시 함수를 부르면 이미 계산해 둔 결과를 바로 가져오는 기능입니다.
  • 왜 필요한가?
    • 예시:
      • 매우 큰 CSV 파일을 매번 불러오면 시간이 오래 걸림
      • 복잡한 머신러닝 모델을 돌릴 때 매번 학습시킨다면 사용자는 답답할 것
    • 캐시를 활용하면, 이미 처리한 데이터에 대해 불필요한 재연산을 하지 않아 속도가 크게 빨라집니다.

 

import streamlit as st
import time

st.title("캐싱 사용 예제")

@st.cache_data
def expensive_computation(n):
    st.write(f"실제 계산 수행... (n={n})")
    time.sleep(3)  # 3초 대기 (연산 비용 시뮬레이션)
    return sum(i*i for i in range(n))

options = [1000, 3000, 5000]
n = st.selectbox("숫자를 선택하세요", options)

if st.button("Compute"):
    start = time.time()
    result = expensive_computation(n)
    elapsed = time.time() - start
    st.write(f"결과: {result}")
    st.write(f"소요 시간: {elapsed:.2f} 초")

st.info("같은 n을 다시 선택해 Compute를 누르면, 이미 계산한 결과를 캐시에서 즉시 반환합니다!")

 

첫번째 계산

 

두번째 계산

 

계산을 다시하지 않고 빠르게 이전 값을 불러옵니다.

 

1-5. config.toml 을 활용해서 앱 꾸미기

앱의 테마, 배경색, 아이콘 등을 지정하여 UI를 개선합니다.

 

  • 기본 개념
    • 무엇을 하는 기능인가?
      • config.toml 파일은 Streamlit 앱의 기본 테마나 서버 설정 등을 한곳에서 지정할 수 있게 해주는 설정 파일입니다.
      • 일반적으로 .streamlit/ 폴더 아래에 config.toml을 만들어서, 앱의 배경색, 글자 색, 폰트, 포트 번호 등을 간편하게 설정합니다.
    • 왜 필요한가?
      • Streamlit 앱을 더 멋지고 일관성 있게 꾸미고 싶을 때, 코드 대신 설정 파일로 색상, 폰트 등을 한꺼번에 수정할 수 있습니다.
      • 여러 대의 서버(개발용·배포용 등)에서 공통으로 설정해야 할 항목(예: 포트 번호)을 한곳에 관리할 수 있어 유지보수에 용이합니다.
  • 사용 방법
    • .streamlit/config.toml 파일 생성
      • 프로젝트 루트 디렉터에 .streamlit 폴더를 만든 뒤,
      • 그 내부에 config.toml 파일을 생성합니다.
    • 설정 파일 내용 작성
      • 아래 예시처럼 **테마([theme])**와 **서버 설정([server])**을 원하는 대로 정의합니다

[theme]
primaryColor = "#F39C12"
backgroundColor = "#F2F2F2"
secondaryBackgroundColor = "#FFFFFF"
textColor = "#333333"
font = "sans serif"

[server]
headless = true
port = 8501

 

  • [theme]
    • primaryColor, backgroundColor, textColor, font 등 앱의 색상과 글꼴을 지정
  • [server]
    • port(기본 8501), headless 등을 설정해 스트림릿 서버의 동작 방식을 제어
  • 앱 실행
    • 평소처럼 streamlit run app.py 명령어로 앱을 실행합니다.
    • 자동으로 .streamlit/config.toml 파일의 설정을 읽어와, 커스텀 테마가 적용된 상태로 앱이 표시됩니다.