Skip to main content

스트림릿(Streamlit) 사용법 1단계 - 설치부터 기본 개념까지

· 17 min read
코딩추월차선

간단한 AI 챗봇이나 데이터 기반의 웹서비스 만들고 싶으신가요? 웹 개발은 어렵게 느껴지시나요? 이제 파이썬만 알아도 간단한 AI 챗봇이나 인터랙티브한 데이터 웹 서비스를 쉽고 빠르게 만들 수 있습니다!

이 글에서는 Streamlit이 무엇인지 부터 설치와 기본 사용법까지 핵심 기능을 살펴보겠습니다. 개발 환경 세팅부터 데이터 시각화, 사용자와의 인터랙션까지 한 번에 배워보세요. 파이썬에 익숙하다면 금세 멋진 앱을 만들 수 있습니다. 시작해볼까요?

Streamlit이란?​

Streamlit은 파이썬을 사용하여 데이터 앱을 쉽고 빠르게 만들 수 있도록 도와주는 오픈소스 프레임워크입니다. 데이터 과학자나 머신러닝 엔지니어가 최소한의 웹 개발 지식만으로도 웹 애플리케이션을 만들 수 있도록 설계되었습니다. 데이터와 모델을 웹 상에서 아름답고 인터랙티브하게 시각화할 수 있는 다양한 기능을 제공합니다. 또한 개발 과정에서 라이브 코딩이 가능하기 때문에, 코드를 수정할 때마다 앱이 실시간으로 업데이트되어 생산성을 높일 수 있습니다.

Streamlit 설치​

Windows에서 설치하기​

  1. 먼저 파이썬 개발 환경을 세팅합니다.
  2. 터미널에서 다음 명령어를 실행하여 Streamlit을 설치합니다:
pip install streamlit
  1. 설치가 잘 되었는지 확인하기 위해 hello 앱을 실행해 봅니다:
streamlit hello

MacOS와 Linux에서 설치하기​

macOS와 Linux에서도 설치 과정은 동일합니다. 터미널에서 위와 동일한 pip 명령어를 사용하여 설치하면 됩니다.

도커와 GitHub Codespaces 활용하기​

도커나 GitHub Codespaces를 사용하면 별도의 설치 과정 없이 바로 개발을 시작할 수 있습니다. 브라우저 상에서 코딩이 가능하기 때문에 환경 설정에 시간을 쓰지 않고 앱 개발에 집중할 수 있습니다.

Streamlit 사용법​

앱 실행하기​

앱을 만들려면 일반적인 파이썬 스크립트에 Streamlit 명령어를 추가한 뒤, streamlit run 을 사용하여 실행하면 됩니다:

streamlit run your_script.py [-- script args]

위 명령어를 실행하면 로컬 서버가 실행되고, 기본 웹 브라우저에서 새 탭으로 앱이 열립니다. 이제 이 캔버스에 차트, 텍스트, 위젯, 테이블 등을 그려나가면서 앱을 만들 수 있습니다.

앱 개발 흐름 이해하기​

앱을 개발할 때는 다음과 같은 반복적인 개발 흐름을 따르게 됩니다:

  1. 코드 작성
  2. 앱 실행
  3. 웹 화면에서 결과 확인
  4. 다시 코드 수정
  5. 앱 재실행
  6. 만족할 때까지 이 과정을 반복 소스 코드를 수정할 때마다 변경사항을 감지하고 앱을 다시 실행할지 물어봅니다. "Always rerun" 옵션을 선택하면 코드가 수정될 때마다 앱이 자동으로 업데이트됩니다. 이렇게 코딩과 결과 확인 사이의 간격이 거의 없기 때문에 매우 빠른 개발 사이클을 경험할 수 있습니다. 이는 개발 생산성을 높이는 핵심 기능 중 하나입니다.

데이터 흐름 이해하기​

앱은 독특한 데이터 흐름을 가지고 있습니다. 화면에 무언가 업데이트되어야 할 때마다, 파이썬 스크립트 전체를 위에서 아래로 다시 실행합니다.

  • 앱의 소스 코드가 수정될 때
  • 사용자가 위젯과 상호작용할 때 (예: 슬라이더 조정, 입력 박스에 텍스트 입력, 버튼 클릭 등) 이 모든 것을 빠르고 매끄럽게 만들기 위해 보이지 않는 곳에서 많은 작업을 수행합니다. 특히 @st.cache_data 데코레이터를 사용하면 앱이 다시 실행될 때 불필요한 연산을 건너뛸 수 있어 효율성을 높일 수 있습니다.

데이터 표시 및 스타일링​

Magic commands와 st.write() 사용하기​

st.write() 명령어는 어떤 객체든 간편하게 화면에 출력해줍니다. 텍스트, 숫자, 데이터프레임, 차트 등 무엇이든 괜찮아요. 심지어 변수 하나를 그냥 코드에 넣어두기만 해도 알아서 출력해주는 마법 같은 기능도 있죠.

import streamlit as st
import pandas as pd
st.write("Hello, world!")
my_value = 42
my_value
df = pd.DataFrame({'col1': [1,2,3], 'col2': [4,5,6]})
df

