Do it 바이브 코딩 + 안티그래비티 - 구글 AI+제미나이+나노 바나나+수파베이스+버셀+MCP

바이브 코딩 시대, ‘상상력’과 ‘실행력’이 당신의 무기가 된다!

 

프롬프트 설계법부터 게임, 생산성 도구, 풀스택 서비스 개발까지

한 권으로 끝내는 바이브 코딩 + 안티그래비티 입문서!

 

 

AI가 스스로 코드를 작성하는 시대, 이제 개발은 더 이상 개발자만의 영역이 아니다. 《Do it! 바이브 코딩 + 안티그래비티》는 바이브 코딩을 처음 시작하더라도 누구나 자신만의 서비스를 직접 만들고 세상에 내놓을 수 있도록 안내한다. 구글에서 만든 AI 개발 도구 ‘안티그래비티’를 직접 활용하며 1인 창업자와 기획자, 마케터에게는 아이디어를 현실로 만드는 도구를, 개발자에게는 AI와 협업하는 새로운 방식을 제공한다.

 

이 책은 복잡한 프로그래밍 문법 대신 AI에게 사용자가 받고 싶은 결과를 정확히 전달하는 프롬프트 설계법부터 시작한다. 15년 차 현직 개발자의 실무 경험을 토대로 정리한 ‘ROCK 법칙’을 익히면 개발 지식 없이도  AI를 자신이 바라는 방향으로 정확히 작동하게 만들 수 있다.

 

레트로 슈팅 게임, 폴더 자동 정리 도구, 개발자 성향 테스트, 실시간 디지털 롤링페이퍼까지 총 4가지 실전 프로젝트를 직접 완성하며 바이브 코딩을 경험한다. 단순한 코드 생성에서 멈추지 않고 나노 바나나를 활용한 이미지 생성, 수파베이스를 활용한 서버리스 환경 구축, 버셀을 활용한 글로벌 배포까지 다루어 이 책 한 권으로 전 세계 누구나 접속할 수 있는 서비스를 직접 운영할 수 있다.

[목 차]
  

첫째마당 AI를 활용한 개발에 적응하기

 

_1장 안티그래비티와 프롬프트 기초

__1-1 AI 에이전트 시대와 안티그래비티

___챗봇을 넘어 AI 에이전트로 진화하는 생성형 AI

___AI 에이전트와 바이브 코딩

___안티그래비티란?

___과거의 AI 도구와 안티그래비티의 차이

 

__1-2 안티그래비티의 구조와 핵심 요소

___안티그래비티의 작동 방식

___안티그래비티의 아티팩트

___안티그래비티의 아키텍처

___안티그래비티의 요금제와 토큰

 

__1-3 원하는 결과를 만드는 프롬프트 설계법

___프롬프트를 작성하는 ROCK 법칙

___ROCK 법칙을 활용한 프롬프트 작성법

___마일스톤과 완료 조건 설정하기

___효율적인 작업을 위한 3단계 안전장치

 

_2장 안티그래비티 시작하기

__2-1 안티그래비티 설치하고 설정하기

___[Do it! 실습] 안티그래비티 설치하기

___[Do it! 실습] 안티그래비티 설정하기

 

__2-2 안티그래비티 인터페이스 살펴보기

___안티그래비티의 화면 구성

___[Do it! 실습] 안티그래비티에 간단한 질문하기

 

__2-3 안티그래비티로 바이브 코딩하기

___안전하게 바이브 코딩 활용하기

___[Do it! 실습] 바이브 코딩으로 타이머 프로그램 만들기

___[Do it! 실습] 인라인 명령어와 코멘트 기능으로 특정 부분 수정하기

 

_3장 안티그래비티 실전 활용법

__3-1 안티그래비티에 맥락 전달하기

___[Do it! 실습] @멘션으로 AI 에이전트에게 정보 제공하기

___[Do it! 실습] @멘션의 다양한 참조 메뉴 사용하기

 

__3-2 안티그래비티와 협업하기

___[Do it! 실습] 규칙 설정해서 AI 에이전트에게 협업 기본기 알려 주기

___규칙 설정 시 주의 사항

___[Do it! 실습] 인덱스 레퍼런스로 AI 에이전트의 환각 현상 줄이기

 

둘째마당 안티그래비티로 간단한 프로그램 만들기

 

_4장 레트로 게임 만들기

__4-1 프로젝트 기획하고 기본 골격 만들기

___[Do it! 실습] 기획자 에이전트로 게임 요구 사항 정의하기

___[Do it! 실습] 개발자 에이전트로 MVP 모델 개발하기

___[Do it! 실습] 코드 설명 요청하고 수정하기

 

