AntiGravity 웹앱 실습 – 비전공자도 30분이면 배포까지
AntiGravity란 무엇인가
AntiGravity는 자연어 명령만으로 웹 애플리케이션을 만들 수 있는 바이브 코딩 플랫폼이다. 코드를 한 줄도 작성하지 않아도 된다. 브라우저에서 원하는 기능을 말로 설명하면, AI가 실시간으로 코드를 생성하고 즉시 동작하는 앱을 보여준다.
기존 노코드 도구들과 결정적으로 다른 점이 있다. Wix나 Squarespace는 미리 만들어진 템플릿을 조합하는 방식이다. AntiGravity는 사용자의 요구사항을 이해하고 맞춤형 코드를 처음부터 생성한다. 결과물은 실제 React 기반 웹 애플리케이션이며, 소스코드를 내보내서 직접 수정하는 것도 가능하다.
비전공자에게 AntiGravity가 특히 유용한 이유는 세 가지다.
- 즉각적인 피드백 – 명령을 입력하면 바로 결과를 확인할 수 있다
- 반복 수정이 자유롭다 – "버튼 색상을 파란색으로 바꿔줘" 같은 자연어 수정이 가능하다
- 배포까지 원스톱 – 만든 앱을 별도 서버 설정 없이 바로 공개할 수 있다
설치부터 프로젝트 생성까지
AntiGravity는 웹 기반 도구이므로 별도 설치가 필요 없다. 하지만 로컬 환경에서 더 자유롭게 작업하고 싶다면 CLI 도구를 활용할 수 있다. 두 가지 방법을 모두 다룬다.
방법 1: 웹 브라우저에서 바로 시작
- antigravity.build에 접속한다
- Google 또는 GitHub 계정으로 로그인한다
- "New Project" 버튼을 클릭한다
- 프로젝트 이름을 입력하고 "Create"를 누른다
방법 2: CLI 도구 설치 (선택사항)
Node.js가 설치되어 있다면 터미널에서도 AntiGravity를 사용할 수 있다.
# Node.js 버전 확인 (18 이상 필요)
node --version
# AntiGravity CLI 설치
npm install -g @antigravity/cli
# 버전 확인
antigravity --version
# 새 프로젝트 생성
antigravity init my-first-app
cd my-first-app
# 개발 서버 시작
antigravity devCLI를 설치하면 로컬에서 개발하면서 실시간 미리보기를 확인할 수 있다. 하지만 이 글에서는 웹 브라우저 방식을 기준으로 설명한다. 비전공자라면 브라우저 방식이 훨씬 편하다.
프로젝트 초기 설정
프로젝트를 생성하면 빈 캔버스가 나타난다. 왼쪽에 채팅 패널, 오른쪽에 미리보기 화면이 있다. 채팅 패널에 원하는 내용을 입력하면 된다. 첫 번째 명령으로 앱의 큰 틀을 잡아보자.
# 채팅 패널에 입력할 내용 예시
"할 일 관리 웹앱을 만들어줘.
할 일 추가, 완료 체크, 삭제 기능이 필요해.
디자인은 깔끔한 미니멀 스타일로."이 한 문장만으로 기본적인 To-Do 앱이 생성된다. 실제로 동작하는 앱이 오른쪽 미리보기에 즉시 표시된다.
자연어로 웹앱 만들기 실습
본격적으로 실습해보자. 오늘 만들 것은 개인 독서 기록 웹앱이다. 읽은 책을 기록하고, 별점을 매기고, 한 줄 감상을 남기는 앱이다.
단계 1: 기본 구조 만들기
채팅 패널에 다음과 같이 입력한다.
"독서 기록 웹앱을 만들어줘.
- 책 제목, 저자, 별점(1~5), 한줄 감상을 입력할 수 있는 폼
- 기록한 책 목록을 카드 형태로 보여주기
- 로컬 스토리지에 데이터 저장
- 배경은 따뜻한 베이지 톤, 카드는 흰색"AntiGravity가 생성하는 코드 구조는 대략 이렇다.
// AntiGravity가 자동 생성하는 컴포넌트 구조
src/
App.jsx // 메인 레이아웃
components/
BookForm.jsx // 입력 폼
BookCard.jsx // 개별 책 카드
BookList.jsx // 카드 목록
hooks/
useLocalStorage.js // 로컬 스토리지 관리
styles/
global.css // 전체 스타일코드를 직접 작성할 필요는 없다. AntiGravity가 이 구조를 자동으로 만들어준다. 중요한 건 내가 원하는 것을 정확하게 설명하는 것이다.
단계 2: 기능 추가하기
기본 앱이 만들어졌으면 기능을 하나씩 추가한다. 자연어로 계속 대화하면 된다.
# 검색 기능 추가
"책 제목이나 저자로 검색할 수 있는 검색바를 상단에 추가해줘"
# 정렬 기능 추가
"별점순, 최신순, 제목순으로 정렬하는 드롭다운 버튼을 만들어줘"
# 통계 기능 추가
"이번 달 읽은 책 수, 평균 별점을 보여주는 대시보드를 상단에 추가해줘"각 명령을 입력할 때마다 미리보기가 실시간으로 업데이트된다. 마음에 들지 않으면 바로 수정 요청을 하면 된다.
# 디자인 수정 예시
"카드의 모서리를 더 둥글게 해줘. border-radius를 16px로"
"별점을 숫자 대신 별 아이콘으로 보여줘"
"검색바 placeholder 텍스트를 '책 제목 또는 저자 검색...'으로 바꿔줘"단계 3: 반응형 디자인 적용
모바일에서도 잘 보이게 만들어야 한다. 이것도 자연어 한 줄이면 된다.
"모바일 반응형으로 만들어줘.
768px 이하에서는 카드가 1열로 쌓이고,
폼 입력 필드도 세로로 배치해줘"AntiGravity는 미디어 쿼리를 자동으로 생성한다. 생성된 CSS를 확인하고 싶다면 코드 뷰 탭에서 볼 수 있다.
/* AntiGravity가 자동 생성한 반응형 CSS 예시 */
@media (max-width: 768px) {
.book-grid {
grid-template-columns: 1fr;
padding: 16px;
}
.book-form {
flex-direction: column;
}
.book-form input,
.book-form textarea {
width: 100%;
}
}배포와 공유 – 내가 만든 앱을 세상에
앱이 완성되었으면 배포해보자. AntiGravity에서 배포하는 방법은 크게 세 가지다.
방법 1: AntiGravity 내장 배포 (가장 쉬움)
# 웹 에디터 상단의 "Deploy" 버튼 클릭
# 또는 CLI에서:
antigravity deploy
# 배포 완료 후 URL이 생성된다
# 예: https://my-book-tracker.antigravity.app무료 플랜에서도 기본 배포가 가능하다. 생성된 URL을 누구에게나 공유할 수 있다.
방법 2: 소스코드 내보내기 후 직접 배포
# 소스코드 내보내기
antigravity export --output ./my-book-app
# 내보낸 프로젝트 구조 확인
ls ./my-book-app
# package.json src/ public/ vite.config.js
# 로컬에서 실행 테스트
cd my-book-app
npm install
npm run dev
# Vercel로 배포 (무료)
npm install -g vercel
vercel deploy방법 3: GitHub 연동 자동 배포
# AntiGravity 설정에서 GitHub 연동
# Settings > Integrations > GitHub > Connect
# 연동 후 코드 변경 시 자동으로 GitHub에 푸시
# Vercel이나 Netlify와 GitHub를 연결하면
# 코드 변경 -> 자동 빌드 -> 자동 배포 파이프라인 완성비전공자라면 방법 1로 시작하는 것을 추천한다. 나중에 앱이 커지면 방법 2나 3으로 전환하면 된다.
실전 트러블슈팅 가이드
AntiGravity를 처음 사용하면 몇 가지 흔한 문제를 만날 수 있다. 미리 알아두면 시간을 아낄 수 있다.
문제 1: AI가 의도와 다른 결과를 만들 때
가장 흔한 문제다. 원인은 대부분 명령이 모호하기 때문이다.
# 나쁜 예시 - 너무 모호하다
"예쁘게 만들어줘"
# 좋은 예시 - 구체적이다
"배경색을 #FFF8F0으로,
제목 폰트 사이즈를 24px로,
카드 그림자를 box-shadow: 0 2px 8px rgba(0,0,0,0.1)로 설정해줘"문제 2: 데이터가 새로고침하면 사라질 때
# 로컬 스토리지 저장을 명시적으로 요청한다
"모든 데이터를 localStorage에 저장하고,
페이지를 새로고침해도 데이터가 유지되게 해줘.
useEffect로 초기 로딩 시 localStorage에서 데이터를 불러와줘"문제 3: 생성된 코드에서 에러가 발생할 때
# 에러 메시지를 그대로 복사해서 채팅에 붙여넣는다
"이런 에러가 발생했어: TypeError: Cannot read properties of undefined (reading 'map')
이 에러를 수정해줘"
# AntiGravity가 에러 원인을 분석하고 자동으로 수정한다문제 4: 빌드 에러로 배포가 안 될 때
# CLI 환경에서 빌드 에러 확인
antigravity build 2>&1 | head -50
# 흔한 원인: import 경로 오류
# 해결: 채팅에서 요청
"빌드 에러가 나는데, 모든 import 경로를 확인하고 수정해줘"자주 묻는 질문 Q&A
Q: AntiGravity는 무료인가요?
A: 기본 무료 플랜이 있다. 월 5개 프로젝트까지 무료로 생성하고 배포할 수 있다. 더 많은 프로젝트나 커스텀 도메인 연결이 필요하면 유료 플랜을 사용하면 된다.
Q: 프로그래밍을 전혀 몰라도 사용할 수 있나요?
A: 가능하다. 이 도구의 핵심 가치가 바로 그것이다. 다만 HTML, CSS의 기본 용어(배경색, 폰트 크기, 여백 등)를 알면 더 정확한 요청을 할 수 있다. 모르더라도 "카드 사이 간격을 더 넓혀줘" 같은 일상적인 표현으로 충분하다.
Q: 만든 앱의 소스코드를 소유할 수 있나요?
A: 그렇다. AntiGravity에서 생성된 코드는 사용자 소유다. 소스코드를 내보내서 다른 플랫폼에 배포하거나, 직접 수정해서 사용할 수 있다. 다른 개발자에게 넘겨서 추가 개발을 맡기는 것도 가능하다.
Q: Claude Code와 AntiGravity 중 뭘 써야 하나요?
A: 용도가 다르다. AntiGravity는 빠른 프로토타이핑과 간단한 웹앱에 적합하다. Claude Code는 복잡한 프로젝트, 기존 코드베이스 수정, 서버 작업에 강하다. 비전공자가 처음 시작한다면 AntiGravity가 진입 장벽이 낮다. 어느 정도 익숙해지면 Claude Code로 확장하는 것을 추천한다.
Q: 데이터베이스 연동은 어떻게 하나요?
A: AntiGravity에서 직접 자연어로 요청할 수 있다. "Supabase를 연동해서 사용자 인증과 데이터 저장을 추가해줘"라고 입력하면 연동 코드를 자동으로 생성한다. Firebase, Supabase 등 주요 BaaS 서비스를 지원한다.
Q: 바이브 코딩으로 만든 앱이 실제 서비스에 사용 가능한 수준인가요?
A: MVP(최소 기능 제품)나 내부 도구로는 충분하다. 대규모 트래픽을 받는 상용 서비스라면 전문 개발자의 코드 리뷰와 최적화가 필요하다. 하지만 아이디어 검증이나 초기 사용자 테스트 목적으로는 바이브 코딩만으로도 훌륭한 결과물을 만들 수 있다.
Q: 여러 페이지로 구성된 웹사이트도 만들 수 있나요?
A: 가능하다. "홈, 소개, 갤러리, 연락처 4개 페이지로 구성된 웹사이트를 만들어줘. 상단에 네비게이션 메뉴를 넣고 라우팅을 설정해줘"라고 요청하면 React Router 기반의 멀티 페이지 앱이 생성된다.
Q: 협업이 가능한가요?
A: AntiGravity Pro 플랜에서 팀 협업 기능을 제공한다. 같은 프로젝트에 여러 사람이 접속해서 동시에 편집할 수 있다. 무료 플랜에서는 소스코드를 내보내서 GitHub으로 협업하는 방식을 사용하면 된다.
오늘 5분 실습
지금 바로 해볼 수 있는 초간단 실습이다. 5분이면 끝난다.
- antigravity.build에 접속해서 로그인한다 (1분)
- New Project를 만든다 (30초)
- 채팅 패널에 다음을 입력한다 (30초)
"오늘의 명언을 보여주는 카드 앱을 만들어줘.
- 화면 가운데에 명언 카드 1개
- 카드 아래 '다음 명언' 버튼
- 명언 10개를 미리 배열에 넣어둬
- 배경은 그라데이션, 카드는 흰색에 그림자 효과"- 생성된 앱을 확인하고, 마음에 안 드는 부분을 자연어로 수정해본다 (2분)
- Deploy 버튼을 눌러서 배포한다 (1분)
이것만 해봐도 바이브 코딩이 어떤 방식인지 체감할 수 있다. 중요한 건 완벽한 명령을 한 번에 입력하려고 하지 않는 것이다. 대화하듯이 하나씩 요청하고, 수정하고, 발전시키면 된다.
미래이음연구소 바이브 코딩 교육
이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net
마무리
AntiGravity는 코딩을 모르는 사람에게 가장 친절한 바이브 코딩 도구다. 자연어로 대화하면서 웹앱을 만들고, 수정하고, 배포하는 전 과정을 경험할 수 있다. 완벽한 코드를 작성하는 것보다 아이디어를 빠르게 현실로 만드는 것이 바이브 코딩의 핵심이다.
오늘 실습한 독서 기록 앱처럼 작은 프로젝트부터 시작해보자. 익숙해지면 Claude Code와 조합해서 더 복잡한 프로젝트에 도전할 수도 있다. 바이브 코딩의 세계는 생각보다 넓다.
두온교육에서 출판하는 교육 콘텐츠와 함께 바이브 코딩을 학습해보세요. main.duonedu.net
실전 교육이 필요하다면 미래이음연구소에서 진행하는 강의를 확인하세요. lab.duonedu.net
원문: 두온교육 AI 블로그
댓글
댓글 쓰기