01 / 14
SESSION 48 · Part 8 AI 이해와 활용

나만의 첫
프로젝트 기획

아이디어 → 기능 목록 → MVP → 와이어프레임 → 스택

02 / 14
💭

기획
먼저일까?

막연한 아이디어로 바로 코딩에 들어가면
3일 안에 막힌다 — 무엇을 만들지 모르니까.

기획은 "끝나는 지점"을 미리 정하는 일이다.
끝이 정해진 프로젝트만 끝낼 수 있다.

03 / 14
🎯

이 세션에서
배우는 것

🎯
MVP 정의
막연한 아이디어를 기능 목록과 최소 범위로 좁힐 수 있다
📐
와이어프레임
화면 흐름을 박스로 스케치 — 디자인 전 구조를 잡는다
🛠️
스택 선택
프로젝트에 맞는 기술 스택을 고를 수 있다
04 / 14
🗺️

기획의 5단계

이 순서대로 따라가면 막힘이 줄어든다.

1
아이디어 한 문장 정의
"누구를 위해, 어떤 문제를, 어떻게 해결하는지" 한 줄로 적기
2
기능 목록 작성
떠오르는 모든 기능 나열 → 중요도·필수도로 분류
3
MVP 범위 정의
"이 3개만 있으면 동작한다"는 최소 집합 — 나머지는 v2로
4
와이어프레임
종이·Figma에 박스로 화면 흐름 스케치
5
기술 스택 선택
React + TS + Tailwind + Firebase + Vercel — 입문 추천
05 / 14
✍️

1단계 — 한 문장으로 정의

이 한 줄을 못 쓰면 아직 기획이 아니다.

📝 한 문장 템플릿
누구를 위해
자취하는 1인 가구를 위한
어떤 문제를
냉장고에 뭐가 있는지 까먹는 문제를
어떻게 해결
사진 한 장으로 식재료를 자동 등록하는 앱

금지: "AI를 활용한 무언가" "사람들에게 도움 되는 서비스" — 너무 막연함

06 / 14
📋

2~3단계 — 기능 목록 → MVP

모든 기능을 다 만들려고 하면 영영 출시 못 한다.

📚 전체 기능 (욕심 단계)
  • 사진으로 식재료 자동 등록
  • 유통기한 알림
  • 레시피 추천 (AI)
  • 장보기 리스트 자동 생성
  • 가족 공유
  • 영양 분석
  • 마트 가격 비교
🎯 MVP (작동하는 최소)
  • 사진으로 식재료 등록
  • 등록한 식재료 목록 보기
  • 삭제 (먹었을 때)

나머지는 v2, v3로 — 첫 릴리즈는 작게.

07 / 14
📐

4단계 — 와이어프레임

디자인이 아니다. 박스로 화면 흐름을 잡는 일.

📱
로그인 화면
[로고] [이메일 입력] [비밀번호 입력] [로그인 버튼]
📋
메인 화면
[헤더] [식재료 카드 리스트] [+ 추가 버튼]
📸
추가 화면
[카메라 영역] [촬영 버튼] [결과 확인] [저장]

도구: 종이 + 펜이 가장 빠르다. 익숙해지면 Figma로.

08 / 14
🛠️

5단계 — 기술 스택 (입문 추천)

이 조합으로 시작하면 막힘이 가장 적다.

⚛️
React
UI 라이브러리
🔷
TypeScript
타입 안정성
🎨
Tailwind CSS
스타일링
🔥
Firebase
DB · 인증
Vercel
배포
Vite
번들러
🐙
GitHub
버전 관리
🤖
Claude/Cursor
AI 페어
09 / 14
🤔

이 스택인가?

입문자에게 가장 친절하고, 실무에서도 통용되는 조합이다.

📚
자료가 많다
막힐 때 검색 한 번으로 답이 나온다 — AI도 잘 안다
🆓
무료로 충분
Firebase·Vercel 무료 플랜으로 첫 사용자 수백 명까지 OK
서버 코드 0줄
Firebase가 DB·인증·파일 저장을 모두 처리 — 프론트만 집중
🚀
push 한 번으로 배포
GitHub에 push → Vercel이 자동 빌드·라이브 — 라이브 URL 즉시
📱
반응형 자동
Tailwind가 모바일·태블릿·데스크톱을 한 줄로 처리
🤖
AI 친화적
Cursor/Claude가 이 스택을 가장 잘 이해 — 코드 생성 정확
10 / 14
🤖

AI와 함께 기획하기

막연한 아이디어를 Claude에게 던지면 기능 분해를 도와준다.

👤
자취생용 냉장고 관리 앱을 만들고 싶어. 기능 분해랑 MVP 추천해 줘
🤖
전체 기능 후보 8개를 뽑아드릴게요: ① 식재료 등록 ② 유통기한 알림 ③ 레시피 추천 ④ 장보기 리스트 ⑤ 가족 공유 ⑥ 사진 인식 ⑦ 영양 분석 ⑧ 가격 비교

MVP 3개 추천: ①+② + 간단한 목록 보기. 이 정도면 1~2주에 완성·배포 가능합니다.
👤
좋아. 와이어프레임 화면 구성도 제안해줘
🤖
5개 화면을 추천합니다: 로그인 → 메인(목록) → 추가 → 상세 → 알림 설정. 각 화면의 컴포넌트도 정리해드릴게요.
11 / 14
✈️

프로젝트 기획 = 여행 계획

처음부터 모든 도시를 욕심내면 출발조차 못 한다.

🌍 여행 비유
"유럽 가고 싶다"
=
아이디어 — 막연한 욕망
"10일에 3개 도시"
=
MVP — 가능한 범위로 좁힘
"동선 그리기"
=
와이어프레임 — 흐름 설계
"비행기·숙소 예약"
=
기술 스택 — 도구 선택
"실제 여행"
=
개발·배포 — 다음 세션의 일
12 / 14

기획 끝났는지 체크리스트

이 6가지에 모두 답할 수 있다면 코딩 시작 준비 완료.

1️⃣
한 문장으로 설명할 수 있나?
"누구·문제·해결" 한 줄
2️⃣
MVP 기능이 5개 이하인가?
많을수록 못 끝낸다
3️⃣
화면이 그려져 있나?
종이·Figma 어떤 형식이든
4️⃣
스택이 정해졌나?
React+TS+Tailwind+Firebase
5️⃣
데이터 모델이 잡혔나?
어떤 정보를 저장할지
6️⃣
완성 기준이 있나?
"이거 되면 끝" 명확한 선
13 / 14
📌

핵심 정리

✍️
한 문장
누구·문제·해결을
한 줄로 정의
📋
기능 목록
전체 나열 후
중요도로 분류
🎯
MVP
"이것만 있으면 동작"
최소 기능 집합
📐
와이어프레임
박스로 화면 흐름
디자인 전 단계
🛠️
스택
React+TS+Tailwind
+Firebase+Vercel
🤖
AI 페어
Claude로 기능 분해
· MVP 추천
14 / 14
🚀

다음 세션
Session 49 · 첫 웹/앱 프로젝트 완성과 배포

기획이 끝났으니, 이제 진짜 만들 차례다.
Vite로 셋업 → Firestore 연결 → Authentication 추가 → AI와 함께 코딩 → Vercel 배포.
작동하는 URL 하나가 강의 100시간보다 강하다.

💡 기억할 것: 처음부터 모든 도시를 욕심내지 말 것 — 작게 시작해서 출시하자.

슬라이드 목록