[Streamlit] Streamlit의 기초! Column과 Tab을 사용한 Layout

Streamlit으로 멀티 컬럼 레이아웃 디자인하기

때로는 웹 애플리케이션에서 정보를 병렬적으로, 혹은 구조적인 방식으로 제시하고 싶을 때가 있습니다. Streamlit의 st.columns() 기능을 사용하면 멀티 컬럼 레이아웃을 쉽게 디자인할 수 있습니다. 이번 글에서는 이러한 레이아웃을 구성하는 방법에 대해 알아보겠습니다.

 

1. 동일한 너비의 컬럼 만들기

st.columns() 함수에 정수를 전달하면 해당 수만큼 동일한 너비의 컬럼들이 생성됩니다.

 

col1, col2, col3 = st.columns(3)

with col1:
    st.header('Col1')
    st.image('https://static.streamlit.io/examples/cat.jpg')
    
with col2:
    st.header('Col2')
    st.image('https://static.streamlit.io/examples/dog.jpg')
    
with col3:
    st.header('Col3')
    st.image('https://static.streamlit.io/examples/owl.jpg')

 

2. 다양한 너비의 컬럼 만들기

리스트를 전달하여 각 컬럼의 너비를 다르게 설정할 수 있습니다. 이때 리스트의 값은 컬럼의 너비 비율을 나타냅니다.

 

# col1: 2의 비율, col2: 6의 비율, col3: 2의 비율
col1, col2, col3 = st.columns([2,6,2])

with col1:
    st.header('Col1')
    st.image('https://static.streamlit.io/examples/cat.jpg')
    
with col2:
    st.header('Col2')
    st.image('https://static.streamlit.io/examples/dog.jpg')
    
with col3:
    st.header('Col3')
    st.image('https://static.streamlit.io/examples/owl.jpg')

---

이번에는 Tab을 사용해서 레이아웃을 디자인해보겠습니다.

 

탭 생성하기

st.tabs() 함수를 사용하면 원하는 수의 탭을 생성할 수 있습니다. 각 탭의 레이블은 문자열 리스트로 전달합니다.

 

tab1, tab2, tab3 = st.tabs(['Cat', 'Dog', 'Owl'])

with tab1:
    st.header('Tab1')
    st.image('https://static.streamlit.io/examples/cat.jpg')
    
with tab2:
    st.header('Tab2')
    st.image('https://static.streamlit.io/examples/dog.jpg')

with tab3:
    st.header('Tab3')
    st.image('https://static.streamlit.io/examples/owl.jpg')

 

 

Streamlit의 Tab 기능을 활용하면 복잡한 웹 애플리케이션도 직관적이고 사용자 친화적인 방식으로 구성할 수 있습니다. 사용자는 필요한 정보나 기능을 쉽게 탐색하며, 개발자는 몇 줄의 코드만으로도 효과적인 레이아웃을 구성할 수 있습니다.