Claude Code와 AntiGravity로 만드는 첫 강의 소개 페이지, 비전공자 실습 튜토리얼

바이브 코딩이 무섭게 느껴지는 이유는 코드를 몰라서가 아니다. 어디서 시작해야 할지 몰라서다. 오늘은 비전공자 기준으로 가장 현실적인 조합인 Claude Code와 AntiGravity를 이용해 아주 작은 결과물을 만든다. 주제는 강의 소개 페이지다. 교육 강사, 1인 사업자, 소규모 기관 운영자라면 바로 써먹을 수 있고, HTML과 명령어가 실제로 어떻게 연결되는지도 한 번에 감이 잡힌다.

핵심은 완벽한 앱을 만드는 게 아니다. Claude Code에게 초안 작성을 맡기고, AntiGravity로 구조와 맥락을 정리하면서 수정 루프를 짧게 만드는 흐름을 익히는 것이다. 이 흐름을 한 번 익히면 이후에는 랜딩페이지, FAQ 페이지, 신청 폼 설명문, 작은 사내 도구까지 확장할 수 있다.

왜 Claude Code와 AntiGravity 조합이 비전공자에게 맞는가

Claude Code는 손이 빠르다. 원하는 결과를 한국어로 설명하면 파일 생성, 코드 초안, 문구 정리까지 빠르게 뽑아낸다. 문제는 초보자가 처음부터 요구사항을 구조적으로 말하기 어렵다는 점이다. 여기서 AntiGravity가 힘을 발휘한다. 해야 할 일을 단계와 맥락으로 정리해 주기 때문에, 프롬프트를 던질 때 흔히 생기는 중복 수정과 엉뚱한 출력이 줄어든다.

쉽게 말해 Claude Code는 실행 담당, AntiGravity는 정리 담당이다. 비전공자는 이 둘을 같이 써야 덜 헤맨다. 처음부터 코드를 외우지 말고, 무엇을 만들고 어떤 순서로 바꿀지 말하는 습관부터 들이면 된다.

오늘 만들 결과물

• 한 장짜리 강의 소개 페이지
• 제목, 소개 문장, 커리큘럼 3개, 문의 버튼 포함
• 모바일에서도 읽기 쉬운 단순 레이아웃
• 로컬 브라우저에서 바로 확인 가능

실습 준비, 폴더 만들기와 목표 정하기

맥이나 리눅스 터미널 기준으로 아래처럼 시작하면 된다. 윈도우도 WSL을 쓰면 거의 같다. 중요한 건 폴더를 하나 만들고, 그 안에서만 실습하는 습관이다. 이 습관 하나가 나중에 파일 꼬임을 크게 줄여준다.

mkdir lecture-page
cd lecture-page
pwd

이제 목표를 한 줄로 적는다. 예를 들면 이렇게 잡으면 된다.

목표: AI 강의 소개용 단일 페이지를 만들고, 제목/커리큘럼/문의 버튼이 보이게 한다.

여기서 많은 초보자가 바로 디자인 욕심부터 낸다. 그럼 바로 늪이다. 먼저 내용 구조를 정하고, 그 다음 색과 버튼을 만져라. Claude Code도 구조가 분명할수록 덜 삐끗한다.

기본 파일 구성

touch index.html style.css
ls

파일이 보이면 준비 끝이다. 이제 Claude Code에 일을 시킨다.

Claude Code로 첫 페이지 뼈대 만들기

Claude Code에는 길게 말할 필요 없다. 짧아도 구조가 분명하면 된다. 아래처럼 요구하면 초안 품질이 꽤 안정적이다.

claude

다음 조건으로 index.html과 style.css 초안을 만들어줘.
- 목적: AI 강의 소개 페이지
- 섹션: 헤더, 강의 소개, 커리큘럼 3개, 강사 소개, 문의 버튼
- 스타일: 깔끔한 카드형, 모바일 반응형
- 문구는 한국어
- 초보자도 수정하기 쉽게 class 이름 단순하게

