사이드바·탭·확장 패널
화면에 넣을 게 많아지면 한 화면이 너무 길어진다냥. 그럴 때 쓰는 정리 도구 세 가지를 배워보자냥. 사이드바, 탭, 확장 패널 — 이 셋만 알면 아무리 내용이 많아도 깔끔하게 담을 수 있다냥!
오늘의 학습 목표
st.sidebar로 옆 서랍을 만든다.st.tabs로 내용을 탭으로 나눈다.st.expander로 접었다 폈다 하는 확장 패널을 만든다.
streamlit1.40 이상파이썬 코드로 웹 화면 만들기
설치하기 — 터미널에 그대로 붙여넣기
pip install "streamlit>=1.40"설치 확인 — 버전 번호가 찍히면 성공
python -c "import streamlit; print(streamlit.__version__)"위 버전은 최소 기준이라, 더 높은 버전이 깔려 있으면 그대로 써도 된다냥. 버전이 안 찍히고 에러가 나면 설치가 안 된 거라 설치 명령을 다시 실행해보자냥.
1단계 · 옆 서랍 — sidebar
사이드바는 화면 왼쪽에 붙는 서랍이다냥. 주로 설정이나 메뉴처럼, "항상 옆에 있으면 좋은 것" 을 넣는다냥. 지금 이 강의 화면에도 왼쪽에 목차 사이드바가 있지? 딱 그거다냥!
import streamlit as st
st.title("본문이다냥")
with st.sidebar:
st.header("설정")
st.write("여기는 옆 서랍이라냥")
st.write("이 글자는 넓은 본문 쪽에 나온다냥")st.sidebar.무엇 도 된다냥
with st.sidebar: 대신 st.sidebar.write("...") 처럼 바로 붙여 써도
똑같이 사이드바에 들어간다냥. 한두 줄이면 이게 더 간단하다냥!
2단계 · 탭으로 나누기 — tabs
탭은 같은 자리에서 눌러서 갈아 끼우는 방식이다냥. 하나가 보일 때 나머지는 숨어 있어서, 공간을 아주 알뜰하게 쓴다냥.
import streamlit as st
tab1, tab2, tab3 = st.tabs(["소개", "메뉴", "후기"])
with tab1:
st.write("코딩냥이의 가게라냥")
with tab2:
st.write("참치캔, 닭가슴살, 츄르")
with tab3:
st.write("별 다섯 개라냥")탭 이름은 리스트로 준다냥
st.tabs(["소개", "메뉴", "후기"]) 처럼 탭 이름들을 리스트로 주면,
그 개수만큼 탭이 만들어진다냥. 받는 변수 개수도 탭 개수와 맞춰야 한다냥!
3단계 · 접었다 폈다 — expander
확장 패널은 평소엔 접혀 있다가 제목을 누르면 펼쳐진다냥. "자세히 보기", "도움말" 처럼 평소엔 숨겨두고 싶은 것에 딱이다냥.
import streamlit as st
st.write("주문은 아주 간단하다냥")
with st.expander("자세한 주문 방법 보기"):
st.write("1. 메뉴를 고른다냥")
st.write("2. 수량을 정한다냥")
st.write("3. 주문 버튼을 누른다냥")긴 화면을 짧게 만드는 마법
안내문이 길어서 화면이 지저분해질 때, st.expander 안에 넣어두면
화면이 확 짧아진다냥. 궁금한 사람만 눌러서 펼쳐 보면 된다냥!
4단계 · 직접 해보기
미션 · 정리의 달인
아래 세 가지를 한 화면에 담아보자냥.
- 사이드바에 "내 이름" 과 "좋아하는 색"
- 탭 두 개: "취미" 와 "특기"
- 확장 패널: "비밀 이야기" (눌러야 보이게)
한 화면에 이렇게 많은 걸 담아도 하나도 안 복잡해 보인다냥!
복습 퀴즈
여기까지가 1부 · 첫 화면 만들기 였다냥! 이제 화면에 내용을 올리고 예쁘게 배치하는 건 다 할 수 있다냥. 2부에서는 드디어 사용자에게 입력을 받는 진짜 앱을 만들기 시작한다냥. 가보자냥!