Claude Code와 AntiGravity로 시작하는 비전공자 바이브 코딩 실습 튜토리얼

목차

• 왜 지금 Claude Code와 AntiGravity 조합이 쓸 만한가
• 실습 전 준비물 5가지
• Claude Code로 첫 작업 폴더 만들기
• AntiGravity에서 결과를 눈으로 확인하기
• 비전공자용 실전 작업 루틴
• 자주 막히는 지점과 해결법
• Q&A
• 오늘 5분 실습
• 미래이음연구소 안내

왜 지금 Claude Code와 AntiGravity 조합이 쓸 만한가

비전공자가 바이브 코딩에서 가장 자주 무너지는 지점은 코드 문법이 아니라 작업 흐름이다. 뭘 먼저 만들고, 어디서 확인하고, 막히면 무엇을 다시 물어봐야 하는지 순서가 꼬이면 금방 포기하게 된다. Claude Code는 터미널에서 프로젝트를 읽고 파일을 만들고 명령을 실행하는 데 강하고, AntiGravity는 에이전트 중심 개발 흐름과 결과 확인을 빠르게 이어가기 좋다. 즉 한쪽은 손을 움직여 주고, 다른 한쪽은 화면과 구조를 이해하기 쉽게 도와준다. 비전공자 입장에서는 이 조합이 공부용보다 실습용에 더 가깝다.

오늘 목표는 거창한 서비스가 아니다. 로컬 폴더 하나를 만들고, 간단한 HTML 시작 페이지를 생성하고, AntiGravity에서 구조를 확인하고, 다시 Claude Code로 수정 요청을 주는 흐름을 익히는 것이다. 이 루틴만 익혀도 다음부터는 랜딩페이지, 소개페이지, 강의 신청 폼, 사내 도구 화면까지 확장하기 쉬워진다.

실습 전 준비물 5가지

1. 작업 폴더 이름을 먼저 정한다

폴더명이 흔들리면 명령어도 같이 흔들린다. 오늘은 my-first-vibe-app 같은 영문 소문자 폴더명을 쓰면 된다.

2. Claude Code 설치를 끝낸다

macOS나 Linux 기준으로 설치 예시는 아래처럼 시작하면 된다.

curl -fsSL https://claude.ai/install.sh | bash
claude --version

3. AntiGravity에 로그인해 새 워크스페이스를 열 준비를 한다

핵심은 복잡한 설정을 다 아는 것이 아니라, 새 프로젝트를 열고 에이전트가 만든 결과물을 바로 확인할 수 있는 상태를 만드는 것이다.

4. 빈 폴더 하나를 만든다

mkdir -p ~/projects/my-first-vibe-app
cd ~/projects/my-first-vibe-app
pwd

5. 오늘 만들 결과를 한 줄로 적는다

예시: 강사 소개와 문의 버튼이 있는 단일 HTML 페이지 만들기. 이 한 줄이 있어야 AI가 엉뚱한 방향으로 길게 새지 않는다.

Claude Code로 첫 작업 폴더 만들기

1. Claude Code에서 목표를 짧게 고정한다

비전공자가 처음부터 긴 요구사항을 넣으면 실패 확률이 올라간다. 아래처럼 짧고 명확하게 시작하는 편이 낫다.

claude

이 폴더에 index.html 파일 하나를 만들고,
한국어 소개 페이지를 작성해줘.
구성은 제목, 소개 문단, 강의 특징 3개, 문의 버튼으로 해줘.
스타일은 깔끔하게 넣고 모바일에서도 읽기 쉽게 만들어줘.

여기서 중요한 포인트는 파일명, 언어, 섹션 수, 버튼 유무를 먼저 고정하는 것이다. 이렇게 해야 Claude Code가 폴더 안에서 해야 할 일을 좁게 잡는다.

2. 생성된 파일을 바로 확인한다

ls
cat index.html

처음 결과가 완벽할 가능성은 높지 않다. 대신 구조가 나왔는지부터 본다. 제목이 있는지, 버튼이 있는지, 한글이 깨지지 않는지만 체크해도 충분하다.

3. 두 번째 요청은 수정 중심으로 한다

초안이 생기면 이제는 새로 만들라고 하지 말고 수정 지시를 준다.

상단 제목을 더 강하게 바꿔줘.
강의 특징 섹션에 아이콘 없이 숫자형 강조 박스를 넣어줘.
문의 버튼 아래에 상담 가능 시간도 추가해줘.

이 방식이 중요한 이유는 비전공자도 결과를 비교하면서 배울 수 있기 때문이다. 처음부터 완성본을 기다리기보다, 한 번 만들고 두 번 고치는 흐름이 실제 업무와 더 닮아 있다.

AntiGravity에서 결과를 눈으로 확인하기

1. 같은 폴더를 AntiGravity에서 연다

AntiGravity에서는 에이전트가 만든 파일 구조와 실행 결과를 연결해서 보기 쉽다. 비전공자에게 특히 좋은 점은 코드 한 줄 한 줄보다 전체 화면과 작업 맥락을 먼저 볼 수 있다는 점이다.

2. 프로젝트 목표를 다시 한 줄로 요약한다

