[복습] 혼공 바이브코딩 클로드코드 공부 복습

클로드 입력창에 '#'을 입력하면 클로드코드가 그 뒤로 이어질 말을 메모리에 추가할 지침으로 인식해서 CLAUDE.md에 추가할 수 있습니다. /memory

 

claude --resume (/resume) : 세션재개하기(claude -c)

rewind 

/config 각종 설정 확인

/export 컨텍스트 내용을 외부(파일)로 저장

 

커스텀 커멘드 

현재 프로젝트에 커스텀 명령어 폴더를 만들어 줘.
.claude/commands 디렉터리를 생성하고 구조를 보여줘.

.claude/commands/quiz-validate.md 파일을 만들어 줘.
퀴즈 문제 중에서 ‘가장’, ‘최초’, ‘최대’ 같은 최상급 표현이 있는지 찾아서 목록으로 보여줘.

.claude/commands/quiz-validate.md를 다음과 같이 수정해 줘.
사용자가 카테고리를 지정하면 해당 카테고리의 문제만 검증하고,
지정하지 않으면 전체 문제를 검증해 줘.
$ARGUMENTS에 입력된 값을 카테고리로 사용하면 돼.
검증할 때는 ‘가장’, ‘최초’, ‘최대’ 같은 모호한 표현이 있는지 찾아서
어떤 기준을 명시해야 하는지 알려 줘.
예) quiz-validate 한국사

.claude/commands/quiz-range.md를 생성해.
$1번부터 $2번까지의 문제를 검토하는 기능을 만들어 줘.
문제의 난이도와 정답 분포를 확인하게 해 줘.
예) quiz-range 1 20

.claude/commands/quiz-add.md를 생성해.
새 퀴즈를 추가하는 명령어를 만들어 줘.
$1은 카테고리, $2는 난이도로 받아서 처리해.
기존 퀴즈들과 같은 형식으로 만들고, 검증 가이드라인을 꼭 지키게 해 줘.
예) /quiz-add 한국사 medium

.claude/commands/quiz-daily.md를 만들어서 다음 작업을 순서대로 수행하게 해 줘.
1. 퀴즈가 담겨 있는 파일의 구조를 읽고 이해하기
2. 현재 문제 개수와 분포 확인
3. 각 카테고리별로 부족한 부분 파악
4. 새 문제 추가 전 중복 체크
5. 문제 추가 후 형식 검증
6. 전체 데이터 백업
7. 실행 결과 상세 보고
각 단계별로 검증하고, 실패하면 즉시 중단한 뒤, 오류를 보고해.

 

API 등록

OpenRouter에서 받은 API 키를 .env 파일로 저장했어. 이 키를 안전하게 사용할 수 있도록 준비해 줘.

이제 준비된 API가 실제로 작동하는지 테스트해 줘.
이미지 인식은 google/gemma-3-27b-it:free 모델을 이용하고,
텍스트 인식은 deepseek/deepseek-chat -v3.1:free 모델을 이용할 거야.
API를 통한 텍스트와 이미지 인식을 각각 테스트해서 실행 결과를 알려줘.

앞서 만든 OpenRouter API를 이용해서, 냉장고 사진에서 재료를 인식하고 레시피를 추천하는 웹 애플리케이션
을 만들고 싶어. 다음과 같이 3단계로 나누어서 PRD를 만들어 줘.
1단계는 이미지를 입력받고 google/gemma-3 -27b-it:free 모델을 사용해서 이미지를 인식해.
2단계는 1단계에서 얻은 정보와 deepseek/deepseek-chat-v3.1:free 모델을 사용해서 레시피를 생성해.
3단계는 사용자 프로필을 만들어서 레시피를 저장해.
각 단계를 PRD_step1.md, PRD_step2.md, PRD_step3.md로 나누어 저장해 줘

PRD_step1.md를 실행해.

메인 애플리케이션을 실행해서 1단계의 결과를 테스트해 줘.

이제 PRD_step2.md를 실행해 줘.

메인 애플리케이션을 실행해서 2단계 결과를 테스트하게 해 줘

