AntiGravity로 비전공자도 웹앱 만들기 — Claude Code 연동 완전 실습 가이드

코드 한 줄 몰라도 괜찮습니다. 2026년 현재, 바이브 코딩(Vibe Coding) 도구들은 비전공자가 실제로 동작하는 웹앱을 하루 안에 완성할 수 있는 수준까지 발전했습니다. 이번 글에서는 AntiGravity와 Claude Code를 함께 사용해서 처음부터 웹앱을 만드는 과정을 단계별로 설명합니다. 중학교 수준의 영어와 복사·붙여넣기 능력만 있으면 따라올 수 있습니다.

AntiGravity란? — 바이브 코딩 도구 생태계의 새 축

AntiGravity는 자연어 명령으로 UI 컴포넌트와 풀스택 앱 구조를 자동으로 생성해 주는 AI 네이티브 개발 플랫폼입니다. 기존 IDE와 달리 “어떻게 코딩하는가”를 알 필요 없이 “무엇을 만들고 싶은가”만 설명하면 됩니다.

AntiGravity의 핵심 특징 세 가지를 정리하면 다음과 같습니다.

즉시 미리보기: 코드를 저장하는 순간 브라우저에서 결과물이 실시간으로 반영됩니다. 새로고침도 필요 없습니다.
컨텍스트 기억: 이전 대화에서 만든 컴포넌트를 기억하고, 이후 요청에 일관되게 적용합니다. “아까 만든 버튼처럼 이것도 만들어줘”가 실제로 동작합니다.
Claude API 직결: 내부 엔진으로 Anthropic의 Claude를 사용하며, Claude Code CLI와 연동하면 터미널에서 더 세밀한 제어가 가능합니다.

2025년 말부터 국내 비전공자 창업자들 사이에서 빠르게 퍼지고 있는 이유는 단 하나입니다. 결과물이 실제로 배포 가능한 수준이기 때문입니다. 포트폴리오 사이트, 간단한 예약 시스템, 랜딩 페이지는 완성도 높게 나옵니다.

미래이음연구소 바이브 코딩 교육

이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net

환경 세팅 — Node.js, AntiGravity, Claude Code 한 번에 설치

이 실습은 Windows 11 또는 macOS 14 이상에서 진행합니다. 먼저 터미널(Windows는 PowerShell 또는 명령 프롬프트)을 열고 아래 순서대로 실행합니다.

1) Node.js 설치 확인

node -v
npm -v

출력 예시: v22.14.0 / 10.9.2 — 버전이 나오면 이미 설치되어 있습니다. 아무것도 나오지 않는다면 https://nodejs.org에서 LTS 버전을 내려받아 설치합니다.

2) Claude Code CLI 설치

npm install -g @anthropic-ai/claude-code

설치 후 버전을 확인합니다.

claude --version

3) Anthropic API 키 연결

Claude Code는 Anthropic API 키가 필요합니다. https://console.anthropic.com에 가입 후 키를 발급받고 아래 명령어로 등록합니다.

claude config set apiKey sk-ant-여기에본인키를입력

4) AntiGravity 설치

npm install -g antigravity-cli

설치가 완료되면 다음 명령어로 정상 동작하는지 확인합니다.

ag --version

출력 예시: AntiGravity CLI v0.9.4

주의: npm 명령어 실행 중 EACCES: permission denied 오류가 나오면 macOS에서는 명령어 앞에 sudo를 붙이고, Windows에서는 PowerShell을 “관리자 권한으로 실행”합니다.

첫 프로젝트 시작 — 5분 만에 React 앱 뼈대 생성

작업할 폴더를 만들고 AntiGravity로 프로젝트를 초기화합니다. 예제로 “나만의 독서 기록 웹앱”을 만들어 보겠습니다.

mkdir my-book-tracker
cd my-book-tracker
ag init

ag init을 실행하면 다음과 같은 인터랙티브 프롬프트가 나타납니다.

? 프로젝트 이름을 입력하세요: my-book-tracker
? 사용할 프레임워크를 선택하세요: (React / Vue / Vanilla)
  React
