[Streamlit] 1. 효율적인 멀티페이지 설정(글리치 현상 해결)

Streamlit을 사용하는 대부분의 사람들은 단일 페이지(카테고리)만 구성된 웹사이트를 원하지는 않을 것이다.

그렇다고 한 파일에 다중 페이지 코드를 때려박는 걸 원하지도 않겠지

스트림릿에서 다중 페이지를 구성하기 위해서는 여러 가지 방법을 활용할 수 있다.

 

그 중 하나로 많이 추천되는 방법은 pages라는 폴더를 만들고 원하는 페이지에 해당하는 파일들을 하나씩 넣는 것이다.

Streamlit 공식 도큐먼트에서도 이 방법에 대해 소개하고 있다.

 

Streamlit Docs

(참고로 Streamlit Docs는 꼭 꼭 참고해야 한다... 처음은 본의 아니게 까는 게 됐지만)

 

문서를 요약하자면 이런 식으로 만드는 방법이다.

Hello.py
pages
|--- pages/1_📈_Plotting_Demo.py
|--- pages/2_🌍_Mapping_Demo.py
|--- pages/3_📊_DataFrame_Demo.py

 

이런 식으로 파일을 배치하고  streamlit run Hello.py을 실행하면 다중 페이지가 자동으로 생성된다. 

이렇게 보면 참 간단하고 쉬워 보인다!

파일 배치만으로 다중 페이지가 설정된다니!

 

웹사이트에선 이렇게 왼쪽에 다중 페이지 사이드바가 생기는 것으로 표현된다.

보자마자 Hello.py 페이지가 같이 뜨는 걸 보고 의도한 바가 아니라고 생각할 수도 있겠지만...

일단 결론적으로 사이드바 css를 건들 생각이 없다면 이렇게 둬도 된다.

 

그러나 css를 건들기 시작하면 여기서 걷잡을 수 없는 오류를 발견하게 되는데...

 

바로 페이지를 이동할 때마다 사이드바 css가 튀는 현상이 나타나는 것이다.

 

해외 사용자들 중에서도 이런 오류를 토로하는 사람들이 있었고

st.empty()나 다른 기능으로 잡아보려는 시도도 있었지만

일단 이 기능을 사용하는 이상 사이드바에 있는 요소들이 변수화되는 것도 아니라 나는 결국 수정하지 못했다...

 

그래서 이 방법을 완전히 버리고 다른 방법으로 멀티페이지를 표현하기를 택했다.

 

그 방법은 그냥 st.navigation()을 이용하는 것이다...

사실 첫 번째 방법이 더 야심찬 최신 기능 같긴 하지만 그냥 코드화하는 것이 속 편하다.

그리고 아래 기능이 별로 어렵지도 않다.

요약하자면 이렇다.

 

---

1. 디렉토리 구성

app.py # Streamlit 실행 파일
1_🏠__Main.py
2_🗺️__지역화폐_발행_현황.py
3_📊__대시보드.py
4_🤖__Chatbot.py

 

물론 파일 이름은 바꿔주면 되고, 참고로 앞에 숫자를 붙이면 자동으로 페이지 순서가 매겨진다.

중요한 건 app.py랑 같은 경로에 각 페이지 파일을 놔둬야 한다는 것이다.

 

 

2. app.py

pg = st.navigation([
    st.Page("1_🏠__Main.py"),
    st.Page("2_🗺️__지역화폐_발행_현황.py"),
    st.Page("3_📊__대시보드.py"),
    st.Page("4_🤖__Chatbot.py")
])
pg.run()

 

실행 파일에 이 코드만 세팅해주면 된다.

 

 

3. (사이드바 css 적용할 경우)

윗 코드만 적용해도 글리치가 대부분 줄어들지만, 더 확실하게 하려면

css 로딩 코드를 각 페이지 파일에서 제일 먼저 실행되도록 세팅하는 것이 좋다.

---

 

적어놓고 보니 별로 안 어려워 보이지만

깨달음의 길은 어려웠다...

나와 같은 오류를 참지 못한 사람들에게 도움이 되길 바라 글을 작성했다.

스트림릿 사이드바 글리치 로딩 오류 모두 해결하길🙏🏻