심화 · 실전 웹앱 ①

실전 웹앱 ① 기획

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

오늘의 목표

오늘 배우는 것

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

🔍

GOAL 1

실생활의 진짜 불편(문제)을 하나 찾아낸다

📝

GOAL 2

문제·대상·핵심 기능·화면을 담은 기획서를 쓴다

🧪

GOAL 3

프로토타입을 만들어 친구에게 테스트해본다

새 개념 ①

IA(정보 구조)란?

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

🗺️

IA (정보 구조)

앱에 어떤 화면과 메뉴가 있고, 그것들이 어떻게 이어지는지 정리한 '앱의 지도'.

비유: 건물을 짓기 전 그리는 설계도. 방이 몇 개고 어떻게 연결되는지 미리 정해두는 것과 같아요.

새 개념 ②

와이어프레임이란?

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

📐

와이어프레임

'여기는 입력창', '여기는 버튼'처럼 박스에 글씨만 적어 화면 배치를 잡는 밑그림.

비유: 만화가가 그리는 밑그림 스케치. 색칠도 배경도 없이, 사람이 어디 서 있고 무슨 말을 하는지 네모 칸 안에 글씨로만 대충 표시하는 것과 같아요.

새 개념 ③

프로토타입이란?

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

🚗

프로토타입

완벽하지 않아도, 핵심 기능 하나가 작동해서 아이디어를 확인할 수 있는 첫 버전.

비유: 자동차 회사가 진짜로 팔기 전에 먼저 만들어보는 시험용 자동차. "이렇게 만들면 잘 달릴까?"를 미리 확인해 보려고 만드는 거예요.

개념

문제에서 시작하기

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

문제 발견

내 주변에서 불편한 점을 찾아요. "준비물을 자꾸 까먹어", "우리 반 공지가 흩어져 있어"처럼 구체적으로.

대상 정하기

누구를 위한 앱인가요? "모두"가 아니라 우리 반, 나 같은 중1처럼 좁힐수록 좋아요.

해결 아이디어

그 불편을 어떻게 덜어줄지 한 줄로. 핵심 기능은 3가지면 충분해요.

💡 작게 시작하기

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

미션 1

내 앱 기획서 쓰기

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

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

기획서 4칸 채우기

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

📝

기획서 활동지

① 어떤 문제를 푸는가 · ② 누구를 위한 앱인가 · ③ 핵심 기능 3가지 · ④ 화면 와이어프레임(박스 그림)

①

문제 — 한 문장

예: "준비물을 자꾸 까먹어서 곤란하다."

②

대상 — 한 문장

예: "준비물을 자주 잊는 우리 반 친구들."

③

핵심 기능 3가지

예: 할 일 입력 · 목록 보기 · AI가 순서 정리.

④

와이어프레임

네모 박스에 '여기는 입력창', '여기는 버튼'이라고 글씨로만 적어도 충분해요.

📸 스크린샷 자리

[화면 구성 예시] 기획서 4칸(문제·대상·기능·와이어프레임)을 채운 예시

⚠️ 자주 하는 실수

기능을 너무 많이 넣어요 → 핵심 3가지로 줄이세요.
"멋진 기능"부터 생각해요 → 불편(문제)부터 시작하세요.
대상이 막연해요 → "모두"가 아니라 "우리 반"처럼 구체적으로.

✓문제와 대상을 각각 한 문장으로 적었다✓핵심 기능 3가지를 정했다✓화면 와이어프레임(박스 그림)을 그렸다

미션 2

AI로 프로토타입 만들기

🎯 목표: 완성한 기획서를 AI에게 그대로 보여주고, 핵심 기능이 작동하는 프로토타입 화면을 받아본다.

이제 기획서를 실제로 돌아가는 화면으로 바꿀 차례예요. 코드는 한 줄도 직접 안 써요. 기획서를 AI에게 그대로 보여주고, 화면을 만들어 달라고 요청하는 게 오늘의 핵심입니다.

✏️ 먼저 스스로 해보기

기획서를 AI에게 보낼 한 문단으로 다듬기

미션 1에서 채운 기획서 4칸(문제·대상·기능·화면)을 이어 붙여 한 문단으로 만들어 보세요. "이런 문제를 겪는 이런 사람을 위해, 이런 화면으로 이런 기능이 되는 앱을 만들고 싶어"처럼요.
이 한 문단이 곧 AI에게 보낼 기획서 프롬프트가 됩니다.

① 기획서를 프롬프트로 바꿔 AI에게 요청하기

다듬은 문단에 "Streamlit으로 만들어줘"를 붙이면 완성이에요. 아래처럼 요청해 보세요.

💬 프롬프트 예시

준비물을 자꾸 까먹는 우리 반 친구들을 위한 앱을 만들고 싶어. 핵심 기능은 ① 할 일 입력 ② 목록 보기 ③ AI가 순서 정리, 이 3가지야. Streamlit으로 첫 화면부터 만들어줘. 핵심 기능 하나부터 단순하게 시작해줘.

② AI가 만든 화면 실행해서 확인하기

AI가 알려주는 방법대로 실행하면(선생님이 도와줘요), 브라우저에 내 기획서대로 화면이 뜹니다. 코드는 몰라도 괜찮아요 — 화면이 뜨는지, 버튼이 작동하는지만 확인하면 됩니다.

📸 스크린샷 자리

[결과 화면] AI가 만들어준 프로토타입에 "국어 발표 준비", "수학 숙제"를 입력한 화면

