Do it! 바이브 코딩 + 클로드 코드

· 제목 : Do it! 바이브 코딩 + 클로드 코드 
· 분류 : 전자책 > 컴퓨터/모바일 > 웹디자인/홈페이지 > HTML/JavaScript
· ISBN : 9791163039075
· 출판일 : 2026-10-20

첫째마당 클로드 코드와 바이브 코딩 시작하기
01장 코딩을 몰라도 시작하는 바이브 코딩
__01-1 지금은 바이브 코딩 시대
____바이브 코딩이란
____바이브 코딩, 누구나 시작할 수 있습니다
____왜 클로드 코드일까
__01-2 바이브 코딩의 3단계
____1단계: 계획 ─ 무엇을 만들지 생각하기
____2단계: 설정 ─ 프로젝트 개발 환경 만들기
____3단계: 빌드 ─ 클로드 코드와 함께 코딩하기
02장 내 컴퓨터에서 클로드 코드 시작하기
__02-1 기본 개발 환경 만들기
____VS Code ─ 다재다능한 코드 편집기
____Node.js ─ 자바스트립트 실행 환경
____깃 ─ 코드 변경 이력 관리 도구
__02-2 클로드 코드 설치하기
____클로드의 유료 플랜
____[Do it! 실습] 클로드 프로 플랜 가입하기
____[Do it! 실습] 내 컴퓨터에 클로드 코드 설치하기
____[Do it! 실습] 클로드 코드 계정 연결하기
__02-3 VS Code에서 클로드 코드 사용하기
____VS Code 터미널 열기
____[Do it! 실습] 터미널에서 클로드 코드 실행하기
__02-4 슬래시 명령 알아보기
____슬래시로 시작하는 명령
____/terminal-setup ─ 줄바꿈 방식 변경하기
____/theme ─ 테마 변경하기
____/model ─ 모델 선택하기
____02-5 컨텍스트와 컨텍스트 윈도우 알아보기
____컨텍스트란
____클로드 코드에게 컨텍스트를 제공하는 방법
____컨텍스트 윈도우란
____컨텍스트 윈도우 관리하기
03장 아이디어를 프로젝트로 만들기
__03-1 AI 뉴스 앱 프로젝트 살펴보기
____왜 'AI 뉴스 수집기'를 만들까
____미리 보는 프로젝트
____[Do it! 실습] 프로젝트 폴더 만들고 클로드 코드 실행하기
__03-2 아이디어를 정리해서 PRD.md 만들기
____왜 PRD.md가 필요할까
____1단계: 앱의 흐름 생각해 보기
____2단계: 기술 스택 정하기
____3단계: 아이디어 정리하기
____4단계: 구현 계획 살펴보기
____[Do it! 실습] PRD.md 작성하기
__03-3 Next.js 프로젝트 만들기
____[Do it! 실습] Next.js 프로젝트 설치하기
____[Do it! 실습] CLAUDE.md 만들기
____[Do it! 실습] 개발 서버 실행하기
__03-4 첫 번째 커밋하기
____커밋이란
____언제 커밋해야 할까
____[Do it! 실습] 클로드 코드로 첫 번째 커밋하기
__[바이브 코딩 한입 지식] 다양한 기술 스택
____데이터베이스 ─ Neon vs 수파베이스
____인증 ─ Clerk vs Supabase Auth vs Auth.js
____UI ─ Tailwind CSS vs Shadcn/ui

