[Streamlit] BMI계산기

• 사용 프로그램 : visual studio code(가상환경에서 작업)
• 실습 주제: BMI 계산기 만들기
• 핵심 기능
  • 키(cm)와 몸무게를 입력받으면 bmi계산을 해줍니다
  • bmi 기준에 따라 결과 메시지를 보여드립니다.

---

1. 제목만들기 : st.title("제목")

st.number_input : 사용자가 숫자를  직접 입력하거나, 화살표 버튼으로 숫자를 조절할 수 있는 입력창

st.text_input : 사용자기 문자열을 입력할 수 있는 입력창(문자,특수기호 다 가능)

st.title("💪 BMI 계산기")

height = st.number_input("키 (cm)", min_value=100, max_value=250, step=1)
weight = st.number_input("몸무게 (kg)", min_value=30, max_value=200, step=1)

실행해 보면 이렇게 만들어집니다.

 

이제는 bmi계산기가 동작할 수 있게 구체적인 내용을 넣어줘야됩니다.

---

2. 동작의 전체 흐름

: 버튼을 누른다 -> 키/몸무게가 올바르면 -> BMI 계산 -> BMI 수치에 따라 결과 메시지 출력

 

streamlit에서 A라는 조건에서는 B라는 결과를 화면에 보여줘야할 때 if문을 사용해서 조건을 설정해줍니다.

 

2-1. 단계별 조건

번호	조건/상황	사용된 코드	설명
1	버튼을 눌렀을 때	if st.button("BMI 계산하기"):	버튼이 눌려야 계산이 시작됨
2	키와 몸무게가 0보다 클 때	if height > 0 and weight > 0:	올바른 입력값인지 체크
3	BMI 계산	bmi = weight / ((height / 100) ** 2)	공식으로 BMI 계산
4	계산된 BMI 수치를 보여줌	st.metric("당신의 BMI", f"{bmi:.2f}")	숫자 수치를 강조해서 보여줌
5	BMI < 18.5	if bmi < 18.5:	저체중 → st.warning()
6	18.5 ≤ BMI < 25	elif bmi < 25:	정상 → st.success()
7	25 ≤ BMI < 30	elif bmi < 30:	과체중 → st.warning()
8	BMI ≥ 30	else:	비만 → st.error()
9	(예외) 키나 몸무게가 0 이하일 때	else: (2번 조건의 반대)	입력이 잘못됨 → st.error()

 

POINT!

① 출력값마다 다른 함수를 써준 이유

st.warning, st.success,st.error는 전부 메시지를 화면에 보여주는 함수인데요. 표시하는 스타일이 다릅니다!

st.write를 써도 상관은 없지만 각각 BMI 상태에 맞게 색깔을 부여하면 사용자가 보기에  시각적인 구분이되서 UX에 좋으니까요

사용자가 봤을때 색이 바뀐 것만으로도 '내가 지금 이런 상태구나'라고 생각할 수 있어서 이렇게 구별해서 함수를 사용해줬습니다.

 

st.warning : 노란색
st.success : 초록색
st.error : 빨간색
st.info : 파란색

 

② st.metric(label,value)이란?

st.metric은  숫자 데이터를 대시보드 스타일로 보여주는 함수입니다.

중요한 수치 하나를 강조해서 보여줄 때 쓰기 좋습니다.

예를 들어 st.metric("당신의 BMI","22.5") 이렇게 사용할 수 있죠.

 

ⓐ st.metric에 value에는 숫자, 문자 다 들어갈 수 있습니다.

# 1.단위 없이 수치만 보여주는 경우
st.metric("당신의 BMI", 22.5)

# 2. 포멧팅해서 문자열로 넣는 경우
bmi = 22.45678
st.metric("당신의 BMI", f"{bmi:.2f}")  # → "22.46" (문자열)

# 단위를 붙이고 싶은 경우
st.metric("오늘의 기온", f"{28}°C")

 

ⓑ st.metric() 안에서 숫자의 변화량이나 비교 수치를 보여주는 delta 

이번 BMI 계산기에는 사용을 안했는데 st.metric() 에는 delta라는 옵션이 있습니다.

매출이  지난달에 비해 몇 퍼센트 늘었는지 같은 변화량이나 비교 수치를  표현할 때 사용하는건데요

st.metric(label="매출", value="₩5,000,000", delta="+15%")

 

• value = 현재값
• delta = 이전 값과의 차이, 변화율

streamlit에서는  기본적으로 delta 값이 양수면 초록 ▲, 음수면 빨간색 ▼ 로 표현이 됩니다.

반대로 설정하고 싶을 때는 delta_color = "inverse" 를 사용하면 감소가 초록색, 증가가 빨간색으로 바뀝니다. 

---

3. 최종 완성

조건까지 다 만들어주면 이렇게 완성됩니다.

 

streamlit 초초초초보라서 아직 배워야 할게 많네요 ㅎㅎ

그래도 직관적이고 재미있는 툴 같습니다!

파이썬 코드만으로 인터랙티브한 웹앱을 만들 수 있다니 크

 

배포 링크는 나중에 추가적으로 업로드 하겠습니다~!