비전공자가 코딩을 배울 때 제일 먼저 막히는 건 문법이 아니다. 어디서 시작해야 하는지 모른다는 점이다. 그래서 오늘은 Claude Code와 AntiGravity를 같이 써서, 완전 초보도 따라할 수 있는 가장 현실적인 실습 하나를 잡는다. 목표는 거창하지 않다. 로컬 폴더 하나를 만들고, 간단한 소개 페이지를 생성하고, 반복 실행 명령까지 자동화하는 것. 이 정도만 끝내도 바이브 코딩이 뭔지 감이 온다.

핵심은 두 가지다. Claude Code는 말로 설명하면 구조와 코드를 뽑아주는 도우미 역할, AntiGravity는 그 결과를 반복 가능한 작업 흐름으로 굳히는 역할을 맡는다. 비전공자에게 이 조합이 좋은 이유는, 처음부터 모든 문법을 외우지 않아도 결과를 만들면서 배울 수 있기 때문이다.

왜 지금 비전공자에게 바이브 코딩이 맞는가

예전 방식은 HTML, CSS, JavaScript를 따로 배우고 나서야 작은 결과물을 만들 수 있었다. 지금은 다르다. 원하는 결과를 먼저 설명하고, AI가 초안을 만들고, 사람이 검토하고 수정하면서 배우는 흐름이 가능하다. 이게 바로 바이브 코딩의 실전 감각이다.

• 문법 암기보다 결과 중심으로 시작 가능
• 실패 원인을 대화로 바로 좁힐 수 있음
• 반복 작업은 자동화로 묶어서 재사용 가능
• 실습 결과가 바로 포트폴리오가 됨

물론 오해하면 안 된다. AI가 대신 다 해준다고 해서 실력이 자동으로 생기진 않는다. 대신 진입장벽을 크게 낮춰준다. 초보가 첫 성공 경험을 빠르게 만들게 해준다는 점이 중요하다.

준비물과 설치

1. 작업 폴더 만들기

mkdir vibe-first-project
cd vibe-first-project

폴더 이름은 아무거나 써도 된다. 다만 영문과 하이픈 위주가 덜 꼬인다.

2. Claude Code 실행 준비

claude

실행 후 아래처럼 요청한다.

작업 폴더에 비전공자용 자기소개 랜딩페이지를 만들어줘.
파일은 index.html, style.css, script.js로 나누고,
상단 소개, 관심사 3개, 연락 버튼 1개를 넣어줘.
초보도 읽기 쉽게 주석을 달아줘.

여기서 중요한 건 완벽한 프롬프트가 아니다. 필요한 결과를 짧고 명확하게 말하는 것이다. 처음부터 고급 프롬프트 흉내 내다가 오히려 꼬인다.

3. AntiGravity 설치 또는 실행 확인

환경마다 설치 방식이 다를 수 있지만, 기본 개념은 같다. 자주 쓰는 명령 흐름을 한 번 정의해두고 반복 실행한다.

antigravity --help

명령이 보이면 준비 끝이다. 안 보이면 설치 경로부터 확인하면 된다. 초보는 여기서 막히면 AI에게 에러 메시지 그대로 보여주면 된다. 괜히 혼자 추측하지 마라. 에러는 숨기지 않는 쪽이 빠르다.

Claude Code로 첫 프로젝트 뼈대 만들기

1. AI에게 한 번에 다 시키지 말고 단계로 쪼개기

초보가 자주 하는 실수가 있다. 앱 하나를 통째로 만들어달라고 한다. 그러면 결과가 커지고 수정 포인트도 많아진다. 아래처럼 단계로 쪼개는 게 낫다.

1단계: index.html 기본 구조 생성
2단계: style.css에 깔끔한 카드형 레이아웃 추가
3단계: script.js에 연락 버튼 클릭 알림 추가
4단계: 모바일에서도 보기 좋게 반응형 정리

이렇게 요청하면 검토도 쉽고, 틀린 부분을 찾기도 쉽다.

2. 생성된 코드 직접 보기

예를 들어 Claude Code가 아래와 비슷한 HTML을 만들 수 있다.

<section class="hero">
  <h1>안녕하세요, 첫 바이브 코딩 페이지입니다</h1>
  <p>비전공자도 AI와 함께 직접 만들 수 있습니다.</p>
  <button id="contactBtn">연락하기</button>
</section>

여기서 해야 할 일은 복붙만 하고 끝내는 게 아니다. 클래스명, 버튼 id, 문장 구조를 눈으로 한 번 읽어야 한다. 이해가 안 되면 바로 이렇게 묻는다.

hero 클래스는 무슨 역할이야?
contactBtn은 왜 id로 잡았어?
이 코드를 내가 수정하려면 어디부터 보면 돼?

이 질문들이 실력 차이를 만든다. 그냥 실행만 하는 사람은 금방 막히고, 구조를 묻는 사람은 빨리 는다.

3. 로컬에서 바로 확인

python3 -m http.server 8000

브라우저에서 http://localhost:8000 을 열면 된다. 화면이 뜨면 성공이다. CSS가 안 먹으면 파일 경로부터 봐라. 초보 오류의 절반은 경로다.

AntiGravity로 반복 작업 자동화하기

1. 왜 자동화가 필요한가

처음엔 파일 열고, 서버 켜고, 브라우저 확인하는 게 별거 아닌 것처럼 보인다. 그런데 이게 매일 반복되면 귀찮음이 쌓인다. 귀찮음은 학습을 멈추게 만든다. 그래서 작은 자동화가 중요하다.

2. 반복 작업 흐름 정의 예시

예를 들어 아래 같은 루틴을 자주 쓴다고 하자.