둘째마당 클로드 코드와 AI 뉴스 앱 만들기
04장 내 앱에 로그인 기능 만들기
__04-1 새 브랜치 만들기
____브랜치란
____[Do it! 실습] 브랜치 만들고 이동하기
__04-2 Clerk 설정하고 로그인 기능 만들기
____Clerk란
____[Do it! 실습] Clerk 계정 만들기
____[Do it! 실습] API 키 확인하고 저장하기
____[Do it! 실습] 결과 확인하기
__04-3 커밋하고 브랜치 병합하기
____[Do it! 실습] 변경 사항 커밋하기
____[Do it! 실습] main 브랜치로 병합하기
05장 뉴스를 저장할 데이터베이스 만들기
__05-1 뉴스를 저장할 데이터베이스 준비하기
____[Do it! 실습] 새 브랜치 만들기
____[Do it! 실습] Neon에서 PostgreSQL 데이터베이스 생성하기
____[Do it! 실습] Drizzle ORM 설정하기
__05-2 뉴스를 저장할 데이터 구조 만들기
____스키마란
____[Do it! 실습] 데이터베이스 스키마 만들기
____[Do it! 실습] Neon MCP 서버 설치하기
____[Do it! 실습] Neon MCP 설정하기
____[Do it! 실습] 데이터베이스에 스키마 저장하기
__05-3 앱에 사용할 예제 데이터 넣기
____[Do it! 실습] 스키마에 맞는 예제 데이터 만들기
____[Do it! 실습] 커밋하고 브랜치 병합하기
06장 뉴스를 한눈에 보는 대시보드 만들기
__06-1 AI로 대시보드 디자인하기
____디자인 초안은 어떻게 만들까
____[Do it! 실습] 컨텍스트 정리 및 새 브랜치 만들기
____[Do it! 실습] UI 가이드 문서 만들기
__06-2 저장한 뉴스를 화면에 보여 주기
____[Do it! 실습] /dashboard 페이지 만들기
____[Do it! 실습] 예제 데이터 제거하기
____[Do it! 실습] 커밋하고 브랜치 병합하기
__[바이브 코딩 한입 지식] 사고 모드 활용하기
____사고 모드란
____사고 모드 활성화하는 방법
____사고 모드로 대시보드 개선하기
07장 해외 AI 뉴스 자동으로 모으기
__07-1 RSS로 여러 사이트의 뉴스 가져오기
____RSS란
____어떤 사이트를 선택할까
__07-2 RSS에서 원하는 뉴스만 모으기
____[Do it! 실습] 새로운 브랜치 만들기
____[Do it! 실습] RSS 파싱하기
____[Do it! 실습] 커밋하고 브랜치 병합하기
08장 AI로 뉴스를 번역하고 요약하기
__08-1 번역·요약을 위한 클로드 API 준비하기
____클로드 API란
____[Do it! 실습] 새 브랜치 만들고 환경 변수 확인하기
____[Do it! 실습] API 키 발급받기
____[Do it! 실습] API 사용량 한도 설정하기
__08-2 클로드 API로 번역·요약 기능 만들기
____[Do it! 실습] 플랜 모드로 구현 계획 확인하기
____[Do it! 실습] 기존 데이터 삭제하기
____[Do it! 실습] 뉴스 불러오기
09장 클릭 한 번으로 뉴스를 노션에 저장하기
__09-1 클로드 코드의 능력을 넓혀 주는 MCP
____API와 MCP는 어떻게 다를까
____MCP 서버
____MCP 서버 찾기
__09-2 노션에 뉴스 저장 공간 준비하기
____[Do it! 실습] 새 브랜치 만들기
____[Do it! 실습] 클로드 코드에게 물어보기
____[Do it! 실습] API 통합 만들기
____[Do it! 실습] 노션 데이터베이스 준비하기
____[Do it! 실습] 노션 데이터베이스와 API 통합 연결하기
____[Do it! 실습] 데이터베이스 ID 저장하기
__09-3 뉴스를 노션에 바로 저장하기
____[Do it! 실습] 노션 MCP 서버 연결하기
____[Do it! 실습] 뉴스 저장 기능 만들기
____[Do it! 실습] 커밋하고 브랜치 병합하기
10장 완성된 앱을 깃허브에 올리기
__10-1 왜 깃허브가 필요할까
____깃허브의 역할
____로컬 저장소 vs 원격 저장소
____.gitignore 파일 확인하기
__10-2 깃허브 저장소 만들고 연결하기
____[Do it! 실습] 깃허브에 저장소 생성하기
____[Do it! 실습] 로컬 저장소를 깃허브 저장소에 연결하기
__10-3 필요할 때마다 푸시하기
____READ.md 파일이란
____[Do it! 실습] READ.md 파일 만들기
____[Do it! 실습] 변경 사항 커밋하고 깃허브에 올리기

