Vibe 코딩 가이드 3/5

⚡ Vibe 코딩 가이드

💪 3단계 - 실용 앱 제작

🎉 2단계 완료를 축하합니다!
이제 인터랙티브한 웹페이지를 만들 수 있습니다. 3단계에서는 실제로 사용할 수 있는 앱을 만들어봅시다!

🌟 3단계에서 배울 내용

• 입력 폼 만들기 (텍스트, 선택 상자, 체크박스)
• 사용자가 입력한 데이터 받아서 처리하기
• 리스트 만들고 항목 추가/삭제하기
• 데이터를 브라우저에 저장하기 (새로고침해도 유지)
• 실용적인 미니 앱 만들기

🎯 3단계의 목표!
단순히 보기만 하는 페이지가 아니라 실제로 사용할 수 있는 앱을 만듭니다!

📝 실습 1: 입력 폼 만들기

📝 기본 입력창 만들기:

간단한 회원가입 폼을 만들어주세요.

입력 항목:
- 이름 (텍스트 입력창)
- 이메일 (이메일 입력창)
- 비밀번호 (비밀번호 입력창)
- 성별 (남자/여자 선택 버튼)
- 약관동의 (체크박스)

"가입하기" 버튼을 누르면
입력한 내용을 알림창으로 보여주세요.

💡 입력 폼 종류:
- 텍스트 입력: 이름, 주소 등
- 이메일 입력: 자동으로 이메일 형식 체크
- 비밀번호 입력: 글자가 ●●● 로 표시됨
- 숫자 입력: 나이, 수량 등
- 드롭다운: 여러 선택지 중 하나
- 체크박스: 여러 개 선택 가능
- 라디오 버튼: 하나만 선택 가능

📝 입력값 검증하기:

이름이 비어있으면
"이름을 입력해주세요" 경고 메시지를 보여주세요.

비밀번호가 6자 미만이면
"비밀번호는 6자 이상이어야 합니다" 메시지를 보여주세요.

약관 체크박스를 체크하지 않으면
"약관에 동의해주세요" 메시지를 보여주세요.

📋 실습 2: 할 일 목록(To-Do List) 만들기

🎯 프로젝트: 나만의 할 일 관리 앱

📝 기본 기능 요청:

할 일 목록 앱을 만들어주세요.

기능:
1. 입력창에 할 일을 입력
2. "추가" 버튼 클릭하면 목록에 추가됨
3. 각 할 일 옆에 "삭제" 버튼 있음
4. 할 일을 클릭하면 취소선이 그어짐 (완료 표시)
5. 할 일이 없으면 "할 일을 추가해보세요" 메시지 표시

디자인:
- 깔끔한 카드 스타일
- 완료된 항목은 회색으로 표시
- 삭제 버튼은 빨간색

1 기본 구조 만들기 - 입력창 + 추가 버튼 + 목록 영역

2 추가 기능 구현 - 버튼 클릭하면 목록에 항목 추가

3 삭제 기능 구현 - 각 항목에 삭제 버튼

4 완료 표시 기능 - 클릭하면 취소선

5 스타일링 - 예쁘게 꾸미기

💾 실습 3: 데이터 저장하기 (localStorage)

🎯 문제점:
지금까지 만든 앱은 새로고침하면 데이터가 사라집니다!
localStorage를 사용하면 브라우저에 데이터를 저장할 수 있습니다.

📝 데이터 저장 기능 추가:

할 일 목록에 localStorage를 추가해주세요.

- 할 일을 추가하면 localStorage에 저장
- 할 일을 삭제하면 localStorage에서도 삭제
- 페이지를 새로고침해도 할 일 목록이 유지됨
- 페이지 로딩 시 localStorage에서 데이터를 불러와서 표시

💡 localStorage란?
브라우저에 데이터를 저장하는 기능입니다.
- 새로고침해도 데이터 유지
- 브라우저를 닫아도 유지
- 사용자가 직접 삭제하기 전까지 계속 저장됨
- 간단한 앱 데이터 저장에 완벽!

🎨 실습 4: 실용 앱 프로젝트 아이디어

📱 프로젝트 1: 간단한 메모장
텍스트를 입력하면 자동 저장되는 메모장
- 자동 저장 기능
- 글자 수 카운터
- 복사 버튼

🛒 프로젝트 2: 쇼핑 리스트
장볼 물건을 관리하는 앱
- 물건 추가/삭제
- 카테고리별 분류
- 구매 완료 체크

📚 프로젝트 3: 독서 기록장
읽은 책을 기록하는 앱
- 책 제목, 저자, 평점 입력
- 읽은 책 리스트 표시
- 별점 평가 기능

💰 프로젝트 4: 가계부
수입/지출을 기록하는 앱
- 날짜, 항목, 금액 입력
- 수입/지출 구분
- 총 잔액 자동 계산

