실전 미니 프로젝트 — 할 일 앱 만들기

🎯 배운 것을 모두 한 흐름으로

이번 강의는 시리즈의 마지막 강의이자 총 정리입니다. 1강부터 23강까지 배운 모든 워크플로우를 활용해서 할 일 앱(To-Do App)을 처음부터 끝까지 완성합니다. 단순한 예제처럼 보이지만, 여기에는 바이브 코딩의 핵심 패턴이 모두 담겨 있습니다.

📝 Phase 1 — 기획 (5분)

먼저 만들 것을 한 문단으로 정의합니다 (10강의 방법):

간단한 할 일 앱. 기능: 할 일 추가, 완료 체크, 삭제, 카테고리 분류. 데이터는 localStorage에 저장해 새로고침해도 유지. 모바일에서도 잘 보여야 함. 심플하고 깔끔한 디자인.

AI에게 이 한 문단을 주고 기술 스택을 추천받습니다:

위 앱을 만들려고 해. 입문자에게 적합한 가장 단순한 기술 스택을 추천해줘. HTML/CSS/JS 단독도 괜찮고, 프레임워크도 괜찮아.

🏗️ Phase 2 — 환경 설정과 첫 실행 (10분)

AI의 추천을 따라 프로젝트를 셋업합니다 (3강의 방법). 처음 화면이 뜨면 커밋합니다:

git init
git add .
git commit -m "init: 프로젝트 초기 설정"

🎨 Phase 3 — UI 먼저 (15분)

데이터 저장 없이 UI만 먼저 만듭니다 (18강의 방법):

할 일 앱의 UI를 만들어줘. 기능 없이 화면 구성만.
- 상단: 앱 제목 + 할 일 입력 필드 + 추가 버튼
- 중간: 카테고리 탭 (전체/업무/개인/기타)
- 하단: 할 일 목록 (체크박스 + 텍스트 + 삭제 버튼)
Tailwind CSS, 모바일 우선 반응형, 부드럽고 현대적인 디자인.

UI가 마음에 들면 커밋. 마음에 안 들면 수정 요청 (18강 피드백 방법).

⚙️ Phase 4 — 핵심 기능 추가 (30분)

기능을 하나씩 추가합니다 (11강의 방법). 각 기능마다 실행·확인·커밋:

기능 1 — 할 일 추가:

입력 필드에 텍스트를 쓰고 추가 버튼을 클릭하면 목록에 추가되게 해줘. 빈 입력은 추가되지 않아야 해. 추가 후 입력 필드는 자동으로 비워져야 해.

기능 2 — 완료 체크:

체크박스를 클릭하면 해당 할 일이 완료 처리되게 해줘. 완료된 항목은 텍스트에 취소선이 생기고 색이 흐려져야 해.

기능 3 — 삭제:

삭제 버튼을 클릭하면 해당 항목이 목록에서 제거되게 해줘.

기능 4 — localStorage 저장:

지금은 새로고침하면 할 일 목록이 사라져. localStorage에 저장해서 새로고침해도 목록이 유지되게 해줘.

🧪 Phase 5 — 테스트 (10분)

모든 기능을 직접 테스트합니다 (9강의 체크리스트):

• ☐ 일반 텍스트 추가 → 목록에 나타나는가?
• ☐ 빈 텍스트 추가 → 거부되는가?
• ☐ 체크박스 클릭 → 취소선이 생기는가?
• ☐ 삭제 버튼 → 목록에서 사라지는가?
• ☐ 새로고침 → 목록이 유지되는가?
• ☐ 모바일 화면 → 잘 보이는가?

🚀 Phase 6 — 배포 (15분)

GitHub에 올리고 Vercel로 배포합니다 (15강·19강의 방법):

git add .
git commit -m "feat: 할 일 앱 완성"
git push origin main

Vercel에 연결하면 1~2분 후 전 세계 누구나 접근 가능한 URL이 생깁니다.

🎉 완성 — 그리고 다음 단계

축하합니다! 바이브 코딩으로 기획부터 배포까지 완성했습니다. 이제 이 앱에 기능을 더 추가해보세요:

• 마감일 기능 추가
• 우선순위 설정 (중요도 별표)
• 카테고리 필터 동작하게 만들기
• 다크 모드 토글
• 할 일 개수 통계 (오늘 완료 N개)

각 기능을 11강의 반복(iteration) 방식으로 하나씩 추가해보세요. 막힐 때마다 이 시리즈에서 배운 방법들을 꺼내 쓰세요.

🗺️ 바이브 코딩 이후의 학습 지도

바이브 코딩을 통해 "만드는 경험"을 쌓았다면, 이제 깊이를 더할 차례입니다:

방향	다음 학습
프론트엔드 심화	React 기초부터 체계적으로 (이 플랫폼의 React 시리즈)
백엔드 이해	Node.js 또는 Python 기초
데이터베이스	SQL 기초 (이 플랫폼의 SQL 시리즈)
AI 더 깊이	AI API 직접 연동, 프롬프트 엔지니어링
협업	Git 심화, 코드 리뷰 문화

🎓 시리즈 마무리

이 시리즈에서 배운 것들:

• 바이브 코딩의 개념과 AI 도구 선택
• 지시→생성→실행→수정의 핵심 사이클
• 좋은 프롬프트의 3원칙과 요구사항 전달 기술
• 맥락 관리, 작업 계획, 결과 검증
• 0→1 프로젝트 시작, 기능 반복(iteration)
• 디버깅, 리팩토링, 테스트
• 버전 관리(Git), 외부 API 연동, 데이터베이스
• UI 구현, 배포, 보안
• AI의 한계와 주도권 유지
• 생산성 팁과 나만의 워크플로우

이 모든 것을 한 번에 완벽하게 할 필요는 없습니다. 실제로 만들어보면서 필요할 때마다 다시 돌아와 복습하면 됩니다. 바이브 코딩의 진짜 학습은 직접 부딪히는 과정에서 일어납니다.

지금 배운 것으로 무언가를 만들어보세요. 그것이 이 시리즈의 진정한 마지막 강의입니다.