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

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

클로드 코드 서브 에이전트로 뚝딱! AI PDF 요약 웹 제작안녕하세요, 앵그리비버입니다! 🦫✨지난 포스팅에 이어서 에이전트를 활용한 **'바이브 코딩(Vibe Coding)'**입니다. 바로 "PDF 문서를 업로드하면 AI가 핵심을 바로 요약해 주는 웹 서비스" 만들기입니다!🤖 역할 분담으로 스마트하게: 서브 에이전트이번 프로젝트에서는 클로드 코드에 역할을 부여해 '팀 프로젝트' 형태로 진행했습니다. 마치 회사에서 개발 팀을 운영하는 것과 유사한 방식이죠. 터미널 스크린샷을 보시면 제가 입력한 역할들은 다음과 같습니다:product-prd-manager: 요구사항 정의서(PRD) 및 기능 명세서 작성backend-architect: PDF 파일 업로드 및 텍스트 추출 로직 구현llm-integrat..

혼자 공부하는 바이브 코딩 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에 접속합니다. 메인 화면에..

지난 개발에 이어서 클로드 코드로 이번에는 선생님 모드로 운영을 위한 대시보드 제작을 저도 해봤습니다!앵그리비버입니다! 요즘 AI 덕분에 개발이 정말 즐거워지고 있죠? 이번에는 '선생님 모드'를 클로드 코드(Claude Code)로 구현해보는 재미있는 도전을 해봤어요. 가짜지만 학생들이 퀴즈 게임을 얼마나 잘하는지, 어떤 부분에서 어려워하는지 한눈에 파악할 수 있는 시스템을 만들고 싶었거든요. 수십 명의 학생 데이터를 일일이 들여다보는 건 정말 노가다 작업인데, 서비스를 만들더라도 이러한 운영성 업무를 효율적으로 할 수 있도록 운영 어드민을 만드는 것이 중요합니다.1. 서비스를 아쉽고 빠르게 만들 수 있는데, 그러면 운영은 어떻게 할까? 고민에서 시작!예전 같으면 "운영 어드민을 어떻게 하지?" 하면서 ..

퀴즈 게임 관리, 개 귀찮음! Claude Code의 명령어 체인 으로 해결!지난 포스팅에서 만들었던 퀴즈 게임이든 무슨 서비스를 운영하다 보면 계속 누적되는 운영 업무를 어떻게 해결할지에 대한 고민이 생기게 됩니다. 특히 퀴즈 게임 같은 경우에 매일매일 새로운 문제 있는지 확인하고, 부족한 카테고리 채워 넣고, 중복 없는지 검사하는 업무가 생길 수 밖에 없는데요. 혼자서 공부하는 바이브코딩 책을 보면서 이런 운영 업무부터 해결을 해야겠다고 마음 먹고 있었는데요. Claude Code에 이러한 운영 업무를 해결 할 수 있는 기능이 있습니다. 바로 **명령어 체인(Command Chain)**입니다!스크린샷처럼 처음 /quiz-range을 실행하면, 현재 퀴즈 DB의 문제 분포 현황(카테고리별, 난이도별)..

AI와 함께하는 기획, PRD도 뚝딱! 생각보다 참 쉽죠잉!?지난 번에는 할 일 목록을 만들고 자동으로 카테고리를 분류하는 것까지 해보았습니다. 이번에는 혼자서 공부하는 바이브코딩 책을 보면서 "상식 퀴즈 게임을 만들려고 합니다. PRD 작성부터 Claude AI의 도움을 받아서 진행했습니다.Claude.ai에 접속해서 "상식 퀴즈 게임을 만들려고 합니다. PRD를 작성해주세요." 라고 딱 한 문장 던지면 Claude가 순식간에 핵심 요구사항을 정리해줍니다. 100% 완벽하지 않더라도 초안으로 사용하기에 아주 적절합니다. 그리고 디테일한 부분은 역시 사람이 개입해서 완성도를 높여주면 더 좋습니다.Claude가 제안한 핵심 게임 규칙:다양한 카테고리: 한국사, 일반상식, IT상식, 스포츠까지 4가지나!문제..

클로드 코드가 만들어낸 web_version 폴더, 뜯어보니 이런 변화가!지난번 클로드 코드에서 할 일 목록을 만들고 카테고리를 자동으로 분류하는 것까지 해봤습니다. 이번에는 모바일용 화면 이외에 데스크톱용 화면에 최적화까지 해보았고, 그 결과물을 좀 더 자세히 파헤쳐 보려고 해요. 클로드 코드가 'web_version'이라는 새 폴더를 만들어줬는데, 그 안에 있는 것들이 무엇인지 공부 해보겠습니다.깔끔한 데스크톱 UI가 완성되었습니다! 클로드 코드는 1분 34초 만에 이 모든 작업을 끝내버렸어요. 정말... 놀랍습니다. 🔍 변경된 레이아웃 구조, 이 정도면 나쁘지 않음!클로드 코드가 요약해준 변경 내역을 보면 감탄이 절로 나옵니다.2단 그리드: 왼쪽에는 폭 260px의 고정된 사이드바, 오른쪽에는 메..

이게 되네? AI로 자동 분류되는 할 일! 🤯 카테고리 자동 분류 기능 추가클로드가 알려준 사용자 경험 개선 팁! 💡 할 일 앱 디테일 살리기PRD 작성부터 기능 구현, UX 개선, 그리고 복잡한 로직(자동 분류)까지 클로드 코드는 정말 전천후 만능 도우미입니다. 먼저 PRD를 생성하고 개발을 시키면 바로 뚝딱뚝딱 동작하는 웹페이지를 만들어줍니다. 물론 클로드가 완벽한 코드를 한 번에 짜주지는 않았어요. 제가 원하는 방향과 다를 때도 있었고, 몇 번의 수정이 필요한 부분도 있었습니다. 하지만 오히려 그런 과정을 통해 '어떻게 프롬프트를 개선해야 할까?', '어떤 점을 더 구체적으로 지시해야 할까?'를 배우면서 AI와의 협업 스킬이 향상됩니다.할 일 관리 웹페이지를 1차로 만들고 책에서 나온 것처럼 카..