이제 PRD_step3.md를 실행해 줘.

메인 애플리케이션을 실행해서 3단계 결과를 테스트하게 해 줘

 

 

서브에이전트

# 코드 품질 검토자 에이전트:
코드 리뷰어: 코드를 읽고 버그는 없는지, 코딩 규칙에 따라 올바르게 작성되었는지를 점검하고 성능 최적화를 제안하는 전문 코드 품질 검토자.

code-bug-analyzer에게 냉장고를 부탁해 어플리케이션 코드를 검토하게 해줘.

# 시스템 최적화 엔지니어 에이전트:
최적화 전문가: 애플리케이션의 작동을 원활하게 개선하고 속도를 빠르게 만들며 병목 지점을 찾아서 해결하는 시스템 최적화 엔지니어.

# 사용자 경험 전문가 에이전트:
UX 디자이너: 사용자가 쉽고 편하게 이용할 수 있도록 화면 디자인, 버튼 배치, 에러 메시지를 개선하는 사용자 경험 전문가.

# 다중 에이전트 협업
code-bug-analyzer로 ‘냉장고를 부탁해’ 애플리케이션 코드 전체를 리뷰한 뒤, 발견한 문제를 performance-optimizer가 수정해서 성능 최적화한 다음, ux-design-advisor가 사용자 경험을 개선하게 해 줘

개선된 앱을 실행해서 브라우저에서 확인할 수 있게 해 줘.

현재 상태를 백업해 줘

백업으로 복원해 줘.
---
제품 기획 관리자: 전체 개발 일정을 관리하는 프로덕트 매니저로서 PRD를 작성하여 제품의 목표, 기능, 사용자 요구사항을 정의한다

백엔드 개발자: 서버 아키텍처 설계, API 개발, 데이터 처리, 외부 서비스 통합, 보안 및 성능 최적화를 담당하는 서버 사이드 개발 전문가. 안정적이고 확장 가능한 백엔드 시스템 구축.

프런트엔드 개발자: 사용자 인터페이스 설계 및 구현, 반응형 디자인, 웹 접근성, 성능 최적화를 담당하는 클라이언트 사이드 개발 전문가.

품질 보증 엔지니어: 전체 시스템의 기능 테스트, 에러 처리 검증, 성능 최적화, 코드 리뷰를 수행하는 품질 관리 전문가. 버그 발견, 사용성 개선사항 제안.

AI 통합 전문가: LLM 및 AI 서비스 통합, 프롬프트 최적화, 모델 파인튜닝, AI 파이프라인 구축을 담당하는 인공지능 전문가. 여기서는 OpenRouter API를 통해 DeepSeek 모델과 연동하여 텍스트 생성, 요약을 구현하는 LLM 활용 전문가

AI 공감 다이어리를 만들어 줘. 오늘 있었던 일을 한 줄로 쓰면, AI가 감정을 분석하고 공감하며 위로해 주는 일기 애플리케이션이야.
backend-architect가 OpenRouter API를 연동해서 감정 분석과 공감 메시지를 생성하는 기능을 구현해 줘.
DeepSeek V3.1 무료 모델을 사용하고, API 키는 현재 폴더의 ‘.env’ 파일에 저장된 것을 사용해.
frontend-developer가 따뜻하고 편안한 느낌의 일기장 UI를 만든 다음, qa-engineer가 실제로 여러 상황에서 문제없이 작동하는지 테스트해 줘.
문제를 발견하면 완전히 해결할 때까지 수정하고, 최종 버전을 브라우저에서 바로 열 수 있는 ‘index.html’ 파일로 만들어 줘.

