Python Streamlit (1)

김소은·2025년 5월 28일

Streamlit과 Gradio 차이 비교
Streamlit 개발환경
Streamlit 기본문법
Streamlit Gitpod에 올리기
Streamlit 컴포넌트
Streamlit 레이아웃 및 폼

1. Streamlit과 Gradio 차이 비교

항목	Streamlit	Gradio
주요 목적	데이터 분석, 웹 대시보드 제작	머신러닝 모델 데모 배포
구조	파이썬 스크립트 기반	함수 기반 인터페이스 제공
인터랙션	복잡한 UI 구성 가능	단순한 입출력 위주 구성
배포	Streamlit Cloud, Gitpod 등	Hugging Face Spaces 중심
사용자 정의	자유로운 레이아웃 구성, HTML/CSS 사용 가능	제한적 구성

✅ Streamlit은 데이터 시각화 및 앱 UI 구성에 강하고, Gradio는 ML 모델 배포에 특화되어 있습니다.

2. Streamlit 개발환경

설치 및 실행

# conda 가상환경 설정 및 활성화
conda create -n python39 python=3.9
conda activate python39

# Streamlit 설치
pip install streamlit

# 앱 실행
streamlit hello	# 데모 앱 실행
streamlit run streamlit_app.py	# 사용자 작성 앱 실행

필수 디렉토리 구조 (예시)

📁 Streamlit/
  ├── streamlit_app.py
  ├── requirements.txt
  └── .streamlit/
      └── config.toml

3. Streamlit 기본 문법

예제 코드 (1~5일차 요약)

streamlit_app.py :

import streamlit as st

st.title("Streamlit 웹앱")
st.header("사용자 입력")
name = st.text_input("이름을 입력하세요")
age = st.slider("나이", 0, 120, 25)

if st.button("확인"):
    st.success(f"{name}님은 {age}세입니다.")
    st.button("에러 버튼")
else:
    st.error('에러 버튼입니다!')

st.write() : 일반 텍스트, 객체 출력
st.button() : 클릭 이벤트 처리
st.slider(), st.text_input() : 입력 요소 구현
st.success(), st.error() : 메시지 출력

4. Streamlit Gitpod에 올리기

1) GitHub에 코드 업로드 (Terminal)

 # 0. Git 저장소 초기화 및 사용자 설정 (처음 한 번만)
git init
git config --global user.name "이름"
git config --global user.email "email@example.com"

# 1. 원격 저장소 연결 (처음 한 번만, 연결 안 되어 있을 경우에만 실행)
git remote add origin https://github.com/username/repo.git

# 2. .gitignore 작성 (캐시, 가상환경 등 제외할 항목 등록)
echo -e "__pycache__/\nvenv/\n*.pyc" > .gitignore

# 3. 원격 저장소와 충돌 방지를 위해 먼저 pull
git pull origin main --allow-unrelated-histories

# 4. 로컬 변경 파일 추가 및 커밋
git add .
git commit -m "처음 올린 Streamlit 앱"

# 5. 로컬 main 브랜치로 설정하고 푸시
git branch -M main
git push -u origin main

✅ 1. -M vs -m의 차이?

-m (소문자):

기존 브랜치 이름을 다른 이름으로 변경할 때 사용.

만약 새 이름의 브랜치가 이미 존재하면 에러 발생.
 git branch -m oldname newname
-M (대문자):

위와 동일한 작업이지만, 기존 브랜치가 이미 존재해도 강제로 덮어쓰기.
 git branch -M oldname newname
🔁 요약:

-m: 덮어쓰기 금지 (안전)

-M: 강제 변경 (주의)

✅ 2. upstream이란?

upstream은 로컬 브랜치가 연결된 원격 브랜치를 말합니다.

예: 내 로컬 브랜치 main이 원격의 origin/main과 연결되어 있다면,
→ 이때 origin/main이 upstream 브랜치입니다.

💡 Git은 pull, push, fetch 같은 동작을 수행할 때 이 upstream 정보를 기준으로 동작합니다.

✅ 3. -u 옵션의 효과 (자동 연결)

명령어:
 git push -u origin main
이 뜻은:

로컬의 main 브랜치를,

원격 저장소 origin의 main 브랜치와 연결하고,

앞으로는 git push, git pull 만으로도 자동 연결된 브랜치로 전송/수신 가능하다는 뜻입니다.

즉:
 git push
이라고만 쳐도 → 자동으로 origin/main에 push 됩니다.
(upstream이 설정되어 있으니까!)

