[혼공바이브코딩] 1주차_나의 첫 바이브코딩
[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작
[혼공바이브코딩] 3주차_클로드 코드 시작하기
[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱
[혼공바이브코딩] 4주차 -2_게임 제작으로 배우는 체계적인 개발과 관리
[혼공바이브코딩] 5주차-1_클로드 코드에 API 날개 달기
[혼공바이브코딩] 5주차-2_클로드 코드 AI 에이전트로 개발팀 구성하기
[혼공바이브코딩] 6주차_MCP로 클로드 코드의 한계 넘어서기
클로드 코드의 AI 에이전트 이해하기
에이전트(Agent)란 무엇인가?
에이전트(Agent)는 영어로 ‘대리인’, 즉 ‘대신 일하는 사람’이라는 뜻입니다. 사람이 매번 세부 지시를 내리지 않아도 정해둔 목표와 규칙에 따라 스스로 판단하고 작업을 수행합니다.
개발자가 ‘무엇을 달성할지’를 지정하면 에이전트가 ‘어떻게 할지’를 결정합니다.
AI 서브에이전트 개념
AI 서브에이전트는 클로드 코드에서 특정 작업을 전문적으로 수행하도록 만든 독립형 AI 도우미입니다. 사용자가 직접 역할, 모델, 권한을 개별 설정할 수 있습니다.
서브에이전트의 특징
- 독립적인 AI 모델 선택
- 세밀한 권한 설정
- 작업 맥락 유지
/agents 명령어로 에이전트 생성하기
/agents- Create new agent 선택
- 적용 범위 선택
- 생성 방법 선택
- 에이전트 설명 입력
- 도구 권한 설정 : Read-only / All tools 선택
- 모델 및 배경색 선택
코드 리뷰어: 코드를 읽고 버그는 없는지, 코딩 규칙에 따라 올바르게 작성되었는지를 점검하고 성능 최적화를 제안하는 전문 코드 품질 검토자.
MCP(Model Context Protocol) : AI(예: ChatGPT, Claude 등)와 외부 시스템(툴, 데이터, 서버, API 등)을 연결해주는 규칙(프로토콜)
- AI = 사람
- MCP = 통역사 + 규칙집
- Tool = 사람이 쓸 수 있는 도구(망치, 계산기, 검색엔진 등)
ALL tools에서 [Enter]를 치면 모두 선택이 해제가 됩니다.
코드 리뷰만 할 것이기 때문에 Read-only tools로 가서 [Enter]로 선택한 후 [Continue]로 돌아가 진햅합니다.
실습을 하면서 느낀점인데 웹에서 단계별 PRD를 만들어서 하나씩 붙여넣는 것과 클로드 코드에서 직접 PRD를 만들기 위한 프롬프트를 입력하는 것을 비교해보면 클로드 코드로 작성하는 것이 나중을 위해 좋을 것 같습니다.
그냥 붙여넣기 하다보면 나중에는 블랙박스 프롬프트가 되어버려서 뭘 어떻게 지시하고 만들었는지 기억이 안날 것 같아요.
개인 사이드 프로젝트 작성시에는 나중에 조회할 수 있도록 블로그에만 기록해 둘 것이 아니라 자동으로 문서를 생성하는 방식으로 가야할 듯 합니다.
- code-reviewer → 지금 만든 것
- 나머지 6개 → 대부분 기본/시스템 에이전트일 가능성 큼
code-reviewer에게 ‘냉장고를 부탁해’ 애플리케이션 코드를 검토하게 해줘.
최적화 에이전트 & UX 디자인 에이전트
최적화 전문가: 애플리케이션의 작동을 원활하게 개선하고 속도를 빠르게 만들며 병목 지점을 찾아서 해결하는 시스템 최적화 엔지니어.
최적화 전문가니까 도구 권한은 All tools로 하겠습니다.
모델도 Sonnet 말고 Opus로 갑니다.
UX 디자이너: 사용자가 쉽고 편하게 이용할 수 있도록 화면 디자인, 버튼 배치, 에러 메시지를 개선하는 사용자 경험 전문가.
마찬가지로 도구 권한은 All tools로 하지만, 모델은 Inherit from parent로 합니다.
일일이 모델을 선택하기 힘들때 원래 사용해 온 모델을 그대로 선택하게 하는 것도 방법입니다.
Agent has access to all tools (이 에이전트는 모든 도구에 접근할 수 있음)
“이 UX 디자이너 에이전트가 MCP에 연결된 모든 도구를 쓸 수 있다”는 뜻입니다.
개인 프로젝트니까 그냥 넘어가죠.
다중 에이전트 협업
code-reviewer로 ‘냉장고를 부탁해’ 애플리케이션 코드 전체를 리뷰한 뒤, 발견한 문제를 performance-optimizer가 수정해서 성능 최적화한 다음, ux-designer가 사용자 경험을 개선하게 해 줘
클로드가 열심히 일하는 동안 저는 웹툰보고 놉니다.
이렇게 AI가 모든 일자리를 대체하게 되는가 하는 걱정도 잠시 당분간은 꿀빨겠어요.
사담이지만은, 제가 현장직과 붙어있는 사무직이다 보니 제 2의 러다이트 혁명이라는 농담이 자주 나오거든요.
실제로 보게 될지도 모른다는 설렘이 조금 있습니다.
개선된 앱을 실행해서 브라우저에서 확인할 수 있게 해 줘.
오류 내용을 클로드 코드에 붙여넣어서 해결해 보려고 했는데, 모델을 변경해도 Rate Limit이 계속 발생합니다.
제 토큰은 점점 줄어가고요!
첫 번째 모델 실패 시 다음 모델 자동으로 시도해 달라고 요청을 하였습니다.
아오! 다 안됩니다 안돼요! 저번에 성공한 적은 있으니깐 일단은 그냥 넘어갈게요.
ux-designer를 이용해서 업데이트된 내용이 뭐야?
네 토큰 바닥입니다.
조금 쉬었다가 공부 다시 시작해야겠어요.
AI 에이전트로 소프트웨어 개발 자동화하기
AI 개발팀 서브에이전트 생성
- 제품 기획 관리자(PM) : PRD 작성, 목표/기능 정의, 일정관리
- 백엔드 개발자 : 서버 구축, DB 설계, 핵심 로직
- 프런트엔드 개발자 : 화면 설계, UI 구현, 인터페이스
- 품질 보증 엔지니어 : 버그 탐지, 성능 테스트, 안정성 확보
- AI 통합 전문가 : AI 모델 연동, 최적화, 솔루션 구현
모든 에이전트는 .claude/agents 폴더에 .md 파일로 저장됩니다. 프로젝트 성격에 따라 필요한 에이전트만 선택해 사용합니다.
AI 공감 다이어리 앱 만들기
API를 사용할 것이기 때문에 지난번에 만들었던 .env파일을 복사해서 사용합니다.
/init/agents제품 기획 관리자: 전체 개발 일정을 관리하는 프로덕트 매니저로서 PRD를 작성하여 제품의 목표, 기능, 사용자 요구사항을 정의한다
백엔드 개발자: 서버 아키텍처 설계, API 개발, 데이터 처리, 외부 서비스 통합, 보안 및 성능 최적화를 담당하는 서버 사이드 개발 전문가. 안정적이고 확장 가능한 백엔드 시스템 구축.
프런트엔드 개발자: 사용자 인터페이스 설계 및 구현, 반응형 디자인, 웹 접근성, 성능 최적화를 담당하는 클라이언트 사이드 개발 전문가.
품질 보증 엔지니어: 전체 시스템의 기능 테스트, 에러 처리 검증, 성능 최적화, 코드 리뷰를 수행하는 품질 관리 전문가. 버그 발견, 사용성 개선사항 제안.
AI 통합 전문가: LLM 및 AI 서비스 통합, 프롬프트 최적화, 모델 파인튜닝, AI 파이프라인 구축을 담당하는 인공지능 전문가. 여기서는 OpenRouter API를 통해 AI 모델과 연동하여 텍스트 생성, 요약을 구현하는 LLM 활용 전문가
npm start를 실행해서, 브라우저를 열어 AI 공감 다이어리를 확인할 수 있게 해줘.
npm start : “지금 만든 웹 앱을 내 컴퓨터에서 실행(서버 실행)해줘”라는 명령어
npm(Node Package Manager) : 자바스크립트 라이브러리(패키지)를 설치하고 실행 명령을 관리해주는 도구
npm start- 개발용 서버가 켜짐
- package.json 파일에 적힌 명령을 실행하는 것
- 자동으로 http://localhost:3000 이런 주소가 열림(내 컴퓨터에서 실행중인 웹사이트)
| 명령어 | 뜻 |
|---|---|
npm install | 필요한 라이브러리 설치 |
npm start | 개발 서버 실행 (앱 켜기) |
npm run build | 배포용 파일 만들기 |
잉? 뭔가 잘못 만들어졌는데요? API 키를 입력하는 칸이 있습니다?
수정을 요청해보죠.
그런데 이번에는 공감 내용이 전혀 작성되지 않습니다.
또 다시 수정을 요청합니다.
이번에도 AI 무료 모델의 문제인 것 같네요.
이제 작동은 하는데 완성도 정말… 중간중간 중국어 섞여 있는거 화나네요.
완성도 있는 AI 기반 앱을 만들려면 역시 유료 결제인가요?
PDF 요약 AI 앱 만들기
claude --dangerously-skip-permissions“권한(퍼미션) 경고·확인 절차를 건너뛰고 Claude/MCP를 실행해라”라는 개발자용 옵션
즉, 보안 안전장치를 끈 상태로 실행하는 명령
일일이 묻지 않고 바로 실행하도록 허용하는 모드
PDF 문서를 업로드하면 AI가 요약해주는 웹 애플리케이션을 만들 거야.
먼저 product-planning-manager가 PDF 문서 요약 앱의 상세 PRD와 기능 명세를 작성하고,
backend-developer가 PDF 파일 업로드, 텍스트 추출 기능을 구현해.
ai-integration-expert가 OpenRouter API를 연동해서 추출된 텍스트를 요약하는 기능을 구현해 줘.
nvidia/nemotron-3-nano-30b-a3b:free 모델을 사용하고, API 키는 현재 폴더의 ‘.env’ 파일에 저장된 것을 사용해.
frontend-developer가 드래그&드롭 파일 업로드 UI와 요약 결과를 깔끔하게 표시하는 한글 인터페이스를 구현한 다음,
qa-engineer가 실제로 여러 상황에서 문제없이 작동하는지 테스트해 줘. 문제를 발견하면 완전히 해결할 때까지 수정하고, 최종 버전을 브라우저에서 바로 열 수 있는 ‘index_pdf.html’ 파일로 만들어 줘.
또! 토큰 리밋에 걸리고 말았습니다!
내일 다시 시도해 봐야겠네요.
오우 엔비디아 모델이 영어가 좀 섞이긴 했지만 완성도가 조금 나은 것 같습니다.
핵심 키워드 정리
- 에이전트 : 목표의 규칙에 따라 스스로 판단하고 작업 수행하는 AI 대리인
- AI 서브에이전트 : 특정 작업을 전문적으로 수행하는 독립형 AI 도우미
- /agents : 서비에이전트를 생성하고 관리하는 클로드 코드 전용 명령어
- 코드 리뷰 : 코드의 버그와 규칙 위반을 점검하고 개선점 제안
- 최적화 : 프로그램의 속도와 효율성을 향상시키는 성능 개선 작업
- UX 디자인 : 사용자가 쉽고 편리하게 이용할 수 있는 인터페이스 설계
- AI 개발팀 : PM, 백엔드, 프런트엔드, QA, AI 전문가로 구성된 에이전트 팀
- 에이전트 협업 : 여러 에이전트가 역할을 분담해 프로젝트를 완성하는 방식
- 🚶기본 미션(필수)
- PROJECT 9. 냉장고를 부탁해 앱 만들고 캡처하기
- 🏃추가 미션(선택)
- AI 에이전트 팀 구축하기
- AI 디자인 에이전트를 활용해 냉장고를 부탁해 앱 UX 디자인 개선하고 캡처하기
API 요청 한도 초과 오류는 결국 해결 못했습니다…
무료 모델 중에서 기능이 좋은 모델을 찾는 것도 참 일이군요.
