『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 학습 기록 (8) 후기

이미지
   혼자 공부하는 바이브 코딩 with 클로드 코드 (8) [후기] 인프런 완독 챌린지를 마치면서 AI를 이용해 바이브 코딩 걸음마를 떼고 있던 중에 이 챌린지를 접하게 되었다. 기존에는 Gemini + Antigravity IDE로 로블록스 게임개발을 바이브 코딩으로 시도해보고 있었다. 로블록스 게임개발과 Luau 스크립트언어에 대해 아무런 지식도 없었지만 채팅만으로 코드가 작성되고 게임이 동작하는 게 신기했다. 그러다가 바이브코딩용 AI는 Claude Code가 가장 뛰어나다고 자주 언급되는 걸 보게 되었고 관심이 가게 되었다. 마침 이 책을 접했고, 인프런 챌린지까지 발견하면서 뭔가 흐름이 이어지는 느낌이 들었다. 챌린지를 진행하며 비싸다고 미뤘던 Claude Pro 결제도 진행하게 되었는데 한 달 써보고 꾸준히 쓰게 될 것 같아 연간 결제를 해버렸다! 책과 강의를 통해 Claude Code와 바이브 코딩에 대해 알아가면서 알고 있던 용어, 개념도 있었지만 새롭게 배우는 부분도 꽤 있었다. 혼자였다면 계속 미루다가 올해 안에 완독하지 못했을 것이다. 같이 학습하는 동료들의 진행 상황을 볼 수 있었던 점, 그리고 주차별 미션을 체크하고 코멘트를 남겨주신 혼공족장님의 존재가 큰 도움이 되었다. 미션이 없었으면 실습도 직접 안 하고 넘어가지 않았을까? 게다가 학습기록 글도 블로그에 남기지 않았을 것 같다. 미션을 통해 직접 해봐야 알 수 있는 시행착오를 겪거나 실전 경험을 쌓을 수 있었다. 책의 후반이 되어서야 실습용 프롬프트를 수정해보고, AI 연동 서비스들에 관심을 갖기 시작하긴 했지만... 내가 원하는 프로젝트를 만들면서 AI에게 구현을 요청하고, 그 과정에서 필요한 내용만 물어보며 배우는 JIT 학습 (Just-In-Time Learning, 적시 학습)을 병행하면 실력이 금방 오를 것 같다. 바이브 코딩을 배우면서 느꼈던 걸 적어보고 마쳐야겠다. 구현이 이렇게 쉬워진다면, IT 관련 서비스는 구현 능력보다 ...

『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 학습 기록 (7)

이미지
   혼자 공부하는 바이브 코딩 with 클로드 코드 (7) 인프런 완독 챌린지 책 읽고 강좌 보고, 요약정리 + 실습 기록 Chapter 08 MCP로 클로드 코드의 한계 넘어서기 AI + MCP 연동을 통해서 다양한 개발 툴과 서비스에 연동할 수 있다는 걸 배움 그리고 MCP를 통해 자동화가 되는 부분이 상당하다는 걸 느낌 계정 연동이 필요한 MCP 서버들은 인증 절차가 한 번씩 있었다 API Key나 연결하기 위한 토큰 같은 걸 생성하고 설치할 때 요구하는 방식도 있었음 GitHub ID 또는 Google ID로 로그인 연동해 놓은 서비스가 대부분이라 쉽게 가입했음 (저 아이디들과 관련 Key들은 잘 관리해야겠다는 생각이 들었음) 제대로 활용하려면 MCP를 제공하는 서비스들에 대한 어느정도의 학습도 필요할 것으로 보임 Chapter 08 실습 (MCP 연동, 쇼핑 리스트 앱 만들기) Notion 가입 + MCP 서버 설치 메모, 문서 작성, 일정 관리, 프로젝트 협업, DB, 공개 웹사이트 등 다양한 기능을 하나로 통합한 서비스 Notion MCP 연동해서 글 작성하기 Sequential Thinking MCP 서버 설치 후 테스트 AI가 복잡한 문제를 단계별로 추론하도록 돕는 구조화된 사고 프레임워크 (앤트로픽 제공) Notion MCP + Sequential Thinking MCP 이용해서 추론해서 글 작성하기 쇼핑 리스트 앱을 만들고 MCP 서버를 통해 테스트, 버전 관리, 배포, 데이터베이스 연동까지 실습 Context7, Playwright, GitHub, Vercel, Supabase 책에서 소개된 7가지 MCP 이외에도 유용한 MCP가 있을 것이기 때문에 진행하는 프로젝트에 맞는 MCP 서버 세팅을 잘할 필요가 있을 듯 MCP 연동을 통해 구현한 쇼핑 리스트 앱 Supabase DB 테이블 설치된 MCP 목록 조회 결과 (기존 사용중이던 MCP + 실습하면서 설치한 MCP) Chap...

