AntiGravity 실전 튜토리얼 – 비전공자도 30분이면 웹앱 완성

AntiGravity가 뭔데?

AntiGravity는 자연어로 웹 애플리케이션을 만들 수 있는 바이브 코딩 플랫폼이다. Cursor나 Bolt.new처럼 AI가 코드를 생성해주는 도구인데, 결정적 차이가 있다. 브라우저 안에서 전부 끝난다. 설치할 것도 없고, 터미널을 열 필요도 없다.

코딩을 전혀 모르는 사람이 “할 일 관리 앱 만들어줘”라고 입력하면, AntiGravity가 React 기반 웹앱을 통째로 생성한다. 프론트엔드, 백엔드, 데이터베이스 연결까지 AI가 알아서 구성한다. 개발자가 하루 걸릴 작업을 30분 안에 끝낼 수 있다는 뜻이다.

2025년 하반기부터 본격적으로 주목받기 시작했고, 2026년 현재 비전공자 바이브 코딩 입문 도구로 가장 많이 추천되는 플랫폼 중 하나다. Claude Code가 터미널 기반 고급 도구라면, AntiGravity는 완전 초보를 위한 진입점이라고 보면 된다.

설치부터 프로젝트 생성까지

AntiGravity는 웹 기반이라 설치 과정이 간단하다. 브라우저만 있으면 된다.

1단계: 계정 생성

antigravity.dev에 접속해서 Google 또는 GitHub 계정으로 로그인한다. 무료 플랜으로 월 3개 프로젝트까지 만들 수 있다.

2단계: 새 프로젝트 시작

대시보드에서 New Project 버튼을 누르면 프롬프트 입력창이 나온다. 여기에 만들고 싶은 앱을 자연어로 설명하면 된다.

할 일 관리 웹앱을 만들어줘.
기능:
- 할 일 추가, 수정, 삭제
- 완료 체크 표시
- 카테고리별 필터링 (업무, 개인, 공부)
- 다크모드 지원
디자인은 깔끔하고 모던하게.

이렇게 입력하고 Generate를 누르면 AntiGravity가 프로젝트 구조를 잡고 코드를 생성하기 시작한다. 보통 1-2분이면 첫 버전이 완성된다.

3단계: 프로젝트 구조 확인

생성이 끝나면 왼쪽 패널에 파일 트리가 나타난다. 일반적으로 이런 구조가 만들어진다:

my-todo-app/
├── src/
│   ├── components/
│   │   ├── TodoList.jsx
│   │   ├── TodoItem.jsx
│   │   ├── AddTodo.jsx
│   │   └── CategoryFilter.jsx
│   ├── hooks/
│   │   └── useTodos.js
│   ├── styles/
│   │   └── globals.css
│   ├── App.jsx
│   └── main.jsx
├── public/
│   └── index.html
├── package.json
└── vite.config.js

코드를 몰라도 걱정할 필요 없다. 오른쪽에 실시간 미리보기가 뜨고, 수정이 필요하면 채팅으로 요청하면 된다.

대화로 만드는 할 일 관리 웹앱

AntiGravity의 핵심은 대화형 개발이다. 코드를 직접 수정하는 대신 채팅창에 원하는 변경 사항을 입력한다.

기능 추가 요청하기

첫 버전을 보고 부족한 부분이 있으면 바로 요청한다:

할 일에 마감일을 설정할 수 있게 해줘.
마감일이 지난 항목은 빨간색으로 표시하고,
오늘까지인 항목은 주황색으로 표시해줘.

AntiGravity가 관련 컴포넌트를 수정하고, 날짜 선택 UI를 추가한다. 변경된 코드는 diff 형태로 보여주기 때문에 어디가 바뀌었는지 확인할 수 있다.

디자인 수정하기

디자인도 자연어로 바꾼다:

전체 배경색을 #0f172a로 바꾸고,
카드는 #1e293b 배경에 둥근 모서리(12px)로 해줘.
완료된 항목은 취소선 넣고 투명도 50%로.

CSS를 몰라도 색상 코드와 원하는 느낌만 전달하면 된다. “네이버 느낌으로”, “깃허브 다크모드처럼” 같은 레퍼런스를 주는 것도 효과적이다.

데이터 저장 기능 추가

지금 상태에서는 브라우저를 새로고침하면 데이터가 사라진다. 저장 기능을 붙여보자:

localStorage를 사용해서 할 일 데이터를 브라우저에 저장해줘.
페이지를 새로고침해도 데이터가 유지되어야 해.
최초 접속 시 샘플 데이터 3개도 넣어줘.

AntiGravity가 useTodos 훅을 수정해서 localStorage 연동 로직을 추가한다. 생성된 코드를 보면 이런 패턴이 나온다:

// useTodos.js - AntiGravity가 생성한 코드
import { useState, useEffect } from 'react';

const STORAGE_KEY = 'my-todo-app-data';

const sampleTodos = [
  { id: 1, text: 'AntiGravity 튜토리얼 완료하기', category: '공부', done: false, dueDate: '2026-04-07' },
  { id: 2, text: '주간 보고서 작성', category: '업무', done: false, dueDate: '2026-04-08' },
  { id: 3, text: '운동 30분', category: '개인', done: true, dueDate: null }
];

