- 스트림릿의 기본 UI는 획일적이고 전문성이 부족하여, 폰트, 색상, 전체적인 디자인을 맞춤형으로 변경하는 것이 중요합니다. 🎨
st.page 및 st.navigation 위젯을 활용하여 사이드바 내비게이션을 파일명 대신 사용자 정의 제목과 카테고리로 깔끔하게 구성할 수 있습니다. 🧭
- 각 페이지와 챗 메시지에 구글 머티리얼 아이콘(
:material/icon_name:) 및 사용자 정의 아바타를 추가하여 시각적 명확성과 개성을 부여할 수 있습니다. ✨
.streamlit/config.toml 파일에 폰트 파일을 등록하고 [theme] 섹션에서 font 속성을 설정하여 웹서비스의 전체 글꼴을 원하는 폰트로 변경할 수 있습니다. ✒️
config.toml에서 base_font_size 및 heading_font_sizes를 조정하여 전체 텍스트와 제목의 크기를 세밀하게 제어할 수 있으며, 최신 버전에서 헤딩 폰트 크기 조정이 가능합니다. 📏
primaryColor, backgroundColor, secondaryBackgroundColor, textColor 속성을 config.toml에 설정하여 웹서비스의 전반적인 색상 테마를 원하는 스타일(예: ChatGPT, Toss)로 변경할 수 있습니다. 🌈
base_radius와 button_radius 값을 config.toml에서 조정하여 UI 요소들의 모서리 둥글기 정도를 변경하여 디자인의 부드러움이나 각진 느낌을 조절할 수 있습니다. ⚪
[ui] hideTopBar = true 및 [client] toolbarMode = "viewer" 설정을 통해 불필요한 상단 우측 버튼들을 숨겨 더욱 깔끔하고 전문적인 UI를 구현할 수 있습니다. 🚫
- 이러한 내비게이션 개선과
config.toml을 통한 테마 설정을 통해 스트림릿 웹서비스의 디자인과 사용자 경험을 크게 향상시킬 수 있습니다. 🚀