『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 학습 기록 (6)

이미지
  혼자 공부하는 바이브 코딩 with 클로드 코드 (6) 인프런 완독 챌린지 책 읽고 강좌 보고, 요약정리 + 실습 기록 Chapter 07 클로드 코드 AI 에이전트로 개발팀 구성하기 AI 에이전트를 구성해서 직렬/병렬로 프로젝트를 진행할 수 있음. 에이전트 구성방법이 /agents 명령어에서 자연어로(대화로) 생성하는 방식으로 바뀜 (버전올라가면서 바뀜) 프로젝트 전용 에이전트, 범용 에이전트를 구성할 수 있음 직접 파일을 작성하거나, 클로드 코드에 요청해서 생성 .claude/agents/ 경로 하위에 MD 파일로 만들어짐 (name, description, tools, model) 실습용 프로젝트니까 복잡하게 만들지 않도록 프롬프트 지시(시간 절약, 토큰 절약!) 실습 프로젝트용 CLAUDE.md 설정이 잘 동작 했다 다중 에이전트 구성의 장단점을 Claude에게 물어보고 들은 답변 (프롬프트: 클로드 코드에서 다중 에이전트를 구성해서 작업할때 얻는 이득이 뭘까? 장단점을 설명해줄래? 방금 장/단점을 요약해서 md 파일 표 형태로 작성해줘.) Claude Code 다중 에이전트(Multi-Agent) 장단점 요약 장점 구분 내용 컨텍스트 창 확보 서브에이전트마다 독립된 컨텍스트·작업 디렉토리·도구 접근 권한을 가져서, 대형 코드베이스 탐색 시 메인 에이전트의 컨텍스트를 아끼고 추가 컨텍스트 창을 확보할 수 있음 병렬 처리로 속도 향상 여러 태스크를 동시에 실행해 조사·분석 시간을 단축. 모듈별로 에이전트를 나누거나 리팩토링을 독립적인 청크로 쪼개 병렬 처리 가능 역할 분담 및 전문화 분석 담당/실행 담당처럼 역할을 분리하고, 에이전트마다 커스텀 시스템 프롬프트와 별도의 도구·권한을 설정해 특화된 작업(디버깅, 보안 분석, 스타일 정리 등)에 집중시킬 수 있음 교차 검증 여러 에이전트가 서로의 결과물에 이의를 제기하며 조정하는 구조를 만들 수 있어, 한 에이전트의 오류를 다른 에...

『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 학습 기록 (5)