🎯 다시 말해: -u는 로컬 브랜치에 "앞으로 네 upstream은 origin/main이야" 라고 설정해 주는 것.

✅ 4. git branch -M main 이후 git push -u origin sub 하면 무슨 일이 벌어지나?

분석:

git branch -M main:
→ 현재(로컬) 브랜치 이름을 main으로 변경함.

git push -u origin sub:
→ 로컬의 main 브랜치를 원격 저장소의 sub 브랜치로 업로드(push)

로컬 main 브랜치의 upstream을 origin/sub으로 설정.

📌 즉:
로컬 브랜치 = main
연결된 원격 브랜치 = origin/main

나중에 git push만 입력하면 origin/sub으로 push 됩니다.

✅ 정리 요약

항목	설명
`-m`	브랜치 이름 변경, 기존 이름 있으면 실패
`-M`	브랜치 이름 강제 변경, 기존 이름 덮어쓰기
`upstream`	로컬 브랜치가 연결된 원격 브랜치 참조
`-u`	로컬 브랜치에 upstream 정보를 최초 설정
`git push -u origin 브랜치명`	지정된 원격 브랜치와 자동 연결되어 `git push`만으로도 사용 가능
`main ➝ sub`로 push	로컬의 main을 원격의 sub로 업로드 및 연결

2) requirements.txt

streamlit

3) .gitpod.yml 설정

tasks:
  - init: pip install -r requirements.txt
    command: streamlit run app.py --server.headless true --server.port=8501

ports:
  - port: 8501
    onOpen: open-preview

✅ https://gitpod.io/#<GitHub_주소>로 접속하면 바로 실행됩니다.

Gitpod 실행 결과 :

5. Streamlit 컴포넌트 (8~14일차 요약)

st.checkbox("체크박스")
st.radio("라디오버튼", ["A", "B", "C"])
st.selectbox("셀렉트박스", ["A", "B", "C"])
st.multiselect("멀티셀렉트", ["A", "B", "C"])
st.date_input("날짜 선택")
st.file_uploader("파일 업로드")

차트와 시각화 예시

import pandas as pd
import numpy as np

data = pd.DataFrame(np.random.randn(20, 3), columns=['a', 'b', 'c'])
st.line_chart(data)
st.bar_chart(data)

6. Streamlit 레이아웃 및 폼 (19~21일차 요약)

1) 컬럼 기반 레이아웃

col1, col2 = st.columns(2)
with col1:
    st.button("왼쪽")
with col2:
    st.button("오른쪽")

2) 탭(Tab) 활용

tab1, tab2 = st.tabs(["📊 차트", "📋 테이블"])
with tab1:
    st.line_chart([1, 5, 3])
with tab2:
    st.write("표 데이터 출력")

3) 폼(Form) 사용

with st.form("my_form"):
    email = st.text_input("이메일 입력")
    agree = st.checkbox("개인정보 수집 동의")
    submitted = st.form_submit_button("제출")

if submitted and agree:
    st.success(f"{email} 제출 완료!")

✅ 마무리: Streamlit으로 나만의 앱 만들기

🎯 Streamlit 실습 프로젝트: 나만의 간단한 BMI 계산기 대시보드

🧠 목적

Streamlit의 기본 UI 컴포넌트, 레이아웃, 조건문 출력 기능을 모두 활용하여 간단한 건강 관련 대시보드를 만드는 프로젝트입니다.

📌 요구사항

다음 조건에 맞는 Streamlit 웹앱을 만들어보세요:

사용자로부터 이름, 키(cm), **몸무게(kg)**를 입력받는다.
입력받은 키와 몸무게를 바탕으로 BMI 지수를 계산한다.
BMI 기준에 따라 다음 범주 중 하나로 분류하여 출력한다:
- 18.5 미만: 저체중
- 18.5~22.9: 정상
- 23.0~24.9: 과체중
- 25.0 이상: 비만
결과를 조건에 따라 색상 메시지(st.success, st.warning, st.error)로 출력한다.
입력 폼은 st.form을 사용해 구성한다.
레이아웃은 st.columns를 이용해 이름/키/몸무게를 나란히 배치한다.

💡 힌트

BMI 계산식:
$\text{BMI} = \frac{\text{몸무게(kg)}}{(\text{키(m)})^2}$
예시: 175cm, 70kg → 70 / (1.75²)

✅ 작성한 코드

import streamlit as st

st.header('Simple BMI Calculator header')

