프로젝트 1: 웹앱 (기획+시작)

3줄 요약기 같이 만들기

① API 키 준비 — 복습

API 키는 기초에서 이미 .env로 다뤄봤죠. 이번에도 원리는 같아요. 배포할 때는 st.secrets가 그 역할을 대신합니다. 선생님이 나눠준 키를 아래처럼 저장하세요.

OPENAI_API_KEY=여기에_선생님이_알려준_키_붙여넣기

② ask_ai 함수 정의 — openai SDK로

지금까지는 AI를 부르는 함수를 만들 때 다른 도구를 쓰기도 했어요. 오늘은 openai 파이썬 SDK라는 도구로 ask_ai()를 새로 만듭니다. 이 함수는 앞으로 매주 그대로 다시 쓸 거예요.

from openai import OpenAI
client = OpenAI()   # 키는 .env / secrets에서 자동으로

def ask_ai(prompt):
    res = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[{"role": "user", "content": prompt}]
    )
    return res.choices[0].message.content

③ ask_ai를 한 번 테스트해 보기

화면을 만들기 전에, ask_ai()가 잘 도는지 짧은 질문으로 먼저 확인해요.

print(ask_ai("안녕? 한 문장으로 인사해줘."))

안녕하세요! 오늘도 좋은 하루 보내세요.

④ 입력→처리→출력 화면 만들기

이제 앞서 배운 세 덩어리를 그대로 코드에 옮깁니다.

import streamlit as st

st.title("📝 3줄 요약기")

# ── ① 입력 ──
text = st.text_area("긴 글을 붙여넣으세요")

# ── ② 처리 ──
if st.button("요약하기"):
    prompt = f"다음 글을 3줄로 요약해줘:\n{text}"
    result = ask_ai(prompt)
    # ── ③ 출력 ──
    st.write(result)

⑤ 프롬프트를 다듬으면 결과가 달라져요

같은 글이라도 prompt에 어떻게 부탁하느냐에 따라 요약 모양이 달라져요. 두 가지를 비교해 볼게요.

prompt = f"다음 글을 3줄로 요약해줘:\n{text}"
# prompt = f"다음 글을 초등학생도 알게 3줄로:\n{text}"

기본  : 1. 삼성전자가 청소년 10만 명에게 AI 교육을 지원한다.
초등  : 1. 큰 회사가 학생들에게 AI 공부를 도와줘요.
        2. 인터넷으로도 교실에서도 배울 수 있어요.

⑥ 앱 실행하기

streamlit run app.py

📝 3줄 요약기
[ 긴 글을 붙여넣으세요             ]
[ 요약하기 ]

1. 삼성전자가 청소년 10만 명에게 AI 교육을 지원한다.
2. 전국 중·고등학생이 온·오프라인으로 참여할 수 있다.
3. 디지털 격차 해소와 인재 양성이 목표다.

⑦ 프로젝트 예시 모음 — 이런 웹앱도 만들 수 있어요

방금 함께 만든 3줄 요약기는 다섯 가지 예시 중 하나일 뿐이에요. 다음 미션에서 내 프로젝트를 정할 때, 아래 예시를 참고해도 되고 완전히 다른 아이디어를 내도 좋아요.

⑨ 미션1 코드 전체 흐름 되짚기

지금까지 만든 3줄 요약기의 전체 흐름을 한 번에 훑어볼게요. 준비 → 입력 → 처리 → 출력. 오늘 만든 요약기뿐 아니라, 다음 미션에서 만들 내 프로젝트도 똑같은 순서로 완성돼요.

import streamlit as st
from openai import OpenAI

client = OpenAI()

def ask_ai(prompt):
    res = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[{"role": "user", "content": prompt}])
    return res.choices[0].message.content

st.title("📝 3줄 요약기")
text = st.text_area("긴 글을 붙여넣으세요")
if st.button("요약하기"):
    st.write(ask_ai(f"다음 글을 3줄로 요약해줘:\n{text}"))

내 프로젝트 문제정의 + 핵심기능

3줄 요약기가 잘 돌아간다면, 이제 내 프로젝트를 정할 차례예요. 꼭 지켜야 할 미션은 하나예요 — 입력→처리→출력 흐름을 갖춘 웹앱을 만들고 배포하는 것(배포는 다음 주에 완성해요). 주제는 여러분이 자유롭게 정하면 돼요.

참고 — 프로젝트 아이디어

아이디어가 떠오르지 않는다면 미션1에서 본 프로젝트 예시 모음(3줄 요약기·말투 변환기·재료 레시피 추천기·이름 짓기 도우미·공부 개념 풀이 봇) 중 하나를 골라도 되고, 완전히 다른 자유 주제를 정해도 됩니다.

주제 고르기 — 세 갈래로 생각하기

주제가 안 정해진다면 아래 세 갈래 중 하나를 따라가 보세요.

좋은 핵심기능 vs 아쉬운 핵심기능

같은 주제라도 핵심기능을 어떻게 잡느냐에 따라 오늘 끝낼 수 있는지가 갈려요. 좋은 예: "재료로 만들 요리 하나를 추천한다"(동사 1개). 아쉬운 예: "요리 추천 + 칼로리 계산 + 장보기 목록"(동사 3개).

