[4주/6주] 혼자 공부하는 바이브 코딩 4주 차 학습기록

이번 4주 차에 학습한 내용은 책 기준 221p까지의 내용(Ch.4, 5)이다.

 

Chapter 04 클로드 코드 실전 활용

04-1 단계별 프롬프트와 함께 클로드 코드 명령어 익히기

- 단계별 프롬프트 작성하기
- 단계별 프롬프트 실행하기
- [좀 더 알아보기] 클로드 초기 설정 명령어

04-2 작업 재개와 효율성 높이기
- 기능 추가하기
- 컨텍스트 관리하기

04-3 프로젝트 개선과 작업 관리
- 캡처 이미지로 데스크톱 버전 앱의 UI 개선하기
- 참조를 통해 코드 빠르게 점검하기
- 클로드 코드 프로젝트 관리하기

 

 

1단계

프롬프트 1: 프로젝트 초기 설정 및 HTML 구조

TaskFlow라는 할 일 관리 앱을 만들어줘.

프로젝트 구조:
- index.html (메인 HTML)
- style.css (스타일시트)
- app.js (자바스크립트)

index.html 요구사항:
1. 앱 제목 "TaskFlow" 헤더
2. 진행률 표시 영역 (프로그레스 바 + 텍스트)
3. 카테고리 필터 버튼 4개: 전체, 업무(💼), 개인(🏠), 공부(📚)
4. 할 일 입력 폼: 텍스트 input, 카테고리 select, 추가 버튼
5. 할 일 목록을 보여줄 ul 요소

시맨틱 HTML5 태그를 사용하고, 접근성을 고려해서 작성해줘.
CSS와 JS 파일은 외부 파일로 연결해.

 

2단계

프롬프트 2: CSS 스타일링

style.css를 작성해줘.

디자인 요구사항:
1. 전체 레이아웃
   - 최대 너비 500px, 가운데 정렬
   - 깔끔한 흰색 배경에 약간의 그림자
   - 충분한 패딩과 여백

2. 프로그레스 바
   - 높이 20px, 둥근 모서리
   - 배경은 연한 회색, 채워진 부분은 초록색 계열
   - 부드러운 애니메이션 (width transition)

3. 카테고리 필터 버튼
   - 가로로 나란히 배치 (flexbox)
   - 선택된 버튼은 배경색으로 구분
   - 호버 효과 추가

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

5. 할 일 항목
   - 체크박스, 카테고리 뱃지, 텍스트, 삭제 버튼 가로 배치
   - 완료된 항목: 취소선 + opacity 0.5
   - 삭제 버튼은 호버 시에만 표시

6. 반응형: 모바일에서도 잘 보이도록 처리

CSS 변수(custom properties)를 사용해서 색상을 관리해줘.

 

 

 

3단계

프롬프트 3: JavaScript 핵심 기능 (CRUD + 완료 체크)

app.js에 할 일 관리 핵심 기능을 구현해줘.

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

구현할 기능:
1. 상태 관리
   - todos 배열로 모든 할 일 관리
   - currentFilter 변수로 현재 필터 상태 관리

2. 할 일 추가 (addTodo)
   - 입력값 검증 (빈 텍스트 방지)
   - 새 할 일 객체 생성 후 배열에 추가
   - 입력 필드 초기화

3. 할 일 삭제 (deleteTodo)
   - id로 해당 항목 찾아서 배열에서 제거

4. 완료 토글 (toggleTodo)
   - id로 해당 항목 찾아서 completed 값 반전

5. 할 일 수정 (editTodo)
   - 항목 더블클릭 시 input으로 변환
   - Enter 또는 blur 시 저장

6. 렌더링 (renderTodos)
   - currentFilter에 따라 필터링된 목록 표시
   - 완료된 항목은 하단에 정렬

이벤트 리스너:
- 폼 submit 이벤트
- 필터 버튼 클릭 이벤트
- 이벤트 위임으로 할 일 항목 이벤트 처리

모듈 패턴이나 클래스 없이 간단한 함수들로 구현해줘.

 

 

 

4단계

프롬프트 4: LocalStorage 연동 및 데이터 영속성

app.js에 LocalStorage 기능을 추가해줘.

요구사항:
1. 저장 함수 (saveTodos)
   - todos 배열을 JSON으로 변환해서 localStorage에 저장
   - 키 이름: "taskflow_todos"

2. 불러오기 함수 (loadTodos)
   - 페이지 로드 시 localStorage에서 데이터 불러오기
   - 데이터가 없으면 빈 배열 반환
   - JSON 파싱 에러 처리

3. 자동 저장
   - 할 일 추가/삭제/수정/토글 시마다 자동 저장
   - 기존 함수들 수정해서 saveTodos 호출 추가

4. 초기화 함수 (init)
   - DOMContentLoaded 시 실행
   - loadTodos로 데이터 불러오기
   - renderTodos로 화면 표시
   - 이벤트 리스너 등록

데이터 무결성을 위해 try-catch로 에러 처리해줘.

 

 

 

5단계

프롬프트 5: 진행률 표시 및 최종 마무리

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

진행률 기능:
1. updateProgress 함수
   - 전체 할 일 개수와 완료된 개수 계산
   - 퍼센트 계산 (완료/전체 * 100)
   - 프로그레스 바 너비 업데이트
   - 텍스트 표시: "7/15 완료 (47%)"
   - 할 일이 없을 때: "할 일을 추가해보세요!"

2. 카테고리별 진행률 (선택)
   - 필터 버튼에 각 카테고리 진행률 표시

3. 렌더링 최적화
   - renderTodos 호출 시 updateProgress도 함께 호출

마무리 작업:
1. 빈 상태 UI
   - 할 일이 없을 때 안내 메시지 표시
   - 필터링 결과가 없을 때도 처리

2. UX 개선
   - 할 일 추가 후 input에 포커스 유지
   - 키보드 접근성 (Tab, Enter, Escape 처리)

3. 코드 정리
   - 주석 추가
   - 불필요한 console.log 제거

전체 코드가 잘 동작하는지 확인하고, 있다면 버그를 수정해줘.

 

 

 

 

Chapter 05 게임 제작으로 배우는 체계적인 개발과 관리

 

05-1 할루시네이션 없는 AI 콘텐츠 만들기
- 게임 기획과 구현
- 할루시네이션 해결하기

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

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

 

이번주 학습의 핵심 키워드

- 단계별 프롬프트: PRD 기반으로 프로젝트를 나누어 구현하는 전략

- --resume: 대화 상태 유지, 이전 작업 이어서 진행

- Shift + Tab: 자동 승인 모드 전환 단축키

- 컨텍스트: AI가 기억하는 대화/작업 정보 메모리

- /context, /compact: 컨텍스트 상태 확인 및 압축 명령어

- 멀티모달: 텍스트와 이미지를 함께 이해하는 AI

- @ 기호: 파일/폴더를 즉시 불러와 분석하는 참조

- /config, /doctor, /export: 프로젝트 설정 / 진단 / 내보내기 관리 명령어