『혼공바이브』 나의 첫 바이브 코딩 4주차

 

1. 단계별 프롬프트 작성 및 프로젝트 시작

1. PRD(제품 요구사항 문서) 작성: 만들고자 하는 프로그램의 기능, 목표, UI 구성 등을 미리 글로 정리.
2. 프롬프트로 변환: 작성한 PRD를 클로드가 이해하기 쉬운 지시어 형태로 바꾼다.
3. 초기 설정 및 실행: 터미널에서 아래 과정을 순서대로 진행.
   • mkdir [디렉토리명] (프로젝트 폴더 생성)
   • cd [디렉토리명] (폴더 진입)
   • claude (클로드 코드 실행)
   • /init (프로젝트 초기화 및 CLAUDE.md 생성 준비)

---

2. 클로드 코드 주요 상태 확인 명령어

• /status: 현재 클로드 코드가 인식하고 있는 프로젝트의 상태를 보여줍니다.
• /model: 현재 사용 중인 AI 모델을 확인하거나 변경합니다.
• /help: 사용 가능한 모든 명령어 리스트를 확인합니다.

---

3. 세션(Session)과 경로에 대한 궁금증 해결

Q1) 클로드 코드는 세션을 디렉토리 단위로 관리하나요?

아니오! 세션은 디렉토리 단위가 아니라 **전역(Global)**으로 관리됩니다. 하지만 작업 내용은 해당 디렉토리의 파일 시스템에 저장되므로, 특정 프로젝트 폴더에서 이어서 작업하는 것이 원칙입니다.

Q2) 처음 바이브 코딩을 시작한 그 경로에서만 생성되나요?

네, 생성되는 파일들(코드, CLAUDE.md 등)은 명령어를 실행한 **현재 경로(Current Directory)**에 생성됩니다.

Q3) 중단했던 작업을 이어서 하려면?

터미널을 껐더라도 나중에 해당 폴더로 이동한 뒤 아래 명령어를 입력하면 마지막 대화 맥락을 불러옵니다.

claude --resume

---

4. 컨텍스트(Context) 관리: /context & /compact

컨텍스트란 클로드 코드가 현재 세션에서 기억하고 있는 모든 대화 내용과 작업 정보를 말합니다. 대화가 길어지면 클로드의 기억력이 떨어지거나 토큰 비용이 많이 들기 때문에 정리가 필요합니다.

• /context: 자동으로 컨텍스트를 압축하여 효율적으로 관리합니다.

  • 

• /compact: 수동으로 컨텍스트를 압축하여 '기억의 부하'를 줄입니다.

🔍 /compact 레벨별 상세 설명 (이해가 잘 안갔던 부분!)

압축은 **"불필요한 군더더기를 빼고 핵심 로직만 남기는 과정"**이라고 보시면 됩니다.

레벨	압축 방식	비유
Level 1	공백, 중복 제거	책에서 여백과 줄바꿈을 줄여서 페이지 수 줄이기
Level 2	변수명 단축, 구조 단순화	"사용자_이름"을 "u_nm"으로 바꾸는 등 요약표 만들기
Level 3	핵심 로직만 유지	주석, 설명 다 빼고 **"결론(코드 로직)"**만 남기기

💡 왜 하나요?

AI는 한 번에 기억할 수 있는 양(토큰)이 정해져 있습니다. 대화가 너무 길어져서 AI가 앞 내용을 까먹기 시작할 때, 중요한 핵심 요약본만 남기고 나머지는 비워서 다시 똑똑하게 일할 수 있는 공간을 만드는 작업입니다.

---

5. 💡 꿀팁

1. 경로 주의: 항상 cd 명령어로 프로젝트 폴더에 들어간 뒤 claude를 실행하세요. (엉뚱한 곳에서 실행하면 시스템 파일이 섞일 수 있습니다.)
2. 압축의 타이밍: 클로드가 예전 대화를 잘 기억 못 하거나 답변 속도가 느려진다면 /compact를 실행할 때

 

---

 

PROJECT 5. 할 일 관리 앱 만들고 캡처하기

 

Step 1: 프로젝트 구조 및 HTML 기본 틀 생성

 

Step 2: CSS 스타일링 완성

 

Step 3: JavaScript 기본 구조 및 데이터 관리 구현

 

Step 4: UI 렌더링 및 필터링 기능 구현

 

Step 5: 이벤트 리스너 연결 및 수정 기능 완성

 

Step 6: 카테고리 분류 기능 만들기