col1, col2, col3 = st.columns(3)

with st.form('BMI form'):
    with col1: 
        name = st.text_input("Name")
    with col2:
        height_cm = st.number_input("Height (cm)", min_value=100.0, max_value=250.0, value=170.0)
    with col3:
        weight_kg = st.number_input("Weight (kg)", min_value=10.0, max_value=300.0, value=60.0)

    submitted = st.form_submit_button("Calculate BMI")

if height_cm and weight_kg and submitted:
    height_m = height_cm / 100
    bmi = round(weight_kg / (height_m ** 2), 2)

    if name:
        st.write(f"📊 {name}님의 BMI는 **{bmi}**입니다.")
    else:
        st.write(f"📊 당신의 BMI는 **{bmi}**입니다.")

    if bmi < 18.5:
        st.warning("⚠️ 저체중입니다. 영양을 보충하세요!")
    elif 18.5 <= bmi < 23.0:
        st.success("✅ 정상 체중입니다. 건강을 유지하세요!")
    elif 23.0 <= bmi < 25.0:
        st.info("ℹ️ 과체중입니다. 가벼운 운동을 시작해보세요.")
    else:
        st.error("❗ 비만입니다. 전문가 상담을 권장합니다.")

📂 확장 아이디어

st.line_chart로 체중 변화 시뮬레이션 그래프 추가
사용자별 BMI 저장 후 비교
음식 추천 API와 연동하여 체중 조절 식단 제안

김소은

개발자

이전 포스트

Python Plotly 2

다음 포스트

Python Streamlit (1)

1. Streamlit과 Gradio 차이 비교

2. Streamlit 개발환경

설치 및 실행

필수 디렉토리 구조 (예시)

3. Streamlit 기본 문법

예제 코드 (1~5일차 요약)

4. Streamlit Gitpod에 올리기

1) GitHub에 코드 업로드 (Terminal)

✅ 1. `-M` vs `-m`의 차이?

✅ 2. `upstream`이란?

✅ 3. `-u` 옵션의 효과 (자동 연결)

✅ 4. `git branch -M main` 이후 `git push -u origin sub` 하면 무슨 일이 벌어지나?

✅ 정리 요약

2) requirements.txt

3) .gitpod.yml 설정

5. Streamlit 컴포넌트 (8~14일차 요약)

차트와 시각화 예시

6. Streamlit 레이아웃 및 폼 (19~21일차 요약)

1) 컬럼 기반 레이아웃

2) 탭(Tab) 활용

3) 폼(Form) 사용

✅ 마무리: Streamlit으로 나만의 앱 만들기

🎯 Streamlit 실습 프로젝트: 나만의 간단한 BMI 계산기 대시보드

🧠 목적

📌 요구사항

💡 힌트

✅ 작성한 코드

📂 확장 아이디어

Python Plotly 2

Python Streamlit

0개의 댓글

Python Streamlit (1)

1. Streamlit과 Gradio 차이 비교

2. Streamlit 개발환경

설치 및 실행

필수 디렉토리 구조 (예시)

3. Streamlit 기본 문법

예제 코드 (1~5일차 요약)

4. Streamlit Gitpod에 올리기

1) GitHub에 코드 업로드 (Terminal)

✅ 1. -M vs -m의 차이?

✅ 2. upstream이란?

✅ 3. -u 옵션의 효과 (자동 연결)

✅ 4. git branch -M main 이후 git push -u origin sub 하면 무슨 일이 벌어지나?

✅ 정리 요약

2) requirements.txt

3) .gitpod.yml 설정

5. Streamlit 컴포넌트 (8~14일차 요약)

차트와 시각화 예시

6. Streamlit 레이아웃 및 폼 (19~21일차 요약)

1) 컬럼 기반 레이아웃

2) 탭(Tab) 활용

3) 폼(Form) 사용

✅ 마무리: Streamlit으로 나만의 앱 만들기

🎯 Streamlit 실습 프로젝트: 나만의 간단한 BMI 계산기 대시보드

🧠 목적

📌 요구사항

💡 힌트

✅ 작성한 코드

📂 확장 아이디어

Python Plotly 2

Python Streamlit

0개의 댓글

✅ 1. `-M` vs `-m`의 차이?

✅ 2. `upstream`이란?

✅ 3. `-u` 옵션의 효과 (자동 연결)

✅ 4. `git branch -M main` 이후 `git push -u origin sub` 하면 무슨 일이 벌어지나?