출력이 나오면 그대로 복붙하거나, 파일 쓰기까지 요청할 수 있다. 예를 들어 파일 저장까지 한 번에 가고 싶다면 이렇게 말하면 된다.

현재 폴더의 index.html과 style.css에 바로 저장 가능한 형태로 작성해줘.
불필요한 라이브러리 없이 HTML과 CSS만 사용해.

초안이 생성되면 브라우저로 확인한다.

python3 -m http.server 8000

브라우저에서 http://localhost:8000 을 열면 된다. 여기서 완성도가 70점만 나와도 충분하다. 바이브 코딩은 첫 초안을 빨리 보는 게 핵심이다.

초보자가 바로 체크할 4가지

• 제목이 첫 화면에서 바로 보이는가
• 버튼 문구가 모호하지 않은가
• 커리큘럼 3개가 한눈에 구분되는가
• 모바일 폭에서 글자가 너무 작지 않은가

AntiGravity로 구조 정리와 반복 수정 줄이기

이제 AntiGravity 차례다. 많은 사람이 여기서 그냥 다시 Claude Code에게 수정만 반복 요청한다. 그러면 페이지는 조금씩 나아져도 방향이 흔들린다. AntiGravity에는 수정 명령보다 정리 요청을 먼저 던지는 게 좋다.

현재 결과물을 기준으로 아래를 정리해줘.
1. 사용자에게 먼저 보여야 할 정보 우선순위
2. 삭제해도 되는 군더더기 문구
3. 모바일에서 깨질 위험이 있는 요소
4. Claude Code에 다시 요청할 수정 지시문 초안

이렇게 하면 AntiGravity가 일종의 편집자 역할을 한다. 예를 들어 응답으로 이런 요약이 나오면 좋다.

• 첫 화면에는 제목, 한 줄 가치 제안, 문의 버튼만 남겨라
• 강사 소개가 너무 길면 아래 섹션으로 내려라
• 카드 3열은 모바일에서 1열로 바꿔라
• 버튼 색상 대비를 높여 클릭 포인트를 분명히 해라

이제 이 정리본을 Claude Code에 다시 넣는다.

수정 요청:
- 첫 화면에는 제목, 한 줄 설명, 문의 버튼만 보이게 단순화
- 커리큘럼 카드는 데스크톱 3열, 모바일 1열
- 강사 소개 문단은 3문장 이내
- 버튼 대비를 높이고 hover 효과 추가
- 전체 톤은 교육기관 랜딩페이지처럼 신뢰감 있게

여기서 감이 온다. Claude Code에 바로 때려 넣는 것보다 AntiGravity로 한번 정리하고 보내면, 수정 횟수가 줄고 결과가 덜 흔들린다. 비전공자는 이 차이가 엄청 크다.

실제 수정 예시 CSS

.curriculum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cta-button {
  display: inline-block;
  background: #4f46e5;
  color: white;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 768px) {
  .curriculum {
    grid-template-columns: 1fr;
  }
}

실행, 점검, 수정 포인트

결과물이 보이면 이제 기술보다 전달력을 봐야 한다. 강의 소개 페이지에서 중요한 건 멋진 코드가 아니라 신청 의도를 만드는 흐름이다. 첫 화면에서 누구를 위한 강의인지, 무엇을 배우는지, 어디로 문의하면 되는지가 바로 보여야 한다.

점검 순서는 단순하다. 첫째, 제목이 구체적인가. 둘째, 커리큘럼이 행동 중심인가. 셋째, 버튼이 실제 행동을 유도하는가. 예를 들어 자세히 보기 보다 강의 문의하기 가 훨씬 낫다. 넷째, 문장이 길지 않은가. AI가 만든 초안은 가끔 과하게 친절해서 길어진다. 그럴 때는 과감히 반으로 줄여라.

