무작정 프롬프트만 입력하는 게 바이브 코딩의 전부일까?

초보자도 클로드 코드로 기획부터 자동화·배포까지 끝까지 완성해 보자

AI에게 몇 마디만 건네면 코드가 만들어지는 시대! 이제 중요한 건 결과물을 ‘만들어 보는 것’이 아니라 AI와 함께 서비스를 끝까지 완성하는 경험이다. 《Do it! 바이브 코딩 + 클로드 코드》는 코딩이 처음이어도 개발 환경부터 기획·구현·관리·배포·자동화까지 차근차근 따라 하며 클로드 코드를 익히는 실습형 입문서다.

AI 뉴스 앱을 완성한 뒤 발전시키며 로그인, DB, RSS, 클로드 API, 노션 MCP, 깃과 깃허브 등 실제 서비스 개발에 필요한 기술과 방법을 익힌다. 이후 커스텀 명령, 스킬, 훅, 서브에이전트와 에이전트 팀, 플러그인으로 클로드 코드의 활용 범위를 넓히고 버셀 배포와 깃허브 액션으로 업무 자동화까지 경험한다. 바이브 코딩의 기초는 물론, 클로드 코드의 고급 기능과 실무 활용법까지 단계적으로 익힐 수 있다.

[목 차]

첫째마당 클로드 코드와 바이브 코딩 시작하기

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 자주 쓰는 프롬프트 패턴

____기능 추가 요청하기

____버그 수정 요청하기

____코드 설명 요청하기

____리팩터링 요청하기

____오류 원인 찾기

____단계별 구현 요청하기

____더 좋은 결과를 얻는 프롬프트 습관

 

찾아보기