셋째마당 클로드 코드 똑똑하게 활용하기
11장 반복 작업을 나만의 명령으로 만들기
__11-1 나만의 명령을 만드는 커스텀 슬래시 명령
____커스텀 슬래시 명령이란
____명령 파일 구조
__11-2 브랜치를 생성하는 명령 만들기
____[Do it! 실습] 홈 폴더에 커스텀 명령을 위한 .md 파일 만들기
____[Do it! 실습] 새로 만든 명령 확인하기
____[Do it! 실습] 인수를 사용하는 명령 만들기
____11-3 기능 개발 과정을 자동화하기
____[Do it! 실습] 기능 개발 과정을 명령으로 만들기
____[Do it! 실습] 키워드 검색 기능 추가하기
____[Do it! 실습] 프로젝트 명령 작업 커밋하기
12장 자주 쓰는 작업 방식을 스킬로 만들기
__12-1 내 작업 방식을 기억하는 스킬
____커스텀 명령과 스킬
____스킬의 구성과 구조
____SKILL.md 파일과 프론트매터
__12-2 코드를 검토하는 나만의 스킬 만들기
____코드 리뷰 스킬의 폴더 구조
____[Do it! 실습] conventions.md 파일 만들기
____[Do it! 실습] SKILL.md 파일 만들기
____[Do it! 실습] 변경 사항 커밋하기
__12-3 제작한 스킬로 코드 검토하기
____[Do it! 실습] 뉴스 카드 삭제 기능 추가하기
____[Do it! 실습] convention-check 스킬 사용하기
____[Do it! 실습] 깃허브에 푸시하기
__13장 특정 작업을 자동 실행하는 훅 만들기
__13-1 필요할 때 알아서 실행되는 훅
____훅이란
____훅 이벤트의 종류
____훅으로 할 수 있는 일
__13-2 원하는 순간에 훅 실행하기
____훅 설정 파일의 위치와 범위
____훅 설정의 기본 구조
____훅 사용의 예
__13-3 코드 정리를 자동으로 맡기기
____[Do it! 실습] 프리티어와 jq 준비하기
____[Do it! 실습] PostToolUse 훅 등록하기
____[Do it! 실습] 간단한 기능 추가하고 훅 동작 확인하기
14장 여러 AI에게 역할 나눠 맡기기
__14-1 AI에게 역할을 나눠 주는 서브에이전트
____왜 역할을 나눠야 할까
____역할을 나눈다는 건 어떤 의미일까
____이미 쓰고 있던 내장 서브에이전트
____서브에이전트의 파일 구조
____서브에이전트 실행 방법
__14-2 코드 검토 전담 AI 만들기
____[Do it! 실습] 서브에이전트 파일 만들기
____[Do it! 실습] convetion-checker 서브에이전트 동작 확인하기
__14-3 여러 서브에이전트 함께 활용하기
____포그라운드 실행과 백그라운드 실행
____서브에이전트 체인이란
____서브에이전트 병렬 실행이란
____체인과 병렬 실행 함께 사용하기
____14-4 AI 팀으로 기술 블로그 초안 작성하기
____서브에이전트 구조 기획하기
____[Do it! 실습] 블로그 초안 작성 프로젝트 만들기
__14-5 AI끼리 협업하는 에이전트 팀 만들기
____서브에이전트와 에이전트 팀의 차이
____에이전트 팀 활성화하기
____에이전트 팀의 구조
____[Do it! 실습] 에이전트 팀으로 아이디어 검토하기
15장 플러그인으로 필요한 기능 추가하기
__15-1 필요한 기능을 추가하는 플러그인
____플러그인 이해하기
____마켓플레이스란
____[Do it! 실습] 플러그인 마켓플레이스 사용하기
____설치 범위 이해하기
__15-2 플러그인으로 앱 디자인 개선하기
____[Do it! 실습] Frontend Design 플러그인 설치하기
____[Do it! 실습] 뉴스 카드 디자인 개선 요청하기
__15-3 플러그인으로 반복되는 깃 작업 자동화하기
____commit-commands 플러그인이란
____[Do it! 실습] /plugin install 명령으로 설치하기
____네임스페이스 명령어 구조 이해하기
____[Do it! 실습] /commit-commands:commit 사용하기
____[Do it! 실습] 깃허브로 푸시하기