데이터프레임 표시 및 스타일링​

데이터프레임을 좀 더 예쁘게 출력하고 싶다면 st.dataframe()을 사용해보세요. 컬럼 이름을 클릭해서 정렬도 할 수 있고, 각 컬럼의 데이터 타입에 맞는 필터링 기능도 제공됩니다.

import streamlit as st
import pandas as pd
df = pd.DataFrame(
 np.random.randn(10, 4),
columns=('col %d' % i for i in range(4)))
st.dataframe(df)

파란색 하이라이트로 최댓값을 강조하는 건 어떨까요? Pandas의 스타일링 기능을 활용하면 됩니다.

import streamlit as st
import pandas as pd
df = pd.DataFrame(
 np.random.randn(10, 4),
columns=('col %d' % i for i in range(4)))
st.dataframe(df.style.highlight_max(axis=0))

차트 그리기: 라인 차트​

라인 차트를 그리는 것도 정말 쉽습니다. st.line_chart()에 데이터프레임을 넘기기만 하면 끝!

import streamlit as st
import pandas as pd
import numpy as np
chart_data = pd.DataFrame(
 np.random.randn(20, 3),
columns=['a', 'b', 'c'])
st.line_chart(chart_data)

지도 그리기​

st.map()으로는 지도에 데이터 포인트를 찍어볼 수 있습니다. 경도, 위도 컬럼을 가진 데이터프레임을 전달하면 해당 좌표에 마커가 표시됩니다.

import streamlit as st
import pandas as pd
import numpy as np
map_data = pd.DataFrame(
 np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
columns=['lat', 'lon'])
st.map(map_data)

위젯​

슬라이더, 버튼, 셀렉트박스 등 위젯 사용하기​

위젯들은 마치 변수처럼 다룰 수 있어서 너무 간편합니다. 예를 들어 슬라이더로 숫자를 조정하고 그 값을 변수에 할당한 뒤, 버튼을 누르면 연산 결과를 출력하는 식으로 사용할 수 있죠.

import streamlit as st
x = st.slider('값을 선택하세요')
st.write(x, '의 제곱은', x * x, '입니다.')
if st.button('버튼을 클릭하세요'):
 st.write('버튼을 클릭했습니다!')

체크박스로 데이터 표시/숨기기​

체크박스를 활용하면 특정 데이터나 차트를 토글형식으로 표시할 수 있습니다. 체크박스 상태에 따라 분기하는 조건문을 사용해보세요.

import streamlit as st
import pandas as pd
import numpy as np
if st.checkbox('데이터프레임 보기'):
 chart_data = pd.DataFrame(
 np.random.randn(20, 3),
columns=['a', 'b', 'c'])
 chart_data

셀렉트박스로 옵션 선택하기​

셀렉트박스를 사용하면 여러 옵션 중 하나를 선택할 수 있는 드롭다운 메뉴를 만들 수 있습니다. 옵션 리스트를 직접 입력하거나 데이터프레임의 컬럼을 넘겨서 동적으로 생성할 수도 있어요.

import streamlit as st
import pandas as pd
df = pd.DataFrame({
'첫 번째 열': [1, 2, 3, 4],
'두 번째 열': [10, 20, 30, 40]
 })
option = st.selectbox(
'가장 마음에 드는 숫자를 선택하세요.',
  df['첫 번째 열'])
'선택하신 숫자는: ', option

레이아웃​

사이드바에 위젯 배치하기​

st.sidebar를 사용하면 화면 왼쪽에 사이드바를 만들고 그 안에 위젯을 배치할 수 있습니다. 메인 컨텐츠와 UI를 분리해서 사용자가 앱을 더 편하게 사용할 수 있도록 도와줍니다.

import streamlit as st
st.sidebar.header('사이드바입니다')
option = st.sidebar.selectbox(
'가장 마음에 드는 숫자를 선택하세요.',
 df['첫 번째 열'])

컬럼 나누기​

st.beta_columns()를 사용하면 화면을 여러 개의 컬럼으로 나눌 수 있습니다. 각 컬럼은 독립적인 레이아웃이 되어서, 위젯을 옆으로 늘어놓는데 유용하죠.

import streamlit as st
col1, col2, col3 = st.beta_columns(3)
with col1:
  st.header("고양이")
  st.image("https://www.developerfastlane.com/img/blog/streamlit/cat.webp", use_column_width=True)
with col2:
  st.header("강아지")
  st.image("https://www.developerfastlane.com/img/blog/streamlit/dog.webp", use_column_width=True)
with col3:
  st.header("부엉이")
  st.image("https://www.developerfastlane.com/img/blog/streamlit/owl.webp", use_column_width=True)

긴 내용 접기/펼치기​

앱 화면의 공간이 부족할 때는 st.beta_expander()로 컨텐츠를 접어둘 수 있습니다. 헤더 텍스트를 클릭하면 아코디언처럼 펼쳐지고 접히는 형태로 동작해요.

import streamlit as st

