Streamlit 테마: 앱의 배경과 테마 변경하기

Q: Streamlit의 테마를 설정하는 방법은 무엇인가요?

Streamlit의 테마를 설정하는 것은 매우 간단합니다. `.streamlit/config.toml` 파일에 `[theme]` 섹션을 추가하고 원하는 색상, 폰트 등을 지정하면 됩니다.

Q: Streamlit의 기본 테마는 무엇인가요?

Streamlit의 기본 테마는 흰색 배경과 검은색 텍스트를 가진 라이트 테마입니다. 그러나 `.streamlit/config.toml` 파일의 `[theme]` 섹션을 사용하여 다크 테마나 사용자 정의 테마로 쉽게 변경할 수 있습니다.

Name: Olaf Källström

Updated on 2023. 7. 24.

데이터 열정가라면 Streamlit을 이미 들어봤을 것입니다. 이는 데이터 과학 커뮤니티에서 말이 되는 이유로 이야기되는 대목입니다. Streamlit은 웹 앱 개발의 세계를 완전히 바꾸어 놓은 게임 체인저입니다. 그러나 Streamlit이 데이터에 중점을 두는 것뿐만 아니라, 놀랍게도 Streamlit은 미학에 관한 것입니다. 그렇습니다, 제대로 들었습니다! Streamlit을 사용하면 앱의 외관과 느낌을 맞춤 설정하여, 눈보라 속의 눈송이처럼 독특한 앱을 만들 수 있습니다. 그래서, Streamlit 테마의 세계에 깊게 빠져들어 봅시다.

Streamlit 테마: 간단하게 설명하기

Streamlit은 코딩의 거친 세계에서 빛나는 보석 같은 도구입니다. 이는 웹 앱 개발에서 귀찮은 작업을 사라지게 해주는 오픈 소스 Python 라이브러리입니다. Streamlit을 사용하면 "Python"이라고 말하기보다도 빠르게 대화형 데이터 중심 웹 앱을 만들 수 있습니다. 그리고 가장 좋은 점은 HTML, CSS, 또는 JavaScript 한 줄도 몰라도 된다는 것입니다.

Streamlit이란?

이렇게 상상하세요: 방금 Python 스크립트를 작성했습니다. 이것은 아름다움의 단편이며, 걸작입니다. 그러나 이제 당신은 이를 세상과 공유하고 싶습니다. 이를 웹 앱으로 만들기를 원합니다. 과거에는 HTML, CSS, 그리고 JavaScript를 배워야 했었겠지만, Streamlit을 사용하면 몇 분 내에 Python으로 스크립트를 웹 앱으로 변환할 수 있습니다. 마치 케이크를 먹는 동시에 케이크를 갖는 것과 같은 느낌입니다!

Streamlit 테마: 앱 맞춤 설정의 새로운 방법

하지만 Streamlit은 속도와 효율성에 관한 것뿐만 아닙니다. 이는 또한 맞춤 설정에 관한 것입니다. Streamlit 테마를 사용하면 얼마든지 앱의 외관과 느낌을 변경할 수 있습니다. 선명하게 배경색상을 변경하고 싶으세요? 아주 쉽습니다. 폰트 타입을 변경하고 싶으세요? 문제 없습니다. Streamlit 테마를 사용하면 세상이 우리 앞에 펼쳐집니다.

사용자 정의 테마, 다크 모드, 그리고 라이트 모드

그리고 여기에서 멈추지 않습니다. Streamlit 테마를 사용하면 사용자 정의 테마를 만들 수도 있습니다. 브랜드, 스타일 또는 기분에 맞는 테마를 만들 수 있습니다. 어두움과 신비로움이 필요한 기분인가요? 다크 모드를 사용해보세요. 가벼움과 시원함을 느끼고 싶으세요? 라이트 모드를 사용해보세요. Streamlit을 사용하면 당신이 세상을 지배할 수 있습니다.

Streamlit에서 무료로 데이터 분석 및 데이터 시각화 앱을 만들고 싶으세요?

