VibeCoding4

탁가이버·2026년 1월 19일

VibeCoding

목록 보기

4/4

✅Week 4 Progress: Ch 04 ~ 05

🚶Basic Mission (Required)
PROJECT 5. Create a To-Do Management App and Take a Screenshot

https://sechan9999.github.io/ReadingChallenge/ToDo_App/index.html
⠀⠀
🏃Additional Mission (Optional)
PROJECT 7. Create a trivia quiz game app and capture it

List of precautions to keep in mind when developing with AI

⠀⠀
Practice Example:https://github.com/taehojo/vibecoding
Q&A:https://github.com/taehojo/vibecoding/issues

📋 할 일 관리 앱 PRD (Product Requirements Document)

1. 개요

1.1 제품명

Daily Todo Manager - 개인용 할 일 관리 앱

1.2 목적

매일 10-20개의 할 일을 효율적으로 관리하고 진행 상황을 한눈에 파악할 수 있는 경량 웹 앱

1.3 대상 사용자

일일 업무/개인 일정을 체계적으로 관리하고 싶은 개인 사용자
별도 설치 없이 브라우저에서 바로 사용하길 원하는 사용자

2. 기술 스펙

항목	내용
프론트엔드	HTML5, CSS3, Vanilla JavaScript (ES6+)
데이터 저장	LocalStorage (브라우저 내장 저장소)
외부 의존성	없음 (순수 JavaScript)
호환 브라우저	Chrome, Firefox, Safari, Edge (최신 버전)

3. 핵심 기능 요구사항

3.1 할 일 CRUD

3.1.1 추가 (Create)

할 일 제목 입력 (필수, 최대 100자)
카테고리 선택 (필수)
Enter 키 또는 추가 버튼으로 등록
빈 제목 입력 시 경고 메시지 표시

3.1.2 조회 (Read)

전체 할 일 목록 표시
카테고리별 필터링
완료/미완료 상태 구분 표시

3.1.3 수정 (Update)

할 일 제목 인라인 수정
카테고리 변경
더블클릭 또는 수정 버튼으로 편집 모드 진입

3.1.4 삭제 (Delete)

개별 할 일 삭제
완료된 할 일 일괄 삭제
삭제 전 확인 없이 즉시 삭제 (간편성 우선)

3.2 완료 체크

체크박스 클릭으로 완료/미완료 토글
완료된 항목은 취소선 + 흐린 색상으로 표시
완료 시간 자동 기록

3.3 카테고리 분류

카테고리	색상 코드	아이콘/라벨
업무	`#3B82F6` (파랑)	💼 업무
개인	`#10B981` (초록)	🏠 개인
공부	`#8B5CF6` (보라)	📚 공부

3.4 진행률 표시

전체 진행률: (완료 개수 / 전체 개수) × 100%
프로그레스 바 시각화
카테고리별 진행률 표시 (선택 기능)
숫자로 현황 표시: "5 / 12 완료"

4. 데이터 구조

4.1 할 일 항목 (Todo Item)

{
  id: "uuid-string",        // 고유 식별자
  title: "할 일 내용",       // 제목 (필수)
  category: "work",         // 카테고리: "work" | "personal" | "study"
  completed: false,         // 완료 여부
  createdAt: "ISO-8601",    // 생성 시간
  completedAt: null         // 완료 시간 (null 또는 ISO-8601)
}

4.2 LocalStorage 키

{
  key: "dailyTodoManager_todos",
  value: JSON.stringify([...todoItems])
}

5. UI/UX 요구사항

5.1 레이아웃 구조

┌─────────────────────────────────────────┐
│  📋 Daily Todo Manager                  │
├─────────────────────────────────────────┤
│  [ 할 일 입력... ] [카테고리▼] [+ 추가] │
├─────────────────────────────────────────┤
│  필터: [전체] [업무] [개인] [공부]       │
├─────────────────────────────────────────┤
│  ████████████░░░░░░  5/12 완료 (42%)    │
├─────────────────────────────────────────┤
│  ☐ 💼 프로젝트 회의 준비        [✏️][🗑️] │
│  ☑ 📚 JavaScript 강의 듣기     [✏️][🗑️] │
│  ☐ 🏠 장보기                   [✏️][🗑️] │
│  ...                                    │
├─────────────────────────────────────────┤
│  [🗑️ 완료된 항목 모두 삭제]              │
└─────────────────────────────────────────┘

5.2 반응형 디자인

