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

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

🤖 클로드 코드(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차로 만들고 책에서 나온 것처럼 카..

AI가 뚝딱 만들어준 손글씨 인식 웹페이지 1장: 클로드 코드로 구현하기Chapter 03이 되어서야 드디어 클로드 코드(Claude Code)를 사용하여 학습을 진행합니다. 주제는 바로 손글씨 숫자 인식 웹페이지입니다. 다 만들어진 결과물을 살펴보니 CNN 모델을 갖다 쓰고, 그걸 Tkinter 기반의 GUI 앱으로 만드는 작업입니다."이거 만들어줘!" 한마디에 시작된 마법저는 클로드 코드에게 아주 간단하지만 명확한 프롬프트를 던졌습니다.손글씨 숫자를 입력하면 이것을 인식하는 앱을 만들어서 실행해주세요. 모든 코드와 주석을 영어와 한글로 작성해 주세요.이 한 문장으로 환경 설정부터 모델 학습, GUI 개발까지 다 해줄 수 있을까? 그런데 클로드 코드는 차근차근 작업을 시작합니다.환경 점검: 먼저 제 ..

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라 클로드 AI(Claude AI)로 따라해본 결과입니다.구글 대신 네이버로? 나만의 취향이 담긴 시작 페이지 리디자인!Claude AI(클로드 AI)를 이용해 나만의 시작 페이지를 만드는 여정입니다. 책에서는 구글 스타일로 적용하라고 권했지만, 저는 좀 더 친숙한 '네이버 스타일'로 바꿔보고 싶었어요. 그래서 클로드 AI에게 대뜸 네이버 스타일로 디자인을 수정해주세요라고 요청했습니다. "설마 이것까지 될까?" 했는데, 정말 놀랍게도 클로드 AI가 제 의도를 정확히 파악하네요. 허허클로드 AI는 친절하게도 네이버 스타일로 어떤 부분이 바뀌는지 상세하게 설명해줍니다. GNB 스타일, 상단 메뉴, 로고, 검색창, 섹션 레이..