Claude Code와 AntiGravity로 비전공자가 수업 신청 폼 페이지를 만드는 실습 튜토리얼

왜 이 실습이 비전공자에게 잘 맞는가

비전공자가 바이브 코딩에서 막히는 지점은 문법이 아니라 순서다. 무엇을 먼저 만들고, 어디서 확인하고, 어떤 말로 다시 수정 요청할지 흐릿하면 금방 손이 멈춘다. 그래서 오늘은 결과가 눈에 바로 보이는 수업 신청 폼 페이지를 예제로 잡는다. 입력창, 버튼, 안내문, 완료 메시지까지 한 번에 들어 있어서 HTML과 CSS, 간단한 자바스크립트 흐름을 동시에 익히기 좋다.

Anthropic 문서 기준으로 Claude Code는 터미널에서 코드베이스를 읽고 파일을 만들고 명령을 실행하는 에이전트형 코딩 도구다. 반대로 Google Antigravity는 에이전트를 별도 작업면에서 굴리며 에디터, 터미널, 브라우저를 넘나들게 하는 쪽에 강점이 있다. 즉 초안 생산은 Claude Code, 화면 검수와 다중 작업 조율은 AntiGravity가 편하다. 이 조합이 비전공자에게 먹히는 이유는 내가 코드를 다 치는 대신, 작업 지시와 검수에 집중할 수 있기 때문이다.

Claude Code와 AntiGravity 역할 나누기

Claude Code는 초안을 빠르게 만든다

터미널에서 폴더 구조를 만들고 파일을 생성하고, 수정 요청도 텍스트로 바로 넣을 수 있다. 처음 뼈대를 세울 때 속도가 빠르다.

AntiGravity는 결과를 눈으로 검수하기 좋다

에이전트가 브라우저까지 다루는 흐름이 강해서 폼 입력, 버튼 클릭, 모바일 레이아웃, 문구 수정 같은 후반 작업에 유리하다. 비전공자는 특히 이 단계에서 자신감이 붙는다. 내가 코드를 완벽히 몰라도 화면 기준으로 요구할 수 있기 때문이다.

1단계. 작업 폴더 만들기

먼저 빈 폴더를 하나 만든다. macOS 기준 예시는 아래처럼 진행하면 된다.

mkdir lesson-form-demo
cd lesson-form-demo
pwd

이제 이 폴더를 Claude Code가 읽을 수 있는 작업 공간으로 쓰면 된다. 폴더 이름은 자유지만, 실습 초반에는 영어와 하이픈만 쓰는 편이 덜 꼬인다.

체크포인트

• 빈 폴더에서 시작한다
• 파일이 너무 많은 기존 프로젝트는 처음 실습용으로 피한다
• 완성 목표를 한 문장으로 적어둔다

목표: 초등 수업 신청을 받는 단일 페이지를 만든다

2단계. Claude Code로 첫 화면 만들기

Claude Code를 실행한 뒤 아래처럼 한 번에 요청한다. 핵심은 기능, 문구, 색감, 제출 후 동작을 같이 적는 것이다. 짧게 던지면 결과도 흐릿해진다.

claude

lesson-form-demo 폴더에 학부모가 사용할 수업 신청 페이지를 만들어줘.
파일은 index.html 하나로 시작하고, 한국어 페이지로 구성해줘.
섹션은 제목, 소개문, 신청자 이름, 연락처, 학생 학년, 희망 과목, 문의 내용, 개인정보 안내, 신청 버튼을 넣어줘.
제출하면 실제 전송 대신 화면 아래에 신청 완료 메시지가 나오게 해줘.
톤은 깔끔하고 교육 서비스 분위기로 맞춰줘.
모바일에서도 보기 좋게 해줘.

여기서 한 번 더 밀어주면 결과가 훨씬 좋아진다.

버튼 색은 진한 남색으로, 입력창 간격은 넉넉하게, 상단 소개 영역에는 신뢰감을 주는 짧은 문구를 추가해줘.
폼 검증도 넣어서 이름과 연락처가 비어 있으면 제출되지 않게 해줘.

완성 뒤에는 바로 로컬 서버를 띄워 본다.

python3 -m http.server 4173

브라우저에서 http://localhost:4173 를 열면 화면을 확인할 수 있다. 여기까지가 Claude Code 담당 구간이다. 초안을 빠르게 만드는 데 집중한다.

3단계. AntiGravity로 검수와 수정 지시하기

이제 같은 폴더를 AntiGravity 쪽으로 넘겨 검수한다. 이 단계에서는 코드를 설명하려고 애쓰기보다 화면 기준으로 말하는 편이 좋다. AntiGravity는 에이전트 중심 작업면에서 브라우저 검증까지 이어가기 때문에, 비전공자 입장에서는 말 그대로 디렉터처럼 지시하기 편하다.

이렇게 지시하면 된다

현재 페이지를 열어서 모바일 화면부터 점검해줘.
버튼이 너무 길면 줄이고, 입력창 라벨이 어색하면 더 쉬운 한국어로 바꿔줘.
신청 완료 메시지는 폼 바로 아래 카드 형태로 보이게 바꿔줘.
브라우저에서 직접 입력 테스트까지 해보고 이상한 부분을 정리해줘.

한 번 더 구체화하면 결과가 더 안정적이다.