③ 원하는 대로 안 나오면, 다시 요청하기

한 번에 완벽한 화면이 나오지 않는 게 정상이에요. 어떻게 다른지를 AI에게 콕 집어 말하면 금방 고쳐줍니다.

💬 프롬프트 예시

할 일을 추가했는데 버튼을 다시 누르면 목록이 사라져. 입력한 목록이 화면에서 사라지지 않고 계속 기억되게 고쳐줘.

🤔 왜 목록이 자꾸 사라질까요?

Streamlit은 버튼을 누를 때마다 화면을 처음부터 다시 그려요. 그래서 AI에게 "기억시켜줘"라고 요청해야 목록이 안 사라져요. 이렇게 결과를 보고 다시 요청하는 것이 AI와 함께 만드는 방식이에요.

⚠️ 자주 하는 실수

AI가 너무 복잡한 걸 만들어요 → "핵심 기능 하나만 먼저"라고 요청하세요.
기획서 없이 바로 "앱 만들어줘"만 요청해요 → 기획서 문단을 먼저 다듬고 보내야 원하는 화면이 나와요.
'대충 돌아가는' 게 목표예요. 완벽하지 않아도 괜찮아요.

✓기획서를 한 문단 프롬프트로 다듬어 AI에게 보냈다✓기획한 앱의 첫 화면이 뜨고 핵심 기능 하나가 작동한다✓화면이 원하는 대로 안 나온 부분을 다시 요청해봤다

미션 3

친구에게 써보게 하기

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

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

설명 없이 써보게 하기

친구에게 앱 주소(또는 화면)를 주고 아무 설명 없이 직접 써보게 해요.

헤매는 곳 관찰하기

어디서 멈칫하는지 가만히 봐요. 설명하면 안 돼요! 헤매는 그 지점이 고칠 곳이에요.

솔직한 답 받기

"뭐가 제일 불편했어?"라고 콕 집어 물어요. 칭찬 말고 불편한 점 하나를 받아요.

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

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

더 쉽게

버튼·메뉴 이름을 이해하기 쉽게

난이도 ★☆☆

→ "버튼 이름을 더 이해하기 쉽게 바꿔줘"

더 빠르게

하려는 일을 더 적은 단계로

난이도 ★★☆

→ "할 일 추가를 한 번에 되게 단계를 줄여줘"

기능 보강

꼭 필요한 기능 하나 더하기

난이도 ★★☆

→ "완료한 할 일에 체크 표시 기능을 추가해줘"

디자인 개선

더 보기 좋은 화면으로

난이도 ★★★

→ "앱을 더 보기 좋은 디자인으로 바꿔줘"

나만의 아이디어!

위에 없는 개선점을 직접 떠올려 1순위로 정하기

⚠️ 자주 하는 실수

친구가 다 좋다고만 해요 → "불편한 점 딱 하나만 말해줘"라고 콕 집어 물어요.
받은 피드백을 안 적어둬요 → 다음 주(W07)에 고칠 재료예요. 꼭 적어두세요.
테스트 중에 설명해줘요 → 헤매는 모습을 봐야 하니 끝까지 지켜만 보세요.

✓친구 1명 이상에게 직접 써보게 했다✓피드백 3개 이상을 받아 적었다✓다음 주에 고칠 1순위를 정했다

보너스 미션

더 해보고 싶다면

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

보너스 ① 경쟁 앱 분석

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

비슷한 앱 3개 찾기

AI에게 물어 이름과 특징을 간단히 정리해요.

내 앱과 비교하기

그 앱들과 내 앱의 핵심 기능을 나란히 놓고 봐요.

차별점 한 줄로 쓰기

"내 앱은 ○○이 다르다"처럼 한 문장으로 정리해요.

📌 핵심

"내 앱은 AI가 순서를 정해주는 게 다르다" 같은 한 줄 차별점을 찾으면 성공이에요.

보너스 ② 피드백 즉시 반영

받은 피드백 중 가장 쉬운 하나를 지금 바로 AI에게 요청해 고쳐봅니다. 예를 들어 미션 3에서 "완료한 할 일에 체크 표시를 넣어줘"라는 피드백을 받았다면, 그 말을 그대로 프롬프트로 바꿔 요청하면 됩니다.

💬 프롬프트 예시

친구가 "완료한 할 일을 체크 표시로 보이게 해줘"라고 했어. 할 일 목록마다 체크박스가 생기게 고쳐줘.

🎯 성공 기준

한 줄 차별점을 찾거나, 피드백 하나를 프롬프트로 바꿔 즉시 반영해 다시 보여주면 성공이에요.

정리

오늘의 핵심 정리

1️⃣

문제

기능이 아니라 진짜 불편에서 앱을 시작했다

2️⃣

기획

문제·대상·기능·화면을 기획서로 정리했다

3️⃣

테스트

프로토타입을 친구에게 테스트하고 피드백을 모았다

📌 다음 주 예고

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

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

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

에러 메시지 읽기

빨간 글자에서 '몇 번째 줄'과 '무슨 에러'인지 찾아본다.

AI에게 보여주기

에러 메시지를 복사해서 "이 에러를 수정해줘"라고 AI에게 요청한다.

고쳐서 다시 실행

AI가 준 수정 코드를 적용하고 다시 실행해 본다.

선생님께 질문

그래도 안 되면 '에러 메시지 + 내가 시도한 것'을 함께 설명한다.