비전공자도 따라하는 Claude Code와 AntiGravity 실습, 로컬 폴더 하나로 바이브 코딩 시작하기

왜 지금 Claude Code와 AntiGravity를 같이 배워야 할까

비전공자가 바이브 코딩에 처음 들어올 때 가장 자주 하는 실수는 도구를 너무 많이 붙잡는 것이다. 에디터도 바꾸고, 프레임워크도 바꾸고, 프롬프트도 매번 새로 짠다. 그러다 금방 지친다. 오늘 글에서는 반대로 간다. 로컬 폴더 하나 만들고, Claude Code로 파일을 생성하고, AntiGravity로 반복 패턴을 정리하는 흐름만 잡는다. 이 정도만 해도 실무 감각이 확 올라간다.

핵심은 간단하다. Claude Code는 코드를 만들고 설명하는 데 강하고, AntiGravity는 반복되는 흐름을 정리하고 확장하는 데 좋다. 비전공자는 이 둘을 경쟁 도구로 볼 필요가 없다. 한 명은 초안을 만드는 조교, 다른 한 명은 정리와 재사용을 돕는 조교라고 보면 이해가 쉽다.

실습 전에 준비할 것

1. 작업 폴더 만들기

먼저 터미널을 열고 실습용 폴더를 만든다. 폴더 이름은 단순할수록 좋다. 괜히 한글 폴더명으로 시작해서 경로 에러 만들 필요 없다.

mkdir vibe-todo-demo
cd vibe-todo-demo

2. 빈 파일 3개 준비

오늘 목표는 할 일 관리용 아주 작은 웹앱이다. HTML, CSS, JavaScript만 쓴다. 프레임워크 없이 가야 비전공자가 구조를 바로 이해한다.

touch index.html style.css app.js
ls

3. Claude Code와 AntiGravity에 줄 설명 문장 준비

프롬프트도 길 필요 없다. 처음에는 목적, 파일 구조, 원하는 동작 세 줄이면 된다. 아래 문장 정도면 충분하다.

프로젝트 이름: 간단한 할 일 웹앱
파일: index.html, style.css, app.js
기능: 입력, 추가, 완료 체크, 삭제

Claude Code로 첫 작업 만들기

1. Claude Code에 전체 구조 요청하기

비전공자가 제일 먼저 익혀야 할 건 완벽한 프롬프트가 아니라 범위 제한이다. 처음부터 로그인, DB, 배포까지 넣으면 망한다. 오늘은 화면 하나만 만든다.

이 폴더에서 index.html, style.css, app.js를 사용하는 초간단 할 일 웹앱을 만들어줘.
조건은 다음과 같아.
1) 입력창과 추가 버튼이 있어야 함
2) 목록에서 완료 체크가 가능해야 함
3) 삭제 버튼이 있어야 함
4) 초보자가 이해할 수 있게 주석을 넣어줘

이렇게 요청하면 Claude Code는 보통 파일별 역할을 나눠서 준다. 여기서 중요한 건 코드를 바로 믿고 끝내는 게 아니라, 왜 이렇게 나눴는지 설명까지 받는 것이다.

2. 설명 요청으로 이해도 올리기

방금 만든 코드에서 index.html, style.css, app.js가 각각 무슨 역할인지
비전공자 눈높이로 설명해줘.

이 단계가 생각보다 중요하다. 비전공자는 코드를 많이 보는 것보다, 파일 간 연결을 이해하는 순간부터 속도가 붙는다. Claude Code는 이 설명형 질문에서 꽤 강하다.

3. 바로 실행해서 확인하기

코드는 실행해 봐야 진짜다. 로컬에서 간단히 확인하려면 Python 내장 서버만 써도 된다.

python3 -m http.server 8000

브라우저에서 http://localhost:8000 으로 접속한다. 입력 후 추가, 체크, 삭제가 다 되면 1차 성공이다. 안 되면 에러 문장을 Claude Code에 그대로 붙여 넣는 게 빠르다.

브라우저 콘솔에 이런 에러가 나와.
Uncaught TypeError: Cannot read properties of null
초보자도 이해하게 원인과 수정 방법을 알려줘.

AntiGravity로 반복 작업 줄이기

1. 반복 수정 요청을 패턴으로 바꾸기

많은 초보자가 같은 요청을 매번 새로 쓴다. 예를 들어 버튼 색을 바꾸고, 카드 모양을 바꾸고, 여백을 늘리는 식이다. AntiGravity를 쓰는 포인트는 이 반복을 패턴으로 묶는 데 있다.

예를 들어 아래처럼 요청한다.

현재 할 일 웹앱의 UI를 더 깔끔하게 바꿔줘.
규칙은 다음과 같아.
- 카드형 레이아웃
- 파란색 포인트 컬러
- 모바일에서도 버튼이 줄바꿈되지 않게
- 과한 애니메이션은 제거

이 요청은 단순 미적 수정 같지만, 사실상 디자인 원칙을 세팅하는 작업이다. AntiGravity 류 도구는 이런 반복 규칙을 정리해 다음 작업에도 이어 붙이기 좋다.

2. 재사용 가능한 작업 단위 만들기

