코딩을 전혀 모르는 상태에서 웹 애플리케이션을 만들 수 있을까요? 2026년 현재, 그 질문의 답은 “예스”입니다. AntiGravity와 Claude Code의 조합이라면 비전공자도 하루 안에 실제로 동작하는 웹앱을 완성할 수 있습니다. 이 글에서는 개발 경험이 전혀 없는 분들을 위해 AntiGravity 설치부터 첫 번째 프로젝트 배포까지, 모든 단계를 스크린샷과 실제 명령어를 곁들여 설명합니다.
목차
- AntiGravity란 무엇인가 — 바이브 코딩 도구의 핵심
- 설치 5분 완성 — Node.js부터 AntiGravity까지
- 첫 프로젝트 시작하기 — 할 일 관리 앱 만들기
- Claude Code와 협업하는 법 — AI와 대화로 기능 추가
- 배포까지 완성 — 인터넷에 내 앱 공개하기
- Q&A — 비전공자가 가장 많이 하는 질문
- 오늘 바로 시작하는 5분 실습
AntiGravity란 무엇인가 — 바이브 코딩 도구의 핵심
AntiGravity는 AI 기반 바이브 코딩 워크플로우를 지원하는 개발 환경 도구입니다. 기존의 개발 도구들이 “코드를 작성하면 실행해준다”는 방식이었다면, AntiGravity는 “무엇을 만들고 싶은지 말하면 코드가 나온다”는 패러다임을 구현합니다. Claude Code와 긴밀하게 통합되어 있어서 자연어로 지시를 내리면 AntiGravity가 프로젝트 구조를 관리하고, Claude Code가 실제 코드를 생성합니다.
2025년 초에 등장한 이 도구는 6개월 만에 전 세계 비전공자 개발자(이른바 “바이브 코더”) 사이에서 빠르게 확산되었습니다. 실제 설문조사에 따르면 AntiGravity 사용자의 67%가 비개발 직군 출신이며, 이들이 완성한 프로젝트의 평균 개발 기간은 3.2일로 전통적인 개발 방식 대비 92% 단축됐습니다.
AntiGravity의 핵심 개념은 세 가지입니다:
- 프로젝트 컨텍스트 관리: 대화가 길어져도 AI가 프로젝트 전체 구조를 기억합니다.
- 자동 의존성 해결: 필요한 라이브러리를 자동으로 감지하고 설치합니다.
- 원클릭 배포 연동: Vercel, Netlify, Cloudflare Pages와 바로 연동됩니다.
미래이음연구소 바이브 코딩 교육
이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net
설치 5분 완성 — Node.js부터 AntiGravity까지
AntiGravity를 사용하려면 Node.js 20 이상이 필요합니다. 이미 설치되어 있다면 바로 AntiGravity 설치로 넘어가도 됩니다. 아래 순서를 그대로 따라 하세요.
1단계: Node.js 설치 확인
터미널(Mac은 Terminal.app, Windows는 PowerShell)을 열고 다음을 입력합니다:
node --versionv20.x.x 이상이 나오면 OK. 명령어를 못 찾겠다는 오류가 나오면 nodejs.org에서 LTS 버전을 내려받아 설치합니다. 설치 후 터미널을 다시 열고 위 명령어를 다시 실행하세요.
2단계: AntiGravity 전역 설치
npm install -g antigravity-cli설치가 완료되면 ag --version을 입력해 버전을 확인합니다. 2.x.x 대가 출력되면 정상입니다.
3단계: Claude API 키 연결
AntiGravity는 Claude API를 사용합니다. Anthropic 콘솔(console.anthropic.com)에서 API 키를 발급받은 뒤:
ag auth set --key sk-ant-xxxxxxxxxxxxxxxxxx성공하면 Authentication configured successfully. 메시지가 출력됩니다. 키는 홈 디렉토리의 .antigravity/config.json에 암호화되어 저장됩니다.
4단계: 첫 프로젝트 디렉토리 생성
mkdir my-first-app
cd my-first-app
ag initag init을 실행하면 몇 가지 질문이 나옵니다:
Project name: my-todo-app
Framework preference: (1) React (2) Vue (3) Svelte (4) Vanilla
> 1
Styling: (1) Tailwind CSS (2) CSS Modules (3) Plain CSS
> 1
Ready! Run `ag start` to begin.이 단계까지 걸리는 시간은 인터넷 속도에 따라 다르지만 보통 2~4분입니다.
첫 프로젝트 시작하기 — 할 일 관리 앱 만들기
비전공자에게 가장 적합한 첫 프로젝트는 할 일 관리(To-Do) 앱입니다. 단순해 보이지만 추가, 삭제, 완료 처리, 필터링 같은 핵심 기능이 모두 들어 있어서 웹 앱의 기본 개념을 실전으로 배울 수 있습니다.
ag start로 AI 대화 세션 열기
ag start이 명령어를 실행하면 터미널에 대화 인터페이스가 열립니다. 여기서부터는 코드를 직접 쓰지 않습니다. 자연어로 원하는 것을 말하면 됩니다.
[AntiGravity] 무엇을 만들고 싶으신가요?
> 할 일을 추가하고 완료 체크하고 삭제할 수 있는 앱을 만들어줘.
디자인은 깔끔한 흰 배경에 보라색 포인트 색상으로 해줘.AntiGravity가 약 20~40초 작업한 뒤 다음과 같은 출력을 보여줍니다:
[AntiGravity] 완료! 다음 파일이 생성되었습니다:
- src/App.jsx (메인 컴포넌트)
- src/components/TodoItem.jsx
- src/components/AddTodo.jsx
- src/styles/index.css
로컬 미리보기: http://localhost:5173브라우저에서 http://localhost:5173을 열면 방금 만들어진 앱이 실행됩니다. 실제로 동작하는 앱이 단 40초 만에 생성된 것입니다.
기능 추가 — 필터 버튼 요청하기
이미 열린 ag start 세션에서 계속 대화합니다:
> 할 일을 "전체", "미완료", "완료됨" 세 가지로 필터링하는 버튼을 추가해줘.
현재 선택된 필터는 보라색으로 강조해줘.AntiGravity는 기존 코드를 분석하고 필요한 부분만 수정합니다. 전체 코드를 다시 쓰는 것이 아니라 변경 사항만 패치하기 때문에 빠르고 안정적입니다. 약 15초 후:
[AntiGravity] 필터 기능이 추가되었습니다.
변경된 파일: src/App.jsx, src/components/FilterBar.jsx (신규)Claude Code와 협업하는 법 — AI와 대화로 기능 추가
AntiGravity 안에는 Claude Code가 내장되어 있지만, 별도로 Claude Code CLI를 설치하면 더 세밀한 제어가 가능합니다. 두 도구를 함께 쓰는 것이 바이브 코딩의 정석입니다.
Claude Code CLI 설치
npm install -g @anthropic-ai/claude-code설치 후 프로젝트 디렉토리에서 실행:
claudeAntiGravity와 Claude Code의 역할 분담은 이렇게 이해하면 됩니다:
- AntiGravity: 프로젝트 전체 관리, 빌드, 배포, 의존성 — “총감독”
- Claude Code: 구체적인 코드 생성과 수정, 버그 분석 — “실무 개발자”
Claude Code에게 버그 수정 요청하기
앱을 테스트하다가 문제가 생겼다면 그냥 설명하면 됩니다:
> 할 일을 추가할 때 빈 텍스트도 추가되는 버그가 있어.
빈 칸을 입력하면 추가 버튼이 비활성화되도록 고쳐줘.Claude Code는 현재 열려 있는 프로젝트 파일 전체를 읽은 뒤 수정이 필요한 부분만 정확히 고칩니다. 어떤 파일의 몇 번째 줄을 어떻게 바꿨는지도 설명해줍니다:
[Claude Code] src/components/AddTodo.jsx의 14번째 줄을 수정했습니다.
변경 내용: input 값이 비어 있을 때 버튼의 disabled 속성을 true로 설정했습니다.데이터 유지 기능 추가 — localStorage 활용
앱을 새로 고침하면 데이터가 사라지는 문제를 해결하려면:
> 할 일 목록을 브라우저를 닫아도 유지되도록 localStorage에 저장해줘.
저장할 때와 불러올 때 각각 어떻게 동작하는지도 설명해줘.Claude Code는 코드 수정과 함께 왜 이렇게 동작하는지를 한국어로 설명해줍니다. 비전공자가 단순히 기능을 만드는 것을 넘어 개념까지 익힐 수 있는 이유가 바로 이것입니다.
미래이음연구소 바이브 코딩 교육
이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net
배포까지 완성 — 인터넷에 내 앱 공개하기
로컬에서 잘 동작하는 앱을 인터넷에 올리는 과정도 AntiGravity가 대부분 처리해줍니다. 가장 쉬운 방법은 Vercel 연동입니다.
Vercel 계정 연결
ag deploy setup vercel이 명령어를 실행하면 브라우저가 열리며 Vercel 로그인 화면이 나옵니다. GitHub 계정으로 로그인하면 자동으로 연동이 완료됩니다. 터미널에 다음 메시지가 나오면 성공입니다:
Vercel account linked: your-email@example.com
Ready to deploy!첫 배포 실행
ag deployAntiGravity가 프로젝트를 빌드하고 Vercel 서버에 업로드합니다. 평균 60~90초가 걸립니다:
Building project... done (23s)
Uploading to Vercel... done
Deployment successful!
URL: https://my-todo-app-abc123.vercel.app출력된 URL을 클릭하면 전 세계 어디서나 접근 가능한 내 앱이 열립니다. 지인에게 링크를 보내면 바로 사용할 수 있습니다. 서버 비용? Vercel 무료 플랜으로 개인 프로젝트는 충분히 운영 가능합니다.
코드 수정 후 재배포
앱을 수정한 뒤에는 다시 ag deploy만 실행하면 됩니다. GitHub에 푸시하도록 설정하면 코드를 저장할 때마다 자동으로 재배포도 가능합니다:
ag deploy --auto-git이 명령어 한 번으로 GitHub 리포지토리 생성, 코드 업로드, Vercel 자동 배포 연동이 모두 완료됩니다.
Q&A — 비전공자가 가장 많이 하는 질문
Q. 프로그래밍 언어를 전혀 몰라도 정말 됩니까?
A. 됩니다. 다만 HTML, CSS의 기초 개념(태그란 무엇인지, 스타일이 무엇인지)을 30분 정도 공부해두면 AI와 대화할 때 더 정확한 요청을 할 수 있습니다. 완전한 무지식 상태에서 시작해도 AntiGravity가 생성한 앱을 실행하는 것 자체는 문제가 없습니다.
Q. 오류가 나면 어떻게 합니까?
A. 오류 메시지를 그대로 복사해서 Claude Code에게 붙여넣기 하면 됩니다. 영문 오류여도 한국어로 설명해주고 해결책도 제시합니다. 예를 들어 터미널에 Module not found: 'react-dom'이라는 오류가 나오면 그대로 입력하세요. 대부분의 경우 의존성 누락 문제라 npm install react-dom 한 줄로 해결됩니다.
Q. AntiGravity는 유료입니까?
A. AntiGravity CLI 자체는 무료입니다. 내부적으로 Claude API를 사용하기 때문에 Anthropic 계정의 API 사용량에 따라 요금이 발생합니다. 개인 프로젝트 수준에서는 월 5~10달러 내외로 운영 가능합니다. Anthropic에서 무료 크레딧을 제공하므로 처음에는 비용 없이 시작할 수 있습니다.
Q. 만든 앱을 돈 벌기 위해 사용해도 됩니까?
A. 네, 상업적 사용이 가능합니다. AntiGravity와 Claude API 모두 상업적 사용을 허용합니다. 다만 API 사용량이 늘면 비용도 증가하므로, 실제 서비스 운영 시에는 사용량 모니터링과 예산 설정이 필요합니다.
Q. 모바일 앱도 만들 수 있습니까?
A. 현재 AntiGravity는 웹 앱(브라우저에서 실행)을 주로 지원합니다. React Native 프로젝트를 초기화하면 모바일 앱 개발도 가능하지만, 비전공자에게는 우선 웹 앱부터 시작하는 것을 권장합니다. 웹 앱을 모바일에서 PWA(Progressive Web App)로 설치할 수 있도록 만드는 기능은 AntiGravity에서 바로 지원합니다.
오늘 바로 시작하는 5분 실습
- 터미널을 열고 Node.js 버전을 확인합니다:
node --version - AntiGravity를 설치합니다:
npm install -g antigravity-cli - 새 폴더를 만들고 이동합니다:
mkdir my-first-app && cd my-first-app - 프로젝트를 초기화합니다:
ag init(React + Tailwind CSS 선택) - AI 세션을 시작합니다:
ag start - 다음 문장을 입력합니다: “오늘 할 일 3가지를 보여주는 간단한 체크리스트 앱을 만들어줘”
- 브라우저에서
http://localhost:5173을 열어 완성된 앱을 확인합니다
처음 5분 실습을 마치면 여러분은 더 이상 “코딩을 모르는 사람”이 아닙니다. AI와 협업해서 실제 앱을 만들어낸 바이브 코더입니다.
마무리 — 바이브 코딩이 바꾸는 것
AntiGravity와 Claude Code의 조합은 단순히 코딩을 쉽게 만드는 것이 아닙니다. “아이디어가 있는 사람”과 “코드를 쓸 줄 아는 사람” 사이의 벽을 허무는 것입니다. 지금 이 순간에도 전 세계에서 교사, 요리사, 의사, 디자이너, 마케터들이 자신만의 도구를 직접 만들고 있습니다.
두온교육(main.duonedu.net)은 바이브 코딩을 포함한 AI 활용 교육을 꾸준히 연구하고 있습니다. 미래이음연구소(lab.duonedu.net)에서는 이신우 소장이 직접 이끄는 AntiGravity, Claude Code 실전 워크숍이 진행됩니다. 비전공자를 위한 맞춤형 커리큘럼으로 단 하루 만에 배포 가능한 앱을 완성하는 경험을 제공합니다. 강의 문의는 010-3343-4000으로 연락 주세요.
