AI 파이썬 Lab · 심화 · 6주차
심화 · 실전 웹앱 ①

실전 웹앱 ① 기획

지금까지는 주어진 미션을 따라 만들었어요. 오늘부터 2주는 내가 직접 문제를 찾아 실제로 쓸 수 있는 앱을 기획하고 만듭니다.

오늘의 목표

오늘 배우는 것

좋은 앱은 멋진 기능이 아니라 진짜 불편에서 시작해요. 오늘은 내가 찾은 문제를 기획서로 정리하고, 작동하는 프로토타입을 만들어 친구에게 테스트까지 해봅니다.

🔍
GOAL 1
실생활의 진짜 불편(문제)을 하나 찾아낸다
📝
GOAL 2
문제·대상·핵심 기능·화면을 담은 기획서를 쓴다
🧪
GOAL 3
프로토타입을 만들어 친구에게 테스트해본다
새 개념 ①

IA(정보 구조)란?

IA는 앱 안에 어떤 화면·메뉴가 있고 어떻게 연결되는지를 정리한 '앱의 지도'예요. 앱을 만들기 전에 전체 그림을 먼저 그려보는 거예요.

🗺️
IA (정보 구조)
앱에 어떤 화면과 메뉴가 있고, 그것들이 어떻게 이어지는지 정리한 '앱의 지도'.
비유: 건물을 짓기 전 그리는 설계도. 방이 몇 개고 어떻게 연결되는지 미리 정해두는 것과 같아요.
새 개념 ②

와이어프레임이란?

화면을 박스로 대충 그린 밑그림이에요. 위치만 표시하면 되고, 예쁘게 안 그려도 괜찮아요.

📐
와이어프레임
'여기는 입력창', '여기는 버튼'처럼 박스에 글씨만 적어 화면 배치를 잡는 밑그림.
비유: 집을 짓기 전 그리는 밑그림. 색칠은 나중에 — 지금은 무엇이 어디 있을지만 정해요.
새 개념 ③

프로토타입이란?

완성품이 아니라, 아이디어가 진짜 되는지 확인하는 첫 시제품이에요. 대충 돌아가기만 해도 성공이에요.

🚗
프로토타입
완벽하지 않아도, 핵심 기능 하나가 작동해서 아이디어를 확인할 수 있는 첫 버전.
비유: 자동차 회사가 먼저 만드는 콘셉트카. 팔기 위한 게 아니라 '되는지' 보려고 만들어요.
개념

문제에서 시작하기

"AI 기능을 넣어야지"가 아니라 "이게 불편한데 어떻게 해결하지?"에서 시작해야 좋은 앱이 나와요. 문제에서 시작하는 3단계를 따라가 봅시다.

1
문제 발견
내 주변에서 불편한 점을 찾아요. "준비물을 자꾸 까먹어", "우리 반 공지가 흩어져 있어"처럼 구체적으로.
2
대상 정하기
누구를 위한 앱인가요? "모두"가 아니라 우리 반, 나 같은 중1처럼 좁힐수록 좋아요.
3
해결 아이디어
그 불편을 어떻게 덜어줄지 한 줄로. 핵심 기능은 3가지면 충분해요.
💡 작게 시작하기

기능 10개짜리 앱은 절대 못 끝내요. 핵심 기능 3가지만 골라 작게 시작하고, 빠르게 만들어 테스트하는 게 첫 주의 핵심이에요.

미션 1

내 앱 기획서 쓰기

🎯 목표: 문제·대상·핵심 기능 3가지·화면 와이어프레임을 담은 기획서 한 장을 완성한다.

먼저 어떤 불편을 풀지 정해요. 아이디어가 막막하면 AI에게 후보를 받아 보세요. 그중 내가 진짜 겪는 불편을 하나 고르면 됩니다.

💬 이렇게 입력해 보세요
중학생이 일상에서 겪는 불편 10가지를 알려줘.

기획서 4칸 채우기

아래 활동지의 네 칸을 채우면 기획서 한 장이 완성돼요.