비전공자에게 가장 큰 생산성은 같은 패턴을 재사용할 때 나온다. 오늘 만든 할 일 앱을 다음에는 독서 기록 앱, 수업 준비 체크리스트, 강의 자료 정리 앱으로 변형할 수 있다. 그때 매번 처음부터 설명하지 말고 변형 포인트만 주면 된다.

기존 구조는 유지하고 할 일 앱을 독서 기록 앱으로 바꿔줘.
입력 항목은 책 제목, 저자, 읽은 날짜로 바꾸고
완료 체크는 읽음 표시로 바꿔줘.

이렇게 하면 코딩을 새로 배우는 게 아니라 구조를 전환하는 감각이 생긴다. 이게 바이브 코딩에서 제일 중요한 감각이다.

비전공자용 협업 루틴 만들기

1. 한 번에 하나만 고치기

Claude Code에 기능 추가, 버그 수정, 디자인 변경을 한 번에 던지면 결과가 흔들린다. 한 턴에 한 가지 목표만 주는 게 낫다. 이건 도구 문제라기보다 협업 방식 문제다.

2. 변경 전후를 기록하기

작은 메모 파일 하나를 두면 훨씬 덜 헤맨다. 예를 들어 notes.txt 같은 파일에 오늘 바꾼 항목을 적어 둔다.

2026-04-10
- 입력창 placeholder 수정
- 완료 체크 스타일 추가
- 모바일 버튼 간격 조정

이 기록은 나중에 Claude Code나 AntiGravity에 맥락을 넘길 때도 유용하다.

3. 막히면 에러보다 상황을 설명하기

초보자는 종종 에러 문장만 복사한다. 그런데 실제로는 직전에 무엇을 바꿨는지가 더 중요할 때가 많다. 아래처럼 상황 설명을 붙이면 답이 빨라진다.

방금 체크박스 기능을 추가한 뒤부터 삭제 버튼이 안 먹어.
app.js에서 이벤트 연결 부분이 꼬인 것 같은데
초보자 기준으로 어디를 먼저 봐야 하는지 알려줘.

자주 막히는 질문 Q&A

Q1. 비전공자인데 코드 뜻을 전부 이해해야 하나?

A. 처음부터 전부 이해할 필요 없다. 대신 파일 역할, 입력과 출력, 이벤트 흐름은 이해해야 한다. 이 세 가지만 잡아도 남이 만든 코드를 읽는 속도가 빨라진다.

Q2. Claude Code가 준 코드를 그대로 써도 되나?

A. 그대로 시작하는 건 괜찮다. 그대로 끝내는 건 별로다. 최소한 변수명, 버튼 문구, 주석 정도는 직접 손봐야 자기 프로젝트가 된다.

Q3. AntiGravity는 정확히 언제 쓰면 좋나?

A. 비슷한 수정이 반복될 때다. 색상 통일, 레이아웃 규칙 정리, 문서화 패턴, 재사용 가능한 요청 템플릿 정리 같은 데 특히 좋다.

Q4. 자꾸 프롬프트가 길어지는데 괜찮나?

A. 길다고 좋은 게 아니다. 목적, 범위, 제한조건, 출력형식 네 가지만 있으면 된다. 오히려 욕심내서 열 가지 요구를 한 번에 넣으면 품질이 떨어진다.

Q5. 실습 후 뭘 복습해야 하나?

A. 오늘 만든 파일 3개를 다시 열어서 연결 관계를 말로 설명해 보면 된다. index.html이 구조, style.css가 모양, app.js가 동작을 맡는다는 감각만 남아도 절반은 먹고 들어간다.

Q6. 수업이나 강의 준비에도 이 방식이 먹히나?

A. 잘 먹힌다. 체크리스트 앱, 퀴즈 앱, 자료 정리 페이지, 공지 보드처럼 작은 도구부터 만들면 현장 적용이 빠르다. 바이브 코딩은 거창한 서비스보다 작은 실무 도구에서 효과가 빨리 보인다.

오늘 5분 실습

딱 5분만 써서 아래 순서대로 해 보면 된다.

1. 작업 폴더 하나 만든다.
2. index.html, style.css, app.js 세 파일을 만든다.
3. Claude Code에 초간단 할 일 앱을 요청한다.
4. python3 -m http.server 8000 으로 실행한다.
5. 마지막으로 버튼 색과 제목만 직접 바꿔 본다.

여기까지 하면 단순 구경이 아니라 실제 실습으로 넘어간 것이다. 비전공자에게 필요한 건 거대한 커리큘럼보다 이런 작은 성공 경험이다.

마무리

바이브 코딩은 코드를 외우는 싸움이 아니다. 도구와 대화하면서 작은 결과물을 계속 내는 싸움에 가깝다. Claude Code로 시작하고, AntiGravity로 반복을 정리하면 비전공자도 금방 자기 루틴을 만들 수 있다. 중요한 건 많이 아는 척이 아니라 작게 만들고 바로 실행해 보는 습관이다.

더 많은 AI 교육, 코딩 실습, 현장형 콘텐츠가 필요하다면 두온교육과 미래이음연구소를 함께 확인해 보면 된다. 오늘은 작은 할 일 앱 하나지만, 이런 작은 실습이 쌓이면 실제 수업 자료와 업무 도구까지 이어진다.