PyGWalker (opens in a new tab)는 Tableau와 유사한 UI를 자신의 Streamlit 앱에 손쉽게 임베드할 수 있는 Python 라이브러리입니다. Coding is Fun의 Sven (opens in a new tab)이 만든 놀라운 비디오에서 이 강력한 데이터 시각화 Python 라이브러리로 Streamlit 앱을 강화하는 상세 단계를 확인해보세요!

Sven (opens in a new tab)과 PyGWalker (opens in a new tab) 커뮤니티에게 특별한 감사를 표합니다!

또한, 더 많은 PyGWalker 예제를 확인하려면 PyGWalker GitHub 페이지 (opens in a new tab)를 방문하세요.

Streamlit 앱 맞춤 설정: 배경색상부터 폰트까지

이제 디테일한 부분에 대해 알아보겠습니다. 어떻게 Streamlit 앱을 맞춤 설정할 수 있는지요? 천하기만큼 쉽습니다.

배경색상 변경하기

Streamlit 앱의 배경색상을 변경하려면 몇 줄의 코드만 추가하면 됩니다. 다음은 예시입니다.

[theme]
backgroundColor = "#F0F0F0"

위의 코드는 배경색상을 연한 회색으로 변경합니다. "#F0F0F0"을 원하는 색상으로 바꿀 수 있습니다. 어디까지나 상상이 허락하는 한계 안에서입니다!

Streamlit에서의 폰트 맞춤 설정

폰트는 앱의 생명입니다. 앱을 전문적으로, 재미있게 또는 독특하게 보이게 할 수 있습니다. Streamlit 앱에서 폰트를 맞춤 설정하려면 다음과 같은 코드를 사용할 수 있습니다.

[theme]
font = "Helvetica Neue"

위의 코드는 폰트를 "Helvetica Neue"로 변경합니다. "Helvetica Neue"를 원하는 폰트로 바꿀 수 있습니다. 기억하세요, 폰트는 반드시 Google 폰트여야 합니다.

설정 옵션과 명령행 사용법

Streamlit은 다양한 설정 옵션도 제공합니다. 이러한 옵션을 사용하면 테마에서 레이아웃까지 앱의 다양한 측면을 제어할 수 있습니다. 이러한 옵션들은 명령행을 통해 액세스할 수 있습니다. 예를 들어 테마를 설정하려면 다음 명령어를 사용할 수 있습니다.

streamlit config set [테마]

고급 Streamlit 맞춤 설정: 배경 이미지와 CSS

더 진보적인 차원으로 Streamlit 맞춤 설정을 적용해보고 싶다면, 배경 이미지를 추가하거나 CSS 파일을 사용할 수 있습니다. 어떻게 할 수 있는지 알아봅시다.

배경 이미지 추가하기

Streamlit 앱에 배경 이미지를 추가하려면 다음과 같은 코드를 사용할 수 있습니다.

st.markdown(
    """
    <style>
    .reportview-container {
        background: url("https://www.example.com/image.jpg");
    }
   </style>
    """,
    unsafe_allow_html=True
)

위의 코드는 배경 이미지를 앱에 추가합니다. "https://www.example.com/image.jpg"를 (opens in a new tab) 이미지의 URL로 바꿀 수 있습니다.

CSS 파일 사용하기

모든 것을 가장 특별하게 만들고 싶다면, CSS 파일을 사용하여 더 많은 맞춤 설정을 추가할 수 있습니다. 레이아웃을 변경하고 애니메이션을 추가하고 더 많은 기능을 더할 수 있습니다. 다음은 이를 수행하는 방법입니다:

st.markdown(
    """
    <link rel="stylesheet" type="text/css" href="https://www.example.com/style.css">
    """,
    unsafe_allow_html=True
)

위의 코드는 CSS 파일을 앱에 연결합니다. "https://www.example.com/style.css"를 (opens in a new tab) CSS 파일의 URL로 바꿀 수 있습니다.

Streamlit 테마: 깊게 파고들기

기본 사항을 다루었으므로 이제 Streamlit 테마에 대해 더 자세히 알아보겠습니다. 기본 색상에서 일반적인 구성 옵션까지 모두 살펴보고 시각적으로 매력적인 앱을 만들기 위해 조금 더 대조를 추가하는 방법까지 모두 탐구해 볼 것입니다.

기본 색상, 보조 배경 색상 및 텍스트 색상