최소 너비: 320px (모바일)
최대 너비: 600px (데스크톱에서 중앙 정렬)
터치 친화적 버튼 크기 (최소 44px)

5.3 인터랙션

동작	결과
체크박스 클릭	완료 상태 토글
제목 더블클릭	편집 모드 진입
Enter (편집 중)	수정 저장
Esc (편집 중)	수정 취소
삭제 버튼 클릭	항목 즉시 삭제

6. 비기능 요구사항

6.1 성능

초기 로딩: 1초 이내
항목 추가/삭제 반응: 100ms 이내
20개 항목 기준 부드러운 스크롤

6.2 접근성

키보드 네비게이션 지원
적절한 색상 대비 (WCAG AA 기준)
스크린 리더 호환 라벨

6.3 데이터 안정성

모든 변경사항 즉시 LocalStorage 저장
페이지 새로고침/종료 후에도 데이터 유지
잘못된 데이터 형식 방어 로직

7. 파일 구조

todo-app/
├── index.html      # 메인 HTML 구조
├── style.css       # 스타일시트
├── app.js          # 메인 JavaScript 로직
└── README.md       # 프로젝트 설명

8. 개발 우선순위

Phase 1: MVP (필수 기능)

✅ 할 일 추가/삭제
✅ 완료 체크박스
✅ LocalStorage 저장
✅ 기본 UI

Phase 2: 핵심 기능

✅ 카테고리 분류
✅ 진행률 표시
✅ 카테고리 필터링
✅ 할 일 수정

Phase 3: 개선 (선택)

⬜ 완료 항목 일괄 삭제
⬜ 드래그 앤 드롭 순서 변경
⬜ 다크 모드

9. 성공 지표

지표	목표
일일 사용 빈도	최소 1회 이상
평균 등록 항목 수	10-20개
완료율	70% 이상
데이터 손실	0건

10. 제약 사항 및 참고

LocalStorage 용량: 약 5MB (충분)
동기화 미지원: 단일 브라우저/기기에서만 사용
백업 미지원: 브라우저 데이터 삭제 시 복구 불가
오프라인 사용: 완전 지원 (서버 불필요)

문서 버전: 1.0
작성일: 2025년 1월

🛠️ Claude Code 단계별 프롬프트 - Todo App

각 프롬프트를 순서대로 Claude Code에 입력하세요.
이전 단계가 완료된 후 다음 단계를 진행합니다.

📁 Step 1: 프로젝트 구조 및 HTML 생성

todo-app 폴더를 만들고 다음 파일들을 생성해줘:
- index.html
- style.css  
- app.js

index.html에 다음 구조를 만들어줘:
1. 헤더: 앱 제목 "📋 Daily Todo Manager"
2. 입력 영역: 
   - 할 일 텍스트 input (placeholder: "할 일을 입력하세요...")
   - 카테고리 select (업무/개인/공부)
   - 추가 버튼
3. 필터 버튼 그룹: 전체, 업무, 개인, 공부
4. 진행률 영역: 프로그레스 바 + 텍스트 (예: "0/0 완료")
5. 할 일 목록 ul (id="todo-list")
6. 하단: "완료된 항목 모두 삭제" 버튼

style.css와 app.js를 link/script로 연결해줘.
HTML은 시맨틱 태그를 사용하고, 각 요소에 적절한 id와 class를 부여해줘.

✅ 예상 결과물

todo-app/index.html - 완전한 HTML 구조
todo-app/style.css - 빈 파일
todo-app/app.js - 빈 파일

🎨 Step 2: CSS 스타일링

style.css에 Todo 앱 스타일을 작성해줘.

디자인 요구사항:
1. 전체 레이아웃:
   - 최대 너비 500px, 중앙 정렬
   - 배경색 #f5f5f5, 카드 배경 흰색
   - 적절한 padding과 border-radius

