2025/02/27 TIL
01. 레이아웃 구성 이해하기
✔️ 컬럼(Column), Expander, Tabs, Sidebar 등 다양한 레이아웃 기법을 익혀봅니다.- 컬럼(Column) 활용하기
- 파일 명: 6_streamlit_layout.py
st.columns()를 사용하면 한 페이지 안에서 여러 개의 수직 열(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")st.columns()함수의 인자로 비율을 지정하여 열 간의 너비 비율을 조정할 수 있습니다. 이를 통해 원하는 대로 레이아웃을 맞출 수 있습니다.st.set_page_config( page_title="QA/AC streamlit App", page_icon="🧊", layout="wide") st.video("https://www.youtube.com/watch?v=pSUydWEqKwE")# 열의 너비 비율을 조정합니다. 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(""" - 틱톡에서 난리 난 '#쿠쿠다스챌린지' - 인스타그램 릴스, 짧은 영상 편집 팁 공유하기 - 재테크/절약 관련 '챌린지'도 인기 상승 중! """)
- Taps 활용하기
st.tabs()를 사용하면 페이지 내에서 탭을 생성하여 콘텐츠를 구분할 수 있습니다. 각 탭에는 개별적으로 콘텐츠를 추가할 수 있습니다.# 세 개의 탭을 생성합니다. tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"]) with tab1: st.header("A cat") st.image("https://static.streamlit.io/examples/cat.jpg", width=200) with tab2: st.header("A dog") st.image("https://static.streamlit.io/examples/dog.jpg", width=200) with tab3: st.header("An owl") st.image("https://static.streamlit.io/examples/owl.jpg", width=200)
- Sidebar 활용하기
st.sidebar를 사용하면 페이지의 사이드바를 생성할 수 있습니다. 사이드바는 페이지의 추가 옵션이나 내비게이션 메뉴를 제공하는 데 유용합니다.# 사이드바를 생성하고, 라디오 버튼을 추가합니다. with st.sidebar: add_radio = st.radio( "Choose a shipping method", ("Standard (5-15 days)", "Express (2-5 days)") )
02. 페이지 구성해보기
✔️ Streamlit의 `st.Page`와 `st.navigation`을 활용하여 여러 페이지로 구성된 앱을 구현하는 방법을 알아봅니다. 제조업 데이터 분석 시나리오를 예시로 구성해 봅니다.- 왜 여러 페이지가 필요할까? 예를 들어, 제조업 데이터 분석을 한다고 할 때, 한 화면에 모든 내용을 담으면 복잡해집니다.
-
홈: 앱 소개, 전체 요약
-
생산 데이터: 하루 생산량, 생산 라인별 분석
-
품질 관리: 불량률, 불량 유형 모니터링
-
예지 보전: 설비 고장 예측, 유지보수 계획
이렇게 주제별로 페이지를 나누면, 사용자도 쉽게 원하는 부분을 찾아갈 수 있습니다.
-
- 여러 페이지 만들기의 구조 👌 구조를 정리해봅니다. 1. **`st.Page`**: “한 페이지”를 정의 (파일 경로나 함수, 제목, 아이콘 등) 2. **`st.navigation`**: 여러 페이지를 하나로 묶어, 사이드바 메뉴를 자동 생성 3. **실행**: `streamlit run 메인파일.py` 명령어로 앱 실행 → 여러 페이지가 나오는 완성된 형태
- st.Page란 무엇인가?
`st.Page`는 **한 페이지의 정보**를 담는 객체입니다.
- `page`: 페이지 소스 (Python 파일 경로나 함수)
- `title`: 페이지 제목
- `icon`: 페이지 옆에 붙일 이모지나 아이콘
- `url_path`: 주소 표시줄(URL)에서 보이는 경로 (보통 자동으로 만들어져서 신경 안 써도 됨)
- `default`: 기본 페이지 설정 (True로 하면 앱을 처음 켰을 때 이 페이지가 보여짐)
```python
import streamlit as st
# home.py 파일을 페이지로 등록하고, 제목과 아이콘을 지정
st.Page(
page="home.py",
title="홈 화면",
icon="🏠",
default=True
)
```
- st.navigation으로 여러 페이지 연결하기
`st.navigation`은 여러 `st.Page`를 리스트(목록)로 받아, **사이드바 메뉴**(또는 상단 메뉴)를 자동으로 만들어줍니다.
1. 페이지들을 등록한 리스트를 만들고,
2. `selected_page = st.navigation(리스트)`로 호출하면,
3. 사용자가 선택한 페이지(`selected_page`)가 반환됩니다.
4. 마지막으로 `selected_page.run()`을 실행하면 해당 페이지가 표시됩니다.
```python
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()
```
QA/QC 1기 김학열