앵그리비버's IT를 부탁해

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

클로드 코드 에이전트(Agents) 기능으로 웹 서비스 만들어보기 💻안녕하세요! 앵그리비버입니다.책에서 소개한대로 클로드 코드(Claude Code)를 이용해 실제 동작하는 '마음 일기' 웹 서비스를 제작하는 과정을 스크린샷과 함께 한 단계씩 따라해볼 수 있도록 정리해봤습니다!터미널 화면부터 실제 브라우저 출력 화면까지 순서대로 설명해드릴 테니 천천히 따라와보세요.STEP 1. 클로드 코드 실행 및 서브에이전트 설정첫 번째 스크린샷을 보시면, 터미널(Terminal) 환경에서 Claude Code v2.1.79를 실행한 모습입니다. 여기까지는 이미 너무 여러번 해봤죠.프로젝트 폴더(~/Documents/GitHub/vibe_claude/Study-05)로 이동한 뒤 클로드 코드를 켭니다.입력창에 /ag..

🤖 클로드 코드(Claude Code) 서브 에이전트 기능으로 '냉장고를 부탁해' 앱 업데이트!안녕하세요! 앵그리비버입니다. 🦫✨지난 포스팅에 이어서 **클로드 코드(Claude Code)** 열심히 따라해보고 글을 남겨봅니다. 지난주에는 바이브코딩으로 만들었던 '냉장고를 부탁해' 앱을 업데이트하려고 합니다. 책에서 알려준대로 클로드 코드의 서브 에이전트(Sub-Agents) 기능을 활용해 진행해 봤습니다.생각보다 결과가 신기합니다. 말로만 듣던 그놈의 에이전트가 어떻게 동작하는지 한 번 해봤습니다.💡 왜 서브 에이전트(Agent)를 써야 할까요?혼자서 모든 작업을 처리하는 단일 AI보다, 특정 역할에 특화된 전문가 에이전트를 여러 개 만들어서 협업시키는 게 훨씬 정확하고 빠르기 때문입니다.책에서 ..

[바이브코딩] 클로드 코드(Claude Code)로 '냉장고 레시피 추천 Web' 뚝딱 만들어봤습니다!안녕하세요! 앵그리비버's IT를 부탁해의 앵그리비버입니다. 🦫✨요즘 개발자 커뮤니티에서 가장 핫한 키워드가 뭔지 아시나요? 바로 **'바이브 코딩(Vibe Coding)'**과 **'클로드 코드(Claude Code)'**입니다! 명령만 몇 줄 던져주면 알아서 기획서(PRD)를 나누고, 백엔드 서버부터 프론트엔드 UI까지 한 번에 뚝딱 만들어준다니... 저도 궁금해서 가만히 있을 수 없었죠.그래서 지난주에 터미널을 열고 **"냉장고 사진을 올리면 AI가 재료를 인식해서 레시피를 추천해주는 웹 서비스"**를 직접 만들어봤습니다! 결론부터 말씀드리면? 생각보다 너무 빠르고 똑똑합니다... 약간 무섭기도 ..

OpenRouter API 키 발급부터 바이브 코딩 준비까지! (완전 초보자 가이드)안녕하세요! 앵그리비버입니다. 🦫✨요즘 개발자들 사이에서 일명 '바이브 코딩(Vibe Coding)'이 대세잖아요? 저도 이번에 터미널 기반 AI 보조 도구인 **클로드 코드(Claude Code)**를 가지고 본격적으로 토이 프로젝트를 만들어보려고 주말 동안 환경 설정을 진행해보았습니다!다양한 AI 모델(GPT-4o, Claude, Llama, Gemma 등)을 하나의 API로 편리하게 연결해주는 OpenRouter(오픈루터) API 키 발급 과정을 스크린샷과 함께 차근차근 정리해보았어요. 생각보다 참 쉽죠잉~!?1단계: OpenRouter 웹사이트 접속 및 가입먼저 openrouter.ai에 접속합니다. 메인 화면에..