# PDF 요약 앱
PDF 문서를 업로드하면 AI가 요약해주는 웹 애플리케이션을 만들 거야.
먼저 product-manager-prd가 PDF 문서 요약 앱의 상세 PRD와 기능 명세를 작성하고,
backend-architect가 PDF 파일 업로드, 텍스트 추출 기능을 구현해.
ai-integration-specialist가 OpenRouter API를 연동해서 추출된 텍스트를 요약하는 기능을 구현해 줘.
DeepSeek V3.1 무료 모델을 사용하고, API 키는 현재 폴더의 ‘.env’ 파일에 저장된 것을 사용해.
frontend-developer가 드래그&드롭 파일 업로드 UI와 요약 결과를 깔끔하게 표시하는 한글 인터페이스를 구현한 다음,
qa-engineer가 실제로 여러 상황에서 문제없이 작동하는지 테스트해 줘. 문제를 발견하면 완전히 해결할 때까지 수정하고, 최종 버전을 브라우저에서 바로 열 수 있는 ‘index_pdf.html’ 파일로 만들어 줘.

 

 

MCP연결

 

# 노션 연결
claude mcp add --transport http notion https://mcp.notion.com/mcp
/mcp로 들어가서 authenticate 해야함

클로드 코드의 업데이트, 변경 사항을 검색하고 요약해 줘. 그 결과를 노션 MCP를 이용해 노션에 저장해 줘.


# Sequential Thinking MCP:
Windows 명령 프롬프트(cmd)에서 실행하는 경우:
claude mcp add sequential-thinking -s local -- cmd /c npx -y @modelcontextprotocol/server-sequential-thinking@latest

Windows PowerShell에서 실행하는 경우:
claude mcp add sequential-thinking -s local -- npx @modelcontextprotocol/server-sequential-thinking@latest

내 웹 포트폴리오 방문자의 체류 시간을 지금의 2배로 늘리고 싶어. 두 가지 문서를 작성해.
1. 이 목표를 달성할 방법을 구상해서 노션 MCP를 이용해 ‘체류 시간 늘리기’로 저장해 줘.
2. Sequential Thinking MCP를 이용해서 이 목표를 달성할 방법을 체계적으로 구상하고 노션 MCP를 이용해 ‘체류 시간 늘리기 – 체계적 구상’으로 저장해 줘

# Context7 MCP server:(사전에 가입해서 api key를 받아야함)
claude mcp add --transport http context7 https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: YOUR_API_KEY"

# Playwright MCP:
Windows 명령 프롬프트(cmd)에서 실행하는 경우:
claude mcp add playwright -- cmd /c npx @playwright/mcp@latest

Windows PowerShell에서 실행하는 경우:
claude mcp add playwright -- npx @playwright/mcp@latest

쇼핑 리스트 앱을 만들어 줘. 아이템 추가, 삭제, 체크 기능이 있는 간단한 웹 UI로 로컬 브라우저에서 실행되게 해 줘

Playwright MCP를 사용해서 이 쇼핑 리스트 앱의 모든 기능을 자동으로 테스트해 줘. 아이템 추가, 삭제, 체크 기능이 제대로 작동하는지 확인해 줘.

# GitHub MCP:(세팅에 developer settings에 personal access tokens classic 으로 토큰 만듬)
claude mcp add --transport http github https://api.githubcopilot.com/mcp -H 'Authorization: Bearer <깃허브 API 키>'

현재 폴더에 만들어진 쇼핑 리스트 앱을 깃허브에 저장하고 싶어. github mcp를 사용해서 shopping-listapp이라는 저장소를 만들고 업로드해 줘.

#VERCEL
쇼핑 리스트 앱의 shopping -list.html 파일을 index.html로 수정해서 깃허브에 업로드해 줘

#SUPABASE MCP
Windows 명령 프롬프트(cmd)에서 실행하는 경우:
claude mcp add supabase -s local -e SUPABASE_ACCESS_TOKEN=<Supabase API 토큰> -- cmd /c npx -y @supabase/mcp-server-supabase@latest

Windows PowerShell에서 실행하는 경우:
claude mcp add --transport http supabase "https://mcp.supabase.com/mcp"

Supabase mcp를 이용해서 우리의 쇼핑 리스트 앱을 데이터베이스와 연동해 줘. shopping_items라는 테이블을 만들고, 현재 로컬 스토리지에 저장되던 데이터를 Supabase 데이터베이스에 저장하도록 코드를 수정해 줘. 수정이 완료되면 깃허브에 commit하고 push해 줘.