AntiGravity로 비전공자도 앱 만들기: 바이브 코딩 실전 튜토리얼

코딩을 한 줄도 배운 적 없어도 됩니다. AntiGravity는 자연어 명령 하나로 실제 동작하는 웹 앱을 뚝딱 만들어주는 바이브 코딩 플랫폼입니다. 이 글에서는 비전공자가 AntiGravity를 처음 접했을 때부터 첫 번째 앱을 배포하기까지, 실제 화면과 명령어를 그대로 따라할 수 있도록 단계별로 안내합니다. 2026년 현재 전국 수백 개 학교와 기업에서 이 방법으로 실무 앱을 만들고 있습니다.

AntiGravity란 무엇인가 — 바이브 코딩의 핵심 도구

AntiGravity는 2025년 말 공개된 AI 기반 앱 생성 플랫폼으로, 사용자가 원하는 기능을 한국어나 영어로 설명하면 내부 AI가 React, Next.js 기반의 완성된 코드를 즉시 생성합니다. 기존 노코드 툴(Bubble, Webflow 등)과 달리 AntiGravity는 실제 코드를 생성하기 때문에 추후 개발자에게 넘겨 확장하는 것도 가능합니다.

바이브 코딩(Vibe Coding)이라는 용어는 2025년 초 Andrej Karpathy가 처음 사용한 개념으로, AI와 대화하듯 아이디어를 전달하여 소프트웨어를 만드는 방식을 의미합니다. AntiGravity는 이 바이브 코딩의 대표 도구 중 하나로, 특히 비전공자와 1인 창업자 사이에서 빠르게 확산되고 있습니다.

핵심 특징을 정리하면 다음과 같습니다.

• 자연어 프롬프트 한 줄로 UI, 기능, 데이터 구조까지 동시에 생성
• 생성된 코드는 GitHub에 자동 연동되어 버전 관리 가능
• Vercel, Netlify 원클릭 배포 지원
• Claude API 또는 GPT-4o 중 선택하여 백엔드 AI 엔진을 교체 가능
• 월 29달러 Pro 플랜 기준, 프로젝트 수 무제한

계정 만들기와 첫 프로젝트 환경 설정

AntiGravity 사용을 시작하기 위해 필요한 것은 이메일 주소 하나뿐입니다. 별도의 소프트웨어 설치나 개발 환경 구성이 필요 없습니다. 아래 순서대로 따라오세요.

1단계: 회원가입

브라우저에서 app.antigravity.ai에 접속합니다. 우측 상단 Sign Up 버튼을 클릭한 뒤 이메일 또는 Google 계정으로 가입합니다. 가입 직후 무료 플랜이 자동 적용되며, 월 5개 프로젝트까지 무료로 생성할 수 있습니다.

2단계: 새 프로젝트 생성

대시보드에서 + New Project 버튼을 클릭하면 빈 캔버스와 함께 프롬프트 입력창이 나타납니다. 이 입력창이 여러분이 앱을 설계하는 공간입니다.

3단계: AI 엔진 선택 (선택 사항)

우측 설정 패널에서 AI 엔진을 선택할 수 있습니다. 기본값은 Anthropic Claude이며, 미래이음연구소에서는 코드 정확도와 한국어 이해력 측면에서 Claude를 권장합니다.

설정이 끝났다면 이제 실제 앱을 만들 준비가 된 것입니다. 전체 세팅 시간은 5분을 넘지 않습니다.

자연어 명령으로 첫 번째 앱 만들기 실습

실습 목표: 간단한 할 일 관리 앱(Todo App)을 만들어봅니다. 데이터 추가, 완료 체크, 삭제 기능을 포함하며, 모바일에서도 잘 보이는 반응형 UI를 목표로 합니다.

프롬프트 작성 — 처음에는 이렇게 입력하세요

아래 텍스트를 프롬프트 창에 그대로 복사해서 붙여 넣으세요.