⏱️ 프로젝트 5: 공부 타이머
공부 시간을 측정하고 기록
- 타이머 기능 (시작/멈춤/리셋)
- 오늘 공부한 시간 표시
- 과목별 시간 기록

🚀 실습 5: 종합 프로젝트 - 나만의 앱 만들기

📝 단계별 앱 제작 방법:

1 기획하기
- 어떤 앱을 만들지 정하기
- 필요한 기능 3~5개 나열하기
- 간단한 화면 구성 그려보기

2 기본 구조 만들기
AI에게 전체 구조 요청 (입력 폼 + 버튼 + 결과 영역)

3 기능 하나씩 추가
추가, 삭제, 수정 등 기능을 하나씩 구현

4 localStorage 추가
데이터를 저장하고 불러오는 기능

5 스타일링
색상, 레이아웃, 애니메이션 추가

6 테스트 & 수정
여러 상황에서 테스트하고 버그 수정

📝 독서 기록장 만들기 예시:

독서 기록 웹 앱을 만들어주세요.

입력 폼:
- 책 제목 (텍스트)
- 저자 (텍스트)
- 평점 (1~5 별점)
- 짧은 감상 (여러 줄 텍스트)
- "기록 추가" 버튼

책 리스트:
- 카드 형태로 표시
- 제목은 크고 굵게
- 평점은 별(⭐)로 표시
- 각 카드에 "삭제" 버튼

기능:
- localStorage에 저장
- 읽은 책 개수 표시
- 평균 평점 계산해서 표시

디자인은 책을 좋아하는 느낌으로 따뜻한 색상을 사용해주세요.

🔧 고급 기능 추가하기

📝 검색 기능:

할 일 목록에 검색 기능을 추가해주세요.
검색창에 텍스트를 입력하면
일치하는 항목만 표시되게 해주세요.

📝 정렬 기능:

"최신순", "오래된순" 버튼을 추가해주세요.
버튼을 클릭하면 해당 순서로 정렬되게 해주세요.

📝 필터 기능:

"전체", "완료", "미완료" 탭을 만들어주세요.
탭을 클릭하면 해당하는 항목만 표시되게 해주세요.

📝 통계 표시:

전체 항목 수, 완료된 항목 수, 남은 항목 수를
상단에 표시해주세요.
숫자는 크고 눈에 띄게 만들어주세요.

⚠️ 자주 발생하는 문제와 해결법

❌ 문제: localStorage에 저장했는데 불러오기가 안 돼요
✅ 해결: "localStorage에서 데이터를 불러올 때 JSON.parse를 사용하고, 페이지 로딩 시 자동으로 불러오는 함수를 실행해주세요"

❌ 문제: 항목을 삭제하면 다른 항목도 같이 삭제돼요
✅ 해결: "각 항목에 고유한 ID를 부여해서 정확한 항목만 삭제되게 해주세요"

❌ 문제: 입력창이 비어있어도 추가돼요
✅ 해결: "입력창이 비어있으면 '내용을 입력해주세요' 경고를 표시하고 추가되지 않게 해주세요"

❌ 문제: Enter 키를 눌러도 추가가 안 돼요
✅ 해결: "입력창에서 Enter 키를 누르면 추가 버튼이 클릭되게 해주세요"

🌐 GitHub에 업로드하기

1 파일 준비
index.html 파일 (필요시 images 폴더도)

2 저장소 만들고 업로드
새 Repository → Upload files → index.html

3 GitHub Pages 활성화
Settings → Pages → Branch "main" 선택

4 테스트
웹사이트에서 모든 기능이 잘 작동하는지 확인
특히 localStorage가 제대로 작동하는지 확인!

💡 localStorage는 GitHub Pages에서도 작동합니다!
각 사용자의 브라우저에 데이터가 저장되므로 서버가 필요 없습니다.

🏆 3단계 미션

1 위의 5가지 프로젝트 중 하나를 선택해서 완성하기

2 최소 3가지 기능 구현 (추가/삭제/완료 등)

3 localStorage로 데이터 저장 기능 추가

4 입력값 검증 기능 추가

5 GitHub Pages에 배포하고 실제로 며칠간 사용해보기

🎓 다음 단계 예고:
3단계를 완료했다면 API 연동, 실시간 데이터, 고급 애니메이션 등을 배우는 4단계로 넘어갈 준비가 되었습니다!
4단계부터는 날씨 정보, 환율 정보 등 실시간 데이터를 사용하는 앱을 만듭니다! 🌍

💪 여러분의 성장:
1단계: 텍스트 페이지 ➜ 2단계: 인터랙티브 페이지 ➜ 3단계: 실제 사용 가능한 앱!
이제 진짜 개발자처럼 생각하고 있습니다! 🎉