export function useTodos() {
  const [todos, setTodos] = useState(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    return saved ? JSON.parse(saved) : sampleTodos;
  });

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
  }, [todos]);

  const addTodo = (text, category, dueDate) => {
    setTodos(prev => [...prev, {
      id: Date.now(),
      text,
      category,
      done: false,
      dueDate
    }]);
  };

  const toggleTodo = (id) => {
    setTodos(prev => prev.map(t =>
      t.id === id ? { ...t, done: !t.done } : t
    ));
  };

  const deleteTodo = (id) => {
    setTodos(prev => prev.filter(t => t.id !== id));
  };

  return { todos, addTodo, toggleTodo, deleteTodo };
}

비전공자 입장에서 이 코드를 처음부터 짜는 건 어렵다. 하지만 AntiGravity가 생성한 코드를 읽으면서 구조를 이해하는 것은 충분히 가능하다. useState가 상태 관리, useEffect가 부수 효과 처리라는 것만 알아도 큰 진전이다.

빌드와 배포 – 실제로 세상에 공개하기

앱이 완성되면 배포해야 한다. AntiGravity에서는 두 가지 방법을 제공한다.

방법 1: AntiGravity 내장 배포 (가장 쉬움)

상단 메뉴에서 Deploy 버튼을 클릭하면 끝이다. https://your-app.antigravity.app 형태의 URL이 자동으로 발급된다. 무료 플랜에서도 사용 가능하다.

방법 2: Vercel 연동 배포 (커스텀 도메인 필요 시)

Settings 탭에서 GitHub 저장소로 코드를 내보낸 다음, Vercel과 연결하는 방식이다:

# 1. AntiGravity에서 GitHub로 내보내기
#    Settings > Export to GitHub 클릭
#    저장소 이름: my-todo-app

# 2. 로컬에 클론 (선택사항 - 코드 확인용)
git clone https://github.com/your-username/my-todo-app.git
cd my-todo-app

# 3. 의존성 확인
cat package.json

# 4. 로컬 실행 테스트
npm install
npm run dev
# http://localhost:5173 에서 확인

# 5. Vercel CLI로 배포
npx vercel --prod

Vercel 배포가 완료되면 커스텀 도메인을 연결할 수 있다. 본인의 도메인이 있다면 DNS 설정에서 CNAME 레코드를 추가하면 된다.

배포 후 확인 사항

배포된 앱이 제대로 작동하는지 체크리스트:

# 브라우저 개발자 도구(F12)에서 확인할 것
1. Console 탭 - 에러 메시지 없는지
2. Network 탭 - 리소스 로딩 실패 없는지
3. Application 탭 - localStorage에 데이터 저장되는지
4. 모바일 반응형 - 개발자 도구에서 모바일 뷰 전환

에러가 났을 때 대처법

바이브 코딩에서 가장 중요한 스킬은 코딩 실력이 아니라 에러 대처 능력이다. AntiGravity에서 흔히 만나는 상황과 해결법을 정리했다.

화면이 하얗게 나올 때

React 앱에서 가장 흔한 문제다. 대부분 컴포넌트 렌더링 에러가 원인이다:

# AntiGravity 채팅에 이렇게 입력
"화면이 하얗게 나와. 브라우저 콘솔에 이런 에러가 떠:
TypeError: Cannot read properties of undefined (reading 'map')
TodoList.jsx 23번째 줄에서 발생해. 고쳐줘."

에러 메시지를 그대로 복사해서 붙여넣는 게 핵심이다. “안 돼요”라고만 하면 AI도 추측해야 한다.

스타일이 깨질 때

# 구체적으로 설명하기
"모바일에서 카드가 화면 밖으로 삐져나와.
iPhone SE 크기(375px)에서 확인했어.
카드 너비가 고정되어 있는 것 같은데,
반응형으로 수정해줘. max-width: 100% 적용하고
패딩도 모바일에서는 12px로 줄여줘."

기능이 동작하지 않을 때

# 재현 단계를 알려주기
"삭제 버튼이 작동하지 않아.
1. 할 일 항목 옆의 X 버튼 클릭
2. 아무 반응 없음
3. 콘솔에 에러도 없음
deleteTodo 함수가 호출되는지 확인하고 고쳐줘."

AntiGravity가 디버깅 로그를 추가하거나 이벤트 바인딩을 수정해서 문제를 해결한다. 중요한 건 문제 상황을 정확히 전달하는 것이다. 이건 코딩 지식이 아니라 커뮤니케이션 능력이다.

Q&A – 자주 묻는 질문

Q: AntiGravity 무료 플랜으로 어디까지 할 수 있나요?

A: 월 3개 프로젝트, 프로젝트당 일 50회 대화가 기본 제한이다. 개인 포트폴리오나 학습용으로는 충분하다. 상용 서비스를 만들 계획이면 Pro 플랜(월 $20)이 필요하다.

Q: AntiGravity로 만든 앱의 코드 소유권은 누구에게 있나요?