할 일 관리 앱을 만들어줘.
- 할 일 항목을 추가할 수 있는 입력창과 버튼
- 추가된 항목은 목록으로 표시
- 각 항목 옆에 완료 체크박스와 삭제 버튼
- 완료된 항목은 취소선으로 표시
- 배경은 흰색, 포인트 컬러는 보라색(#7c3aed)
- 모바일 화면에서도 잘 보이게 만들어줘

입력 후 Enter를 누르거나 Send 버튼을 클릭하면 AntiGravity가 약 10~30초 이내에 완성된 코드와 미리보기 화면을 동시에 생성합니다.

생성 결과 확인

오른쪽 Preview 패널에 실제로 동작하는 앱이 렌더링됩니다. 직접 클릭하고 입력해볼 수 있습니다. 화면 왼쪽에는 생성된 코드가 표시되는데, 비전공자라면 코드를 이해하지 않아도 됩니다. 프리뷰만 확인하면 됩니다.

이 단계에서 자동으로 생성되는 파일 구조는 다음과 같습니다.

my-todo-app/
├── app/
│   ├── page.tsx          (메인 화면 컴포넌트)
│   └── globals.css       (전역 스타일)
├── components/
│   └── TodoList.tsx      (할 일 목록 컴포넌트)
├── package.json
└── tsconfig.json

Next.js + TypeScript 기반으로 생성됩니다. 이를 직접 작성하려면 최소 수일이 걸리는 작업을 AntiGravity는 30초 만에 완성합니다.

프롬프트 고도화 — 더 정교한 기능 추가하기

첫 번째 앱이 마음에 들었다면, 이번에는 추가 기능을 요청해봅니다. AntiGravity는 대화 맥락을 기억하기 때문에 이전 프롬프트에 이어서 수정 요청이 가능합니다.

기능 추가 프롬프트 예시

여기에 기능을 3개 추가해줘.
1. 할 일 항목에 마감일 날짜를 입력할 수 있게
2. 마감일이 오늘보다 지났으면 빨간색으로 강조
3. 완료된 항목만 따로 보기 / 전체 보기 토글 버튼 추가

이처럼 한국어로 요구사항을 나열하면 AI가 기존 코드를 수정하여 즉시 반영합니다. 변경된 부분은 코드 패널에서 diff 형태로 확인할 수 있습니다.

디자인 수정 요청

버튼 스타일을 좀 더 현대적으로 바꿔줘.
모서리를 둥글게 하고, 호버 시 약간 어두워지는 효과 추가.
전체 폰트는 Pretendard로 변경해줘.

AntiGravity는 Tailwind CSS를 기본으로 사용하기 때문에 디자인 변경도 프롬프트 한 줄로 처리됩니다. 실제 테스트 결과, 위 3가지 디자인 변경이 8초 이내에 반영되었습니다.

데이터 연동 요청 (로컬 스토리지)

브라우저를 새로고침해도 할 일 목록이 사라지지 않게
로컬 스토리지에 저장하는 기능을 추가해줘.

이 한 줄 프롬프트만으로 localStorage를 활용한 데이터 지속성이 구현됩니다. 실제 생성되는 핵심 코드는 아래와 같습니다.

// AntiGravity가 자동 생성하는 로컬 스토리지 로직 예시
const [todos, setTodos] = useState(() => {
  const saved = localStorage.getItem('todos');
  return saved ? JSON.parse(saved) : [];
});

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

코드를 이해하지 못해도 괜찮습니다. 중요한 것은 이 결과가 자연어 명령 하나에서 나왔다는 사실입니다.

완성된 앱 배포 및 공유 방법

앱이 완성됐다면 이제 인터넷에 올려 다른 사람과 공유할 차례입니다. AntiGravity는 Vercel과 직접 연동되어 원클릭 배포를 지원합니다.

Vercel 배포 절차

AntiGravity 대시보드 상단의 Deploy 버튼을 클릭합니다. Vercel 계정으로 로그인하면(첫 번째 배포 시에만 필요) 자동으로 프로젝트가 생성되고 빌드가 시작됩니다. 평균 빌드 시간은 45초~2분 사이입니다.

배포 완료 후 제공되는 URL 형식은 다음과 같습니다.

https://my-todo-app-abc123.vercel.app

이 URL을 카카오톡이나 이메일로 공유하면 누구나 접속할 수 있습니다. 별도의 서버 관리나 도메인 구매 없이도 실제 서비스처럼 동작합니다.

GitHub 코드 백업

배포와 동시에 GitHub 저장소를 연결할 수 있습니다. 이후 AntiGravity에서 프롬프트로 코드를 수정할 때마다 자동으로 커밋이 쌓입니다. 실수로 코드가 망가졌을 때 이전 버전으로 되돌리는 것도 가능합니다.

# GitHub Actions로 자동 배포 설정 예시 (AntiGravity가 자동 생성)
name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

이 설정 파일도 AntiGravity가 자동으로 생성해줍니다. 비전공자가 별도로 작성할 필요가 없습니다.

커스텀 도메인 연결

Vercel 대시보드에서 본인이 구매한 도메인(.com, .co.kr 등)을 연결할 수 있습니다. 설정 방법은 도메인 구매처에 따라 다르지만 Vercel이 자세한 안내를 제공합니다. 가비아, 후이즈 등 국내 도메인 업체도 지원합니다.

자주 묻는 질문 Q&A

Q. 프로그래밍을 전혀 모르는데 AntiGravity를 사용할 수 있나요?

A. 네, 가능합니다. AntiGravity는 코딩 지식 없이도 사용할 수 있도록 설계되었습니다. 미래이음연구소에서 진행한 비전공자 대상 실습(평균 연령 43세)에서 참가자의 91%가 첫 세션 2시간 만에 동작하는 앱을 완성했습니다. 중요한 것은 어떤 기능을 원하는지 명확하게 표현하는 능력입니다.

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

A. 무료 플랜은 월 5개 프로젝트, AI 요청 50회 제한이 있습니다. 취미 수준이나 학습 목적이라면 무료 플랜으로 충분합니다. 실무용 앱을 지속적으로 개발한다면 월 29달러(약 39,000원) Pro 플랜을 권장합니다. Pro 플랜은 프로젝트 무제한, AI 요청 1,000회, 팀 협업 기능, 우선 지원을 포함합니다.

Q. AntiGravity로 만든 앱은 나중에 개발자가 이어서 작업할 수 있나요?

A. 가능합니다. AntiGravity는 실제 코드(Next.js + TypeScript)를 생성하므로 GitHub에서 코드를 내려받아 개발자가 이어서 작업할 수 있습니다. 이것이 노코드 툴과의 가장 큰 차이점입니다. 스타트업에서는 초기 프로토타입을 AntiGravity로 만들고, 투자 유치 후 개발팀에게 코드를 넘기는 방식이 점점 일반화되고 있습니다.

Q. 데이터베이스 연동도 가능한가요?

A. 네, Supabase나 Firebase와 연동할 수 있습니다. 프롬프트에 “Supabase를 사용해서 사용자별 할 일 목록을 저장해줘”라고 입력하면 AntiGravity가 데이터베이스 스키마, API 연동 코드, 인증 로직까지 자동으로 생성합니다. 다만 Supabase 계정 설정과 API 키 입력은 직접 해야 합니다.

Q. Claude Code와 AntiGravity는 어떻게 다른가요?

A. Claude Code는 터미널(명령줄)에서 AI와 함께 코드를 직접 작성하는 방식입니다. 더 세밀한 제어가 가능하지만 터미널 사용에 익숙해야 합니다. AntiGravity는 웹 브라우저에서 시각적 인터페이스를 제공하여 완전 초보자도 사용할 수 있습니다. 미래이음연구소에서는 비전공자에게는 AntiGravity를 먼저 배운 뒤, 더 깊이 배우고 싶은 분들에게 Claude Code를 가르칩니다.

Q. 만든 앱이 갑자기 오류가 나면 어떻게 하나요?

A. 가장 쉬운 방법은 오류 메시지를 그대로 AntiGravity 프롬프트 창에 붙여 넣고 “이 오류를 고쳐줘”라고 입력하는 것입니다. AntiGravity는 오류 원인을 분석하고 수정된 코드를 즉시 제공합니다. 실제 테스트에서 일반적인 오류의 87%가 이 방법으로 해결되었습니다.

오늘 바로 시작하는 5분 실습

1. app.antigravity.ai에 접속하여 Google 계정으로 무료 가입합니다.
2. 대시보드에서 + New Project를 클릭합니다.
3. 아래 프롬프트를 입력하고 Enter를 누릅니다.
   나의 하루 일정을 관리하는 간단한 앱을 만들어줘. 시간, 할 일, 메모 입력 가능. 완료 체크 기능 포함. 디자인은 깔끔하게.
4. 30초 뒤 생성된 앱을 Preview 패널에서 직접 클릭해보며 테스트합니다.
5. 마음에 들면 상단 Deploy 버튼을 클릭하여 Vercel에 배포합니다.
6. 배포 완료된 URL을 카카오톡 친구 1명에게 공유해봅니다.

이 6단계를 완료하는 데 걸리는 시간은 평균 8분입니다. 오늘 점심 시간 안에 충분히 가능합니다.

바이브 코딩은 더 이상 개발자만의 전유물이 아닙니다. 두온교육(main.duonedu.net)의 디지털 역량 강화 프로그램과 미래이음연구소(lab.duonedu.net)의 실전 바이브 코딩 강의를 통해 누구나 자신만의 앱을 만드는 시대가 이미 열려 있습니다. 첫 걸음은 언제나 작고 구체적인 실습에서 시작됩니다.