본문 바로가기
Streamlit Wep App

Streamlit: Python으로 간편하게 웹 애플리케이션 만들기

by ssury94 2025. 2. 2.
 
 
 

 

 

데이터 분석이나 머신러닝 모델을 웹 애플리케이션으로 배포하고 싶지만, 복잡한 웹 개발 과정이 부담스럽다면?

Streamlit이 정답일 수 있습니다.

 

Python 코드만으로 대화형 웹 애플리케이션을 손쉽게 제작할 수 있는 오픈소스 프레임워크인 Streamlit을 소개합니다.

 

 

Streamlit이란?

Streamlit은 Python을 활용하여 쉽고 빠르게 데이터 대시보드 및 웹 애플리케이션을 제작할 수 있도록 도와주는 라이브러리입니다. Flask나 Django처럼 백엔드 개발을 직접 하지 않아도 되며, HTML, CSS, JavaScript 없이도 직관적인 UI를 만들 수 있습니다.

 

 

 

Streamlit • A faster way to build and share data apps

Streamlit is an open-source Python framework for data scientists and AI/ML engineers to deliver interactive data apps – in only a few lines of code.

streamlit.io

 

 

Visual Studio Code(비주얼 스튜디오 코드) 설치하기

Streamlit을 활용하려면 코드 편집기가 필요합니다. 가장 많이 사용되는 **Visual Studio Code(VS Code)**를 설치하는 방법을 알아보겠습니다.

1. VS Code 다운로드 및 설치

  1. VS Code 공식 웹사이트에 접속합니다.
  2. 운영체제에 맞는 설치 파일(Windows, Mac, Linux)을 다운로드합니다.
  3. 다운로드한 파일을 실행하여 설치 과정을 완료합니다.

2. Python 확장팩 설치

  1. VS Code를 실행합니다.
  2. 좌측 확장 탭(단축키: Ctrl + Shift + X)을 클릭합니다.
  3. 검색창에 Python을 입력하고, Microsoft에서 제공하는 Python Extension을 설치합니다.

3. 가상 환경 설정

Streamlit 프로젝트를 위한 가상 환경을 설정하면 프로젝트별 의존성을 관리하기 쉬워집니다.

 

 

Streamlit 설치 및 기본 사용법

1. Streamlit 설치하기

터미널(또는 VS Code의 터미널 Ctrl + ~)에서 다음 명령어를 실행하여 Streamlit을 설치합니다.

pip install streamlit

2. 기본 웹 애플리케이션 만들기

아래와 같이 app.py 파일을 생성하고 간단한 코드만 작성해도 Streamlit 애플리케이션을 실행할 수 있습니다.

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

def main():
    pass # 현재는 pass만 있어서 아무 동작도 하지 않음

if __name__ == '__main__':
    main()

3. 실행 방법

터미널에서 다음 명령어를 실행하면 Streamlit 애플리케이션이 자동으로 실행됩니다.

streamlit run app.py

브라우저에서 http://localhost:8501로 접속하면 생성된 웹 애플리케이션을 확인할 수 있습니다.

 

GitHub와 VS Code 연동하기

Streamlit 프로젝트를 GitHub에 업로드하면 코드 관리가 더욱 편리해집니다. GitHub과 VS Code를 연동하는 방법을 알아보겠습니다.

1. Git 설치하기

  1. Git 공식 웹사이트에서 운영체제에 맞는 Git을 다운로드 후 설치합니다.
  2. 설치가 완료되면 터미널에서 다음 명령어로 Git이 정상적으로 설치되었는지 확인합니다.
git --version

2. GitHub 계정 생성 및 저장소 만들기

  1. GitHub에 접속하여 계정을 생성합니다.
  2. GitHub에서 새 저장소(Repository)를 생성합니다.
  3. 저장소 URL을 복사합니다.

3. GitHub와 VS Code 연동하기

GitHub에서 새 저장소를 만들 때 **"Add .gitignore template: Python"**을 선택하면, Python 프로젝트에서 불필요한 파일을 자동으로 제외하도록 설정합니다.

 

 

 

 

Streamlit의 다양한 기능들

📌 텍스트 및 데이터 출력

# 스트림릿 라이브러리를 사용하기 위한 임포트
import streamlit as st

# 스트림릿 앱을 실행하기 위한 기본 틀!
def main():
    # st의 함수들은 웹 화면에 표시하는 함수들이다.
    st.title('Hello, Streamlit!') # 큰 제목을 출력하는 함수
    st.subheader('This is a subtitle') # 작은 제목을 출력하는 함수
    st.text('Hello Streamlit!') # 텍스트를 출력하는 함수
    st.success('Successful!') # 무엇인가 성공했음을 메시지를 출력하는 함수
    st.info('Information!') # 정보를 출력하는 함수
    st.warning('This is a warning') # 경고를 출력하는 함수
    st.error('This is an error!') # 에러를 출력하는 함수

    name='홍길동'
    
    print(f'제 이름은 {name}입니다.')
    #print는 터미널에 출력하는 함수이다. 디버깅용

    st.write(f'제 이름은 {name}입니다.')
    st.text(f'제 이름은 {name}입니다.')

if __name__ == '__main__':
    main() # main 함수를 실행하겠다.

    # 스트림릿 앱을 실행하는 방법
    # 터미널에 $ streamlit run app.py 입력

 