A: 생성된 코드의 소유권은 사용자에게 있다. GitHub로 내보내서 자유롭게 수정하고 상업적으로 사용할 수 있다. 다만 AntiGravity 플랫폼 자체를 복제하는 건 라이선스 위반이다.

Q: 백엔드가 필요한 앱도 만들 수 있나요?

A: 가능하다. AntiGravity는 Supabase, Firebase 연동을 지원한다. 채팅에서 “Supabase로 사용자 인증과 데이터베이스를 연결해줘”라고 요청하면 관련 설정을 자동으로 구성한다. 단, API 키는 직접 발급받아야 한다.

Q: Claude Code와 AntiGravity 중 뭘 써야 하나요?

A: 목적에 따라 다르다. AntiGravity는 브라우저에서 빠르게 프로토타입을 만들 때, Claude Code는 터미널에서 복잡한 프로젝트를 체계적으로 개발할 때 적합하다. 비전공자라면 AntiGravity로 시작해서 개발 감각을 익힌 뒤 Claude Code로 넘어가는 경로를 추천한다.

Q: AntiGravity가 생성한 코드의 품질은 어느 정도인가요?

A: React + Vite 기반으로 현대적인 구조를 따른다. 소규모 프로젝트에서는 실무에 바로 쓸 수 있는 수준이다. 하지만 대규모 앱에서는 성능 최적화나 보안 검토가 필요하다. AI가 만든 코드를 그대로 프로덕션에 올리기보다 검토 과정을 거치는 습관을 들이자.

Q: 코딩을 전혀 몰라도 정말 가능한가요?

A: 만드는 것 자체는 가능하다. 하지만 에러 대처, 기능 확장, 유지보수를 하려면 기초 지식이 있는 편이 훨씬 유리하다. HTML/CSS 기초와 JavaScript 변수/함수 개념 정도만 알아도 AntiGravity 활용 효율이 3배는 올라간다.

Q: 만든 앱을 나중에 직접 수정할 수 있나요?

A: GitHub로 내보낸 코드는 일반 React 프로젝트와 동일하다. VS Code나 Cursor에서 열어서 직접 수정할 수 있다. AntiGravity에서 시작하고 나중에 Claude Code로 고도화하는 워크플로우도 실전에서 많이 쓰인다.

Q: 팀 협업도 가능한가요?

A: Pro 플랜부터 팀 기능을 지원한다. 한 프로젝트에 여러 명이 접속해서 각자 채팅으로 수정 요청을 보낼 수 있다. Git 브랜치 기반 병합도 지원하지만, 충돌 해결은 수동으로 해야 한다.

Q: 모바일 앱도 만들 수 있나요?

A: PWA(Progressive Web App) 형태로 모바일에서 앱처럼 사용할 수 있다. 네이티브 앱(앱스토어 배포)은 직접 지원하지 않지만, 생성된 React 코드를 React Native로 전환하는 것은 가능하다. 그 과정에서 Claude Code를 활용하면 효율적이다.

오늘 5분 실습

지금 당장 해볼 수 있는 실습이다. 5분이면 끝난다.

미션: AntiGravity에서 자기소개 페이지 만들기

# 1. antigravity.dev 접속 후 로그인

# 2. New Project 클릭 후 이 프롬프트 입력:

"개인 자기소개 웹페이지를 만들어줘.
- 이름, 한 줄 소개, 프로필 이미지 영역
- 내가 관심 있는 기술 태그 3-5개
- 간단한 자기소개 글 섹션
- SNS 링크 버튼 (GitHub, LinkedIn)
- 다크 테마, 그라데이션 배경
- 반응형으로 모바일에서도 잘 보이게"

# 3. 생성된 결과 확인 (1-2분 소요)

# 4. 채팅으로 수정 요청:
"배경 그라데이션을 보라색에서 남색으로 바꿔줘.
이름 아래에 타이핑 애니메이션 효과도 넣어줘."

# 5. Deploy 버튼으로 배포

# 완료! 나만의 자기소개 페이지 URL을 받았다.

이 페이지를 포트폴리오 첫 페이지로 활용할 수 있다. 이력서에 URL을 넣으면 면접관에게 확실한 인상을 줄 수 있다.

마무리

AntiGravity는 바이브 코딩의 진입 장벽을 거의 제로에 가깝게 낮춘 도구다. 브라우저 하나로 아이디어를 실체화할 수 있다는 건, 비전공자에게 코딩이 더 이상 장벽이 아니라는 뜻이다.

오늘 실습한 할 일 관리 앱 구조를 응용하면 가계부, 독서 기록, 운동 루틴 관리 등 다양한 앱으로 확장할 수 있다. AntiGravity로 프로토타입을 빠르게 만들고, 필요하면 Claude Code로 고도화하는 것이 2026년 현재 가장 효율적인 바이브 코딩 워크플로우다.

더 깊이 있는 바이브 코딩 실습과 체계적인 커리큘럼이 필요하다면 미래이음연구소의 교육 프로그램을 확인해보자. 두온교육에서는 교육 출판 콘텐츠도 함께 제공하고 있다.