Streamlit layout 설정하는 방법

Streamlit layout 설정하는 방법

Streamlit
Streamlit layout 설정하는 방법
Author

gabriel yang

Published

September 9, 2024


Streamlit에서 레이아웃을 설정하는 방법은 다양한 UI 컴포넌트를 적절히 배치하여 사용자에게 정보를 효과적으로 전달하는 데 중요한 역할을 합니다. Streamlit은 레이아웃을 설정하기 위한 여러 가지 방법을 제공합니다.

1. 기본 레이아웃 설정

Streamlit은 기본적으로 세로 방향으로 컴포넌트를 나열합니다. 이러한 기본 레이아웃은 간단한 애플리케이션에 적합하지만, 보다 복잡한 레이아웃을 구성할 때는 추가적인 설정이 필요합니다.

2. 컬럼 레이아웃

컬럼 레이아웃을 사용하면 페이지를 여러 개의 열로 나누어 각 열에 다른 콘텐츠를 배치할 수 있습니다.

import streamlit as st

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

with col1:
    st.header('열 1')
    st.write('이곳에 첫 번째 열의 콘텐츠를 배치합니다.')

with col2:
    st.header('열 2')
    st.write('이곳에 두 번째 열의 콘텐츠를 배치합니다.')

with col3:
    st.header('열 3')
    st.write('이곳에 세 번째 열의 콘텐츠를 배치합니다.')
  • st.columns() 함수는 열의 수를 지정하며, 각 열에 대한 참조를 반환합니다.
  • with 문을 사용하여 각 열에 콘텐츠를 추가할 수 있습니다.

컬럼 크기 설정

st.columns() 함수는 컬럼의 너비를 비율로 설정할 수 있습니다. 컬럼의 크기를 상대적으로 조정하려면, 비율을 리스트로 전달합니다.

import streamlit as st

col1, col2 = st.columns([2, 1])

with col1:
    st.write('컬럼 1: 두 배 넓음')

with col2:
    st.write('컬럼 2: 좁음')

3. 측면 바 (Sidebar)

사이드바를 사용하면 화면의 측면에 고정된 공간에 사용자 입력 요소나 기타 콘텐츠를 배치할 수 있습니다.

import streamlit as st

st.sidebar.title('사이드바 제목')
option = st.sidebar.selectbox('옵션을 선택하세요:', ['옵션 1', '옵션 2', '옵션 3'])
st.write('선택한 옵션:', option)
  • st.sidebar를 사용하여 사이드바에 콘텐츠를 추가할 수 있습니다.
  • 사이드바는 애플리케이션의 왼쪽 또는 오른쪽에 고정되어 나타납니다.

4. 탭 레이아웃

탭을 사용하여 콘텐츠를 구분하여 표시할 수 있습니다. 사용자가 탭을 클릭하여 다른 콘텐츠를 볼 수 있도록 합니다.

import streamlit as st

tab1, tab2, tab3 = st.tabs(['탭 1', '탭 2', '탭 3'])

with tab1:
    st.header('탭 1 콘텐츠')
    st.write('이곳에 탭 1의 콘텐츠를 배치합니다.')

with tab2:
    st.header('탭 2 콘텐츠')
    st.write('이곳에 탭 2의 콘텐츠를 배치합니다.')

with tab3:
    st.header('탭 3 콘텐츠')
    st.write('이곳에 탭 3의 콘텐츠를 배치합니다.')
  • st.tabs() 함수를 사용하여 탭을 생성하고 각 탭에 콘텐츠를 추가합니다.

5. 위젯 배치 조정

Streamlit은 위젯의 배치를 조정하는 다양한 방법을 제공합니다.

  • 정렬: st.markdown()로 텍스트나 다른 콘텐츠를 정렬할 수 있습니다.

