실전 웹앱 ② 배포

피드백 반영해 개선하기

지난주 마지막에 친구가 내 프로토타입을 써보고 "이게 불편해"라고 말해준 것, 기억나나요? 그 피드백 중 1순위로 정한 것 하나를 오늘 고칩니다. 만약 기억이 안 나거나 지난주에 못 했다면, 지금 바로 친구에게 앱을 보여주고 불편한 점 하나를 물어보고 시작하세요.

① 피드백을 구체적인 프롬프트로 바꾸기

"버튼이 이상해" 같은 막연한 말은 AI가 못 알아들어요. 무엇이 어떻게 바뀌어야 하는지를 콕 집어 프롬프트로 만드세요.

② AI에게 요청하고, 반영 전/후 비교하기

내 상황에 맞는 프롬프트를 하나 골라(또는 내 피드백에 맞게 직접 써서) AI에게 보내고, 실행해서 바뀌기 전과 후를 비교해 보세요.

디버깅하고 코드 이해하기

이제 내 코드가 어떻게 돌아가는지 이해할 차례예요. 그런데 AI에게 묻기 전에, 먼저 스스로 짚어봐요.

코드 3덩어리 — 입력 · 처리 · 출력

코드를 다 외울 필요는 없어요. 아래처럼 세 덩어리로만 나누면 큰 구조가 한눈에 보여요.

import streamlit as st

# ── ① 입력: 사용자에게 받기 ──
task = st.text_input("할 일을 입력하세요")

# ── ② 처리: AI에게 일 시키기 ──
if st.button("순서 정리"):
    result = ask_ai(f"다음 할 일의 순서를 정리해줘: {task}")
    # ── ③ 출력: 화면에 보여주기 ──
    st.write(result)

코드 로직 파악 활동지

아래 활동지에 내 코드 구조를 직접 정리해 봅니다.

코드가 길어 어디가 뭔지 모르겠다면, 앞서 배운 입력·처리·출력 3덩어리 구조를 다시 떠올리며 내 말로 정리해 보세요.

① 입력  : task = st.text_input(...)  → 할 일을 받는 줄
② 처리  : result = ask_ai(...)        → AI가 순서를 정리하는 줄
③ 출력  : st.write(result)            → 결과를 화면에 보여주는 줄

배포하고 실사용 테스트

이제 마지막이에요. 1주차에 배운 방법 그대로, Streamlit Community Cloud에 올리면 폰으로 접속되는 주소가 생겨요.

배포 3단계

배포 전 체크 — requirements.txt

배포하려면 "이 앱은 어떤 라이브러리가 필요해요"를 알려주는 목록 파일이 있어야 해요. 없으면 AI에게 "이 앱의 requirements.txt를 만들어줘"라고 요청하세요.

streamlit
openai

🃏 선택지 카드 — 배포 전 마지막 다듬기

배포하기 전, 앱을 하나만 더 다듬어 봅시다. 하나를 골라 AI에게 요청해 보세요.

더 해보고 싶다면

미션 3까지 끝내고 시간이 남는다면 도전해 보세요. 끝내지 못해도 괜찮습니다.

보너스 · 가이드 페이지

앱 사용법을 접었다 펼 수 있는 안내 영역을 만들어 봅니다.

# 접었다 펼 수 있는 사용법 안내 영역
with st.expander("📖 사용법 보기"):
    st.write("1. 할 일을 입력하세요")
    st.write("2. '순서 정리' 버튼을 눌러요")
    st.write("3. AI가 정리한 순서가 아래에 나와요")

사용법 안내 영역 실행 화면 — '📖 사용법 보기'를 눌러 펼친 모습