[목 차]
Chapter 00 시작하는 바이브 코더들을 위한 이 책 사용법
_바이브 코딩이란
__AI와 바이브 코딩이 불러온 대변환
__바이브 코더에게 필요한 3가지 역량
__AI가 만든 코드, 믿어도 될까
_“그래서 뭘 만들죠?” 서비스를 보는 눈을 키우는 3가지 클론 바이브 코딩
__나의 작은 포트폴리오 페이지, 리틀리
__최저가 알림 앱, 폴센트
__동네 생활 플랫폼, 당근
__클론 바이브 코딩의 장점
_이 책 사용법
__이런 분께 추천해요
__무료 강의와 함께하세요
__준비물은 이게 다예요
__‘클리커’로 어서 오세요!
__‘클리커’가 추천하는 ‘이럴 때 이런 책!’
_이 책이 데려다주는 곳, 그 너머
Part 01 바이브 코딩할 결심! ‘안티그래비티’라는 AI 팀원 고용하기
Chapter 01 어떤 AI 팀원을 고용할까?
_AI로 코딩하는 도구들 둘러보기
__AI 코딩 도구의 3가지 분류
__그래서 안티그래비티 2.0이어야 하는 이유
_안티그래비티와 친해지기
__안티그래비티의 4가지 표면
__안티그래비티 2.0이 되기까지
__AI가 일하는 새로운 방식, 에이전트
__안티그래비티를 떠받치는 핵심 기능
__안티그래비티 무료 VS 유료
Chapter 02 안티그래비티 2.0과 첫 만남
_안티그래비티 2.0 시작하기
__안티그래비티 2.0 설치하기
__설정 창 탐색하기
_웰컴! 첫 방문 기념 웰컴 페이지 만들기
__프로젝트 생성 및 설정하기
__첫 프롬프트 입력하기
_아티팩트 살펴보기
__진행 상황을 한눈에 보기
__AI가 쓴 코드 확인하기
__AI가 만든 파일 확인하기
__아티팩트에 코멘트 남기기
_프로젝트 & 채팅 창 관리하기
__프로젝트에 새 채팅 창 만들기
__프로젝트 설정하기
__프로젝트 삭제하기
__채팅 창 상단에 고정하기
__채팅 보관하기
__채팅 창 이름 변경 및 삭제하기
_알아 두면 손이 편해지는 소소한 꿀팁
__단축키
__슬래시 명령어
__음성 입력
Part 02 첫 번째 프로젝트, 나만의 링크 모음 페이지 with 스킬
Chapter 03 핵심 기능 구현하기
_무엇을 만들지 정하기
__링크 모음 페이지 리틀리
__핵심 기능 추리기
__완성 과정을 잘게 쪼개기
_1단계 프롬프트 한 줄로 뼈대 세우기
__새 프로젝트 만들기
__링크 모음 페이지 만들기
_2단계 피드백으로 개선하기
__대표 이미지 수정하기
__줄바꿈 수정하기
_3단계 기능 더하기
__팝업 창 추가하기
__링크 추가하기
_4단계 디자인 다듬기
__색감 바꾸기
Chapter 04 프로젝트 스킬 만들고 사용하기
_스킬이란
__프롬프트와 스킬의 차이
__스킬 파일 동작 방식 이해하기
__남이 만든 스킬 가져다 쓰기
_프로젝트 스킬 만들기
__슬래시 명령어로 스킬 만들기
__프롬프트로 스킬 만들기
_스킬 적용해보기
__어딘가 익숙한 새 링크 모음 페이지 만들기
Part 03 두 번째 프로젝트, 최저가 알림 봇 with 스킬, 하네스, API
Chapter 05 최저가 추적 봇 만들기
_무엇을 만들지 정하기
__가격 알림 서비스 폴센트
__핵심 기능 추리기
__완성 과정을 잘게 쪼개기
_1단계 외부 스킬 확인하기
__새 프로젝트 만들기
__외부 스킬 사용하기
_2단계 스스로 검증하는 봇 만들기
__최저가 추적 봇 만들기
__하네스로 스스로 검증하는 봇 만들기
Chapter 06 알아서 도는 든든한 봇 완성하기
_API란
__API의 작동 방식과 유형
__API 키와 보안
_카카오 인증 키 준비하기
__카카오 앱 만들고 인증 키 받기
_카카오톡으로 데이터 받기
__카카오톡 알림 기능 추가하기
_매일 자동으로 실행되는 봇 만들기
__깃허브 저장소 만들기
__깃허브 비밀 저장소 설정하기
__깃허브에 업로드하기
Part 04 세 번째 프로젝트, 중고 거래 서비스 with 멀티 에이전트, MCP, 배포
Chapter 07 멀티 에이전트로 한 번에 여러 화면 만들기
_무엇을 만들지 정하기
__동네 생활 플랫폼 당근
__핵심 기능 추리기
__완성 과정을 잘게 쪼개기
_1단계 여러 팀원에게 동시에 화면 맡기기
__새 프로젝트 만들기
__세 화면 한꺼번에 만들기
_2단계 피드백으로 개선하기
__전체 톤 수정하기
__페이지별 수정하기
Chapter 08 수파베이스 MCP로 데이터 창고 연결하기
_화면 뒤에 창고가 필요한 이유
__백엔드 환경을 통째로 렌트하는 법, 수파베이스
__MCP란
_수파베이스 준비하기
_MCP로 데이터베이스 관리하기
__수파베이스 MCP 연결하기
__AI로 데이터베이스 구축하기
Chapter 09 로그인 및 배포로 사람이 오가는 커뮤니티 완성하기
_수파베이스의 Auth로 로그인 기능 추가하기
__데이터베이스 확인하기
__화면에 로그인 창 달기
__게시글 관리 기능 추가하기
_세상에 공개하기, 배포
__깃허브 연결하기
__버셀로 배포하기
__배포 후 수정하기
켠 김에 배포까지!
코드 한 줄 없이 링크 모음 페이지·가격 알림 봇·중고 거래 커뮤니티
3개 프로젝트를 완주한다!
몸풀기 - 프롬프트 한 줄로 폭죽 터지는 웰컴 페이지 만들기
여러분의 안티그래비티 2.0 첫 방문을 환영하는 웰컴 페이지를 프롬프트 한 줄로 만들어 봅니다.
프로젝트 ① - 링크 모음 페이지
나의 작은 포트폴리오가 되어 줄 웹 페이지를 만들어 봅니다. 이미지, 텍스트, 링크로 구성된 작고 알찬 링크 모음 페이지를 꼼꼼히 완성하게 됩니다.
프로젝트 ② - 24시 최저가 추적 봇 + 카카오톡으로 알림받기
내가 자는 동안에도 알아서 인터넷을 탐색하고 원하는 자료를 찾아 재깍재깍 알림까지 보내는 24시 연중무휴 최저가 추적 봇을 만들어 봅니다.
프로젝트 ③ - 동네 사람들 다 모이는 중고 거래 커뮤니티 만들기
켠 김에 배포까지 질주하겠습니다. 모든 동네 사람이 내 서비스에 접속하고 글을 쓰면서 소통할 수 있는 커뮤니티를 만들어 봅니다.
이런 분께 이 책을 추천해요!
· 바이브 코딩이 처음이라면? ‘말로 시켜서 만든다’는 이야기는 들어 봤지만 직접 해본 적은 없다면 제대로 찾아오셨습니다. 어라? 하는 순간에 서비스를 완성하는 경험을 하게 해드리겠습니다.
· 서비스를 만들어 보는 게 처음이라면? ‘앱이나 사이트는 개발자 수준은 되어야 만드는 게 아닌가’라는 의구심을 품고 있었다면, 깜짝 놀랄 준비하세요.
· 어떤 AI를 써야 할지 모르겠다면? 요즘 클로드가 좋다던데, 코덱스에 새 모델이 엄청나다던데, 구글이 안티그래비티를 업데이트했다던데… 카더라에 휩쓸려 AI 유목민이 되었다면, 이 책이 안티그래비티 2.0을 제대로 파게 해드립니다.
· 이미 안티그래비티 2.0을 써 보고 있다면? 설치는 했는데 “이걸로 대체 뭘 어떻게 만들지?”에서 멈춰 있다면, 3개의 프로젝트를 만드는 과정에서 앞으로 어떤 서비스를 만들어야 할지 방향을 잡을 수 있게 도와드립니다.