Claude Code와 AntiGravity로 배우는 바이브 코딩 입문, 비전공자 30분 실습 튜토리얼

왜 지금 Claude Code와 AntiGravity를 같이 배워야 하나

비전공자가 바이브 코딩에서 가장 먼저 부딪히는 벽은 문법이 아니다. 뭘 시켜야 하는지, 어디까지 자동화할 수 있는지 감이 없다는 점이다. Claude Code는 코드를 읽고 만들고 고치는 데 강하고, AntiGravity는 반복되는 흐름을 빠르게 실행하는 데 강하다. 둘을 같이 쓰면 혼자 개발 공부를 오래 하지 않아도 작은 결과물을 빠르게 만들 수 있다.

쉽게 말해 Claude Code는 옆자리 시니어 개발자 역할, AntiGravity는 자주 하는 작업을 묶어주는 자동화 손잡이다. 비전공자 입장에서는 이 조합이 꽤 현실적이다. 버튼 하나 바꾸려고 파일 10개 뒤지는 시간이 줄고, 같은 명령을 매번 다시 입력하는 귀찮음도 같이 줄어든다.

이 조합이 특히 잘 맞는 사람

• 웹사이트 수정은 해야 하지만 React, Node.js를 깊게 공부할 시간은 없는 사람
• 강의용 데모, 사내 업무툴, 랜딩페이지 같은 작은 결과물을 빠르게 만들고 싶은 사람
• 명령어를 복붙해서라도 우선 돌아가게 만들고 싶은 실무형 사용자

실습 준비, 설치와 폴더 구조 잡기

이번 실습 목표는 아주 단순하다. Claude Code에게 안내 문구와 버튼이 있는 간단한 학습용 페이지를 만들게 하고, AntiGravity로 실행과 점검 루틴을 정리하는 것이다. 너무 큰 프로젝트부터 잡으면 바로 지친다. 처음엔 한 페이지짜리 실습이 맞다.

1단계, 작업 폴더 만들기

mkdir vibe-study
cd vibe-study
mkdir app assets docs

폴더를 이렇게 단순하게 나누면 초보자도 덜 헷갈린다. app에는 실제 페이지 파일, assets에는 이미지나 아이콘, docs에는 프롬프트 메모를 넣으면 된다.

2단계, Claude Code에 첫 요청 보내기

claude-code

실행 후 아래처럼 요청하면 된다.

학습용 랜딩페이지를 만들어줘.
조건은 아래와 같아.
- 파일은 app/index.html 하나로 시작
- 상단 제목, 설명문, 버튼 2개 포함
- 한국어 문구 사용
- 초보자가 읽기 쉬운 구조
- CSS는 파일 내부 style 태그로 작성

여기서 핵심은 잘난 척하며 어려운 요구를 섞지 않는 것이다. 처음엔 파일 수를 줄이고, 기능도 줄이고, 결과를 빨리 봐야 한다.

3단계, AntiGravity에서 반복 실행 준비

AntiGravity 환경마다 세부 명령은 조금 다를 수 있지만, 공통 아이디어는 같다. 자주 쓰는 실행 흐름을 프리셋처럼 정리하는 것이다. 예를 들면 아래 같은 순서다.

cd vibe-study
python3 -m http.server 8080
open http://localhost:8080/app/

이 세 줄을 매번 손으로 치면 별것 아닌데 계속 귀찮다. AntiGravity에서는 이런 흐름을 하나의 작업 단위로 저장해 두고 반복 실행하면 된다. 비전공자에게 자동화는 거창한 서버 기술이 아니라, 귀찮은 순서를 덜 치는 기술이다.

Claude Code로 첫 화면 만들기

Claude Code의 장점은 결과물만 던지는 데서 끝나지 않는다는 점이다. 왜 이렇게 만들었는지, 어떤 파일을 바꿨는지 설명까지 붙여주면 학습 속도가 빨라진다. 아래처럼 한 단계 더 구체적으로 요청해보자.

app/index.html을 개선해줘.
- 배경은 밝고 깔끔하게
- 메인 버튼은 파란색
- 보조 버튼은 흰색 테두리
- 모바일에서도 글자가 너무 작지 않게
- 각 섹션에 주석을 달아줘

이 요청의 좋은 점은 결과 기준이 선명하다는 것이다. 예쁘게, 세련되게 같은 추상어만 쓰면 모델도 애매하게 답한다. 버튼 색, 모바일 글자 크기, 주석 추가처럼 관찰 가능한 조건으로 바꾸면 성공률이 올라간다.

생성된 파일 확인 포인트

• title 태그가 페이지 목적과 맞는가
• h1이 한 번만 쓰였는가
• 버튼 텍스트가 행동을 유도하는가
• 모바일 화면에서 좌우가 잘리지 않는가

초보자는 코드 한 줄 한 줄 다 이해하려고 달려들다가 지친다. 처음엔 구조만 보자. body 안에 큰 덩어리가 몇 개인지, 스타일이 어떤 역할을 하는지, 버튼 문구가 왜 저렇게 들어갔는지. 그 정도만 읽어도 충분히 진전이다.

AntiGravity로 반복 작업 줄이기

페이지를 한 번 만드는 것보다 중요한 건 수정 루프를 빠르게 만드는 것이다. 실무에서는 만들기보다 고치기가 더 많다. 그래서 Claude Code와 AntiGravity를 같이 쓰는 패턴이 먹힌다.

추천 루프

1. Claude Code에 수정 요청
2. 로컬 서버 실행
3. 브라우저 확인
4. 문구와 색상 다시 조정
5. 결과 저장