__4-2 나노 바나나로 게임 이미지 생성하기

___[Do it! 실습] 디자이너 에이전트로 게임 스프라이트 생성하기

___[Do it! 실습] 생성된 이미지를 프로젝트 폴더에 정리하기

___[Do it! 실습] 개발자 에이전트에게 이미지 적용 요청하기

 

__4-3 디버깅하고 게임 완성하기

___[Do it! 실습] 디버깅하고 최종 테스트하기

___[Do it! 실습] 효과음과 랭킹 시스템 추가하고 실행 파일 만들기

 

_5장 자동화 도구를 만들어 생산성 향상하기

__5-1 1초 만에 폴더를 정리하는 자동화 도구 만들기

___폴더 정리 자동화 도구 기획하기

___[Do it! 실습] 안티그래비티로 자동화 도구 구현하기

 

__5-2 자동화 도구 실행하고 업그레이드하기

___[Do it! 실습] 터미널에서 자동화 도구 실행하기

___[Do it! 실습] 로그를 남기도록 기능 업그레이드하기

___[Do it! 실습] 제미나이 API를 활용해서 업무별로 폴더 정리하기

 

셋째마당 안티그래비티로 완성하는 실전 서비스 개발

 

_6장 웹 서비스 개발의 기초 이해하기

__6-1 안티그래비티가 이해하는 웹 구조 만들기

___프런트엔드와 백엔드의 역할

___프런트엔드와 백엔드의 소통 방식

___안티그래비티에서 역할 구분하기

 

__6-2 최신 웹 트렌드 이해하기

___레거시 코드를 막는 프롬프트

___최신 웹 개발 트렌드

___AI 시대에 맞는 초경량 기술 스택, VRTS

 

__6-3 비동기 개발과 멀티세션 전략 이해하기

___비동기 방식과 컨텍스트 스위칭

___컨텍스트 오염과 멀티세션 전략

___[Do it! 실습] 멀티세션 활용해 로그인 기능 만들기

___Diff 뷰어와 코드 체크리스트

 

_7장 나만의 개발자 성향 테스트 만들기

__7-1 기획자 에이전트로 콘텐츠 기획하고 생성하기

___개발자 성향 테스트 서비스 미리 보기

___[Do it! 실습] 안티그래비티와 개발자 성향 테스트 기획하기

___[Do it! 실습] 화면 흐름 설계하기

 

__7-2 디자인 가이드 시스템 작성하기

___[Do it! 실습] Shadcn/ui 라이브러리로 디자인 가이드 시스템 구축하기

___[Do it! 실습] 접근성을 위해 UI/UX 추가하기

 

__7-3 UI 구현하고 화면 테스트하기

___[Do it! 실습] Shadcn/ui 라이브러리 사용해 프로젝트 테마 구성하기

___[Do it! 실습] 애니메이션 효과 추가하기

 

__7-4 메인 페이지 만들고 로직 연결하기

___[Do it! 실습] 화면 흐름에 따라 실제 화면 구현하기

___[Do it! 실습] 직접 테스트하며 오류 수정하기

___[Do it! 실습] 상태 관리를 이용해 점수 계산하고 결과 도출 로직 이해하기

___[Do it! 실습] 외부 API를 활용해 SNS 공유 기능 구현하기

 

_8장 디지털 롤링페이퍼 서비스 구현하기

__8-1 서버 없이 백엔드 완성하기

___디지털 롤링페이퍼 서비스 미리 보기

___백엔드 인프라와 서버리스

___[Do it! 실습] 클릭 몇 번으로 수파베이스 프로젝트 생성하기

___[Do it! 실습] 테이블 설계도 그리고 테이블 완성하기

___[Do it! 실습] API를 활용해 데이터베이스에 데이터 저장하기

 

__8-2 실시간으로 소통하는 인터랙티브 보드 만들기

___[Do it! 실습] 회원 가입과 카카오 로그인 페이지 만들기

___[Do it! 실습] 보드 생성과 포스트잇 작성, 조회 기능 구현하기

___[Do it! 실습] 드래그 & 드롭 구현하고 좌표 저장하기

___[Do it! 실습] 친구가 쓴 글이 실시간으로 나타나게 하기

 

__8-3 전 세계에 서비스 런칭하기

___[Do it! 실습] 깃 저장소 만들고 코드 업로드하기

___[Do it! 실습] 버셀과 깃허브를 연동하여 웹 사이트로 배포하기

___[Do it! 실습] 서비스 배포 후 발생하는 버그 해결하기

___[Do it! 실습] 앱으로 만들어서 배포하기

 

부록 AI를 외부 세상과 연결해 주는 MCP 활용법