바이브 코딩(Vibe Coding)이라는 말을 처음 들었을 때, 많은 분들이 “나는 코딩을 전혀 모르는데 그게 가능할까?”라고 생각합니다. 결론부터 말하면 가능합니다. 그것도 꽤 빠르게. 오늘은 그 가능성을 직접 손으로 느낄 수 있는 도구인 AntiGravity를 소개하고, 비전공자도 따라 할 수 있는 실습 과정을 단계별로 안내합니다.
AntiGravity는 AI와 대화하듯 앱과 웹 서비스를 만들 수 있는 바이브 코딩 플랫폼입니다. 코드 문법을 외우거나 개발 환경을 복잡하게 구성할 필요 없이, 원하는 것을 자연어로 설명하면 실제 동작하는 결과물이 나옵니다. 국내에서도 빠르게 관심이 높아지고 있으며, 교육 현장에서도 활발히 활용되기 시작했습니다.
AntiGravity란 무엇인가
AntiGravity는 한국어 기반 AI 코딩 플랫폼으로, 별도의 프로그래밍 지식 없이도 웹 서비스, 계산기, 퀴즈 앱, 데이터 시각화 도구 등을 만들 수 있습니다. 기존 노코드 툴과 다른 점은 AI가 실제 코드를 생성하고 그 코드를 바로 실행하는 방식이라는 것입니다. 결과적으로 프로그래밍을 배우지 않아도 되지만, 원한다면 생성된 코드를 직접 볼 수도 있고 수정도 할 수 있습니다.
AntiGravity가 바이브 코딩 도구로 주목받는 이유는 세 가지입니다.
- 한국어 프롬프트 지원: 영어 실력이 부족해도 됩니다. “점수 입력하면 등급 알려주는 앱 만들어줘”처럼 일상 언어로 요청합니다.
- 즉각적인 결과: 요청 후 수십 초 내에 실제 실행 가능한 화면이 생성됩니다.
- 반복 수정 가능: “버튼 색깔을 파란색으로 바꿔줘”, “결과를 표로 보여줘”처럼 대화하듯 계속 수정할 수 있습니다.
2024년 이후 Vibe Coding이라는 개념이 확산되면서 AntiGravity, Claude Code, Cursor, Bolt 같은 도구들이 비전공자 사이에서 빠르게 퍼지고 있습니다. 그중에서도 AntiGravity는 국내 사용자 친화적인 UI와 한국어 지원으로 입문 장벽이 낮습니다.
설치 및 환경 설정
AntiGravity는 브라우저 기반 서비스이므로 별도 설치가 필요 없습니다. 하지만 로컬 환경에서 Claude Code와 함께 사용할 경우 Node.js와 npm 정도는 설치되어 있어야 합니다. 아래는 macOS 기준 기본 환경 설정 과정입니다.
Node.js 설치 확인
# 터미널을 열고 아래 명령어 입력
node -v
npm -v버전이 출력되면 이미 설치된 상태입니다. 출력이 없다면 nodejs.org에서 LTS 버전을 다운로드해 설치합니다.
AntiGravity 접속
# 브라우저에서 접속
https://antigravity.so
# 구글 계정 또는 이메일로 회원가입 후 로그인
# 대시보드에서 "새 프로젝트" 클릭회원가입 후 대시보드에서 바로 프로젝트를 시작할 수 있습니다. 무료 플랜에서도 기본 기능은 모두 사용 가능합니다.
첫 번째 프로젝트 만들기
이제 실제로 뭔가를 만들어 봅시다. 오늘 만들 것은 간단한 BMI 계산기입니다. 키와 몸무게를 입력하면 BMI 수치와 판정 결과를 보여주는 앱입니다.
프롬프트 입력 방법
AntiGravity 대시보드에서 “새 프로젝트”를 클릭하면 프롬프트 입력창이 나타납니다. 아래 텍스트를 그대로 붙여넣기 합니다.
키(cm)와 몸무게(kg)를 입력받아 BMI를 계산하고
저체중/정상/과체중/비만 중 해당 항목을 표시해주는 웹 앱을 만들어줘.
디자인은 깔끔하게, 결과는 색상으로 구분해줘.전송 버튼을 누르면 AI가 코드를 생성하고 곧바로 미리보기 화면이 열립니다. 처음 결과물이 나오는 데 보통 10~30초 정도 걸립니다.
결과 수정하기
첫 결과가 마음에 들지 않거나 수정하고 싶은 부분이 있으면 채팅창에 이어서 입력합니다.
# 예시 수정 요청들
"결과 배경색을 초록/노랑/주황/빨강으로 구분해줘"
"계산 버튼 아래에 BMI 기준표를 표로 추가해줘"
"모바일에서도 잘 보이게 반응형으로 수정해줘"
"입력 필드에 placeholder 텍스트를 추가해줘"이 과정이 바이브 코딩의 핵심입니다. 코드를 직접 작성하는 게 아니라, 원하는 결과를 말로 설명하면서 AI와 함께 완성해 나가는 것입니다.
핵심 명령어 실습
AntiGravity를 사용할 때 더 좋은 결과를 얻으려면 프롬프트 패턴을 익혀두는 것이 도움이 됩니다. 아래는 실제로 많이 쓰는 패턴들입니다.
기능 추가 요청
# 기능을 구체적으로 설명할수록 좋습니다
"결과를 저장할 수 있는 히스토리 기능을 추가해줘"
"CSV 파일로 내보내기 버튼을 추가해줘"
"다크 모드 토글 버튼을 헤더에 넣어줘"디자인 수정 요청
# 디자인 변경은 구체적인 색상이나 스타일 키워드를 사용합니다
"전체 폰트를 Noto Sans KR로 바꿔줘"
"카드 형태의 레이아웃으로 변경해줘"
"버튼에 hover 효과 추가해줘"
"여백을 더 넉넉하게 조정해줘"오류 수정 요청
# 오류가 발생하면 오류 메시지를 그대로 붙여넣기
"아래 오류가 나는데 고쳐줘:
TypeError: Cannot read properties of null (reading 'value')"
# 또는 상황 설명
"숫자 대신 한글을 입력하면 앱이 멈추는데 유효성 검사를 추가해줘"코드 확인 방법
# AntiGravity에서 생성된 코드를 보고 싶을 때
# 우측 상단 "코드 보기" 버튼 클릭 또는
# 키보드 단축키: Ctrl + Shift + C (Windows), Cmd + Shift + C (Mac)
# 코드를 로컬에 저장할 때
# "내보내기" 버튼 클릭 후 ZIP 파일 다운로드코드를 직접 볼 필요는 없지만, 호기심이 생긴다면 보는 것을 추천합니다. AI가 생성한 HTML, CSS, JavaScript 코드를 보다 보면 자연스럽게 구조에 익숙해집니다.
Claude Code와 연계하기
AntiGravity에서 만든 프로젝트를 로컬에서 더 발전시키고 싶다면 Claude Code를 활용할 수 있습니다.
# AntiGravity에서 코드 내보내기 후 로컬 폴더에 압축 해제
# 해당 폴더에서 터미널 열기
# Claude Code 설치 (아직 안 되어 있다면)
npm install -g @anthropic-ai/claude-code
# 프로젝트 폴더에서 Claude Code 실행
claude
# Claude Code에서 이어서 수정 요청
# "이 BMI 계산기에 체중 관리 조언 기능을 추가해줘"AntiGravity로 초안을 빠르게 잡고, Claude Code로 세부 기능을 다듬는 방식이 현재 가장 효율적인 바이브 코딩 워크플로입니다.
자주 묻는 질문 Q&A
Q. 코딩을 전혀 모르는데 정말 따라 할 수 있나요?
A. 네. 오늘 소개한 BMI 계산기 예시처럼, 한국어 문장만 입력할 수 있으면 됩니다. “~해줘” 형태로 요청하면 됩니다. 단, 더 복잡한 서비스를 만들고 싶다면 기본 개념을 배우면 훨씬 빠릅니다. 미래이음연구소 강의에서 기초부터 체계적으로 다룹니다.
Q. 만든 앱을 다른 사람에게 공유하려면 어떻게 하나요?
A. AntiGravity에서 “공유” 버튼을 클릭하면 링크가 생성됩니다. 이 링크를 카카오톡이나 SNS로 공유하면 상대방도 브라우저에서 바로 사용할 수 있습니다. 별도 서버나 도메인이 필요 없습니다.
Q. 무료로 얼마나 사용할 수 있나요?
A. AntiGravity는 무료 플랜에서 기본 기능을 사용할 수 있습니다. 프로젝트 수나 AI 요청 횟수에 제한이 있을 수 있으므로, 현재 플랜 정책은 공식 사이트에서 확인하세요. 학습 목적이라면 무료 플랜으로도 충분합니다.
Q. AntiGravity와 Claude Code 중 어떤 것을 먼저 배워야 하나요?
A. 완전 비전공자라면 AntiGravity를 먼저 시작하는 것이 좋습니다. 코딩 환경 설정 없이 바로 결과물을 볼 수 있어 동기부여가 됩니다. 어느 정도 감이 잡히면 Claude Code로 넘어가면 훨씬 강력한 기능을 사용할 수 있습니다.
Q. 만든 앱을 실제 사업에 사용할 수 있나요?
A. 간단한 내부 도구나 프로토타입으로는 충분히 사용 가능합니다. 다만 고객이 직접 사용하는 서비스라면 보안, 데이터 관리, 안정성 측면에서 추가 검토가 필요합니다. 이 부분도 미래이음연구소 강의에서 다룹니다.
Q. 프롬프트를 입력했는데 원하는 결과가 안 나와요.
A. 프롬프트를 더 구체적으로 작성해보세요. “계산기 만들어줘” 보다 “키(cm)와 몸무게(kg)를 입력받아 BMI 수치를 계산하고 결과를 색상으로 구분해서 표시하는 웹 앱 만들어줘”처럼 목적, 입력값, 출력 형태를 명확히 설명하면 훨씬 좋은 결과가 나옵니다.
오늘 5분 실습
지금 당장 해볼 수 있는 실습입니다. 5분이면 충분합니다.
- AntiGravity 접속: antigravity.so 에 접속해서 구글 계정으로 로그인합니다.
- 새 프로젝트 시작: “새 프로젝트” 버튼을 클릭합니다.
- 아래 프롬프트 입력:
오늘 할 일 목록을 관리하는 To-do 앱을 만들어줘.
항목 추가, 완료 체크, 삭제 기능이 필요하고
완료된 항목은 취소선으로 표시해줘.
깔끔한 디자인으로 부탁해.- 결과 확인 후 수정: 생성된 앱을 보고 마음에 들지 않는 부분을 한 가지 골라서 수정 요청합니다.
- 공유 링크 만들기: “공유” 버튼을 눌러 링크를 만들고 카카오톡 나에게 보내기로 저장합니다.
이 다섯 단계를 완료하면 여러분은 이미 바이브 코딩으로 앱을 한 개 만든 경험이 생긴 것입니다. 첫 경험이 다음을 만듭니다.
미래이음연구소 바이브 코딩 교육
이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net
AntiGravity는 바이브 코딩 입문의 최적 도구입니다. 오늘 실습에서 보셨듯이, 아이디어를 말로 설명하면 실제 동작하는 앱이 나옵니다. 처음에는 단순한 것부터 시작해서 점점 복잡한 것을 만들어보세요. 그 과정에서 자연스럽게 코딩에 대한 감각이 생깁니다.
바이브 코딩을 더 체계적으로 배우고 싶다면 두온교육(main.duonedu.net)의 AI 교육 프로그램을 확인해보세요. 미래이음연구소(lab.duonedu.net)에서는 실습 중심의 소규모 강의로 더 집중적인 교육을 받을 수 있습니다. 다음 글에서는 Claude Code를 활용해 실제 포트폴리오 사이트를 만드는 과정을 다루겠습니다.