넷째마당 완성 앱을 세상에 공개하고 자동화하기
16장 완성한 앱을 인터넷에 공개하기
__16-1 내 앱을 공개하는 배포 알아보기
____배포란
____관리 범위에 따른 3가지 배포 방법
____초보자가 알아 두어야 할 배포 관련 개념
____Vercel을 사용하면 어떤 점이 좋을까
__16-2 Vercel로 내 앱 배포하기
____배포 전 준비 ─ 빌드 이해하기
____[Do it! 실습] 로컬에서 빌드 확인하기
____[Do it! 실습] Vercel 계정 만들고 깃허브 연결하기
____[Do it! 실습] Vercel로 첫 배포하기
____앱 접속을 위한 URL 확인하기
__16-3 배포 전에 결과 미리 확인하기
____프리뷰 배포란
____[Do it! 실습] 푸터 추가하며 프리뷰 배포 연습하기
____[Do it! 실습] 병합된 브랜치 삭제하기
__[바이브 코딩 한입 지식] 배포 후 버그 관리하기
____1. 이전 버전으로 롤백하기
____2. 로컬과의 차이 확인하기
____3. 클로드 코드에게 배포 로그 붙여 넣고 해결 요청하기
17장 깃허브에서 클로드 코드에게 일 맡기기
__17-1 깃허브에서 함께 일하는 방법 알아보기
____이슈란
____풀 리퀘스트란
__17-2 깃허브에 클로드 코드 연결하기
____깃허브 액션이란
____[Do it! 실습] 깃허브 CLI 설치 및 인증하기
____[Do it! 실습] 깃허브에 Claude 앱 설치하기
__17-3 깃허브에서 클로드 코드로 기능 추가하기
____어떻게 진행할까
____[Do it! 실습] 깃허브에서 이슈 작성하기
____[Do it! 실습] 깃허브에서 클로드 코드에게 업무 맡기기
____[Do it! 실습] 프리뷰 배포 및 빌드 확인하기
____[Do it! 실습] PR 병합하고 마무리하기
18장 클로드 코드와 오래 잘 일하는 습관
__18-1 클로드 코드 비용 아껴 쓰기
____구독 요금과 API 요금 구분하기
____클로드의 토큰 요금 체계
____비용을 줄이는 코딩 습관
____깃허브 액션 토큰 비용 관리하기
__18-2 팀의 작업 방식을 CLAUDE.md에 담기
____개인 CLAUDE.md와 팀 CLAUDE.md의 차이
____팀 CLAUDE.md에 꼭 담아야 할 내용
____CLAUDE.md를 살아 있는 문서로 유지하기
____CLAUDE.md를 간결하게 관리하기
__18-3 AI가 만든 결과를 제대로 검증하기
____왜 아직도 검증이 필요할까
____클로드 코드가 자주 틀리는 것
____어떻게 제대로 검증할까
__18-4 클로드 코드로 코딩 실력 키우기
____바이브 코딩의 함정
____클로드가 짠 코드를 내 것으로 만드는 습관
____클로드 코드를 성장의 도구로 활용하기
____이 책을 마치고 나서 무엇을 해 볼까
부록
__부록 A 클로드 코드 명령어와 단축키
____프로젝트 시작할 때 사용하는 명령어
____작업 중 사용하는 명령어
____컨텍스트 관리할 때 사용하는 명령어
____파일이나 폴더를 참조하는 @멘션
____문제가 발생할 때 사용하는 명령어
____코딩에 유용한 키보드 단축키
__부록 B 자주 쓰는 프롬프트 패턴
____기능 추가 요청하기
____버그 수정 요청하기
____코드 설명 요청하기
____리팩터링 요청하기
____오류 원인 찾기
____단계별 구현 요청하기
____더 좋은 결과를 얻는 프롬프트 습관
찾아보기