웹 개발 입문
글자 입력받기선택하게 하기숫자와 날짜 입력버튼을 누르면 무슨 일이 일어나냥연습하기 Level 1미니 프로젝트 · BMI 계산기
놀면 뭐 하니,
그냥 하는거야.

미니 프로젝트 · BMI 계산기

코딩냥

드디어 첫 미니 프로젝트다냥! 지금까지 배운 걸 합쳐서 완성된 앱 하나를 처음부터 끝까지 만들어본다냥. BMI 계산기는 "입력 → 계산 → 결과 보여주기" 라는, 거의 모든 앱의 기본 뼈대를 담고 있다냥. 이걸 만들면 감이 확 온다냥!

오늘의 목표

  • 키와 몸무게를 입력받는다.
  • BMI 를 계산한다.
  • 결과에 따라 다른 메시지를 보여준다.
  • 화면을 보기 좋게 정리한다.
실습 준비·필요한 패키지와 버전
  • streamlit1.40 이상파이썬 코드로 웹 화면 만들기

설치하기 — 터미널에 그대로 붙여넣기

pip install "streamlit>=1.40"

설치 확인 — 버전 번호가 찍히면 성공

python -c "import streamlit; print(streamlit.__version__)"

위 버전은 최소 기준이라, 더 높은 버전이 깔려 있으면 그대로 써도 된다냥. 버전이 안 찍히고 에러가 나면 설치가 안 된 거라 설치 명령을 다시 실행해보자냥.

BMI 가 뭐냥?

몸무게(kg)를 키(m)의 제곱으로 나눈 값이라냥. 키가 cm 로 들어오니까 100 으로 나눠서 m 로 바꿔야 한다냥. 공식: BMI = 몸무게 / (키 * 키)

미션 1·입력 화면 만들기5분

먼저 키와 몸무게를 받는 부분이다냥.

import streamlit as st

st.title("BMI 계산기다냥")

height = st.number_input("키(cm)", min_value=100, max_value=250, value=170)
weight = st.number_input("몸무게(kg)", min_value=20, max_value=200, value=60)

min_value 와 max_value 로 말도 안 되는 값(키 5cm 같은)을 막아둔다냥. value 는 처음에 보이는 기본값이라냥.

미션 2·계산하기7분

이제 BMI 를 계산한다냥. 키를 m 로 바꾸는 걸 잊지 말자냥.

height_m = height / 100          # cm 를 m 로
bmi = weight / (height_m * height_m)

st.metric("나의 BMI", round(bmi, 1))

st.metric 이 뭐냥?

숫자 하나를 큼직하게 강조해서 보여주는 위젯이라냥. 4부에서 자세히 배우지만, 결과 숫자를 돋보이게 하고 싶어서 미리 써봤다냥. round(bmi, 1) 은 소수점 첫째 자리까지만 남기는 거다냥.

미션 3·결과 판정하기8분

BMI 값에 따라 다른 메시지를 보여주자냥. 파이썬 탐험하기에서 배운 if / elif / else 가 나올 차례다냥!

if bmi < 18.5:
    st.info("저체중이라냥. 잘 챙겨 먹자냥!")
elif bmi < 23:
    st.success("정상 범위라냥. 좋다냥!")
elif bmi < 25:
    st.warning("과체중이라냥. 조금만 신경 쓰자냥.")
else:
    st.error("비만이라냥. 운동을 시작해보자냥!")

알림 상자 사형제

  • st.info : 파란 안내
  • st.success : 초록 성공
  • st.warning : 노란 주의
  • st.error : 빨간 경고

메시지 성격에 맞게 색을 골라 쓰면 화면이 훨씬 잘 읽힌다냥!

전체 코드 확인하기

완성된 app.py

import streamlit as st

st.title("BMI 계산기다냥")

height = st.number_input("키(cm)", min_value=100, max_value=250, value=170)
weight = st.number_input("몸무게(kg)", min_value=20, max_value=200, value=60)

height_m = height / 100
bmi = weight / (height_m * height_m)

st.metric("나의 BMI", round(bmi, 1))

if bmi < 18.5:
    st.info("저체중이라냥. 잘 챙겨 먹자냥!")
elif bmi < 23:
    st.success("정상 범위라냥. 좋다냥!")
elif bmi < 25:
    st.warning("과체중이라냥. 조금만 신경 쓰자냥.")
else:
    st.error("비만이라냥. 운동을 시작해보자냥!")

더 해보기

도전 과제 (선택)

  • st.columns 로 키/몸무게 입력을 좌우로 나란히 배치해보자냥.
  • 계산 결과를 st.expander("BMI 표 보기") 안에 표로 넣어보자냥.
  • 슬라이더로 바꿔보면 느낌이 또 다르다냥.

참고로 여기엔 버튼이 없다냥. 왜냐면 값을 바꾸면 재실행 규칙 덕분에 결과가 저절로 다시 계산되기 때문이라냥. 9강이 여기서 빛을 발한다냥!

코딩냥

첫 앱을 완성했다냥! 입력 → 계산 → 결과라는 뼈대는 앞으로 만들 모든 앱에서 똑같이 쓰인다냥. 여기까지가 2부였다냥. 3부에서는 드디어 값을 기억하는 앱, session_state 를 배운다냥. 9강에서 못 만들었던 카운터를 드디어 완성하게 된다냥!

12 / 33
이전2부 · 사용자에게 입력받기 · 연습하기 Level 1다음3부 · 기억하는 앱 · 값을 기억하게 하기