기초를 넘어서: Streamlit 버튼 완전 가이드
- Name
- Olaf Källström
Updated on
Streamlit은 데이터 애플리케이션을 구축하는 방식을 혁신했습니다. 이 저문 코드 방식을 통해 데이터 과학자와 개발자가 상호 작용 가능한 사용자 친화적인 애플리케이션을 쉽게 만들 수 있게 되었습니다. Streamlit에서 상호 작용성을 제공하는 핵심 요소 중 하나인 버튼에 대해 깊이 알아보겠습니다. 이 가이드에서는 Streamlit의 st.button을 탐색하며 사용법, 스타일링 옵션 및 이벤트 기능을 다룰 것입니다. 초보자와 숙련된 개발자를 위한 실제 예제도 제공됩니다.
Streamlit 앱을 Tableau로 변환시켜주는 훌륭한 데이터 분석 및 데이터 시각화 도구를 들어보셨나요?
PyGWalker (opens in a new tab)는 Streamlit 앱을 쉽게 Tableau와 같은 UI로 변환시켜주는 Python 라이브러리입니다. Coding is Fun (opens in a new tab)의 스벤이 제작한 이 놀라운 비디오에서 그 세부 단계를 확인해보세요. 또한 이 강력한 데이터 시각화 Python 라이브러리를 Streamlit 앱에 적용하는 방법도 알려드립니다!
PyGWalker 커뮤니티에 큰 기여를 한 스벤과 그의 훌륭한 기여 (opens in a new tab)에 특별한 감사를 표합니다!
또한 PyGWalker GitHub 페이지 (opens in a new tab)에서 더 많은 PyGWalker 예제를 확인할 수도 있습니다.
Streamlit에서 st.button의 이해
Streamlit에서 st.button이란 무엇인가요?
Streamlit에서 st.button은 버튼 위젯을 생성하는 함수입니다. 이 간단하면서도 강력한 도구를 사용하여 Streamlit 애플리케이션에 상호 작용성을 추가할 수 있습니다. 사용자가 버튼을 클릭하면 이벤트가 트리거되며, 이를 통해 특정 동작을 수행하거나 애플리케이션의 상태를 업데이트할 수 있습니다.
if st.button('Say Hello'):
st.write('Hello, Streamlit!')위의 예시에서 'Say Hello' 버튼이 클릭되면 화면에 'Hello, Streamlit!'라는 텍스트가 표시됩니다.
Streamlit에서 st.button 사용하는 방법
Streamlit에서 st.button을 사용하는 것은 간단합니다. 이 함수는 하나의 필수 매개변수인 버튼의 레이블을 문자열로 받습니다. 또한 버튼의 동작 및 모양을 사용자 정의하는 데 사용할 수 있는 여러 가지 선택적 인수를 받습니다. 다음은 이러한 인수 중 일부를 살펴보겠습니다:
key: 버튼의 고유한 식별자. 여러 개의 버튼이 있는 경우 구분하려고 할 때 유용합니다.help: 버튼에 마우스를 올렸을 때 툴팁으로 표시될 문자열입니다.
if st.button('Click Me', key='my_button', help='Click this button to perform an action'):
st.write('You clicked the button!')Streamlit 버튼의 인수 및 스타일링 옵션 탐색
Streamlit의 st.button 함수는 버튼의 모양과 동작을 사용자 정의할 수 있는 여러 가지 인수를 제공합니다. 그러나 글을 쓰는 시점에서 Streamlit은 st.button 함수를 통해 버튼의 색상과 크기를 직접 변경하는 것을 지원하지 않습니다.
CSS로 Streamlit 버튼 스타일링하기
Streamlit은 버튼 스타일링을 위한 내장 옵션을 제공하지 않지만, CSS를 사용하여 버튼을 사용자 정의할 수 있습니다. st.markdown 함수를 사용하여 Streamlit 앱에 사용자 정의 CSS를 주입할 수 있습니다. 이 때 unsafe_allow_html=True 인수를 사용해야 합니다. 다음은 예시입니다:
st.markdown("""
<style>
.custom-button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.custom-button:hover {
opacity: 0.8;
}
</style>
<button class="custom-button">Custom Button</button>
""", unsafe_allow_html=True)위 예시에서는 녹색 배경, 흰색 텍스트 및 일부 Padding이 있는 사용자 정의 버튼을 만들었습니다. 마우스를 버튼 위에 올리면 버튼의 투명도가 낮아지는 hover 효과도 추가했습니다.
Streamlit의 on_clickButton 이벤트
Streamlit에서 버튼이 클릭되면 on_click 이벤트가 트리거됩니다. 이 이벤트를 사용하여 특정 동작을 수행하거나 애플리케이션의 상태를 업데이트할 수 있습니다. 예를 들어 데이터를 새로 고칠 수 있고, 콘텐츠를 표시하거나 숨길 수 있으며, 계산을 수행할 수 있습니다.
다음은 on_click 이벤트를 Streamlit에서 사용하는 예시입니다:
def say_hello():
st.write('Hello, Streamlit!')
button = st.button('Say Hello')
button.on_click(say_hello)위 예시에서 'Say Hello' 버튼을 클릭하면 'Hello, Streamlit!'을 화면에 출력하는 say_hello 함수가 호출됩니다.
Streamlit 버튼의 실제 예제
Streamlit의 st.button은 이론적인 개념뿐만 아니라 실제 도구로서도 사용할 수 있습니다. 효과적으로 사용하는 방법을 보여주는 몇 가지 예제를 살펴보겠습니다.
초보자를 위한 Streamlit 버튼 예제
Streamlit에 처음 접하는 경우, 시작하기 위한 간단한 예제입니다. 이 코드는 버튼을 클릭하면 메시지를 표시합니다:
if st.button('Click me'):
st.write('You clicked the button!')위 예시에서 st.button('Click me')는 'Click me'라는 레이블을 가진 버튼을 생성합니다. 이 버튼이 클릭되면 st.write('You clicked the button!')가 실행되며, 화면에 'You clicked the button!'라는 메시지가 표시됩니다.
Streamlit 버튼의 고급 사용법
고급 사용자의 경우, 애플리케이션의 흐름을 제어하기 위해 버튼을 사용할 수 있습니다. 예를 들어, 클릭할 때 데이터를 로드하는 버튼을 만들 수 있습니다:
if st.button('데이터 로드'):
data = load_data()
st.write(data)이 예제에서 '데이터 로드' 버튼을 클릭하면 load_data 함수를 호출하고 반환된 데이터를 화면에 표시합니다.
결론
Streamlit의 st.button은 대화형 사용자 친화적인 애플리케이션을 만들기 위한 강력한 도구입니다. Streamlit로 시작하는 초보자인지 또는 애플리케이션에 더 많은 상호 작용성을 추가하려는 경험 많은 개발자인지에 관계없이, 버튼의 사용과 스타일링 방법을 이해하는 것은 필수적입니다. 버튼 동작과 외관을 사용자 정의할 수 있으며, 클릭 이벤트를 처리할 수 있으므로 Streamlit 애플리케이션에서 다양한 상호 작용 기능을 만들 수 있습니다. 그러면 지금 st.button을 사용하여 실험해보고 어떤 것을 만들 수 있는지 확인해보세요!
Streamlit 앱을 Tableau로 전환해주는 멋진 데이터 분석 및 데이터 시각화 도구인 PyGWalker를 들어보셨나요?
PyGWalker (opens in a new tab)는 Streamlit 앱을 손쉽게 Tableau와 유사한 UI로 임베드할 수 있는 파이썬 라이브러리입니다.
자주 묻는 질문
Streamlit에서 버튼을 만드는 방법은 무엇인가요?
Streamlit에서는 st.button 함수를 사용하여 버튼을 만들 수 있습니다. 이 함수는 버튼의 라벨인 하나의 필수 인수를 받습니다.
Streamlit에서 버튼을 위치시키는 방법은 무엇인가요?
작성 시점에서 Streamlit은 버튼을 포함한 요소의 위치 지정을 위한 내장 지원을 제공하지 않습니다. Streamlit 앱의 레이아웃은 주로 스크립트에 요소를 추가하는 순서로 결정됩니다. 그러나 마크다운과 HTML을 CSS와 함께 사용하여 사용자 정의 레이아웃을 만들 수 있습니다.
Streamlit에서 라디오 버튼을 만드는 방법은 무엇인가요?
Streamlit에서는 st.radio 함수를 사용하여 라디오 버튼 그룹을 만들 수 있습니다. 이 함수는 라디오 버튼 그룹의 라벨과 옵션 목록 두 가지 인수를 받습니다.
Streamlit의 단점은 무엇인가요?
Streamlit은 데이터 애플리케이션을 만들기 위한 강력한 도구이지만 몇 가지 제한 사항이 있습니다. 예를 들어, 작성 시점에서 복잡한 레이아웃과 요소의 스타일을 만들기 위한 내장 지원이 부족합니다. 또한 Streamlit 앱은 상태를 유지하지 않도록 설계되었기 때문에 상태 관리(사용자 입력 또는 변수 값과 같은)는 어려울 수 있습니다. 그러나 Streamlit은 적극적으로 개발 및 유지 관리되고 있으며, 새로운 기능과 개선사항이 정기적으로 추가됩니다.