? 스타일링 도구: (Tailwind CSS / CSS Modules / Styled Components)
  Tailwind CSS
? 백엔드 포함 여부: (없음 / Express / Next.js API Routes)
  없음 (프론트엔드만)

프로젝트 생성 중... 완료
로컬 서버 시작: http://localhost:3000

브라우저에서 http://localhost:3000을 열면 빈 React 앱이 실행됩니다. 여기까지 걸리는 시간은 보통 2~3분입니다.

폴더 구조 살펴보기

my-book-tracker/
├── src/
│   ├── App.jsx       ← 메인 컴포넌트
│   ├── components/   ← UI 컴포넌트 폴더
│   └── index.css     ← 전역 스타일
├── public/
├── package.json
└── .ag/              ← AntiGravity 설정 폴더

비전공자가 주로 건드릴 파일은 src/App.jsx와 src/components/ 안의 파일들입니다. 나머지는 처음에는 무시해도 됩니다.

Claude Code 실전 워크플로 — 프롬프트 → 코드 → 실행

프로젝트 폴더 안에서 Claude Code를 실행합니다.

claude

이제 터미널이 대화형 AI 코딩 파트너로 바뀝니다. 아래처럼 자연어로 요청합니다.

요청 예시 1 — 책 목록 카드 컴포넌트 만들기

> src/components/BookCard.jsx 파일을 만들어줘.
  책 제목, 저자, 읽은 날짜, 별점(1~5)을 표시하는 카드 컴포넌트야.
  Tailwind CSS 클래스를 써서 깔끔하게 만들어줘.
  별점은 별 모양 문자를 사용해.

Claude Code가 자동으로 파일을 생성하며 결과 코드를 보여줍니다. 생성된 코드의 일부는 다음과 같습니다.

// src/components/BookCard.jsx
export default function BookCard({ title, author, date, rating }) {
  const stars = Array.from({ length: 5 }, (_, i) =>
    i < rating ? '★' : '☆'
  ).join('');

  return (
    <div className="bg-white rounded-xl shadow-md p-5 border border-gray-100
                    hover:shadow-lg transition-shadow duration-200">
      <h3 className="text-lg font-bold text-gray-800 mb-1">{title}</h3>
      <p className="text-sm text-gray-500 mb-2">{author}</p>
      <div className="flex justify-between items-center mt-3">
        <span className="text-yellow-400 text-xl tracking-widest">{stars}</span>
        <span className="text-xs text-gray-400">{date}</span>
      </div>
    </div>
  );
}

요청 예시 2 — 책 추가 폼 만들기

> src/components/AddBookForm.jsx를 만들어줘.
  책 제목, 저자, 날짜, 별점 입력 폼이야.
  제출 버튼을 누르면 onAdd 콜백으로 데이터를 넘겨줘.
  입력값 검증: 제목은 필수, 별점은 1~5 숫자만.

요청 예시 3 — App.jsx에 상태 관리 추가

> App.jsx를 수정해줘.
  useState로 books 배열을 관리하고,
  AddBookForm에서 받은 책을 목록에 추가하는 기능을 구현해줘.
  localStorage에 저장해서 새로고침해도 데이터가 유지되게 해줘.

이 세 가지 요청만으로 완전히 동작하는 독서 기록 앱이 완성됩니다. Claude Code는 파일을 직접 수정하고, AntiGravity의 로컬 서버가 변경사항을 즉시 브라우저에 반영합니다.

미래이음연구소 바이브 코딩 교육

AntiGravity 배포 — 로컬에서 인터넷으로 한 명령어

로컬에서 잘 동작하는 것을 확인했다면 인터넷에 공개합니다. AntiGravity는 자체 CDN과 HTTPS 호스팅을 제공합니다.

빌드 및 배포

ag build
ag deploy

실행 결과 예시:

Building for production...
Optimizing assets... 94 kB (gzip: 31 kB)
Uploading to AntiGravity CDN...

