웹 개발 입문
기획하고 화면 뼈대 잡기기능 붙이기다듬기세상에 공개하기
놀면 뭐 하니,
그냥 하는거야.

기능 붙이기

코딩냥

뼈대가 섰으니 이제 살을 붙일 차례다냥! 빈 페이지 세 개에 사진, 표, 그래프, 방명록을 하나씩 채운다냥. 새로 배우는 건 없다냥 — 지금까지 배운 걸 꺼내 쓰기만 하면 된다냥. 자신감을 가지자냥!

오늘의 목표

  • 홈 페이지에 사진과 인사를 넣는다.
  • 소개 페이지에 표와 그래프를 넣는다.
  • 방명록 페이지에 폼과 상태 저장을 넣는다.
실습 준비·필요한 패키지와 버전
  • pandas2.2 이상표(DataFrame)로 데이터를 다루기
  • streamlit1.40 이상파이썬 코드로 웹 화면 만들기

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

pip install "pandas>=2.2" "streamlit>=1.40"

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

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

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

미션 1·홈 페이지 채우기8분

app.py 에 사진과 인사를 넣자냥. 4강의 columns 로 좌우로 나눈다냥.

import streamlit as st

st.set_page_config(page_title="코딩냥이 소개", page_icon="🐱")
st.title("어서 오라냥")

left, right = st.columns(2)
with left:
    st.image("https://placekitten.com/300/300")
with right:
    st.subheader("코딩냥이라냥")
    st.write("파이썬을 사랑하는 고양이라냥.")
    st.write("왼쪽 메뉴에서 소개와 방명록을 볼 수 있다냥!")
미션 2·소개 페이지 채우기12분

pages/1_소개.py 에 나를 소개하는 표와 취미 그래프를 넣자냥. 17강과 21강의 기술이다냥.

import streamlit as st
import pandas as pd

st.title("나를 소개한다냥")

# 기본 정보 표
info = pd.DataFrame({
    "항목": ["이름", "나이", "좋아하는 것"],
    "내용": ["코딩냥", "3살", "참치와 파이썬"],
})
st.table(info)

# 취미에 쓰는 시간 그래프
st.subheader("일주일 취미 시간")
hobby = pd.DataFrame({
    "시간": [5, 3, 2, 4],
}, index=["코딩", "낮잠", "사냥", "간식"])
st.bar_chart(hobby)

표는 얌전히 보여주기만 하면 되니 st.table, 그래프는 st.bar_chart 라냥. 4부에서 배운 그대로다냥!

미션 3·방명록 페이지 채우기12분

pages/2_방명록.py 에 방문자가 글을 남기는 방명록을 넣자냥. 13·14강의 session_state 와 form 이다냥.

import streamlit as st

st.title("방명록이다냥")

if "guestbook" not in st.session_state:
    st.session_state["guestbook"] = []

with st.form("gb"):
    name = st.text_input("이름")
    message = st.text_area("남길 말")
    submitted = st.form_submit_button("남기기")

if submitted and message:
    st.session_state["guestbook"].append(name + ": " + message)

st.subheader("남겨진 글")
for line in st.session_state["guestbook"]:
    st.write("- " + line)

중간 점검

세 페이지가 다 동작하냥?

  • 홈: 사진과 인사가 좌우로 보이냥?
  • 소개: 표와 그래프가 나오냥?
  • 방명록: 글을 남기면 아래에 쌓이냥?

셋 다 되면 완성된 사이트의 뼈와 살이 다 붙은 거다냥! 물론 아직 투박하다냥 — 다음 시간에 예쁘게 다듬는다냥.

막히면 돌아갈 곳

  • 사진·좌우 배치 → 23강·4강
  • 표·그래프 → 17강·21강
  • 방명록 → 13강·14강

기획서(29강)의 "기능 → 배운 강" 지도가 여기서 빛을 발한다냥!

코딩냥

나만의 사이트가 실제로 동작하기 시작했다냥! 정말 대단하다냥. 다음 시간엔 이걸 남에게 보여줄 만하게 다듬는다냥 — 테마, 빈 화면 처리, 캐시까지 챙기면 진짜 완성이라냥!

31 / 33
이전6부 · 나만의 사이트 · 기획하고 화면 뼈대 잡기다음6부 · 나만의 사이트 · 다듬기