이미지
혼자 공부하는 바이브 코딩 with 클로드 코드 (5) 인프런 완독 챌린지 책읽고 강좌보고, 요약정리 + 실습기록 Openrouter API 연동을 통해 다양한 AI 모델을 사용할 수 있음. (무료/유료) API KEY 같은 민감한 정보를 잘 관리해야함. (유출 조심) 무료는 사용제한에 쉽게 걸리거나 제약같은게 있음. (Prompt pricing 에서 FREE 세팅) 무료모델 한계 => Google AI Studio 에서 연동해서 해결함. 모델은 어떤 입력(Input Modalities)을 처리하냐에 따라 Text, Image, File, Audio, Video 종류가 있고 다양한 입력을 처리할 수 있는 (멀티 모달) 모델도 있음 추후 유료 API 연동이나 Google AI Studio( https://aistudio.google.com/ ) 사용방법을 공부해보는게 좋을듯 Chapter 06 실습 (냉장고를 부탁해 앱) 오픈라우터 가입 + API KEY 발급 ( https://openrouter.ai/ ) 무료 모델 선택 이미지 처리용 google/gemma-4-31b-it:free 텍스트 처리용 nvidia/nemotron-3.5-lightning:free 실습용 프롬프트를 순차적으로 실행하면서 실습 README.md 파일 생성을 요청해서 실행방법, 모델 교체 방법 등을 작성 무료라서 요청이 실패할 때가 있음 + (무료)경량모델의 한계도 존재하는걸 확인함 Claude Code 가 작성한 내용 발췌 `nvidia/nemotron-3.5-lightning:free`는 경량 모델이라, 프롬프트로 "보유 재료만 사용하라"고 강하게 지시해도 가끔 목록에 없는 재료를 지어내는 경우가 있다. 매 요청마다 결과가 달라질 수 있으므로(모델의 비결정적 특성), 만족스럽지 않으면 "다른 레시피 보기"로 재시도하거나 더 큰 모델로 교체를 고려한다. Claude Code의 구현 완료 요약 보고 무료 모델 요청...

『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 학습 기록 (4)

이미지
혼자 공부하는 바이브 코딩 with 클로드 코드 (4) 인프런 완독 챌린지 책 읽고 강좌 보고, 요약정리 + 실습기록 5강에서는 4지선다 상식 퀴즈 게임을 제작하면서 학습 + 실습을 하였음. 최초의 PRD 작성 이전 단계, 즉 아이디어와 구현을 위한 기반만 설계하면 이후 과정은 AI가 많은 부분을 도와준다는 걸 느낌 (거의 다함) 혼자 북 치고 장구 치고... 여기에 커스텀 명령어를 체이닝까지 하면, 사람이 작업하면 오래 걸릴 작업들을 시간을 엄청 줄일 수 있을 것. 최근에 AI를 써가며 다른 프로젝트를 진행하고 있는데 발전하는 속도가 엄청나다. 요즘엔 거의 웹 검색을 기본적으로 탑재해서 할루시네이션 현상도 거의 없는 것 같다고 느껴진다. 사용자가 얼마나 프롬프트를 잘 짜는가 AI에게 맥락을 잘 이해시키는가 결과물을 이해하고 개선/수정을 요청할 수 있는가 효율적으로 AI를 활용하는가 결과물을 자신의 것으로 만드는 능력이 있는가 이러한 능력이 앞으로 AI 시대에 필요한 능력이 될 것 같다. Claude 가 작성한 구현용 프롬프트를 클로드 코드를 검증 없이 실행하니 Node.js 를 설치하고 Vite 라는 처음 듣는 웹 개발툴도 설치. AI에게 전권을 위임하고 거들떠도 안 보는 건'자율주행을 믿고 자동차 뒷좌석에 앉아서 가는 것 같다'라는 느낌을 받음 (프롬프트 작성을 잘하고 결과물 확인을 하자!) Chapter 05 실습 (상식 퀴즈 게임 앱) 저자님이 제공한 PROMPTS.md 로 시작, PRD 제작, 클로드 코드 구현용 3단계 프롬프트 정리 상식퀴즈게임PRD.md , 상식퀴즈게임클로드코드_프롬프트.md 작성 순차적 실행 하여 구현 완료 Node.js와 Vite 를 사용하여 구현 => 설치 허가 받아 설치하여 구현하는 과정이 있었음 AI 할루시네이션 실습 상식 퀴즈 실행 모습 01 상식 퀴즈 실행 모습 02 상식 퀴즈 실행 모습 03 Chapter 05 게임 제작으로 배우는 체계적인 개발과 관리 ...

『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 학습 기록 (3)

이미지
혼자 공부하는 바이브 코딩 with 클로드 코드 (3) 인프런 완독 챌린지 책읽고 강좌보고, 요약정리 + 실습기록 Chapter 04 학습 + 실습 (할 일 관리 앱) Claude Code 에는 다양한 명령어가 있고 사용 시 프로젝트 구현에 도움을 준다. (실습하며 사용) 컨텍스트(맥락) 은 프로젝트 구현을 진행하면서 쌓이는 다양한 정보들!  => 대화내용(질문+응답), 클로드가 읽은 파일들 내용, 생성한 지침 또는 참조 파일들 (md 파일들)      시스템 도구, 메모리, 커스텀 에이전트 스킬 등등등~~!! 컨텍스트가 많이 쌓이면 토큰을 많이 소비한다. ( + 세션이 길어질수록 컨텍스트가 늘어남) 다양한 컨텍스트 관리 기법을 학습하고 도입하는게 필요함 인수인계 프롬프트, 리서치성 작업은 별도 세션으로 분리 등등... 추후 공부필요 Claude Code 명령어 공식 웹사이트 문서 참고 https://code.claude.com/docs/en/commands + 클로드한테 요청해서 만든 md 파일의 표를 첨부해봤음 카테고리별 명령어 표 카테고리 명령어 기능 대화 관리 /clear (별칭 /reset , /new ) 새 대화 시작 (프로젝트 메모리는 유지) /compact [지침] 대화를 요약해서 컨텍스트 공간 확보 /context [all] 컨텍스트 사용량을 그리드로 시각화 /btw [질문] 대화 기록에 남기지 않고 짧은 질문하기 /export [파일명] 대화를 텍스트로 내보내기 /copy [N] 마지막(또는 N번째) 응답을 클립보드로 복사 세션 탐색/분기 /resume 이전 세션 재개 /branch [이름] 현재 대화를 분기해서 다른 방향 시도 /fork [프롬프트] 대화를 복사해 새 백그라운드 세션으로 실행 /rewind 코드·대화를 체크포인트로 되돌리기 /background (별칭 /bg ) 현재 세션...

『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 학습 기록 (2)

이미지
 혼자 공부하는 바이브 코딩 with 클로드 코드 (2) 인프런 완독 챌린지 책읽고 강좌보고, 요약정리 + 실습기록 클로드 코드를 쓰려고 Claude Pro 결제! (한달 써보고 1년 결제할까 생각...) Python 최신 버전 설치했다가 삽질했음. 파이썬 3.14.6 설치했는데 클로드 코드가 작업하다가 tensorflow 가 최신버전에서 안된다고 3.12 버전 설치하려고 하길래 파이썬 삭제/재설치 삽질! Chapter 03 클로드 코드 시작하기 03-1 클로드 코드 설치하기 책 Github 설치가이드/3장 윈도우 설치가이드.pdf 참고 해서 설치 (Git + Claude Code CLI 버전 설치) GUI 설치와, CLI 설치가 각각 다르다 (기능은 동일) 책은 CLI 기준으로 설치, 사용 Pro 결제후 Claude Code CLI 설치 완료! Claude GUI App 설치시 Claude Code 탭 화면 03-2 손글씨 인식 프로그램 만들기 사전에 Python 설치 필요 MNIST 데이터세트 => 머신러닝 표준 데이터 세트로 활용되고, 입문자들이 가장 먼저 접하는 데이터 세트 데스크톱 버전 생성 실습 데스크톱 버전 실행 스샷 1 데스크톱 버전 실행 스샷 2 03-3 CLAUDE.md로 프로그램 확장하기 Claude Code CLI 에서 /init 으로 생성할 수 있음 CLAUDE.md => 구조, 목표, 개발 규칙(코딩스타일)등을 저장하는 설정파일 새로운 규칙이나 설정이 필요하면 CLAUDE.md 파일을 수정 => CLI에서 # + 지침으로 메모리 수정 가능 모든 프로젝트 공통, 현재 프로젝트 구분하여 작성, 적용가능하다 웹버전 생성 실습 (여기서 클로드가 tensorflow 를 쓴다고 하면서 파이썬 삭제/설치 삽질!) 완료 후 요약 내용 웹 버전 실행 스샷