print()는 터미널로 출력된다.
streamlit은 웹 애플리케이션으로 확인할 수 있다.

 

 

🎛 입력 위젯 추가

def main():
    df= pd.read_csv('data/iris.csv')
    #유저가 버튼을 누르면, 데이터 프레임을 웹화면에 보여준다.
    if st.button('데이터 보기'):
        st.dataframe(df)
    #조건문 (버튼을 누르면 True가 되어 데이터 프레임을 보여준다.)

    #'대문자'버튼을 만들고,
    #유저가 버튼을 누르면, species컬럼을 대문자로 바꿔서 아래에 보여준다.
    if st.button('대문자'):
        st.dataframe(df['species'].str.upper())

    #라디오 버튼: 여러개 중 하나를 선택할 수 있는 버튼
    st.radio('가장 좋아하는 꽃은?', df['species'].unique())

    #라디오 버튼을 만들되, petal_length컬럼을 오름차순정렬 내림차순정렬을 선택할 수 있게 한다.
    my_choice=st.radio('petal_length컬럼 정렬 방식을 선택하세요.',['오름차순','내림차순'])
    #my_choice에는 유저가 선택한 값이 저장된다.
    if my_choice=='오름차순':
        st.dataframe(df.sort_values('petal_length'))
    else:
        st.dataframe(df.sort_values('petal_length',ascending=False))
        
        
    name = st.text_input("이름을 입력하세요")
    #텍스트를 입력할 수 있는 상자를 만들어준다.
    
    age = st.number_input("나이를 입력하세요", min_value=0, max_value=100, step=1)
    #숫자를 입력할 수 있는 상자를 만들어준다.
    
    agree = st.checkbox("동의하시겠습니까?")
    #체크박스를 만들어준다.
    
    option = st.selectbox("옵션을 선택하세요", ["옵션 1", "옵션 2", "옵션 3"])
    #옵션을 선택할 수 있는 상자를 만들어준다.
    
    multiselect = st.multiselect("여러 개 선택 가능", ["A", "B", "C"])
    #여러 개 선택할 수 있는 상자를 만들어준다.
    
    slider = st.slider("값을 선택하세요", min_value=0, max_value=100)
    #슬라이더를 만들어준다.

if __name__ == '__main__':
    main()

 

 

📊 데이터 출력

   #판다스 데이터 프레임 읽어와서 웹화면에 표시
    st.title('Iris 데이터 분석')
    df = pd.read_csv('data/iris.csv')
    st.dataframe(df)

    st.subheader('Iris pecies')
    #species 컬럼의 유니크한 값들을 출력
    st.dataframe(df['species'].unique())
    st.subheader('전체 데이터의 수')
    st.info(f'전체 데이터 개수는 {df.shape[0]}개 입니다.')

 

 

🌅 이미지, 동영상, 음악파일 가져오기

    #1. 저장되어 있는 이미지파일 화면에 표시
    img=Image.open('./data/image_03.jpg')
    # . 현재 경로에서 data폴더에 있는 image_03.jpg파일을 가져와라
    st.image(img)
    #이미지 파일을 웹에 업로드

    #너비 조절
    st.image(img,width=400)
        #컬럼 전체 너비에 맞게 이미지 크기 조절
    st.image(img,use_container_width=True)

    #2. 웹 상 이미지를 가져오기
    url='https://img.hankyung.com/photo/202403/AA.36104679.1.jpg'
    st.image(url,width=300)

    #3. 동영상 파일 표시
    video_file=open('./data/video1.mp4','rb')
    #'rb' : read binary, 'rt' : read text 동영상은 바이너리 파일이므로 rb로 읽어야 한다.
    st.video(video_file)
    #동영상 파일을 웹에 업로드

    #4. 음악 파일 표시
    sound_file=open('./data/song.mp3','rb')
    #'rb' : read binary 음악 파일도 바이너리 파일이므로 rb로 읽어야 한다.
    st.audio(sound_file,format='audio/mp3')

 

 

 

Streamlit이 적합한 경우와 그렇지 않은 경우

✅ Streamlit이 적합한 경우

  • 데이터 분석 및 머신러닝 모델을 웹 애플리케이션으로 배포하고 싶을 때
  • 빠르게 대시보드 및 데이터 시각화를 구현하고 싶을 때
  • 프론트엔드 개발 없이 손쉽게 웹 인터페이스를 구축하고 싶을 때
  • 팀원들과 데이터 분석 결과를 쉽게 공유하고 싶을 때

❌ Streamlit이 적합하지 않은 경우

  • 사용자 인증 및 복잡한 권한 관리가 필요한 경우 (Flask, Django 추천)
  • 대규모 트래픽을 감당해야 하는 경우 (FastAPI, Flask 추천)
  • 커스텀 UI/UX 디자인이 중요한 프로젝트 (React, Vue.js 추천)

 

 

 

마무리

Streamlit을 활용하면 복잡한 웹 개발 과정 없이도 데이터 중심의 웹 애플리케이션을 손쉽게 만들 수 있습니다.

또한 Visual Studio Code와 함께 사용하면 개발 환경을 더욱 효율적으로 구성할 수 있습니다.

데이터 분석 결과를 시각적으로 공유하고 싶은 분들이라면, 지금 바로 Streamlit과 VS Code를 활용해 보세요! 🚀

관련글

티스토리툴바