이 프로젝트는 개인 강사 소개용 단일 페이지다.
가독성을 높이고, 버튼 클릭률이 오르게 문구를 다듬어줘.

Claude Code에서 파일을 만들었더라도, AntiGravity에서는 화면 품질과 작업 방향을 다시 잡는 용도로 쓰면 좋다. 둘 다 같은 일을 시키기보다 역할을 나누는 편이 훨씬 효율적이다.

3. 확인해야 할 체크포인트

• 첫 화면에서 제목이 바로 읽히는가
• 문단 길이가 너무 길지 않은가
• 버튼 색과 배경 대비가 충분한가
• 모바일 폭에서 줄바꿈이 깨지지 않는가

즉 Claude Code는 만드는 손, AntiGravity는 보는 눈 역할로 나누면 초보자도 흐름을 이해하기 쉬워진다.

비전공자용 실전 작업 루틴

1단계. 만들 것 한 줄 정의

예: 교육 신청용 미니 페이지 만들기.

2단계. Claude Code에 파일 생성 요청

index.html 하나로 시작 페이지를 만들어줘.
섹션은 헤더, 소개, 신청 버튼, 푸터만 넣어줘.

3단계. 브라우저 또는 AntiGravity에서 확인

python3 -m http.server 8000

이 명령으로 로컬 서버를 띄우면 http://localhost:8000 에서 바로 확인할 수 있다.

4단계. 수정은 화면 기준으로 요청

버튼이 눈에 덜 띈다.
상단 여백을 줄이고, 신청 버튼을 더 크게 바꿔줘.
모바일에서 제목이 두 줄 안으로 들어오게 조정해줘.

5단계. 마지막에만 코드 정리 요청

지금 결과 기준으로 불필요한 CSS를 정리하고,
초보자가 다시 읽기 쉬운 구조로 들여쓰기를 정돈해줘.

이 루틴을 지키면 비전공자도 코드 생산과 화면 개선을 분리해서 배울 수 있다. 핵심은 한 번에 많은 걸 요구하지 않는 것이다.

자주 막히는 지점과 해결법

명령어를 복붙했는데 안 된다

대부분 현재 폴더가 다르거나 프로그램 설치가 끝나지 않은 경우다. 먼저 pwd 와 ls 로 위치를 확인하고, claude --version 으로 설치 상태를 확인하면 된다.

AI가 너무 많은 파일을 만든다

처음에는 index.html 하나만 만들라고 제한해라. 초보 단계에서 파일이 많아지면 수정 포인트를 잃기 쉽다.

예쁜데 실용적이지 않다

그럴 때는 디자인 칭찬 대신 목적을 다시 적으면 된다. 예: 강의 문의 전환이 목적이니 버튼과 문구를 더 직접적으로 바꿔줘.

도구를 둘 다 쓰는데 오히려 헷갈린다

역할을 분리하면 해결된다. Claude Code는 생성과 수정, AntiGravity는 검토와 방향 조정. 둘 다 같은 지시를 동시에 많이 주면 오히려 복잡해진다.

Q&A

Q1. 비전공자도 터미널부터 시작해야 하나

A. 네. 길게 배울 필요는 없지만 cd, ls, mkdir 정도는 익혀야 작업 맥락을 잃지 않는다. 오히려 이 세 가지만 알아도 AI 도구 활용도가 크게 올라간다.

Q2. Claude Code와 AntiGravity 중 하나만 써도 되나

A. 가능하다. 다만 처음에는 만드는 도구와 확인하는 도구를 나누면 배움이 빠르다. 오늘 실습의 포인트도 바로 그 분업 감각이다.

Q3. 어느 순간부터 React나 Next.js로 넘어가야 하나

A. 단일 페이지를 3번 이상 안정적으로 수정해본 뒤가 좋다. 초반에는 HTML 한 파일로 성공 경험을 쌓는 편이 훨씬 낫다.

오늘 5분 실습

1. 작업 폴더를 하나 만든다.
2. Claude Code에 index.html 단일 페이지 생성을 요청한다.
3. 로컬 서버를 띄워 결과를 본다.
4. AntiGravity에서 문구와 버튼 개선 지시를 한 번 더 준다.
5. 수정 전후 차이를 직접 비교하며 무엇이 좋아졌는지 메모한다.

이 5분 루틴만 반복해도 비전공자는 막연한 두려움 대신 작업 감각을 얻게 된다. 실력은 긴 이론보다 짧은 반복에서 훨씬 빨리 붙는다.

미래이음연구소 안내

마무리

비전공자에게 필요한 것은 대단한 프레임워크가 아니라, 작게 만들고 바로 확인하고 다시 수정하는 반복 구조다. Claude Code로 손을 움직이고, AntiGravity로 결과를 보면서 방향을 잡으면 바이브 코딩은 감이 아니라 루틴이 된다. 오늘은 index.html 하나로 끝내도 충분하다. 대신 직접 만들고, 직접 보고, 한 번 더 수정해보자. 그 한 번이 다음 프로젝트의 출발점이 된다.

참고자료

• Anthropic Claude Code 문서
• Google Antigravity 소개 및 Codelab 자료