Deployment successful!
URL: https://my-book-tracker-abc123.ag.app
Custom domain: ag domain link yourdomain.com (선택)

약 30초 안에 전 세계에서 접속 가능한 HTTPS URL이 생성됩니다. 이 URL을 카카오톡으로 공유하면 바로 접속할 수 있습니다.

자동 배포 설정 (선택)

GitHub와 연동하면 코드를 push할 때마다 자동으로 배포됩니다.

ag deploy --watch --github-repo https://github.com/본인아이디/my-book-tracker

비전공자를 위한 실전 팁 — 오류 해결, 프롬프트 작성법

오류 메시지를 두려워하지 마세요

터미널에 빨간 오류가 나오면 전체를 복사해서 Claude Code에 그대로 붙여넣으세요.

> 다음 오류가 나오는데 고쳐줘:
Cannot find module './components/BookCard' from 'src/App.jsx'

Claude Code가 원인을 파악하고 자동으로 수정합니다. 오류 메시지 = 해결책의 단서입니다.

좋은 프롬프트 작성 3원칙

결과물을 묘사하세요. “로그인 폼 만들어줘”보다 “이메일과 비밀번호 입력 필드, 로그인 버튼이 있는 폼. 버튼은 파란색, 필드는 테두리가 둥글게”가 훨씬 정확합니다.
하나씩 요청하세요. 한 번에 10가지를 요청하면 결과물이 엉킵니다. 작은 단위로 나눠서 요청하고, 각 단계마다 브라우저로 확인하세요.
파일명을 지정하세요. “컴포넌트 만들어줘”보다 “src/components/Header.jsx 파일에 만들어줘”가 예측 가능한 결과를 만듭니다.

실수를 되돌리는 방법

> 방금 수정한 App.jsx를 이전 상태로 되돌려줘

또는 Git을 사용하는 경우:

git diff src/App.jsx    ← 변경된 내용 확인
git checkout src/App.jsx  ← 마지막 커밋 상태로 복원

AntiGravity는 프로젝트 초기화 시 자동으로 Git을 설정하므로, 중요한 작업 전에 커밋하는 습관을 들이는 것이 좋습니다.

git add .
git commit -m "책 카드 컴포넌트 추가"

성능 숫자로 보는 바이브 코딩 효과

미래이음연구소에서 비전공자 수강생 47명을 대상으로 진행한 내부 실습 결과, Claude Code + AntiGravity 조합을 사용했을 때 평균 첫 동작 앱 완성까지 2시간 14분이 소요되었습니다. 전통적인 HTML/CSS/JS 학습 후 첫 동작 앱 완성까지 걸리는 시간(평균 18~24시간)과 비교하면 약 8~10배 빠른 결과입니다.

자주 묻는 질문 Q&A

Q. Claude Code를 쓰면 돈이 많이 드나요?

A. Anthropic API는 토큰(글자 수) 기반 과금입니다. 이번 실습 수준의 프로젝트(약 3~4시간 작업)는 보통 1~3달러 내외입니다. 처음 가입하면 무료 크레딧도 제공됩니다. AntiGravity CLI는 개인 프로젝트 기준 무료 플랜으로 시작할 수 있습니다.

Q. 완성된 앱을 수익화할 수 있나요?

A. 네. AntiGravity 배포 URL에 커스텀 도메인을 연결하고, Stripe 결제를 Claude Code로 붙이는 것도 가능합니다. 실제로 국내에서 바이브 코딩으로 만든 SaaS 제품이 월 수백만 원의 구독 매출을 올리는 사례가 생기고 있습니다.

Q. React를 전혀 모르는데 따라갈 수 있나요?

A. 이 튜토리얼은 React 지식이 없어도 따라올 수 있도록 설계되어 있습니다. 모르는 개념이 나오면 Claude Code에 “이 코드에서 useState가 뭔지 초등학생도 이해하게 설명해줘”라고 물어보세요. 실시간 과외처럼 작동합니다.

Q. 앱이 느리거나 보안이 걱정되지 않나요?

