[완독 챌린지 2기] 혼자 공부하는 바이브코딩 with 클로드 코드 - 4주차

혼자 공부하는 바이브코딩 with 클로드 코드 완독 챌린지 2기 커리큘럼

일정	학습 챕터
1주차	Ch 01. 나의 첫 바이브 코딩 ~ Ch 02. 효과적인 프롬프트로  AI 200% 활용하기
2주차	Ch 01. 나의 첫 바이브 코딩 ~ Ch 02. 효과적인 프롬프트로  AI 200% 활용하기
3주차	Ch 03. 클로드 코드 시작하기
4주차	Ch 04. 클로드 코드 실전 활용 Ch 05. 게임 제작으로 배우는 체계적인 개발과 관리
5주차	Ch 06. 클로드 코드에 API 날개 달기 Ch 07. 클로드 코드 AI 에이전트로 개발팀 구성하기
6주차	Ch 07. 클로드 코드 AI 에이전트로 개발팀 구성하기 Ch 08. MCP로 클로드 코드의 한계 넘어서기

 

 

 

 

혼자 공부하는 바이브 코딩 with 클로드 코드

https://www.hanbit.co.kr/store/books/look.php?p_code=B1785590517

 

 

---

 

🚶기본 미션(필수)

• PROJECT 5. 할 일 관리 앱 만들고 캡처하기(Ch04)

 

1. 클로드 채팅 - 할 일 관리 앱 PRD 작성

Prompt

할 일 관리 앱을 만들고 싶어. PRD를 작성해줘.
매일 10-20개 정도의 할 일을 관리하는 개인용 앱이야.
일요일에서 시작해서 토요일까지 요일별로 할 일을 기록하고 관리할거야.

주요 기능은:
- 할 일 추가, 수정, 삭제
- 완료 체크 기능
- 카테고리 분류 (업무/개인/공부)
- 진행률 보기
브라우저에서 바로 실행되고, 새로고침해도 데이터가 사라지지 않았으면 좋겠어.
기술적으로 복잡하지 않게 순수 자바스크립트로 만들고 싶어.

 

 

 

2. 클로드 채팅 - 할 일 관리 앱 PRD를 클로드 코드 사용 가능 프롬프트로 변환

Prompt

이 PRD를 클로드 코드에서 사용할 단계별 프롬프트로 변환해 줘.
5개의 핵심 단계로 정리해서 각 단계마다 명확한 지시 사항을 만들어 줘.

 

 

---

 

3. 클로드 코드 - 할 일 관리 앱 PRD 단계별 프롬프트 입력(1)

Prompt

1단계: 프로젝트 구조 및 기본 뼈대 생성

개인용 할 일 관리 웹앱을 만들 거야. 순수 HTML/CSS/JavaScript로 만들고,
프레임워크나 빌드 도구는 사용하지 않아.

아래 구조로 프로젝트 뼈대를 만들어줘:
- index.html
- style.css
- app.js

요구사항:
- index.html에 일요일부터 토요일까지 7개 요일 컬럼(또는 섹션)의 레이아웃을 만든다
- 상단에는 주간 진행률을 표시할 영역을 둔다
- 각 요일 컬럼에는 할 일을 추가할 수 있는 입력창(텍스트, 카테고리 선택)과
  버튼, 그리고 할 일 목록이 들어갈 빈 영역을 둔다
- 카테고리는 업무/개인/공부 3종 고정
- CSS는 깔끔하고 가독성 좋은 기본 스타일로 작성한다 (반응형까지는 아직 신경 쓰지 않아도 됨)
- 이 단계에서는 JS 로직 없이 정적 레이아웃만 완성한다

 

 

 

 

3. 클로드 코드 - 할 일 관리 앱 PRD 단계별 프롬프트 입력(2)

Prompt

2단계: 할 일 CRUD 기능 구현

1단계에서 만든 뼈대에 할 일 추가/수정/삭제 기능을 app.js에 구현해줘.

요구사항:
- 각 요일 칸의 입력창에서 할 일 텍스트와 카테고리를 입력하고 추가 버튼을 누르면
  해당 요일 목록에 항목이 추가된다