pwd
ls
python3 -m http.server 8000

이걸 AntiGravity에서 하나의 실행 흐름으로 묶어두면 된다. 실제 설정 문법은 환경별로 다를 수 있지만, 개념은 아래와 같다.

{
  "name": "start-vibe-project",
  "steps": [
    "pwd",
    "ls",
    "python3 -m http.server 8000"
  ]
}

비전공자 입장에서는 이게 엄청 중요하다. 버튼 한 번, 명령 한 번으로 실습 환경이 다시 열리기 때문이다. 바이브 코딩은 감으로 시작해도 되지만, 반복은 감으로 하면 안 된다.

3. Claude Code와 AntiGravity 연결 팁

• Claude Code로 코드 초안 생성
• 내가 직접 파일 확인 후 수정
• AntiGravity로 실행 루틴 저장
• 다음 실습 때 같은 루틴 재사용

이 흐름을 습관으로 만들면, 초보도 작업 속도가 갑자기 빨라진다. 처음엔 코드를 만드는 것보다 작업 환경을 다시 세팅하는 데 시간을 더 쓰는데, 자동화가 그 낭비를 줄여준다.

실패했을 때 점검 순서

1. 명령이 안 먹을 때

which claude
which antigravity
python3 --version

명령 경로가 안 잡혔는지 먼저 본다. 설치가 안 된 건데 코드 문제로 오해하면 시간만 버린다.

2. 화면이 깨질 때

ls
cat index.html
cat style.css

파일명이 맞는지, 링크가 맞는지, 오타가 있는지 본다. 특히 styles.css 와 style.css 같은 사소한 차이가 많이 나온다.

3. AI 결과가 마음에 안 들 때

막연하게 별로라고 하지 말고 기준을 줘라.

버튼 색을 더 차분하게 바꿔줘.
텍스트를 초등학교 고학년도 이해할 수 있게 쉽게 써줘.
모바일 화면에서 위아래 여백을 더 넓혀줘.

이렇게 수정 요청을 구체화하면 결과가 빨리 좋아진다.

자주 묻는 질문

Q1. 비전공자인데 HTML도 몰라. 그래도 시작 가능해?

가능하다. 다만 AI가 만든 코드를 전혀 안 읽는 태도는 버려야 한다. 태그 이름까지 다 외울 필요는 없지만, 제목은 h1, 문단은 p, 버튼은 button 정도는 실습하면서 익히면 된다. 시작 조건은 지식이 아니라 반복이다.

Q2. Claude Code만 있으면 AntiGravity는 없어도 되지 않나?

짧게는 가능, 길게는 비효율적이다. Claude Code는 만드는 데 강하고, AntiGravity는 반복하는 데 강하다. 초안 생성과 루틴 자동화는 역할이 다르다. 둘을 분리해서 생각하면 작업이 훨씬 안정적이다.

Q3. AI가 틀린 코드를 주면 어떡하지?

당연히 준다. 그래서 바로 배포하지 말고 로컬에서 확인해야 한다. 에러 메시지, 화면 캡처, 현재 파일 내용을 같이 보여주면서 다시 요청하면 된다. 틀린 답을 받는 건 실패가 아니라 디버깅 시작점이다.

Q4. 어떤 프롬프트가 제일 좋은가?

만능 프롬프트 없다. 대신 좋은 요청은 공통점이 있다. 목적, 파일 구조, 원하는 분위기, 수정 기준이 들어간다. 예를 들면 초보용 자기소개 페이지, 파일 3개로 분리, 파란색 계열, 모바일 최적화 같은 식이다. 짧아도 충분히 강하다.

Q5. 실습 후 다음 단계는 뭘 해야 하나?

정적 페이지 다음엔 폼 입력, 데이터 저장, 배포 순으로 가면 된다. 예를 들어 문의 폼 만들기, 구글 시트 저장 연동, Netlify나 Vercel 배포 같은 단계다. 한 번에 점프하지 말고, 지금 만든 페이지에 기능 하나씩 추가하는 방식이 가장 덜 무너진다.

Q6. 내가 직접 코드를 언제부터 써야 하나?

오늘부터다. 다만 처음부터 빈 화면에 혼자 쓰라는 말이 아니다. AI가 만든 코드에서 문장 하나, 색상 하나, 버튼 동작 하나를 바꿔보면 된다. 수정 경험이 쌓이면 복붙 사용자에서 제작자로 넘어간다.

오늘 5분 실습

1. 새 폴더를 하나 만든다.
2. Claude Code에게 자기소개 랜딩페이지 초안을 요청한다.
3. python3 -m http.server 8000 으로 브라우저에서 확인한다.
4. 버튼 문구와 배경색을 직접 바꿔본다.
5. 마지막으로 AntiGravity에 실행 루틴 하나를 저장한다.

딱 여기까지면 충분하다. 중요한 건 많이 하는 게 아니라, 내 손으로 바꿔보는 것이다. 5분짜리라도 직접 수정한 파일 하나가 남으면 그날 실습은 성공이다.

마무리

비전공자에게 필요한 건 천재적인 코딩 감각이 아니다. 첫 결과를 만들고, 다시 실행하고, 조금씩 수정하는 흐름을 몸에 익히는 것이다. Claude Code는 시작 속도를 올려주고, AntiGravity는 그 시작을 습관으로 바꿔준다. 이 둘을 같이 쓰면 코딩은 시험 과목이 아니라 작업 도구가 된다.

더 깊게 배우고 싶다면 두온교육 main.duonedu.net 과 미래이음연구소 lab.duonedu.net 를 함께 참고하면 된다. 결국 실력은 설명을 많이 읽는 사람보다, 오늘 파일 하나를 직접 고친 사람이 가져간다.