프로젝트 1: 웹앱 — 완성 + 배포

AI 연동 다듬기

지난주 앱은 AI를 한 번 부르면 딱 한 번 답이 나오는 수준이었어요. 오늘은 두 가지를 더해 여러 번 써도 든든한 앱으로 만듭니다 — 더 정확한 프롬프트와 실패해도 안 멈추는 처리.

① 프롬프트를 더 구체적으로 — system prompt 활용

지난주 배운 system prompt, 기억나시나요? "AI에게 역할을 미리 알려주는 말"이었죠. 오늘은 그 역할 설명에 출력 형식·말투·길이까지 더 구체적으로 담아봅니다.

def ask_ai(prompt):
    system_msg = (
        "너는 친절한 요약 도우미야. "
        "항상 세 문장, 존댓말로만 답해."
    )
    res = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": system_msg},
            {"role": "user", "content": prompt}
        ]
    )
    return res.choices[0].message.content

✅ 오늘 회의는 3시에 시작합니다.
   자료는 미리 공유해 주세요.
   질문은 채팅으로 받겠습니다.

② 실패해도 앱이 안 멈추게 — try/except

AI 서버가 잠깐 응답을 안 하거나, 입력이 이상하면 앱이 빨간 에러 화면으로 멈춰버려요. try/except는 "혹시 실패하면 이렇게 대신 보여줘"라고 미리 정해두는 안전장치예요.

if st.button("요약하기"):
    try:
        result = ask_ai(user_text)
        st.success(result)
    except Exception as e:
        st.error("AI 응답에 실패했어요. 잠시 후 다시 시도해주세요.")

합쳐 보기 — 다듬은 미션 1 전체 코드

system prompt와 try/except를 함께 넣으면 이렇게 돼요. 두 장치가 어디에 들어가는지 확인해 보세요.

def ask_ai(prompt):
    system_msg = (
        "너는 친절한 요약 도우미야. "
        "항상 세 문장, 존댓말로만 답해."
    )
    res = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role":"system","content":system_msg},
            {"role":"user","content":prompt}
        ]
    )
    return res.choices[0].message.content

if st.button("요약하기"):
    try:
        st.success(ask_ai(user_text))
    except Exception as e:
        st.error("다시 시도해주세요.")

[정상 응답]
✅ 요약이 완료되었습니다.
   핵심 내용을 세 문장으로 정리했어요.

[빈 입력]
⚠️ 내용을 먼저 입력해 주세요.

[AI 서버 지연·실패]
⚠️ AI 응답에 실패했어요. 잠시 후 다시 시도해주세요.

코드 완성하고 이해하기

이제 지난주 기획한 핵심 기능 3가지를 마저 완성할 차례예요. 그런데 AI에게 묻기 전에, 먼저 스스로 짚어봐요.

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

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

import streamlit as st
if "history" not in st.session_state:
    st.session_state.history = []

# ── ① 입력: 사용자에게 받기 ──
user_text = st.text_area("내용을 입력하세요")

# ── ② 처리: AI에게 일 시키고 기억해두기 ──
if st.button("실행"):
    result = ask_ai(user_text)
    st.session_state.history.append(result)

# ── ③ 출력: 쌓인 기록 모두 보여주기 ──
for item in st.session_state.history:
    st.write(item)

[처음 한 번 실행]
[입력] 내일 회의 일정 정리해줘
[출력] • 내일 오전 10시 회의
       • 장소: 3층 회의실

[두 번째 실행 — 결과가 쌓임]
• 내일 오전 10시 회의 …        ← 이전 결과
• 장소: 3층 회의실
────────────────────
• 오후 2시 자료 공유 …         ← 새 결과가 아래 추가

한 걸음 더 — 결과에 번호 붙이기

기록이 쌓일 때 몇 번째 결과인지 번호를 붙이면 훨씬 보기 좋아요. enumerate로 순번을 함께 꺼내요.

# ③ 출력: 번호와 함께 보여주기
for i, item in enumerate(st.session_state.history, 1):
    st.write(f"#{i}번째 결과")
    st.write(item)

#1번째 결과
• 오늘 회의는 오후 3시 …
#2번째 결과
• 내일 오전 10시 팀 점검 …

코드 로직 파악 활동지

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

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

① 입력  : user_text = st.text_area(...)        → 내용을 받는 줄
② 처리  : result = ask_ai(user_text)            → AI가 처리하는 줄
② 처리  : st.session_state.history.append(...)  → 결과를 기억해두는 줄
③ 출력  : for item in st.session_state.history: → 쌓인 결과를 꺼내는 줄
③ 출력  : st.write(item)                        → 화면에 보여주는 줄

배포하고 노션에 정리하기

이제 마지막이에요. 1주차에 배운 방법 그대로, Streamlit Community Cloud에 올리면 폰으로 접속되는 주소가 생겨요. 기초 6주차에서 정적 HTML을 GitHub Pages에 올려본 것과는 다른 방식이라는 점, 기억해 두세요 — 이번엔 파이썬으로 만든 앱이라서 Streamlit Community Cloud를 씁니다.

배포 3단계

실제 화면으로 따라가기

아래 화면을 순서대로 따라가면 GitHub 저장소 만들기부터 Streamlit 앱 생성까지 진행할 수 있어요. 1주차에 해본 것과 같은 과정이라 낯익을 거예요.

1단계 — GitHub에 코드 올리기 (①~②)

2단계 — Streamlit Cloud 로그인·앱 생성 (③~⑥)

Secrets 칸은 어떻게 채우나요?

배포 화면의 Secrets 칸은 "이름 = 값" 형태로 키를 넣어요. 실제 키 값은 선생님이 알려줘요 — 아래는 형식만 보여주는 예시예요.

OPENAI_API_KEY = "여기에_선생님이_준_키"

내 앱 주소 뜯어보기

배포가 끝나면 ...streamlit.app 주소가 생겨요. 주소의 각 부분이 뭘 뜻하는지 살펴봐요.

배포 전 체크 — requirements.txt

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

streamlit
openai

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

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

📓 오늘 만든 프로젝트를 노션에 기록하기

배포까지 끝냈다면, 잊기 전에 노션에 짧게 남겨두세요. 다음 주부터는 프로젝트마다 이렇게 기록이 쌓여 나만의 포트폴리오가 됩니다.

문제  : 긴 공지를 읽기 귀찮아서
핵심  : 글을 붙이면 3문장으로 요약
배운점: try/except로 앱이 안 멈추게 함
링크  : https://my-summary.streamlit.app

더 해보고 싶다면

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

보너스 · 가이드 페이지

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

# 접었다 펼 수 있는 사용법 안내 영역
with st.expander("📖 사용법 보기"):
    st.write("1. 내용을 입력하세요")
    st.write("2. '실행' 버튼을 눌러요")
    st.write("3. 결과가 아래에 계속 쌓여요")

보너스 · 기록 쌓기 + 초기화 버튼

결과가 아래로 쌓이게 만들고, 한 번에 비우는 버튼까지 더해 봅니다. 앞서 배운 st.session_state를 그대로 활용해요.

# 지금까지 쌓인 기록을 한 번에 비우기
if st.button("🧹 기록 지우기"):
    st.session_state.history = []
    st.success("기록을 모두 지웠어요.")

#3 • 금요일까지 보고서 제출 …
#2 • 내일 오전 10시 팀 점검 …
#1 • 오늘 회의는 오후 3시 …

✅ 기록을 모두 지웠어요. 새로 시작할 수 있어요.
아직 쌓인 요약이 없어요.