혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch7 - (1)

🤖 클로드 코드(Claude Code) 서브 에이전트 기능으로 '냉장고를 부탁해' 앱 업데이트!

안녕하세요! 앵그리비버입니다. 🦫✨

지난 포스팅에 이어서 **클로드 코드(Claude Code)** 열심히 따라해보고 글을 남겨봅니다. 지난주에는 바이브코딩으로 만들었던 '냉장고를 부탁해' 앱을 업데이트하려고 합니다. 책에서 알려준대로 클로드 코드의 서브 에이전트(Sub-Agents) 기능을 활용해 진행해 봤습니다.

생각보다 결과가 신기합니다. 말로만 듣던 그놈의 에이전트가 어떻게 동작하는지 한 번 해봤습니다.

---

💡 왜 서브 에이전트(Agent)를 써야 할까요?

혼자서 모든 작업을 처리하는 단일 AI보다, 특정 역할에 특화된 전문가 에이전트를 여러 개 만들어서 협업시키는 게 훨씬 정확하고 빠르기 때문입니다.

책에서 알려준대로 이번에 터미널에서 /agents 명령어를 입력해 총 3개의 맞춤형 에이전트를 정의했습니다. 만약에 다른 역할이 필요하다면 다른 역할을 잘 정의하면 됩니다.

1. code-quality-reviewer (Opus 모델 적용): 전체 코드 리뷰 및 보안/버그 식별 전담
2. perf-optimizer (성능 최적화 전담): 백엔드 동기 코드를 비동기로 전환하고 OOM(메모리 초과) 방지
3. ux-design-advisor (UX/보안 개선 전담): 프론트엔드 UI 개선, XSS 방지, 로딩/에러 상태 처리

---

🚀 명령어 한 줄로 시작된 릴레이 작업

에이전트 설정을 끝내고 터미널에 아래처럼 프롬프트를 던졌습니다.

"code-quality-reviewer 로 '냉장고를 부탁해' 애플리케이션 코드 전체를 리뷰한 뒤, 발견한 문제를 perf-optimizer 가 수정해서 성능 최적화한 다음, ux-design-advisor 가 사용자 경험을 개선해 주세요."

 

그리고는 에이전트들이 각자 알아서 맡은 바 역할에 따라 작업을 진행합니다..! 크으...

• **perf-optimizer**가 main.py의 파일 읽기를 비동기(httpx.AsyncClient)로 바꾸고, auth.py에 하드코딩된 JWT 시크릿을 깔끔하게 정리했습니다.
• **ux-design-advisor**는 innerHTML을 전부 안전한 textContent와 DOM API로 교체하여 XSS 공격을 차단했고, 로딩 중에는 버튼을 disabled 처리하는 디테일까지 챙겨주더군요.

스크린샷을 보시면 아시겠지만, 백엔드 최적화부터 프론트엔드 UX 개선까지 표로 깔끔하게 정리해 보여주는 모습이 아주 훌륭합니다. 물론 퀄리티 부분은 사람이 그래도 개입해서 확인하는 것이 중요하겠습니다. 😲

 

---

🎨 눈에 띄게 새로워진 UI & 에러 핸들링

개선 전에는 사진을 올리면 안 없이 멈춰있는 느낌이었는데, UX 에이전트가 개입한 후에는 다음과 같이 바뀌었습니다.

• 로딩 상태 명시: "AI가 냉장고를 분석 중입니다... (최대 30초 소요)" 스피너와 함께 친절한 안내 문구 등장!
• 예외 처리 강화: API 요청 제한이 걸렸을 때 "API 요청이 너무 많습니다. 잠시 후 다시 시도해주세요." 라는 경고 창을 예쁘게 출력!
• 드래그 앤 드롭: 사진 업로드 영역도 훨씬 직관적으로 변경!

마지막에는 백업 요청까지 한 줄 던졌더니 cp -r 명령어 모듈을 알아서 실행해서 현 상태를 날짜별로 백업 디렉터리에 복사해 주더라고요. 크... 클로드코드를 안 쓰면 진짜 큰일날 것 같습니다...!? 😄

---

📝 마치며

혼자서 백엔드 최적화하고 프론트엔드 보안 챙기려면 며칠은 걸렸을 텐데, 서브 에이전트를 잘 세팅해두니 단 10분 만에 프로젝트 퀄리티가 수직 상승했습니다.

단순 프롬프트 입력에서 한 단계 더 나아가 나만의 에이전트 팀을 구축해 보세요. 바이브 코딩의 신세계를 경험하실 수 있을 겁니다!

다들 오늘도 즐거운 코딩 하세요! 화이팅! 🔥