Streamlit에서는 앱의 기본 색상, 보조 배경 색상 및 텍스트 색상을 변경할 수 있습니다. 이를 통해 브랜드나 개인 스타일과 완벽하게 일치하는 색상 구성표를 만들 수 있습니다. 예를 들어, 기본 색상을 파란색으로, 보조 배경 색상을 흰색으로, 텍스트 색상을 검정색으로 설정하려면 다음 코드를 사용할 수 있습니다:

[theme]
primaryColor = "#0000FF"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F0F0"
textColor = "#000000"

페이지 요소 및 대조 추가

Streamlit은 사이드바, 카드 및 버튼과 같은 다양한 페이지 요소를 사용자 정의할 수 있습니다. 시각적으로 매력적인 앱을 만들기 위해 이러한 요소에 대조를 추가할 수도 있습니다. 예를 들어, 사이드바에 대조를 추가하려면 다음 코드를 사용할 수 있습니다:

[theme]
sidebar = { "backgroundColor": "#FFFFFF", "contrast": 1.2 }

일반적인 구성 옵션

테마 설정 외에도 Streamlit은 일반적인 구성 옵션도 제공합니다. 이 옵션을 통해 서버 포트, 브라우저 및 공유 모드와 같은 앱의 다양한 측면을 제어할 수 있습니다. 이러한 옵션은 .streamlit/config.toml 파일이나 명령 줄을 통해 액세스할 수 있습니다.

Streamlit 앱을 Tableau로 바꿔주는 놀라운 데이터 분석 및 데이터 시각화 도구인 PyGWalker (opens in a new tab)를 들어보셨나요?

(opens in a new tab)

PyGWalker는 Streamlit 앱을 Tableau와 같은 UI로 손쉽게 임베드할 수 있는 Python 라이브러리입니다.

결론

Streamlit 테마는 Streamlit 앱의 외관과 느낌을 사용자 정의할 수 있는 강력한 기능입니다. 테마를 사용하면 배경색을 변경하고 배경 이미지를 추가하며 글꼴을 사용자 정의할 수 있습니다. 숙련된 개발자든 초보자든, Streamlit 테마는 무한한 가능성을 제공합니다. 그러니 거두어 보세요. 창의력을 발휘하고 Streamlit 앱을 완전히 자신의 것으로 만드세요.

FAQ

Streamlit은 강력한 도구이지만 초보자에게는 약간 어려울 수도 있습니다. 그래서 우리는 시작하는 데 도움이 되는 자주 묻는 질문 목록을 준비했습니다.

Streamlit의 테마를 설정하는 방법은 무엇인가요?

Streamlit의 테마를 설정하는 것은 매우 간단합니다. .streamlit/config.toml 파일에 [theme] 섹션을 추가하고 원하는 색상, 폰트 등을 지정하면 됩니다.

Streamlit의 기본 테마는 무엇인가요?

Streamlit의 기본 테마는 흰색 배경과 검은색 텍스트를 가진 라이트 테마입니다. 그러나 .streamlit/config.toml 파일의 [theme] 섹션을 사용하여 다크 테마나 사용자 정의 테마로 쉽게 변경할 수 있습니다.

Streamlit의 단점은 무엇인가요?

Streamlit은 강력한 도구이지만, 몇 가지 단점도 있습니다. 첫째로, 전통적인 웹 개발 프레임워크만큼 유연하지 않습니다. 둘째로, 기본적으로 다중 페이지 앱을 지원하지 않지만, 이를 해결하기 위한 대안이 있습니다. 마지막으로, Streamlit은 간단하고 인터랙티브한 웹 앱을 만드는 데에는 훌륭하지만, 더 복잡한 프로젝트에는 최적의 선택이 아닐 수 있습니다.

Streamlit은 무엇이며 왜 사용되나요?

Streamlit은 Python의 오픈 소스 라이브러리로서, 데이터 중심의 인터랙티브 웹 앱을 빠르고 쉽게 만들 수 있습니다. 데이터 과학자와 개발자들은 HTML, CSS 또는 JavaScript와 같은 프론트엔드 언어를 배우지 않고도 작업을 공유하고 데이터를 시각화하며 인터랙티브한 도구를 구축하는 데에 사용합니다.