마무리 점검 명령 예시

Claude Code에게 요청:
- 문장을 20퍼센트 더 짧게 줄여줘.
- 강의 대상이 비전공자라는 점이 첫 화면에서 바로 드러나게 수정해줘.
- 문의 버튼 문구를 더 직접적으로 바꿔줘.

이 한 번의 점검만으로 페이지 완성도가 크게 오른다. 바이브 코딩은 도구를 많이 쓰는 사람이 이기는 게 아니라, 수정 기준을 분명히 아는 사람이 이긴다.

자주 묻는 질문 Q&A

Q1. 코드를 하나도 모르는데 Claude Code부터 써도 되나

A. 된다. 다만 코드를 이해하려고 시작하지 말고, 결과물을 설명하는 연습부터 하는 게 빠르다. 오늘처럼 한 장짜리 페이지를 만드는 게 가장 좋은 출발점이다.

Q2. AntiGravity는 꼭 필요한가

A. 필수는 아니지만 초보자일수록 체감이 크다. Claude Code가 만들어 준 초안을 어떤 기준으로 줄이고 고칠지 정리해 주기 때문이다. 말하자면 브레이크와 핸들 역할이다.

Q3. 한 번에 완성 프롬프트를 쓰는 게 좋나

A. 아니다. 처음엔 70점 초안, 그다음 구조 정리, 마지막으로 문구 다듬기 순서가 더 안정적이다. 한 번에 다 시키면 멋있어 보이지만 수정 비용이 커진다.

Q4. 실습 주제를 왜 강의 소개 페이지로 잡았나

A. 결과가 바로 보이고, 교육업 종사자나 1인 사업자가 곧바로 실제 업무에 붙일 수 있기 때문이다. 비전공자에게는 재미보다 재사용성이 중요하다.

Q5. 어느 순간부터 HTML보다 프레임워크를 배워야 하나

A. 반복해서 페이지를 만들고, 상태 관리나 데이터 연결이 필요해질 때다. 그 전까지는 HTML, CSS, 약간의 JavaScript만으로도 충분하다. 기초를 건너뛰고 React부터 잡으면 오히려 더 헷갈린다.

Q6. 결과물이 어설퍼 보여도 계속해도 되나

A. 오히려 그게 정상이다. 첫 결과물이 어설퍼야 다음 수정 포인트가 보인다. 아무것도 안 만든 상태가 제일 위험하다.

오늘 5분 실습

딱 5분만 써서 아래만 해봐라.

1. lecture-page 폴더를 만든다.
2. Claude Code에 강의 소개 페이지 초안을 요청한다.
3. AntiGravity에 군더더기 문구 3개만 골라 달라고 한다.
4. 버튼 문구를 강의 문의하기 로 바꾼다.
5. 브라우저에서 직접 열어 본다.

이 정도만 해도 바이브 코딩이 추상적인 말이 아니라 손에 잡히는 작업이라는 걸 바로 느낄 수 있다.

마무리

Claude Code와 AntiGravity를 같이 쓰면 비전공자도 훨씬 덜 헤맨다. Claude Code로 초안을 빠르게 만들고, AntiGravity로 수정 기준을 정리하면 결과물이 흔들리지 않는다. 이 흐름은 강의 소개 페이지에서 끝나지 않는다. 두온교육의 실무 페이지, 미래이음연구소의 안내 페이지, 교육 신청 랜딩페이지까지 그대로 확장된다.

작게 시작해라. 오늘 한 장 만들면 내일은 신청 폼 설명을 붙일 수 있고, 다음 주에는 작은 자동화 페이지도 만들 수 있다. 바이브 코딩은 천재의 기술이 아니라, 작은 결과를 매일 쌓는 사람의 기술이다. 더 깊게 배우고 싶다면 두온교육(main.duonedu.net)과 미래이음연구소(lab.duonedu.net) 자료도 함께 참고하면 된다.