📝
기획서 활동지
① 어떤 문제를 푸는가 · ② 누구를 위한 앱인가 · ③ 핵심 기능 3가지 · ④ 화면 와이어프레임(박스 그림)
①
문제 — 한 문장
예: "준비물을 자꾸 까먹어서 곤란하다."
②
대상 — 한 문장
예: "준비물을 자주 잊는 우리 반 친구들."
③
핵심 기능 3가지
예: 할 일 입력 · 목록 보기 · AI가 순서 정리.
④
와이어프레임
네모 박스에 '여기는 입력창', '여기는 버튼'이라고 글씨로만 적어도 충분해요.
Streamlit 할 일 관리 앱 프로토타입 — 할 일 추가 및 AI 순서 추천
📸 실행 결과
Streamlit 할 일 관리 앱 프로토타입 — 할 일 추가 및 AI 순서 추천
기획서 4칸(문제·대상·기능·와이어프레임)을 채운 예시
📝 와이어프레임은 박스에 글씨만 적은 형태로 보여주면 부담이 줄어듦
⚠️ 자주 하는 실수
미션 2

AI로 프로토타입 만들기

🎯 목표: 기획서를 바탕으로 작동하는 Streamlit 프로토타입을 만든다.

이제 기획서를 코드로 옮길 차례예요. 그런데 바로 AI에게 다 맡기지 말고, 먼저 스스로 생각부터 해봐요.

✏️ 먼저 스스로 해보기
핵심 기능 딱 하나만 골라보기
AI에게 보내기 전, 내 기획서의 핵심 기능 딱 하나를 고르세요. 그리고 'AI가 무엇을 해주면 좋을지'를 한 문장 프롬프트로 먼저 적어 보세요.
한꺼번에 다 만들려 하지 말고, 이 기능 하나부터 단순하게 시작하는 게 프로토타입의 핵심이에요.

스스로 한 문장을 적었다면, 아래 예시와 비교해 보세요. 기획서 내용을 AI에게 그대로 보여주면 첫 버전을 만들어 줍니다.

💬 이렇게 입력해 보세요
Streamlit으로 '우리 반 할 일 관리' 앱을 만들어줘. 할 일을 입력하면 목록에 추가되고, AI가 할 일 순서를 정리해주는 기능을 넣어줘. 핵심 기능 하나부터 단순하게 만들어줘.

입력값을 기억하게 하기 — st.session_state

Streamlit은 버튼을 누를 때마다 코드를 처음부터 다시 실행해요. 그냥 두면 추가한 할 일이 사라져요. st.session_state에 담으면 값을 기억합니다.

app.py — 할 일 목록 기억하기
import streamlit as st

# 목록을 세션에 기억시켜 두기
if "todos" not in st.session_state:
    st.session_state.todos = []

st.title("✅ 우리 반 할 일 관리")
task = st.text_input("할 일을 입력하세요")

if st.button("추가") and task:
    st.session_state.todos.append(task)   # 목록에 추가

for t in st.session_state.todos:
    st.write("•", t)

실행하면 브라우저에 이렇게 나와요.

▸ 브라우저 화면(예시)
✅ 우리 반 할 일 관리
할 일을 입력하세요: [ 수학 숙제 ]
[ 추가 ]

• 국어 발표 준비
• 수학 숙제
📸 스크린샷 자리
프로토타입을 처음 실행해 할 일이 목록에 추가되는 화면
📝 입력 전/후를 나란히 보여주면 동작이 잘 전달됨
⚠️ 자주 하는 실수
🔒 힌트 — 추가한 할 일이 자꾸 사라져요

Streamlit은 버튼을 누를 때마다 코드를 처음부터 다시 실행해요. 그래서 보통 변수에 담으면 사라져요. st.session_state에 담아야 기억합니다. 위 코드의 if "todos" not in st.session_state: 부분을 내 코드에도 넣었는지 확인하세요.

미션 3

친구에게 써보게 하기

🎯 목표: 친구에게 프로토타입을 써보게 하고 피드백을 모은다.

내 앱이 진짜 쓸만한지는 다른 사람이 써봐야 알 수 있어요. 테스트 3단계를 따라가 봅시다.

