바이브 코딩과 Antigravity
AI와 협업하는 개발 흐름을 실습 중심으로 익힙니다
바이브 코딩이란?
- 만들고 싶은 화면과 기능을 문장으로 설명
- AI가 초안 코드를 생성
- 실행 결과를 확인하고 문제를 구체적으로 피드백
- 반복 개선으로 동작과 완성도를 높임
이 용어가 생긴 이유
LLM 도구의 성능이 향상되면서, 이제는 한 번에 완벽히 설계하는 것보다 빠른 피드백과 반복 이 훨씬 효율적인 시대가 되었습니다.
"마치 파트너와 감각적인 조율을 하는 느낌!"
이러한 프로세스가 복잡한 설계라기보다 직관적이고 대화에 의존해 코드를 깎아나간다는 인상을 주면서, 온라인 커뮤니티에서 바이브 코딩이라는 표현이 자연스럽게 자리 잡았습니다.
용어가 확산된 계기
안드레이 카르파티
(Andrej Karpathy)
AI와의 협업을 통해 이전에는 없던 완전히 새로운 코딩 경험을 하고 있습니다.
"X(트위터) 포스팅
세계적인 AI 연구자 안드레이 카르파티가 자신의 계정에 관련 표현과 경험을 공유하며 큰 주목을 받았습니다.
개발자 커뮤니티의 확산
이후 커뮤니티에서 기존의 'AI 보조 코딩'과 새로운 흐름인 '바이브 코딩'의 경계를 활발히 논의하게 되면서 용어가 전파되었습니다.
장점과 주의점 한눈에
장점 Pros
🚀 압도적인 개발 속도 향상 프로토타입 제작, 아이디어 검증, 그리고 반복적인 업무와 보일러플레이트 코드 작성의 속도를 눈에 띄게 단축할 수 있습니다.
주의점 Cons
🔍 무비판적 수용의 위험성 생성된 코드를 제대로 이해하거나 검증하지 않고 맹신하면, 심각한 보안 취약점이나 찾기 어려운 버그가 발생하여 결국 유지보수 비용이 폭증할 수 있습니다.
초보자를 위한 핵심 한 문장
"바이브 코딩은 코드를 혼자 작성하는 작업이 아니라,
AI와 대화하며 결과를
조율
해 완성하는 협업 방식이다."
서버·클라이언트·DB 관계
서버/백엔드 핵심 개념
로컬(Local) / 개발 환경(Dev Env)
내 PC에서 코드를 직접 실행하고 점검하는 작업 환경입니다.
배포(Deploy)
뜻: 로컬에서 만든 결과물을 인터넷에서 접속 가능하도록 서버에 올리는 과정입니다.
언어/프레임워크
- 웹 프론트: JavaScript / TypeScript
- 자동화/데이터: Python
- 라이브러리: 필요한 기능을 가져와 조합해 사용
- 프레임워크: 앱 구조와 규칙을 제공하고 그 위에 구현
예: 프론트 - React, Next.js / 백엔드 - Express, FastAPI
API 개념 설명
데이터 저장 개념
앱 데이터를 저장·조회·관리하는 시스템입니다.
예: PostgreSQL, MySQL
예: MongoDB, Redis
- 테이블(Table): 같은 종류의 데이터를 모은 표
- 컬럼(Column): 데이터 항목(속성)
- 레코드(Row): 실제 데이터 한 줄
실행·패키지·의존성
- 📦 패키지(Package) / 의존성(Dependency) 프로젝트에서 사용하는 외부 코드/도구입니다.
- 🛠️ 패키지 매니저(Package Manager) 패키지 설치, 업데이트, 버전 고정을 관리하는 도구입니다. 예: npm / yarn / pnpm (Python은 pip)
- 🔄 버전(Version) / 호환성(Compatibility) 버전 충돌이 나면 실행 오류가 자주 발생합니다.
에러와 디버깅 기초
기대한 결과와 다르게 동작하는 문제입니다.
원인을 추적해 수정하는 과정입니다.
실행 중 남기는 기록으로, 원인 분석의 핵심 단서입니다.
에러가 발생한 함수 호출 경로 목록입니다.
포인트: 에러 메시지와 로그를 AI에 그대로 전달하면 해결 속도가 빨라집니다.
바이브 코딩에서 자주 보는 추가 용어
- 리포지토리: 프로젝트 파일과 이력을 담는 저장소입니다.
- Git: 변경 이력을 기록·비교·복원하는 버전 관리 도구입니다.
비밀번호·API 키 같은 민감정보를 코드와 분리해 보관하는 방식입니다.
외부 서비스 사용 권한을 확인하는 키입니다. 노출되면 과금/보안 문제가 생길 수 있습니다.
Antigravity 화면 이해와 기본 사용 (30~40분)
🖥️ 화면에서 자주 보는 영역
- 📂 프로젝트 폴더 작업 대상 파일이 있는 위치
- 📝 코드 편집기 코드를 작성·수정하는 에디터
- 🤖 에이전트 패널 요청 내용, 진행 상태, 결과를 확인
⚠️ 안전 사용 규칙 (초보자 필수)
- • 터미널 명령은 한 줄씩 읽고 의도를 확인한 뒤 실행하기
- • 삭제/초기화 같은 파괴적 명령은 반드시 재확인 후 실행하기
💡 실습 2
새 폴더를 만든 뒤 index.html 파일 1개 생성하기
에이전트에게 정확히 지시하는 문장 만들기 (40~50분)
요청할 때 아래 4가지를 함께 전달하면 결과 품질과 재현성이 높아집니다.
💡 실습 3 : 같은 요청 2가지 버전 작성해보기
- 짧은 버전: 3줄 요청문
- 템플릿 버전: 목표/범위/제약/완료조건 포함
미니 프로젝트: 1페이지 랜딩 제작 (60~80분)
📄 권장 페이지 구성
- 1. Hero: 핵심 제목 + 서브카피 + 주요 CTA 버튼
- 2. 문제: 고객이 겪는 불편 2~3개
- 3. 해결: 서비스가 문제를 해결하는 방식
- 4. 기능: 핵심 기능 3개를 카드로 구성
- 5. 후기: 짧은 후기 2개 + 이름(가명)
- 6. FAQ: 자주 묻는 질문 4개
- 7. CTA: 문의/구매/신청 유도 버튼
💡 실습 4 (작업 순서)
- AI에게 "섹션 골격 먼저 생성" 요청
- 문장을 쉬운 한국어로 재작성 요청
- 모바일 최적화를 위한 여백/폰트/간격 조정 요청
- 상단 CTA 클릭 시 마지막 CTA로 스크롤 연결
로컬 실행과 프리뷰 점검 (20~30분)
💻 배포 전, 내 컴퓨터에서 화면·기능·링크를 최종 확인합니다.
✅ 확인 체크리스트
💡 바로 사용하는 프롬프트 예시 2개
예시 1) 페이지 생성 요청 (초보자용)
범위: Hero/문제/해결/기능 3개/후기 2개/FAQ 4개/CTA 섹션 고정
제약: 외부 라이브러리 없이 HTML+CSS만 사용
완료조건: 모바일 레이아웃 깨짐 없음, CTA 버튼 클릭 시 하단 CTA로 이동
"위 조건으로 index.html과 style.css를 생성해줘. 문장은 초보자도 이해하기 쉽게 작성해줘."
예시 2) 배포 가이드 요청 (안전장치 포함)
명령어는 실행하지 말고 제안만 해주세요.
git init부터 Pages 설정까지 단계별 체크리스트로 안내해 주세요.
삭제/초기화 명령은 절대 포함하지 마세요."