실전 웹앱 ② 배포
2주 페어의 둘째 주예요. 지난주가 'AI와 함께 프로토타입'이라면, 오늘은 내 힘으로 완성하고 인터넷에 배포합니다. 끝나면 "내 서비스가 인터넷에 떠 있다"고 말할 수 있어요.
오늘 배우는 것
지난주에 받은 피드백을 직접 반영해 앱을 완성하고, 내 코드 구조를 이해한 뒤, 인터넷에 배포해 친구가 실제로 쓰게 합니다.
처음 나오는 것 ① — 자가 디버깅
에러가 나면 선생님보다 나 스스로 먼저 고쳐보는 과정이에요. 오늘은 AI 도움을 받으면서도 내가 주도해서 버그를 해결하는 경험을 해봅니다.
처음 나오는 것 ② — 배포(Deploy)
내 컴퓨터에만 있는 앱을 인터넷에 올려서 누구나 접속할 수 있게 만드는 것이에요. 1주차에 한 번 해봤으니 이번엔 더 자신 있게!
https://...streamlit.app 주소를 갖게 됩니다.배포는 1주차에서 이미 해봤어요. GitHub에 코드 올리기 → Streamlit Cloud에 연결 → Secrets에 키 입력. 오늘은 내가 직접 만든 앱을 배포하는 거라서 더 뿌듯해요.
완성과 배포 3단계
지난주는 AI와 함께 프로토타입을 만들었어요. 오늘은 한 단계 성장할 차례예요 — 스스로 고치고, 코드를 이해하고, 직접 배포합니다.
입력 → 처리 → 출력 큰 구조만 잡으면 돼요."AI가 해주는 것"을 넘어 "내가 이해하고 고치고 배포하는 것"으로 성장하는 시간이에요. 모든 줄을 다 알 필요는 없어요 — 큰 구조만 내 말로 설명할 수 있으면 충분합니다.
피드백 반영해 개선하기
1단계 — VS Code 터미널에서 수업 폴더 안에 파일 만들기
# Windows
New-Item .env
# Mac
touch .env2단계 — .env 파일을 열고 아래 한 줄 입력 (선생님이 알려준 키 사용)
OPENAI_API_KEY=여기에_선생님이_알려준_키_붙여넣기⚠️ 키 앞뒤에 공백이나 따옴표 없이 딱 붙여서 저장하세요. .env 파일은 코드와 같은 폴더에 있어야 해요.
지난주 친구에게 받은 피드백 중 1순위부터 고쳐요. 비결은 하나예요 — 한 번에 하나씩 고치고 → 실행 → 확인을 반복하는 거예요.
고치기 전 코드는 따로 복사해서 저장해 두세요. 고쳤다가 망가져도 되돌릴 수 있게요. 작은 습관이지만 큰 안심이 돼요.
- 고치니까 다른 게 망가져요 → 바꾸기 전 코드를 복사해 저장해 두세요.
- 여러 개를 한꺼번에 바꿔서 원인을 못 찾아요 → 하나씩 고치고 확인하세요.
- "기존 기능은 그대로 두고"를 빼먹어요 → 프롬프트에 꼭 넣으세요.
디버깅하고 코드 이해하기
이제 내 코드가 어떻게 돌아가는지 이해할 차례예요. 그런데 AI에게 묻기 전에, 먼저 스스로 짚어봐요.
예:
st.text_input → 입력 / ask_ai → 처리 / st.write → 출력.코드 3덩어리 — 입력 · 처리 · 출력
코드를 다 외울 필요는 없어요. 아래처럼 세 덩어리로만 나누면 큰 구조가 한눈에 보여요.
import streamlit as st
# ── ① 입력: 사용자에게 받기 ──
task = st.text_input("할 일을 입력하세요")
# ── ② 처리: AI에게 일 시키기 ──
if st.button("순서 정리"):
result = ask_ai(f"다음 할 일의 순서를 정리해줘: {task}")
# ── ③ 출력: 화면에 보여주기 ──
st.write(result)코드 로직 파악 활동지
이번 주는 2주 페어의 둘째 주예요. 아래 활동지에 내 코드 구조를 직접 정리해 봅니다.
코드가 길어 어디가 뭔지 모르겠다면, AI에게 3부분으로 나눠 달라고 한 뒤 내 말로 다시 정리해 보세요.
① 입력 : task = st.text_input(...) → 할 일을 받는 줄
② 처리 : result = ask_ai(...) → AI가 순서를 정리하는 줄
③ 출력 : st.write(result) → 결과를 화면에 보여주는 줄- 코드가 너무 길어 어디가 뭔지 몰라요 → AI에게 3부분 분류를 요청한 뒤 내 말로 재정리.
- AI 설명을 그대로 베껴요 → 내 말로 다시 써야 진짜 내 것이 돼요.
- 모든 줄을 다 이해하려 해요 → 큰 구조(입력·처리·출력)만 잡으면 충분해요.
배포하고 실사용 테스트
이제 마지막이에요. 1주차에 배운 방법 그대로, Streamlit Community Cloud에 올리면 폰으로 접속되는 주소가 생겨요.
배포 3단계
배포 전 체크 — requirements.txt
배포하려면 "이 앱은 어떤 라이브러리가 필요해요"를 알려주는 목록 파일이 있어야 해요. 없으면 AI에게 "이 앱의 requirements.txt를 만들어줘"라고 요청하세요.
streamlit
openai🃏 선택지 카드 — 배포 전 마지막 다듬기
배포하기 전, 앱을 하나만 더 다듬어 봅시다. 하나를 골라 AI에게 요청해 보세요.
배포가 끝나면 https://...streamlit.app 주소가 생겨요. 폰으로 직접 열어 보고, 친구에게도 보내 실제로 써보게 하세요. 내가 만든 서비스가 인터넷에 올라가 있는 거예요.
- 흰 화면/에러가 떠요 → 대부분
requirements.txt누락 또는 Secrets에 키를 안 넣어서예요. - GitHub에
.env(키) 파일을 올리면 절대 안 돼요 → 키는 배포 화면의 Secrets에만. - 코드를 다시 올렸는데 앱이 그대로면 → 잠시 기다리거나 'Reboot'을 눌러요.
🔒 힌트 — 배포한 앱에서 에러가 떠요
가장 흔한 원인 두 가지예요.
① requirements.txt 누락 — AI에게 "이 앱의 requirements.txt를 만들어줘"라고 요청해 저장소에 추가.
② Secrets 미설정 — 배포 설정의 Secrets 칸에 키를 넣었는지 확인. 형식은 선생님 안내를 따르세요.
더 해보고 싶다면
미션 3까지 끝내고 시간이 남는다면 도전해 보세요. 끝내지 못해도 괜찮습니다.
보너스 ① 방문자 추적
앱에 몇 명이 다녀갔는지 세는 사용 카운터를 붙여 봅니다.
# 세션 안에서 사용 횟수 기억하기
if "count" not in st.session_state:
st.session_state.count = 0
if st.button("사용하기"):
st.session_state.count += 1
st.caption(f"지금까지 {st.session_state.count}번 사용했어요!")보너스 ② 가이드 페이지
앱 사용법을 접었다 펼 수 있는 안내 영역을 만들어 봅니다.
오늘의 핵심 정리
다음 주(8주차)는 Notion으로 포트폴리오를 세팅합니다. 지금까지 만든 베스트 작품을 정리하고, 자율 프로젝트 기획서를 준비해요. 완성한 앱 주소를 가족·친구에게 공유하고 사용 후기를 한 줄 받아오세요.
🔧 막혔을 때 — 자가 디버깅 4단계
에러가 떠도 당황하지 마세요. 선생님께 묻기 전에 이 순서대로 스스로 해결해 봅니다.