1
설명 없이 써보게 하기
친구에게 앱 주소(또는 화면)를 주고 아무 설명 없이 직접 써보게 해요.
2
헤매는 곳 관찰하기
어디서 멈칫하는지 가만히 봐요. 설명하면 안 돼요! 헤매는 그 지점이 고칠 곳이에요.
3
솔직한 답 받기
"뭐가 제일 불편했어?"라고 콕 집어 물어요. 칭찬 말고 불편한 점 하나를 받아요.
📸 스크린샷 자리
친구가 프로토타입을 써보고 옆에서 관찰하며 메모하는 장면
📝 테스트하는 사람은 설명하지 않고 지켜본다는 점이 드러나면 좋음

🃏 선택지 카드 — 받은 피드백 중 무엇을 고칠까?

친구에게 받은 피드백 중 하나를 골라, 다음 주에 고칠 1순위로 정해 보세요.

A
더 쉽게
버튼·메뉴 이름을 이해하기 쉽게
난이도 ★☆☆
→ "버튼 이름을 더 이해하기 쉽게 바꿔줘"
B
더 빠르게
하려는 일을 더 적은 단계로
난이도 ★★☆
→ "할 일 추가를 한 번에 되게 단계를 줄여줘"
C
기능 보강
꼭 필요한 기능 하나 더하기
난이도 ★★☆
→ "완료한 할 일에 체크 표시 기능을 추가해줘"
D
디자인 개선
더 보기 좋은 화면으로
난이도 ★★★
→ "앱을 더 보기 좋은 디자인으로 바꿔줘"
E
나만의 아이디어!
위에 없는 개선점을 직접 떠올려 1순위로 정하기
⚠️ 자주 하는 실수
보너스 미션

더 해보고 싶다면

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

보너스 ① 경쟁 앱 분석

내 앱과 비슷한 앱을 찾아 "내 앱은 뭐가 다를까?" 차별점을 한 가지 찾아봅니다.

💬 이렇게 입력해 보세요
'할 일 관리 앱' 중에 유명한 걸 알려주고, 각각의 특징을 간단히 정리해줘.
📌 핵심
"내 앱은 AI가 순서를 정해주는 게 다르다" 같은 한 줄 차별점을 찾으면 성공이에요.

보너스 ② 피드백 즉시 반영

받은 피드백 중 가장 쉬운 하나를 지금 바로 고쳐 친구에게 다시 보여줍니다.

💬 이렇게 입력해 보세요
[친구가 불편하다고 한 것]을 이렇게 고치고 싶어. 어떻게 바꾸면 될지 알려줘.
🎯 성공 기준
한 줄 차별점을 찾거나, 피드백 하나를 즉시 반영해 다시 보여주면 성공이에요.
정리

오늘의 핵심 정리

1️⃣
문제
기능이 아니라 진짜 불편에서 앱을 시작했다
2️⃣
기획
문제·대상·기능·화면을 기획서로 정리했다
3️⃣
테스트
프로토타입을 친구에게 테스트하고 피드백을 모았다
📌 다음 주 예고

다음 주(7주차)는 받은 피드백을 내 힘으로 반영해 앱을 완성하고, 코드 구조를 이해한 뒤 인터넷에 배포합니다. 오늘 받은 피드백 1순위와 기획서·프로토타입 코드를 꼭 보관해 오세요.

🔧 막혔을 때 — 자가 디버깅 4단계

에러가 떠도 당황하지 마세요. 선생님께 묻기 전에 이 순서대로 스스로 해결해 봅니다.

1
에러 메시지 읽기
빨간 글자에서 '몇 번째 줄'과 '무슨 에러'인지 찾아본다.
2
AI에게 보여주기
에러 메시지를 복사해서 "이 에러를 수정해줘"라고 AI에게 요청한다.
3
고쳐서 다시 실행
AI가 준 수정 코드를 적용하고 다시 실행해 본다.
4
선생님께 질문
그래도 안 되면 '에러 메시지 + 내가 시도한 것'을 함께 설명한다.