- 각 할 일 항목에는 텍스트, 카테고리 표시(색상 또는 태그), 수정 버튼, 삭제 버튼이 있다
- 수정 버튼을 누르면 텍스트와 카테고리를 인라인으로 수정할 수 있다
- 삭제 버튼을 누르면 확인(confirm) 후 목록에서 제거된다
- 할 일 데이터는 우선 메모리(JS 배열/객체) 상에서만 관리한다 (저장 기능은 다음 단계)
- 데이터 구조는 다음 형태를 참고해줘:
  { id, day, text, category, done, createdAt }

 

 

 

3. 클로드 코드 - 할 일 관리 앱 PRD 단계별 프롬프트 입력(3)

Prompt

3단계: 완료 체크 및 진행률 표시

할 일 항목에 완료 체크 기능과 진행률 표시 기능을 추가해줘.

요구사항:
- 각 할 일 항목에 체크박스(또는 클릭 토글)를 추가해서 완료/미완료 상태를 전환한다
- 완료된 항목은 취소선이나 흐림 처리 등으로 시각적으로 구분한다
- 각 요일 컬럼 상단(또는 하단)에 해당 요일의 진행률(완료 개수 / 전체 개수, %)을 표시한다
- 상단 영역에는 주간 전체 진행률(전체 완료 개수 / 전체 할 일 개수)을 프로그레스 바와
  퍼센트로 표시한다
- 할 일이 추가/삭제/완료 상태 변경될 때마다 진행률이 실시간으로 갱신되어야 한다

 

 

 

 

3. 클로드 코드 - 할 일 관리 앱 PRD 단계별 프롬프트 입력(4)

Prompt

4단계: localStorage로 데이터 영속성 구현

지금까지 메모리에서만 관리하던 할 일 데이터를 localStorage에 저장하고
불러오도록 수정해줘.

요구사항:
- localStorage 키는 "weekly-todo-data"로 하고, 할 일 배열 전체를 JSON 문자열로 저장한다
- 할 일 추가, 수정, 삭제, 완료 체크 등 데이터가 변경될 때마다 localStorage에 자동 저장한다
- 페이지 로드 시 localStorage에 저장된 데이터가 있으면 불러와서 화면에 렌더링한다
- 저장된 데이터가 없거나 비어있을 경우에도 에러 없이 빈 상태로 정상 동작해야 한다
- JSON 파싱 실패 등 예외 상황에 대한 기본적인 에러 처리를 포함한다

 

 

 

 

3. 클로드 코드 - 할 일 관리 앱 PRD 단계별 프롬프트 입력(5)

Prompt

5단계: 마무리 - UI 다듬기 및 검증

전체 기능을 다시 점검하고 완성도를 높여줘.

요구사항:
- 모바일 및 작은 화면에서도 레이아웃이 깨지지 않도록 반응형 스타일을 보완한다
- 카테고리별(업무/개인/공부) 색상 구분을 명확히 하고 전체적인 UI를 다듬는다
- 할 일이 없는 요일/빈 상태에 대한 안내 문구를 추가한다
- 아래 성공 기준을 모두 만족하는지 점검하고, 빠진 부분이 있으면 수정해줘:
  1. 일~토 7개 요일에 할 일을 각각 추가/수정/삭제할 수 있다
  2. 할 일을 완료 체크할 수 있고 시각적으로 구분된다
  3. 업무/개인/공부 카테고리를 지정하고 구분해서 볼 수 있다
  4. 요일별/주간 진행률이 정확히 계산되어 표시된다
  5. 새로고침 후에도 모든 데이터가 유지된다
  6. 별도 서버 설치 없이 브라우저에서 바로 실행된다
  7. 할 일 추가시 시작시간과 종료시간을 입력할 수 있다

 

 

 

 

---

 

그리고. 클로드 코드 - 프로젝트 개선

Prompt

추가. 프로젝트 개선과 작업 관리

[Image #1] 현재 디자인은 모바일에 최적화되어 있는 것 같아. 
데스크톱 환경에서도 전체 화면에서 UI를 볼 수있도록 디자인을 수정해 줘. 
일요일에서 토요일까지 가로 배열 보다는 세로 배열이 좋을 것 같아. 
수정한 디자인은 ‘web_version’이라는 새로운 폴더를 생성한 뒤, 그곳에 저장해 줘.

 

 

 

 

나만의 주간 할 일 관리 앱 완성 v