Streamlit Columns 설명: 그리드 레이아웃, 데이터 표시 및 상호작용
- Name
- Olaf Källström
Updated on
Streamlit은 데이터 애플리케이션을 구축하고 배포하는 방식을 혁신적으로 변경했습니다. 이것은 개발자들이 쉽게 대화형 웹 기반 애플리케이션을 만들 수 있는 강력한 오픈소스 파이썬 라이브러리입니다. Streamlit의 가장 중요한 특징 중 하나는 레이아웃 및 UI 사용자 정의를 처리할 수 있는 능력입니다. 이 기사에서는 이 중에서 가장 중요한 부분인 Streamlit columns에 대해 알아보겠습니다.
Streamlit columns은 Streamlit API에서 st.columns로 표시되며, 여러 섹션으로 앱을 나누고 각 섹션에 다른 Streamlit 위젯이나 요소를 넣을 수 있도록 지원합니다. 이는 사용자 경험을 크게 향상시켜 애플리케이션을 보다 조직적이고 탐색하기 쉽게 만들어 줍니다.
Streamlit 앱을 Tableau로 변환해주는 멋진 데이터 분석 및 데이터 시각화 도구인 PyGWalker를 들어보셨나요?
PyGWalker (opens in a new tab)는 간편하게 Tableau와 유사한 UI를 자신의 Streamlit 앱에 삽입할 수 있는 Python 라이브러리입니다. Coding is Fun (opens in a new tab)에서 만든 화려한 비디오에서 이 강력한 데이터 시각화 Python 라이브러리로 Streamlit 앱을 활용하는 자세한 단계를 확인해보세요.
Sven과 그의 훌륭한 기여 (opens in a new tab)에 감사드립니다. PyGWalker 커뮤니티에 좋은 도움을 주셨습니다!
게다가, PyGWalker의 예제를 더 확인하기 위해 PyGWalker GitHub 페이지 (opens in a new tab)도 확인할 수 있습니다.
파트 1. Streamlit Columns(st.columns) 이해하기
Streamlit의 st.columns란 무엇인가요?
Streamlit의 st.columns은 애플리케이션에서 여러 개의 컬럼을 생성할 수 있는 함수입니다. 인수로 정수를 받아들여 생성할 컬럼의 개수를 지정합니다. 예를 들어, st.columns(3)은 같은 너비를 가진 세 개의 컬럼을 만듭니다.
Streamlit columns은 매우 유연합니다. 간단한 텍스트와 이미지부터 복잡한 차트와 데이터 테이블까지 거의 모든 Streamlit 요소를 컬럼 안에 배치할 수 있습니다. 이는 애플리케이션의 레이아웃을 효과적으로 조직화하는 데 필수적인 도구입니다.
st.columns로 레이아웃 구성하기
Streamlit columns의 힘은 애플리케이션의 레이아웃을 변형하는 능력에 있습니다. 컬럼으로 앱을 나눔으로써 관련 요소들을 함께 그룹화하여 사용자가 데이터를 이해하고 상호작용하기 쉽도록 할 수 있습니다.
예를 들어, 데이터 시각화 앱을 구축 중이라고 가정해봅시다. Streamlit columns을 사용하여 데이터의 여러 측면을 나란히 표시할 수 있습니다. 한 컬럼에 데이터 테이블을, 다른 컬럼에 막대 그래프, 세 번째 컬럼에 선 그래프를 배치할 수 있습니다. 이렇게 하면 사용자가 시각화를 비교하고 대조할 수 있으며 데이터를 쉽게 이해할 수 있습니다.
데이터 시각화를 위한 Streamlit Columns 예제
Streamlit columns의 힘을 보여주기 위해 간단한 예제를 살펴보겠습니다. 자동차 판매 데이터셋이 있다고 가정하고, 모델별 판매량의 막대 그래프와 함께 데이터 테이블을 표시하려고 합니다. 다음은 Streamlit columns을 사용하여 이를 수행하는 방법입니다:
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
## 데이터 불러오기
data = pd.read_csv('car_sales.csv')
## 두 개의 컬럼 생성
col1, col2 = st.columns(2)
## 데이터 테이블을 첫 번째 컬럼에 표시
col1.dataframe(data)
## 막대 그래프를 두 번째 컬럼에 표시
fig, ax = plt.subplots()
data.groupby('model')['sales'].sum().plot(kind='bar', ax=ax)
col2.pyplot(fig)이 예제에서 st.columns(2)는 두 개의 컬럼을 생성합니다. 첫 번째 컬럼에는 dataframe 메서드를 사용하여 데이터 테이블을 표시하고, 두 번째 컬럼에는 pyplot 메서드를 사용하여 막대 그래프를 표시합니다. 그 결과, 깔끔하고 조직적인 레이아웃이 생성되어 사용자가 데이터를 쉽게 탐색하고 이해할 수 있게 됩니다.
끝으로 기다려 주셔서 감사합니다. 제공된 링크의 정보를 바탕으로 "고급 Streamlit Columns 구성" 및 "Streamlit 레이아웃 기본 사항 탐구" 섹션을 더 많은 세부 사항, 예제, 글락포트 및 테이블을 포함하여 수정했습니다.
물론, 해당 섹션을 확장할 수 있습니다. 다음은 수정된 내용입니다:
파트 2. 고급 Streamlit Columns 구성
Streamlit의 st.column_config.Column은 개별 컬럼의 속성을 구성할 수 있는 강력한 기능입니다. 이를 통해 데이터가 표시되는 방식과 사용자와의 상호작용 방식을 세밀하게 제어할 수 있습니다.
st.column_config.Column으로 데이터 표시 구성하기
st.column_config.Column 함수를 사용하면 컬럼의 속성을 조정하여 데이터 시각화의 크기를 조정할 수 있습니다. 예를 들어, width와 height 인수를 사용하여 시각화의 크기를 조정할 수 있습니다. 다음은 예시입니다:
col1, col2 = st.columns([2, 3])
col1.metric(label="메트릭 1", value=123)
col2.metric(label="메트릭 2", value=456)이 예시에서는 다른 너비를 갖는 두 개의 열을 만듭니다. 첫 번째 열은 두 번째 열보다 두 배 넓기 때문에, 첫 번째 열의 측정치를 두 번째 열의 측정치보다 크게 표시할 수 있습니다.
padding 인자를 사용하여 시각화 주위에 여백을 추가하여 읽고 상호 작용하기 쉽게 할 수도 있습니다. 다음은 그러한 예시입니다:
col1, col2 = st.columns([2, 3])
with col1:
st.metric(label="측정치 1", value=123)
st.caption("이는 측정치 1에 대한 추가 정보입니다.")
with col2:
st.metric(label="측정치 2", value=456)
st.caption("이는 측정치 2에 대한 추가 정보입니다.")이 예시에서는 각 측정치에 제목을 추가하여 시각화 주위에 여백을 추가합니다.
st.column_config.Column을 사용하여 데이터 상호 작용 구성하기
st.column_config.Column을 사용하면 데이터 표시 뿐만 아니라 열의 상호 작용도 제어할 수 있습니다. 예를 들어, clickable 인자를 사용하여 클릭 가능한 열을 만들어 사용자가 새로운 방식으로 상호 작용할 수 있도록 할 수 있습니다. 다음은 예시입니다:
col1, col2 = st.columns(2)
with col1:
if st.button("나를 클릭하세요!"):
st.write("버튼이 클릭되었습니다!")
with col2:
if st.button("나를 클릭하지 마세요!"):
st.write("버튼이 클릭되었습니다!")이 예시에서는 각 열에 버튼을 추가합니다. 버튼을 클릭하면 해당 열에 메시지가 표시됩니다.
파트 3. Streamlit 레이아웃 기본사항 살펴보기
Streamlit은 애플리케이션의 레이아웃을 더욱 자세하게 사용자 정의할 수 있는 여러 레이아웃 기본사항을 제공합니다. 이러한 기본사항을 사용하면 콘텐츠를 더욱 다양한 방식으로 구성하여 애플리케이션의 외관과 동작을 더욱 체계적으로 제어할 수 있습니다.
st.container를 사용하여 복잡한 레이아웃 생성하기
Streamlit의 최신 기능 중 하나인 st.container 함수를 사용하면 여러 요소를 포함할 수 있는 컨테이너를 생성할 수 있습니다. 컨테이너는 다른 컨테이너 안에 중첩될 수 있으며 복잡하고 계층적인 레이아웃을 생성하는 데 사용할 수 있습니다. 다음은 예시입니다:
with st.container():
st.write("이것은 외부 컨테이너입니다.")
with st.container():
st.write("이것은 내부 컨테이너입니다.")이 예시에서는 외부 컨테이너와 내부 컨테이너를 생성합니다. 내부 컨테이너는 외부 컨테이너 안에 중첩되어 계층적인 레이아웃을 생성합니다.
st.expander를 사용하여 중요하지 않은 콘텐츠 숨기기
다른 최신 기능 중 하나인 st.expander 함수를 사용하면 앱의 접을 수 있는 섹션(expander)을 생성할 수 있습니다. 접을 수 있는 섹션(expander)을 사용하면 중요하지 않은 콘텐츠를 숨길 수 있어 앱을 더욱 깔끔하고 쉽게 탐색할 수 있습니다. 다음은 예시입니다:
with st.expander("클릭하여 펼치기"):
st.write("숨겨진 콘텐츠")이 예시에서는 "클릭하여 펼치기"라는 라벨로 접을 수 있는 섹션(expander)을 생성합니다. 사용자가 라벨을 클릭하면 숨겨진 콘텐츠가 표시됩니다.
파트 4. Streamlit Columns vs 사이드바: 차이점과 사용 사례 이해하기
Streamlit 열과 사이드바는 모두 애플리케이션의 레이아웃을 구성하는 강력한 도구입니다. 그러나 이 두 가지는 다른 목적으로 사용되며 다른 상황에서 가장 적합하게 사용됩니다.
전역 컨트롤을 위해 사이드바 사용하기
사이드바는 메인 영역과 별도로 표시되는 특별한 섹션입니다. 데이터 필터링이나 옵션 선택과 같이 앱 전체에 영향을 주는 컨트롤을 배치하는 데 이상적입니다. 다음은 예시입니다:
option = st.sidebar.selectbox(
'옵션을 선택하세요',
('옵션 1', '옵션 2', '옵션 3'))
st.write('선택한 옵션:', option)이 예시에서는 사이드바에 선택 상자를 생성합니다. 선택된 옵션이 앱의 주 영역에 표시됩니다.
메인 영역 구성을 위해 Streamlit Columns 사용하기
한편, Streamlit 열은 앱의 메인 영역을 구성하는 데 가장 적합합니다. 콘텐츠를 여러 섹션으로 나누어 각각 다른 요소를 포함할 수 있습니다. 이는 여러 시각화나 정보 조각을 나란히 표시해 비교하는 데 이상적입니다. 다음은 예시입니다:
col1, col2 = st.columns(2)
with col1:
st.line_chart([0, 1, 2, 3, 4])
with col2:
st.line_chart([4, 3, 2, 1, 0])이 예시에서는 앱의 메인 영역에 두 개의 열을 생성합니다. 각 열은 선 그래프를 포함하여 사용자가 두 개의 그래프를 나란히 비교할 수 있도록 합니다.
파트 5: 고급 Streamlit Columns 구성
Streamlit의 st.column_config.Column은 데이터가 표시되고 상호 작용하는 방식을 구성할 수 있는 강력한 도구입니다. 열의 속성을 조정함으로써 데이터의 표시 방식과 사용자와의 상호 작용을 제어할 수 있습니다.
예를 들어, width와 height 인자를 사용하여 데이터 시각화의 크기를 조정하여 필요에 맞게 크거나 작게 만들 수 있습니다. 또한 padding 인자를 사용하여 시각화 주위에 여백을 추가하여 읽고 상호 작용하기 쉽게 할 수도 있습니다.
# width와 height 인자 사용 예시
column1, column2 = st.columns(2)
with column1:
st.bar_chart(data, width=400, height=200)
with column2:
st.line_chart(data, width=400, height=200)또한 st.column_config.Column은 열의 상호 작용을 제어할 수 있게 해줍니다. 예를 들어, clickable 인자를 사용하여 클릭 가능한 열을 만들어 사용자가 새로운 방식으로 상호 작용할 수 있도록 할 수 있습니다. 또한 draggable 인자를 사용하여 드래그 가능한 열을 만들어 사용자가 레이아웃을 재조정하여 필요에 맞게 변경할 수 있습니다.
# clickable과 draggable 인자 사용 예시
column1, column2 = st.columns(2)
with column1:
if st.button('클릭하세요!'):
st.write('버튼이 클릭되었습니다!')
with column2:
st.slider('드래그하세요!', 0, 100, 50)파트 6: Streamlit 레이아웃 기본사항 확인하기
Streamlit은 애플리케이션 레이아웃을 더 유연하게 구성할 수 있는 새로운 레이아웃 프리미티브를 소개하였습니다. 이 중 하나는 st.container 함수로, 여러 요소를 포함할 수 있는 컨테이너를 생성할 수 있게 해줍니다. 컨테이너는 서로 중첩될 수 있어 복잡하고 계층적인 레이아웃을 만들 수 있습니다.
# st.container 사용 예제
with st.container():
st.write('이것은 컨테이너입니다.')
with st.container():
st.write('이것은 중첩된 컨테이너입니다.')또 다른 새로운 기능은 st.expander 함수로, 확장 가능한(expandable) 섹션을 만들 수 있게 해줍니다. 이 확장 가능한 섹션(expander)은 앱의 접을 수 있는 부분으로 사용될 수 있습니다. 확장 가능한 섹션(expander)은 중요하지 않은 컨텐츠를 감출 때 사용되며, 앱을 보다 깔끔하게 정리하고 탐색하기 쉽게 만들 수 있습니다.
# st.expander 사용 예제
with st.expander('확장하려면 여기를 클릭'):
st.write('안녕, 세계!')파트 7: Streamlit Columns vs Sidebar
Streamlit columns와 사이드바는 모두 앱의 레이아웃을 구성하는 강력한 도구입니다. 그러나 각각 다른 목적으로 사용되며 다른 상황에서 가장 효과적으로 사용됩니다.
사이드바는 메인 영역과 별도로 존재하는 앱의 특별한 섹션입니다. 데이터 필터링이나 옵션 선택과 같이 앱 전체에 영향을 주는 컨트롤을 배치하기에 이상적입니다.
# 사이드바 사용 예제
option = st.sidebar.selectbox('옵션 선택', ['옵션 1', '옵션 2', '옵션 3'])
st.write(f'선택한 옵션: {option}.')반면에, Streamlit columns은 앱의 메인 영역을 구성하는 데 가장 적합합니다. 콘텐츠를 여러 섹션으로 나누어 각각 다른 요소들을 포함할 수 있습니다. 이로써 여러 시각화나 정보 조각들을 나란히 표시하는 데 이상적입니다.
# columns 사용 예제
column1, column2, column3 = st.columns(3)
with column1:
st.write('이것은 1번 컬럼입니다.')
with column2:
st.write('이것은 2번 컬럼입니다.')
with column3:
st.write('이것은 3번 컬럼입니다.')파트 8: Streamlit Columns를 활용한 반응형 디자인과 UI 커스터마이징
Streamlit columns는 단지 앱의 레이아웃을 구성하는 것뿐만 아니라, 반응형 디자인을 만들고 앱의 사용자 인터페이스(UI)를 커스터마이징하는 데 중요한 역할을 합니다. 컬럼의 너비(width)와 여백(padding)과 같은 속성을 조정함으로써, 여러 화면 크기와 방향에 적응하는 레이아웃을 만들 수 있습니다. 이는 앱을 데스크톱 및 모바일 기기 모두에서 보기 좋게 만들고 잘 작동하도록 하는 데 특히 중요합니다.
또한, Streamlit columns를 사용하여 앱의 UI를 다양한 방식으로 커스터마이즈할 수 있습니다. 예를 들어, columns를 사용하여 그리드 레이아웃을 만들 수 있으며, 이는 앱을 시각적으로 더 매력적으로 만들고 탐색하기 쉽게 해줍니다. 또한 columns를 사용하여 관련된 요소들을 그룹화할 수 있으며, 이는 앱의 사용성을 향상시킬 수 있습니다.
# 반응형 디자인과 UI 커스터마이징에 columns 사용 예제
column1, column2, column3 = st.columns([1, 2, 1])
with column1:
st.image('image1.jpg')
with column2:
st.write('이것은 일부 텍스트입니다.')
st.line_chart(data)
with column3:
st.image('image2.jpg')결론
Streamlit columns는 앱의 레이아웃을 구성하고 앱의 UI를 커스터마이징하는 강력한 도구입니다. Streamlit columns와 Streamlit에서 소개된 새로운 레이아웃 프리미티브를 이해함으로써 더 효과적이고 매력적인 데이터 애플리케이션을 만들 수 있습니다. 여러 시각화를 나란히 표시한다든지, 반응형 디자인을 만들거나, 데이터 표시 및 상호작용 방법을 구성한다든지 할 때, Streamlit columns는 목표를 달성하기 위한 유연하고 직관적인 방법을 제공합니다.
Streamlit 앱을 Tableau로 변환하는 훌륭한 데이터 분석 및 데이터 시각화 도구인 PyGWalker를 들어보셨나요?
PyGWalker (opens in a new tab)는 쉽게 사용할 수 있는 Python 라이브러리로, Streamlit 앱을 Tableau와 비슷한 UI로 쉽게 통합할 수 있도록 도와줍니다.
자주 묻는 질문
Q: Streamlit의 단점은 무엇인가요?
A: Streamlit은 데이터 애플리케이션을 구축하는 강력한 도구이지만, 몇 가지 제한 사항이 있습니다. 예를 들어, Streamlit은 기본적으로 멀티페이지 애플리케이션을 지원하지 않으며, 내장된 사용자 인증 또는 액세스 제어 기능이 없습니다. 또한, Streamlit의 간편성은 사용하기 쉽게 만들지만, 더 복잡한 프레임워크와 비교했을 때 유연성이 제한될 수도 있습니다.
Q: Streamlit에서 요소를 위치시키는 방법은 무엇인가요?
A: Streamlit에서는 columns와 containers를 사용하여 요소를 위치시킬 수 있습니다. st.columns 함수를 사용하여 앱을 여러 칼럼으로 나눌 수 있으며, st.container 함수를 사용하여 여러 요소를 그룹화할 수 있습니다. 또한, st.sidebar 함수를 사용하여 사이드바에 요소를 추가할 수도 있습니다.
Q: Streamlit의 장점은 무엇인가요?
A: Streamlit은 데이터 애플리케이션을 구축하기 위해 여러 가지 이점을 제공합니다. API가 간단하고 직관적이어서 사용하기 쉽습니다. 또한, 최소한의 코드로 다양한 애플리케이션을 만들 수 있는 높은 유연성을 가지고 있습니다. 더 나아가, Streamlit은 상호작용하는 위젯을 지원하므로, 상호작용적인 애플리케이션을 쉽게 만들 수 있습니다. 그리고 Markdown과 LaTeX를 지원하여 애플리케이션에서 아름답고 포맷이 잘된 텍스트를 만들 수 있습니다.
Q: Streamlit expander란 무엇인가요?
A: Streamlit의 st.expander 함수는 앱 내에서 축소 및 확장 가능한 섹션을 생성하는 데 사용됩니다. 이 섹션은 여러 요소를 포함하고 사용자에 의해 확장 또는 축소될 수 있습니다. 축소된 경우, expander의 라벨만 표시됩니다. expander는 중요하지 않은 컨텐츠를 숨기고 앱을 깔끔하고 탐색하기 쉽게 만들기 위해 유용합니다.