st.line_chart({"data": [1, 5, 2, 6, 2, 1]})
with st.beta_expander("설명 보기"):
  st.write("""
위 차트는 제가 여러분을 위해 골라낸 몇 가지 숫자를 보여줍니다.
이 숫자들은 실제 주사위를 굴려서 얻은 것이므로, *랜덤함이 보장됩니다*.
""")
  st.image("https://www.developerfastlane.com/img/blog/streamlit/dice.webp")

진행상황 표시​

st.progress()로 실시간 진행상황 보여주기​

데이터를 로딩하거나 머신러닝 모델을 학습하는 등 시간이 오래 걸리는 작업을 수행할 때는 st.progress()로 진행률을 표시할 수 있습니다. 사용자 입장에서는 앱이 멈춘 건지 돌아가는 건지 알 수 없으니까요. 진행률 정보를 공유하는 게 좋습니다.

import streamlit as st
import time
'긴 계산을 시작합니다...'
latest_iteration = st.empty()
bar = st.progress(0)
for i in range(100):
  latest_iteration.text(f'반복 {i+1}')
  bar.progress(i + 1)
  time.sleep(0.1)
'...이제 끝났습니다!'

지금 까지 배운 내용을 활용한 예시​

아래는 한글로 번역된 코드의 전체 예시입니다. 이 코드는 슬라이더로 값을 선택하고, 체크박스로 데이터 프레임을 표시/숨기기, 셀렉트박스로 옵션을 선택하고, 사이드바에 위젯을 배치하며, 화면을 컬럼으로 나누고, 긴 내용을 접어두거나 펼치며, 실시간 진행 상황을 보여주는 기능을 포함합니다.

import streamlit as st
import pandas as pd
import numpy as np
import time

# 슬라이더로 값 선택
x = st.slider('값을 선택하세요')
st.write(x, '의 제곱은', x * x, '입니다.')
if st.button('나를 클릭하세요'):
  st.write('버튼을 클릭했습니다!')

# 체크박스로 데이터 프레임 표시/숨기기
if st.checkbox('데이터프레임 보기'):
  chart_data = pd.DataFrame(
  np.random.randn(20, 3),
columns=['a', 'b', 'c'])
  st.dataframe(chart_data)

# 셀렉트박스로 옵션 선택
df = pd.DataFrame({
'첫 번째 열': [1, 2, 3, 4],
'두 번째 열': [10, 20, 30, 40]
})
option = st.selectbox(
'가장 마음에 드는 숫자를 선택하세요.',
  df['첫 번째 열'])
st.write('선택하신 숫자는: ', option)

# 사이드바에 위젯 배치
st.sidebar.header('사이드바입니다')
option_sidebar = st.sidebar.selectbox(
'사이드바에서 숫자를 선택하세요.',
  df['첫 번째 열'])
st.sidebar.write('선택하신 숫자는: ', option_sidebar)

# 컬럼 나누기
col1, col2, col3 = st.columns(3)
with col1:
  st.header("고양이")
  st.image("https://www.developerfastlane.com/img/blog/streamlit/cat.webp", use_column_width=True)
with col2:
  st.header("강아지")
  st.image("https://www.developerfastlane.com/img/blog/streamlit/dog.webp", use_column_width=True)
with col3:
  st.header("부엉이")
  st.image("https://www.developerfastlane.com/img/blog/streamlit/owl.webp", use_column_width=True)

# 긴 내용 접기/펼치기
with st.expander("설명 보기"):
  st.write("""
위 차트는 제가 여러분을 위해 골라낸 몇 가지 숫자를 보여줍니다.
이 숫자들은 실제 주사위를 굴려서 얻은 것이므로, *랜덤함이 보장됩니다*.
""")
  st.image("https://www.developerfastlane.com/img/blog/streamlit/dice.webp")

# 진행상황 표시
'오래 걸리는 계산을 진행중입니다....'
latest_iteration = st.empty()
bar = st.progress(0)
for i in range(100):
  latest_iteration.text(f'반복 {i+1}')
  bar.progress(i + 1)
  time.sleep(0.1)
'...이제 끝났습니다!'

이렇게 작성한 코드를 실행 하면 아래와 같은 화면이 나타납니다.

Streamlit 데모 예시

지금까지 주요 기능을 간략히 살펴보았습니다. 설치 방법부터 데이터 표시, 차트 그리기, 위젯 사용법, 레이아웃 구성까지 한 번 훑어보는 튜토리얼이었는데요. 이 글에서 소개한 내용들은 데이터 앱 개발을 시작하는데 필요한 기본적인 개념들입니다. 실제로 앱을 만들어보면서 각 요소들을 자유자재로 활용할 수 있게 되려면, 더 많은 실습과 경험이 필요할 것입니다. 모든 명령어와 옵션, 베스트 프랙티스 등을 숙지한다면 더욱 강력하고 인터랙티브한 앱을 만들 수 있겠죠. 공식 문서와 커뮤니티의 예제 갤러리 등을 참고해가면서 마스터로 성장해보시기 바랍니다! 공식 웹사이트의 내용을 기반으로 작성 되었으며 블로그 및 커뮤니티에는 개발에 필요한 다양한 팁과 정보들이 공유 되고 있습니다.