실제 학생들의 문제정의 예시

이전에 만들어진 문제정의 문장들이에요. 어떤 식으로 한 문장에 담았는지 살펴보세요.

· 뉴스를 오래 읽기 싫은 사람을 위해 핵심만 세 줄로 요약한다.
· 부모님께 정중히 문자 보내고 싶은 학생을 위해 말투를 바꿔준다.
· 냉장고 재료가 아까운 자취생을 위해 만들 요리를 추천한다.
· 발표 제목이 안 떠오르는 사람을 위해 제목 후보를 지어준다.
· 어려운 개념을 못 알아듣는 친구를 위해 눈높이로 풀어준다.

내 프로젝트 화면 뼈대 만들기

문제정의와 핵심기능을 정했다면, 오늘은 입력 부분까지만 만들어볼게요. 처리(AI 연동)와 출력은 다음 주에 이어서 완성해요.

오늘 만드는 범위

st.title("🗣️ 말투 변환기")

# ── ① 입력 ──
text = st.text_area("바꿀 문장을 입력하세요")
style = st.selectbox("바꿀 말투", ["정중체", "반말", "사투리"])

if st.button("변환하기"):
    st.write("여기에 다음 주 처리 결과가 나올 거예요")

🗣️ 말투 변환기
[ 바꿀 문장을 입력하세요            ]
바꿀 말투: [ 정중체 ▾ ]
[ 변환하기 ]

여기에 다음 주 처리 결과가 나올 거예요

다른 입력 위젯도 골라보기

입력 위젯은 앱 성격에 따라 다르게 골라요. 아래 세 가지가 대표적이에요. (재료 레시피 추천기처럼 한 줄 입력이 필요하면 st.text_input을 쓰면 돼요 — 뒤에서 전체 코드를 함께 볼게요.)

실제로 여러 프로젝트의 첫 화면을 로컬에서 띄워봤어요. 어떤 위젯을 골랐는지 비교해 보세요.

위젯을 만들면 사용자가 넣은 값이 왼쪽 변수에 담겨요(예: text = st.text_area(...)). 다음 주엔 이 변수를 ask_ai()에 넘겨 처리해요.

🃏 선택지 카드 — 어떤 프로젝트로 시작할까?

카드별 AI 요청 예시 — 이렇게 부탁하면 돼요

화면 뼈대를 AI 도구에게 부탁할 때, 아래처럼 요청하면 원하는 위젯이 붙은 코드를 받을 수 있어요.

처음부터 끝까지 — 레시피 추천기로 따라 해보기

한 가지 예시(레시피 추천기)로 오늘 만들 화면을 처음부터 끝까지 따라가 볼게요. 제목 정하기 → 입력 위젯 놓기 → 버튼 놓기 순서예요.

import streamlit as st

st.title("🍳 재료 레시피 추천기")
items = st.text_input("가진 재료를 쉼표로 적어주세요")
if st.button("추천받기"):
    st.write("여기에 다음 주 추천 결과가 나올 거예요")

🍳 재료 레시피 추천기
[ 가진 재료를 쉼표로 적어주세요 ]
[ 추천받기 ]
여기에 다음 주 추천 결과가 나올 거예요

다음 주엔 이렇게 완성돼요 — 미리보기

오늘 만든 뼈대에 ask_ai()를 붙이면 다음 주엔 이런 앱이 돼요 — 제목과 입력창 아래로 진짜 요약·변환·추천 결과가 나오게 됩니다. 완성 모습을 미리 그려보면 오늘 화면을 만들 때 방향이 또렷해져요.

다음 주 완성까지 남은 두 조각

오늘 뼈대를 만들었으니, 완성까지 남은 건 딱 두 조각이에요 — 버튼 안에 ask_ai(prompt)를 넣어 처리를 붙이고, 받은 결과를 st.write()로 출력에 연결하는 것.

더 해보고 싶다면

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

보너스 ① system prompt로 AI 성격 정하기

system prompt는 기초에서 이미 배웠죠. 오늘은 그걸 ask_ai() 함수 안에 넣어서, 내 프로젝트의 AI가 항상 같은 태도로 답하게 만들어볼게요.

def ask_ai(prompt):
    res = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": "너는 친절하고 간결하게 답하는 도우미야."},
            {"role": "user", "content": prompt}
        ])
    return res.choices[0].message.content

{"role": "system", ...}는 Claude에게 "너는 이런 성격/역할이야"라고 미리 알려주는 자리예요. 매번 질문할 때마다 반복해서 설명하지 않아도 돼요. 같은 질문이라도 system prompt에 따라 답의 말투와 태도가 달라져요. 세 가지를 비교해 볼게요.

친절한 도우미 : 안녕하세요! 무엇을 도와드릴까요?
깐깐한 선생님 : 안녕하세요. 오늘은 무엇을 점검해 볼까요?
재밌는 친구   : 오~ 안녕! 오늘 뭐 재밌는 거 없어?

보너스 ② 내 프로젝트 이름 정하고 노션에 기록

정한 문제정의·핵심기능·앱 이름을 노션 포트폴리오 공간에 한 줄씩 정리해보세요. 다음 주 완성본과 비교할 기준이 됩니다.