PM을 부탁해/주말코딩
혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch7 - (2)
앵그리비버
2026. 8. 12. 07:13
클로드 코드 에이전트(Agents) 기능으로 웹 서비스 만들어보기 💻
안녕하세요! 앵그리비버입니다.
책에서 소개한대로 클로드 코드(Claude Code)를 이용해 실제 동작하는 '마음 일기' 웹 서비스를 제작하는 과정을 스크린샷과 함께 한 단계씩 따라해볼 수 있도록 정리해봤습니다!
터미널 화면부터 실제 브라우저 출력 화면까지 순서대로 설명해드릴 테니 천천히 따라와보세요.
STEP 1. 클로드 코드 실행 및 서브에이전트 설정
첫 번째 스크린샷을 보시면, 터미널(Terminal) 환경에서 Claude Code v2.1.79를 실행한 모습입니다. 여기까지는 이미 너무 여러번 해봤죠.
- 프로젝트 폴더(
~/Documents/GitHub/vibe_claude/Study-05)로 이동한 뒤 클로드 코드를 켭니다. - 입력창에
/agents명령어를 입력합니다. - 기획 작성을 담당할
product-prd-manager에이전트를 먼저 생성해줍니다.
이어서 마지막 스크린샷처럼 총 5개의 프로젝트 에이전트를 구성해줍니다:
backend-architect: 데이터 처리 로직 담당frontend-dev-expert: HTML/CSS/JS UI 디자인 담당llm-integration-specialist: Gemini/Gemma 등 AI API 연동 담당product-prd-manager: 기능 정의서 및 요구사항 정리qa-engineer: 예외 처리 및 에러 검수
STEP 2. 일기 작성 및 AI 로딩 상태 확인
이제 생성된 index.html 파일을 브라우저로 열어봅니다!
- 입력 상자에 오늘 하루 있었던 일을 적습니다. (예: "오늘 하루 출산한지 12일된 아내와 태어난지 12일된 아들을 만나고...")
- [❤️ AI에게 마음 털어놓기] 버튼을 꾹 누릅니다.
- 세 번째 스크린샷처럼 중앙에 분홍색 로딩 스피너가 돌아가며
"AI가 당신의 마음을 읽고 있어요..."라는 안내 문구가 뜹니다.
STEP 3. 감정 분석 및 공감 답장 결과 확인
로딩이 끝나면 두 번째 스크린샷처럼 짜잔! 멋진 결과 카드가 나타납니다.
- 감지된 감정: 노란색 미소 이모티콘과 함께 '기쁨' 태그 생성
- 공감 메시지: "사랑하는 아내와 아들, 그리고 바다와 함께한 하루라니 정말 행복하셨겠어요..." 라는 감동적인 위로 문구
- 오늘의 응원: 하단에 따뜻한 응원 텍스트 상자 배치
- 지난 일기 저장: 하단 '지난 일기' 리스트에 작성한 일기와 감정 태그가 타임스탬프와 함께 자동 저장됩니다.
💡 앵그리비버의 팁!
클로드 코드에게 요청할 때 단순히 "일기장 만들어줘" 라고 하기보다, **"프론트엔드 에이전트는 파스텔톤 카드로 디자인하고, LLM 에이전트는 감정 태그를 추출하도록 구현해줘"**처럼 역할을 지정해주면 훨씬 퀄리티가 높아집니다!
어때요, 터미널 환경이 처음에는 낯설어 보여도 스크린샷대로 차근차근 따라 해보면 어렵지 않죠? 여러분도 자신만의 AI 서비스를 직접 구축해보세요! 하이팅! 🔥
💡 안되는 순간도 있습니다.
안되면 안되는 화면을 스크린샷해서 다시 클로드 코드 도움을 받아서 해결할 수 있습니다.
반응형