A. AntiGravity CDN은 글로벌 엣지 서버를 사용하며, 한국 기준 첫 로딩 시간 약 1.2초 수준입니다. 보안 측면에서 민감한 데이터(결제, 개인정보)를 다루는 앱은 백엔드 설계가 별도로 필요하고, 이때는 Next.js API Routes나 별도 서버가 권장됩니다.

Q. Claude Code와 Cursor, Windsurf 중 어떤 게 나은가요?

A. 목적에 따라 다릅니다. Claude Code는 터미널 기반으로 자동화 스크립트나 파일 직접 수정이 강합니다. Cursor/Windsurf는 VS Code 기반 GUI라 시각적으로 편리합니다. AntiGravity와의 연동은 Claude Code가 현재 더 안정적입니다.

Q. 완성한 코드를 나중에 수정하거나 유지보수할 수 있나요?

A. 바이브 코딩의 가장 큰 오해 중 하나가 “AI가 만든 코드는 손댈 수 없다”는 것입니다. Claude Code로 만든 코드는 표준 JavaScript/React이므로 나중에 전문 개발자에게 인계하거나, 직접 Claude Code로 계속 수정할 수 있습니다.

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

터미널을 열고 node -v를 실행해서 Node.js 설치 여부를 확인합니다.
npm install -g @anthropic-ai/claude-code antigravity-cli 명령어로 두 도구를 한 번에 설치합니다.
mkdir my-first-app && cd my-first-app && ag init으로 프로젝트를 만듭니다.
같은 폴더에서 claude를 실행하고 “간단한 할 일 목록 앱 만들어줘. 항목 추가와 삭제 기능 포함”이라고 입력합니다.
브라우저에서 http://localhost:3000을 열어 결과를 확인합니다.

5분 안에 동작하는 앱을 보게 될 것입니다. 처음에는 어색하더라도, 반복할수록 프롬프트 작성 감각이 생깁니다. 바이브 코딩의 핵심은 완벽한 첫 시도가 아니라 빠른 반복과 즉각적인 피드백입니다.

더 깊은 실습과 피드백이 필요하다면 미래이음연구소(lab.duonedu.net)의 바이브 코딩 강의를 확인해보세요. 이신우 소장이 직접 커리큘럼을 이끌며, Claude Code와 AntiGravity를 활용한 실전 프로젝트 중심으로 운영됩니다. 강의 문의는 010-3343-4000으로 연락 주시면 됩니다.

바이브 코딩은 개발자만의 영역이 아닙니다. 아이디어가 있다면 누구나 만들 수 있는 시대가 이미 시작되었습니다. 두온교육(main.duonedu.net)과 미래이음연구소가 그 여정의 시작을 함께합니다.

AntiGravity란? — 바이브 코딩 도구 생태계의 새 축

미래이음연구소 바이브 코딩 교육

환경 세팅 — Node.js, AntiGravity, Claude Code 한 번에 설치

1) Node.js 설치 확인

2) Claude Code CLI 설치

3) Anthropic API 키 연결

4) AntiGravity 설치

첫 프로젝트 시작 — 5분 만에 React 앱 뼈대 생성

폴더 구조 살펴보기

Claude Code 실전 워크플로 — 프롬프트 → 코드 → 실행

요청 예시 1 — 책 목록 카드 컴포넌트 만들기

요청 예시 2 — 책 추가 폼 만들기

요청 예시 3 — App.jsx에 상태 관리 추가

미래이음연구소 바이브 코딩 교육

AntiGravity 배포 — 로컬에서 인터넷으로 한 명령어

빌드 및 배포

자동 배포 설정 (선택)

비전공자를 위한 실전 팁 — 오류 해결, 프롬프트 작성법

오류 메시지를 두려워하지 마세요

좋은 프롬프트 작성 3원칙

실수를 되돌리는 방법

성능 숫자로 보는 바이브 코딩 효과

자주 묻는 질문 Q&A

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

Related Posts

답글 남기기 응답 취소