2. 입력 영역:
   - input과 select, 버튼이 한 줄에 배치
   - 추가 버튼은 파란색 (#3B82F6)

3. 카테고리 색상:
   - 업무: #3B82F6 (파랑)
   - 개인: #10B981 (초록)  
   - 공부: #8B5CF6 (보라)

4. 할 일 항목:
   - 체크박스, 카테고리 뱃지, 제목, 수정/삭제 버튼
   - 완료된 항목: 취소선 + opacity 0.6
   - hover 시 배경색 변경

5. 프로그레스 바:
   - 높이 8px, 둥근 모서리
   - 배경 #e0e0e0, 채움색 #10B981

6. 반응형: 모바일(320px)에서도 깨지지 않게

깔끔하고 모던한 느낌으로 만들어줘.

✅ 예상 결과물

todo-app/style.css - 완성된 스타일시트
브라우저에서 열면 UI 레이아웃 확인 가능

⚙️ Step 3: JavaScript 핵심 로직 (CRUD + LocalStorage)

app.js에 Todo 앱의 핵심 기능을 구현해줘.

데이터 구조:
const todo = {
  id: crypto.randomUUID(),
  title: "할 일 내용",
  category: "work" | "personal" | "study",
  completed: false,
  createdAt: new Date().toISOString(),
  completedAt: null
}

필요한 기능:

1. 초기화:
   - DOMContentLoaded 시 LocalStorage에서 todos 불러오기
   - 키 이름: "dailyTodoManager_todos"
   - 없으면 빈 배열로 시작

2. 렌더링 함수 (renderTodos):
   - todos 배열을 기반으로 목록 HTML 생성
   - 각 항목: 체크박스, 카테고리 뱃지, 제목, 수정/삭제 버튼

3. 추가 기능 (addTodo):
   - 입력값 검증 (빈 문자열 방지)
   - 새 todo 객체 생성 후 배열에 추가
   - LocalStorage 저장 + 렌더링
   - 입력 필드 초기화

4. 삭제 기능 (deleteTodo):
   - id로 해당 항목 찾아서 삭제
   - LocalStorage 저장 + 렌더링

5. 완료 토글 (toggleComplete):
   - completed 상태 반전
   - completedAt 업데이트 (완료 시 현재 시간, 취소 시 null)
   - LocalStorage 저장 + 렌더링

6. LocalStorage 함수:
   - saveTodos(): JSON.stringify로 저장
   - loadTodos(): JSON.parse로 불러오기 (에러 처리 포함)

7. 이벤트 리스너:
   - 추가 버튼 클릭
   - input에서 Enter 키
   - 할 일 목록에 이벤트 위임 (체크박스, 삭제 버튼)

코드는 모듈 패턴이나 즉시실행함수로 감싸서 전역 오염을 방지해줘.

✅ 예상 결과물

할 일 추가/삭제/완료 체크 동작
새로고침해도 데이터 유지

🏷️ Step 4: 카테고리 필터링 + 수정 기능

app.js에 다음 기능을 추가해줘:

1. 카테고리 필터링:
   - 현재 필터 상태 변수 추가 (기본값: "all")
   - 필터 버튼 클릭 시 필터 상태 변경
   - 활성 필터 버튼에 active 클래스 추가
   - renderTodos에서 필터에 맞는 항목만 표시
   - 필터: "all", "work", "personal", "study"

2. 할 일 수정 기능:
   - 제목 더블클릭 시 편집 모드 진입
   - 기존 텍스트를 input으로 변환
   - Enter: 수정 저장
   - Esc: 수정 취소
   - 빈 문자열이면 저장 안 함
   - updateTodo(id, newTitle) 함수 구현

3. 완료 항목 일괄 삭제:
   - "완료된 항목 모두 삭제" 버튼 클릭 시
   - completed가 true인 항목 모두 삭제
   - clearCompleted() 함수 구현

4. 카테고리 뱃지 표시:
   - 각 할 일 앞에 이모지 + 색상 뱃지 표시
   - work: 💼, personal: 🏠, study: 📚

기존 코드와 잘 통합되도록 해줘.

✅ 예상 결과물

카테고리별 필터링 동작
더블클릭으로 인라인 수정
완료 항목 일괄 삭제

📊 Step 5: 진행률 표시 + 최종 마무리

app.js에 진행률 기능을 추가하고 전체 앱을 마무리해줘:

1. 진행률 계산 및 표시 (updateProgress):
   - 전체 개수와 완료 개수 계산
   - 퍼센트 계산: (완료 / 전체) * 100
   - 프로그레스 바 너비 업데이트
   - 텍스트 표시: "5 / 12 완료 (42%)"
   - 전체가 0이면 "할 일을 추가하세요" 표시
   - renderTodos 호출 시마다 updateProgress도 호출

2. 현재 필터 기준 진행률:
   - 전체 필터: 모든 항목 기준
   - 카테고리 필터: 해당 카테고리만 기준

3. 빈 상태 처리:
   - 할 일이 없을 때: "할 일이 없습니다. 새로운 할 일을 추가해보세요!"
   - 필터 결과가 없을 때: "이 카테고리에 할 일이 없습니다."

4. 접근성 개선:
   - 버튼에 aria-label 추가
   - 체크박스에 적절한 label 연결
   - 키보드 탐색 가능하도록

5. 코드 정리:
   - 불필요한 console.log 제거
   - 주석 추가 (주요 함수 설명)
   - 코드 포맷팅 정리

마지막으로 브라우저에서 테스트하고 문제가 있으면 수정해줘.

✅ 최종 결과물

완전히 동작하는 Todo 앱
모든 기능 정상 작동
깔끔한 코드

🚀 사용 방법

터미널에서 claude 명령어로 Claude Code 실행
Step 1 프롬프트 복사 → 붙여넣기 → 실행
결과 확인 후 Step 2 진행
각 단계 완료 후 브라우저에서 index.html 열어 테스트
문제 발생 시 해당 단계에서 수정 요청

💡 추가 팁

오류 발생 시:

[오류 내용]이 발생해. 수정해줘.

기능 추가 시:

[새 기능 설명]을 추가해줘. 기존 코드와 통합해서.

스타일 변경 시:

[변경 사항]으로 CSS를 수정해줘.

총 예상 소요 시간: 30-45분

본 강의는 『혼자 공부하는 바이브 코딩 with 클로드 코드』의 내용을 바탕으로 제작하였습니다.

👨‍🏫주요 강의 내용
Ch 05. 게임 제작으로 배우는 체계적인 개발과 관리
05-1 할루시네이션 없는 AI 콘텐츠 만들기

1단계: 퀴즈 게임 구현하기
할루시네이션 해결하기

05-2 자동화로 개발 효율 높이기

2단계: 게임 확장하기
커스텀 명령어로 반복 작업 자동화하기
커스텀 명령어 확장하기
새로운 퀴즈 문제 추가 자동화

05-3 명령어 체이닝을 통해 유지보수 전략

3단계: 데이터 저장 및 순위 시스템
게임 제작 워크플로 자동화하기
클로드 코드가 스스로 만드는 커스텀 명령어
효율적인 유지보수 워크플로 구축하기

🔗실습 예제: https://github.com/taehojo/vibecoding
🔗저자님께 질문하기: https://github.com/taehojo/vibecoding/issues
🔗혼자 공부하는 바이브 코딩 with 클로드 코드: https://www.hanbit.co.kr/store/books/look.php?p_code=B1785590517&type=book&utm_source=inflearn&utm_medium=affiliate&utm_campaign=50004

탁가이버

더 나은 세상은 가능하다를 믿고 실천하는 활동가

이전 포스트

VibeCoding4

VibeCoding

📋 할 일 관리 앱 PRD (Product Requirements Document)

1. 개요

1.1 제품명

1.2 목적

1.3 대상 사용자

2. 기술 스펙

3. 핵심 기능 요구사항

3.1 할 일 CRUD

3.1.1 추가 (Create)

3.1.2 조회 (Read)

3.1.3 수정 (Update)

3.1.4 삭제 (Delete)

3.2 완료 체크

3.3 카테고리 분류

3.4 진행률 표시

4. 데이터 구조

4.1 할 일 항목 (Todo Item)

4.2 LocalStorage 키

5. UI/UX 요구사항

5.1 레이아웃 구조

5.2 반응형 디자인

5.3 인터랙션

6. 비기능 요구사항

6.1 성능

6.2 접근성

6.3 데이터 안정성

7. 파일 구조

8. 개발 우선순위

Phase 1: MVP (필수 기능)

Phase 2: 핵심 기능

Phase 3: 개선 (선택)

9. 성공 지표

10. 제약 사항 및 참고

🛠️ Claude Code 단계별 프롬프트 - Todo App

📁 Step 1: 프로젝트 구조 및 HTML 생성

✅ 예상 결과물

🎨 Step 2: CSS 스타일링

✅ 예상 결과물

⚙️ Step 3: JavaScript 핵심 로직 (CRUD + LocalStorage)

✅ 예상 결과물

🏷️ Step 4: 카테고리 필터링 + 수정 기능

✅ 예상 결과물

📊 Step 5: 진행률 표시 + 최종 마무리

✅ 최종 결과물

🚀 사용 방법

💡 추가 팁

VibeCoding3

0개의 댓글