st.markdown(
    """
    <style>
    .left-align {
        text-align: left;
    }
    .right-align {
        text-align: right;
    }
    </style>
    """,
    unsafe_allow_html=True
)
st.markdown('<p class="left-align">이 텍스트는 왼쪽으로 정렬되어 있습니다.</p>', unsafe_allow_html=True)
st.markdown('<p class="right-align">이 텍스트는 오른쪽으로 정렬되어 있습니다.</p>', unsafe_allow_html=True)

6. 스타일링과 커스터마이즈

Streamlit은 CSS를 직접 적용할 수는 없지만, st.markdown()과 HTML 태그를 사용하여 스타일을 일부 적용할 수 있습니다.

st.markdown("""
    <style>
    .big-font {
        font-size:20px !important;
        color: red;
    }
    </style>
    <p class="big-font">이 텍스트는 큰 폰트와 빨간색으로 스타일링되었습니다.</p>
    """, unsafe_allow_html=True)
  • unsafe_allow_html=True를 사용하여 HTML 태그와 스타일을 적용할 수 있습니다.

7. 그리드 레이아웃

Streamlit의 st.container()를 사용하여 더 복잡한 레이아웃을 구성할 수 있습니다. st.container()는 레이아웃을 그룹화하고, 그 안에 다양한 컴포넌트를 추가할 수 있는 컨테이너를 제공합니다.

import streamlit as st

with st.container():
    st.header('컨테이너 내의 내용')
    st.write('여기에는 다양한 UI 컴포넌트를 추가할 수 있습니다.')

8. 복잡한 레이아웃 예제

다양한 레이아웃을 이용해서 더 복잡한 페이지 구조를 생성할 수 있습니다.

import streamlit as st
import pandas as pd

# 사이드바에 위젯 추가
st.sidebar.title("옵션 선택")
option = st.sidebar.selectbox("데이터 선택:", ["데이터셋 1", "데이터셋 2"])

# 메인 화면
st.title("대시보드 예시")

# 선택된 옵션에 따라 다른 데이터셋 로드
if option == "데이터셋 1":
    data = pd.DataFrame({
        "A": [1, 2, 3, 4],
        "B": [10, 20, 30, 40]
    })
else:
    data = pd.DataFrame({
        "A": [1, 2, 3, 4],
        "B": [40, 30, 20, 10]
    })

# 두 개의 컬럼으로 데이터와 시각화 나누기
col1, col2 = st.columns(2)

with col1:
    st.write(f"선택한 데이터셋: {option}")
    st.write(data)

with col2:
    st.write("데이터 시각화:")
    # B 컬럼을 A에 대한 값으로 시각화
    st.line_chart(data.set_index('A'))

  • 사이드바에 제목을 추가하고 드롭다운 메뉴를 생성하여 사용자가 “데이터셋 1” 또는 “데이터셋 2”를 선택할 수 있도록 합니다

  • 선택된 옵션에 따라 서로 다른 데이터프레임을 로드합니다. “데이터셋 1”을 선택하면 data는 A와 B 열을 가진 데이터프레임이 됩니다. “데이터셋 2”를 선택하면 B 열의 값이 반대로 설정된 데이터프레임이 됩니다.

  • st.columns(2)을 사용하여 두 개의 열을 생성합니다. 이로써 두 개의 콘텐츠 영역을 나누어 표시할 수 있습니다.

  • 첫 번째 컬럼(col1)에 선택한 데이터셋의 이름과 실제 데이터를 출력합니다. st.write()는 다양한 데이터 타입을 화면에 출력할 수 있습니다.

  • 두 번째 컬럼(col2)에는 데이터 시각화 영역을 배치합니다. st.line_chart()를 사용하여 data의 A 열을 인덱스로 설정하고 B 열의 값을 선 그래프로 시각화합니다.

결론

Streamlit을 사용하면 다양한 레이아웃 설정으로 사용자에게 정보를 효과적으로 전달할 수 있습니다. 컬럼 레이아웃, 사이드바, 탭, 위젯 배치 조정 등을 활용하여 필요한 레이아웃을 구성하고, 사용자에게 더 나은 경험을 제공할 수 있습니다.