이 루프를 AntiGravity 쪽에 묶어두면, 초보자도 매번 어디서부터 다시 시작해야 할지 덜 헤맨다.

문구 수정 예시

메인 문구를 더 실무형으로 바꿔줘.
기존 느낌은 너무 추상적이야.
아래 방향으로 수정해.
- 비전공자도 바로 시작 가능
- 30분 안에 첫 화면 완성
- 버튼 문구는 신청하기, 예제 보기

이런 요청은 단순하지만 효과가 크다. 바이브 코딩은 마법이 아니라 지시문 품질 게임이다. 막연한 감탄 대신, 어떻게 바꿀지 딱 찔러줘야 한다.

초보자가 자주 막히는 지점과 해결법

문제가 생겼을 때 바로 써먹는 질문법

비전공자가 흔히 하는 실수는 에러를 보고도 그냥 다시 실행하는 것이다. 그러면 같은 벽만 다시 박는다. Claude Code에는 에러 메시지와 현재 목표를 같이 던져야 한다.

현재 app/index.html 실행 시 화면이 비어 보여.
가능한 원인 3가지를 먼저 설명하고,
가장 가능성이 높은 순서대로 수정안을 제시해줘.
수정 전에 왜 그런지 한 줄씩 설명해줘.

이 방식이 좋은 이유는 모델이 바로 파일부터 뒤엎지 않게 만들기 때문이다. 원인 후보를 먼저 말하게 하면 사용자도 배우고, 쓸데없는 과수정도 줄어든다.

초보자 체크리스트

• 경로 오타가 없는가
• 서버를 app 폴더가 아닌 상위 폴더에서 실행했는가
• 브라우저 캐시 때문에 이전 화면을 보는 것은 아닌가
• 한 번에 기능을 너무 많이 추가하지 않았는가

여기서 마지막 항목이 특히 중요하다. 로그인, DB, 관리자 화면까지 한 번에 붙이려 하면 바로 꼬인다. 첫날엔 정적 페이지, 둘째 날엔 폼, 셋째 날엔 저장 기능. 이렇게 쪼개야 산다.

Q&A

Q1. 코드를 전혀 몰라도 Claude Code를 써도 되나

A. 된다. 다만 아무것도 몰라도 된다는 말은 아니다. HTML 파일이 뭔지, 폴더가 뭔지, 서버를 왜 켜는지 정도는 같이 익혀야 한다. 운전은 내비가 도와줘도 브레이크 위치는 알아야 하는 것과 비슷하다.

Q2. AntiGravity는 꼭 개발자만 쓰는 도구인가

A. 아니다. 반복 실행, 점검, 정리 같은 흐름을 줄이려는 사람에게 더 유용하다. 비전공자일수록 클릭과 복붙이 많아서 자동화 체감이 크다.

Q3. 프롬프트를 길게 써야 더 잘 되나

A. 무조건 길다고 좋지 않다. 길더라도 구조가 있어야 한다. 목표, 파일 위치, 원하는 변경점, 금지사항 순으로 쓰면 훨씬 잘 먹힌다.

Q4. 에러가 나면 Claude Code가 자동으로 다 고쳐주나

A. 종종 고친다. 하지만 항상 맞지는 않는다. 그래서 에러 메시지, 실행 환경, 기대 결과를 같이 줘야 한다. 그냥 안 돼 라고 하면 모델도 점쟁이 모드에 들어간다.

Q5. 결과물이 돌아가면 바로 배포해도 되나

A. 아니다. 최소한 모바일 확인, 버튼 링크 확인, 문구 오탈자 확인은 해야 한다. AI가 빨라진 만큼 검수 책임은 더 중요해졌다.

Q6. 비전공자는 어디까지 혼자 할 수 있나

A. 랜딩페이지, 소개 페이지, 간단한 폼, 내부용 도구 시제품 정도까지는 충분히 가능하다. 다만 결제, 권한 관리, 보안, 대규모 서비스는 전문가 검토가 필요하다.

오늘 5분 실습

딱 5분만 해보자. 아래 순서면 된다.

1. 빈 폴더를 하나 만든다.
2. Claude Code에 한 페이지짜리 소개 화면을 요청한다.
3. 제목, 설명, 버튼 2개만 있는 버전으로 제한한다.
4. 로컬 서버를 켜서 브라우저로 확인한다.
5. 버튼 문구만 두 번 수정해본다.

이 짧은 실습만 해도 중요한 감각이 생긴다. AI에게 일을 맡길 때는 요구를 작게 나누는 게 이긴다는 점, 그리고 직접 실행해보는 순간부터 두려움이 줄어든다는 점이다.

마무리

바이브 코딩은 코딩을 몰라도 된다는 허풍이 아니다. 적은 지식으로도 더 빨리 실습하고, 더 빨리 수정하고, 더 빨리 결과를 보는 방식에 가깝다. Claude Code는 만드는 속도를, AntiGravity는 반복 흐름의 속도를 끌어올린다. 둘을 같이 익히면 비전공자도 막연한 구경꾼에서 실행하는 사람으로 넘어갈 수 있다.

조금 냉정하게 말하면, 앞으로는 코드를 한 줄도 못 써서 뒤처지는 시대보다 AI에게 일을 제대로 시키지 못해서 느려지는 시대가 올 가능성이 크다. 그러니 어려운 이론부터 붙잡지 말고 작은 화면 하나부터 만들어보자. 그게 제일 빠르다.

더 체계적인 실습과 현장형 교육이 필요하면 두온교육 main.duonedu.net과 미래이음연구소 lab.duonedu.net를 참고하면 된다.