학년 선택은 드롭다운으로 바꾸고, 희망 과목은 체크박스로 바꿔줘.
연락처 입력창은 숫자와 하이픈 예시를 placeholder 대신 안내문으로 보여줘.
상단 CTA 문구는 무료 상담 신청이 아니라 수업 방향 상담 신청으로 바꿔줘.

여기서 중요한 포인트는 AntiGravity에게 무엇이 어색한지보다 무엇을 기준으로 좋아져야 하는지를 말하는 것이다. 예를 들어 예쁘게 해줘보다 학부모가 처음 봐도 부담 없게 정리해줘가 훨씬 잘 먹힌다.

4단계. 신청 폼 코드 핵심 이해하기

비전공자라도 이 정도는 읽어두면 수정 요청이 훨씬 정확해진다. 폼 페이지의 핵심은 크게 세 덩어리다. 구조, 스타일, 제출 동작이다.

1. 구조는 HTML이 맡는다

<form id="applyForm">
  <label for="parentName">학부모 이름</label>
  <input id="parentName" name="parentName" type="text" required />

  <label for="phone">연락처</label>
  <input id="phone" name="phone" type="tel" required />

  <button type="submit">상담 신청 보내기</button>
</form>

이 부분은 화면 뼈대다. 입력창을 추가하거나 문구를 바꾸는 요청은 대부분 여기와 연결된다.

2. 스타일은 CSS가 맡는다

body {
  font-family: Pretendard, sans-serif;
  background: #f4f7fb;
  color: #1f2937;
}
button {
  background: #173b7a;
  color: #ffffff;
  border-radius: 12px;
}

색감이 답답하다, 버튼이 너무 둥글다, 모바일에서 간격이 좁다 같은 피드백은 CSS 수정 요청으로 이어진다.

3. 제출 동작은 자바스크립트가 맡는다

const form = document.getElementById("applyForm");
const result = document.getElementById("resultBox");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  result.innerHTML = "신청이 접수되었습니다. 담당자가 확인 후 연락드립니다.";
  form.reset();
});

실제 서버 전송 없이도 완료 메시지를 보여줄 수 있다. 실습 초반에는 이 정도만으로도 충분하다. 나중에 Google Forms, 이메일 자동화, 데이터베이스 저장으로 확장하면 된다.

실수 방지 포인트

• 처음부터 여러 파일로 쪼개지 말고 index.html 한 장으로 시작한다
• 첫 요청에서 대상 사용자와 목적을 같이 적는다
• 검수 단계에서는 화면 기준 피드백을 준다
• 잘된 버전은 바로 복사해 백업한다
• 실제 개인정보 전송 기능은 나중에 붙인다

Q&A

Q1. 코드를 전혀 몰라도 이 방식이 가능한가

가능하다. 다만 완전 무지 상태보다 입력창, 버튼, 색상, 제출 같은 단어를 익혀두면 훨씬 빠르다. 오늘 예제처럼 결과가 눈에 보이는 작은 프로젝트부터 시작하면 된다.

Q2. Claude Code만 써도 되지 않나

된다. 하지만 화면 검수와 멀티스텝 확인이 길어질수록 AntiGravity처럼 브라우저까지 이어지는 작업면이 편하다. 초안 생산과 검수를 분리하면 결과 품질이 올라간다.

Q3. 언제부터 실제 서비스에 붙일 수 있나

정적 페이지 수준은 바로 가능하다. 다만 폼 데이터를 실제로 저장하거나 문자, 이메일, CRM으로 보내려면 백엔드나 자동화 연결을 추가해야 한다. 실습 1회차에서는 화면 완성도와 검수 루틴을 먼저 잡는 편이 맞다.

오늘 5분 실습

1. lesson-form-demo 폴더를 만든다
2. Claude Code에 단일 파일 신청 페이지를 만들어 달라고 요청한다
3. python3 -m http.server 4173 으로 미리보기를 연다
4. AntiGravity에 모바일 검수와 문구 수정을 맡긴다
5. 수정 전과 수정 후 차이를 한 줄로 기록한다

이 5분 실습만 해도 중요한 감이 잡힌다. 내가 직접 코드를 다 치는 사람이 아니라, 작업을 설계하고 결과를 평가하는 사람으로 움직이기 시작한다는 점이다. 이 감각이 바이브 코딩의 시작점이다.

미래이음연구소 홍보

마무리

Claude Code와 AntiGravity를 같이 쓰면 비전공자도 작업 흐름을 두 단계로 나눌 수 있다. 먼저 Claude Code로 초안을 빠르게 만들고, 그다음 AntiGravity로 실제 화면을 검수하면서 품질을 끌어올리는 식이다. 이 순서만 익혀도 바이브 코딩은 막연한 유행어가 아니라, 손에 잡히는 제작 루틴이 된다.

오늘은 신청 폼이었지만 내일은 강의 소개 페이지, FAQ 챗봇, 후기 수집 폼으로 바로 확장할 수 있다. 중요한 건 더 어려운 코드를 외우는 게 아니라, AI에게 어떤 순서로 시키고 어디서 검수할지를 익히는 것이다.

참고자료

• Anthropic Claude Code overview
• Google Antigravity docs home
• Google Developers Blog, Build with Google Antigravity