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

왜 오늘 주제를 강의 소개 랜딩페이지로 잡았나

비전공자가 바이브 코딩을 배울 때 가장 먼저 체감해야 하는 건 결과물이 눈앞에 바로 뜨는 경험이다. 그래서 오늘 소주제는 강의 소개 랜딩페이지다. 로그인, 결제, 회원관리처럼 복잡한 기능 없이도 완성 화면이 분명하고, 텍스트와 버튼과 카드 레이아웃만으로도 실습 만족도가 높다. 게다가 강사, 교육기관, 1인 브랜드 운영자에게는 실제 업무에 바로 연결된다.

오늘 실습 목표는 분명하다. Claude Code로 실제 파일을 만들고, AntiGravity로 화면 구조와 흐름을 먼저 정리한 뒤, 브라우저에서 바로 열리는 1페이지 랜딩페이지를 완성하는 것이다. 결과물에는 상단 히어로 섹션, 강의 특징 3개, 커리큘럼 요약, 신청 버튼, 간단한 문의 폼이 들어간다. 여기까지 만들면 비전공자도 아, 이 조합이면 업무용 페이지는 충분히 만들 수 있겠다는 감을 잡는다.

Claude Code와 AntiGravity 역할 나누기

1. AntiGravity는 화면 합의용으로 쓴다

Google Antigravity 소개 페이지를 보면 이 도구는 여러 에이전트를 한 화면에서 관리하고, 에디터와 터미널과 브라우저를 오가는 작업 흐름을 강조한다. 비전공자 입장에서는 복잡하게 받아들일 필요 없다. 첫 단계에서는 화면 구조를 빨리 구상하는 도구로 쓰면 된다. 즉 어떤 섹션이 먼저 나오고, 카드가 몇 개 들어가고, 버튼 문구가 무엇인지 정하는 데 AntiGravity를 쓰는 식이다.

2. Claude Code는 실제 동작 파일 생성용으로 쓴다

Anthropic 문서 기준으로 Claude Code는 코드베이스를 읽고, 파일을 만들고, 명령을 실행하는 데 강하다. 이 점이 실습형 튜토리얼에 잘 맞는다. 화면 아이디어는 AntiGravity에서 잡고, 실제 index.html, style.css, app.js 파일은 Claude Code에게 맡기면 된다. 역할을 이렇게 나누면 툴이 겹쳐 싸우지 않는다.

3. 비전공자는 한 툴에 모든 기대를 몰지 않는 편이 낫다

가장 흔한 실패는 한 번의 프롬프트로 기획, 디자인, 코드, 배포까지 전부 해결하려는 것이다. 그렇게 하면 결과가 흐려진다. 오늘처럼 화면 초안은 AntiGravity, 코드 생성은 Claude Code, 최종 확인은 브라우저로 분리하면 훨씬 덜 꼬인다. 바이브 코딩도 결국 작업 분해가 품질을 만든다.

설치와 작업 폴더 준비

1. Claude Code 설치

Mac에서 가장 간단한 시작은 아래 명령이다.

brew install --cask claude-code
mkdir lecture-landing-page
cd lecture-landing-page
claude

Anthropic 공식 개요 문서에서도 Homebrew 설치와 프로젝트 폴더에서 claude 실행 흐름을 기본으로 안내한다. 처음 로그인만 끝나면 바로 작업할 수 있다.

2. 실습 파일 만들기

오늘은 프레임워크를 쓰지 않는다. 비전공자 첫 실습은 브라우저에서 바로 보이는 구조가 제일 낫다.

touch index.html style.css app.js
mkdir assets

이 세 파일만으로도 충분하다. 파일이 비어 있어도 괜찮다. Claude Code가 현재 폴더 구조를 읽고 내용을 채워 넣을 수 있다.

3. AntiGravity에서 먼저 화면 요구를 짧게 정리한다

아래처럼 짧고 분명한 문장이 좋다.

AI 강의 소개용 랜딩페이지 화면을 설계해줘.
상단에는 강의 제목과 신청 버튼,
중간에는 강의 특징 3개 카드,
아래에는 커리큘럼과 강사 소개,
마지막에는 문의 폼과 신청 CTA를 넣어줘.
밝고 신뢰감 있는 교육용 스타일로 구성해줘.

길게 설명하기보다 섹션 순서와 목적만 정확히 주는 편이 낫다. AntiGravity에서 나온 구조를 눈으로 확인한 뒤 Claude Code로 넘기면 훨씬 안정적이다.

비전공자가 잘 먹히는 프롬프트 구조

1. 첫 요청은 최소 기능만 담는다

처음부터 반응형 애니메이션, 폼 검증, 다크모드, 관리자 페이지까지 넣지 마라. 첫 프롬프트는 아래 정도면 충분하다.

현재 폴더에 순수 HTML, CSS, JS로 강의 소개 랜딩페이지를 만들어줘.
섹션은 히어로, 강의 특징 3개, 커리큘럼, 강사 소개, 문의 폼 순서로 구성해줘.
파일은 index.html, style.css, app.js만 사용해줘.
비전공자가 읽기 쉽게 클래스 이름과 구조를 단순하게 유지해줘.

이 요청의 장점은 명확하다. 페이지 목적, 섹션 구성, 파일 범위, 난이도까지 한 번에 잡아 준다. 하지만 기능 욕심은 아직 안 넣는다. 그래서 Claude Code도 덜 흔들린다.

2. 두 번째 요청에서 상호작용을 붙인다

기본 화면이 나온 뒤에 아래처럼 이어 가면 된다.

문의 폼 제출 버튼을 누르면 입력값 검증 후
감사 메시지를 화면에 보여줘.
상단 신청 버튼을 누르면 문의 섹션으로 스크롤되게 해줘.
모바일에서는 카드가 세로 1열로 정렬되게 해줘.

이렇게 나누면 비전공자도 지금 어떤 층을 수정하는지 이해할 수 있다. 첫 번째는 구조, 두 번째는 동작이다. 이 구분이 중요하다.

실제 파일 작성과 실행 순서

1. Claude Code에게 파일별 역할을 분리해서 지시한다

index.html에는 각 섹션 구조와 문구를 넣어줘.
style.css에는 교육 사이트 느낌의 깔끔한 1페이지 스타일을 만들어줘.
app.js에는 부드러운 스크롤과 문의 폼 제출 확인 메시지를 구현해줘.

이 방식이 좋은 이유는 파일이 커져도 읽기 쉽기 때문이다. 비전공자는 코드 해석력보다 구조 감각을 먼저 키워야 한다. 어떤 파일이 어떤 역할인지 보이면 다음 수정이 쉬워진다.

2. 로컬 서버를 띄워서 바로 본다

python3 -m http.server 8000

브라우저에서 http://localhost:8000 을 열면 된다. 저장 후 새로고침만으로 결과를 볼 수 있어 피드백이 빠르다. 바이브 코딩은 이 즉시성이 핵심이다.

3. 세 번째 요청으로 카피와 배치를 다듬는다

화면이 뜨면 그다음은 미세 조정이다.

히어로 섹션 문구를 더 짧고 강하게 다듬어줘.
강의 특징 카드에 아이콘 대신 번호 배지를 넣어줘.
커리큘럼 섹션은 4주차 로드맵처럼 보이게 바꿔줘.
문의 폼 아래에 개인정보 안내 한 줄을 추가해줘.

이 단계에서 중요한 건 전면 재작성보다 부분 수정이다. 잘 뜬 페이지를 망치지 않고 개선하는 습관이 여기서 생긴다.

핵심 HTML, CSS, JS 예시

1. HTML 구조 예시

<section class="hero">
  <h1>비전공자도 시작하는 AI 실습 강의</h1>
  <p>Claude Code와 AntiGravity로 결과물을 직접 만드는 실전 수업</p>
  <a href="#contact" class="cta-button">강의 문의하기</a>
</section>

<section class="features">
  <article class="feature-card">실습 중심</article>
  <article class="feature-card">비전공자 맞춤</article>
  <article class="feature-card">바로 업무 적용</article>
</section>

여기서 핵심은 섹션 이름이 직관적이라는 점이다. 비전공자는 hero, features, contact 정도만 익혀도 훨씬 덜 겁먹는다.

2. CSS 레이아웃 예시

body {
  font-family: "Pretendard", sans-serif;
  margin: 0;
  color: #1f2937;
  background: #f8fafc;
}

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

.cta-button {
  display: inline-block;
  padding: 14px 22px;
  background: #2563eb;
  color: white;
  border-radius: 10px;
  text-decoration: none;
}

그리드 3열과 버튼 스타일만 잡아도 페이지가 금방 그럴듯해진다. 바이브 코딩에서 처음 필요한 건 완벽한 디자인보다 기본 구조다.

3. JS 상호작용 예시

const ctaButton = document.querySelector(".cta-button");
const contactSection = document.querySelector("#contact");
const form = document.querySelector("#contact-form");
const result = document.querySelector("#form-result");

ctaButton.addEventListener("click", (event) => {
  event.preventDefault();
  contactSection.scrollIntoView({ behavior: "smooth" });
});

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = document.querySelector("#name").value.trim();
  const email = document.querySelector("#email").value.trim();

  if (!name || !email) {
    result.textContent = "이름과 이메일을 먼저 입력해줘.";
    return;
  }

  result.textContent = "문의가 접수되었다고 가정하고 다음 단계 상담 문구를 보여주는 상태다.";
  form.reset();
});

여기서는 서버 전송이 아니라 화면 반응만 구현한다. 첫 실습에서 중요한 건 동작 흐름을 이해하는 것이다. 폼 제출, 입력 검증, 결과 문구 출력 이 세 가지만 알아도 다음 페이지로 갈 발판이 된다.

자주 막히는 지점과 해결법

• 한 번에 너무 큰 사이트를 만들려 한다. 첫 결과물은 1페이지면 충분하다.
• AntiGravity에서 나온 화면을 그대로 완성 코드로 기대한다. 그보다 구조 합의용으로 쓰는 편이 낫다.
• Claude Code에게 전체 재작성만 반복 요청한다. 부분 수정 지시가 훨씬 안정적이다.
• 로컬 서버 없이 파일 더블클릭만 한다. 미리보기 환경을 분리해야 오류 추적이 쉽다.
• 문구와 섹션 이름을 계속 바꾼다. 클래스 이름이 흔들리면 코드도 읽기 어려워진다.

Q&A

Q1. 비전공자인데 HTML을 몰라도 시작 가능할까

가능하다. 다만 아예 아무것도 모르는 상태보다 section, button, form 정도의 태그 이름만 알고 시작하면 훨씬 빠르다. 오늘 예제는 그 최소 단위를 익히는 데 맞춰져 있다.

Q2. AntiGravity 없이 Claude Code만 써도 되나

된다. 그런데 초보자에게는 먼저 화면 흐름을 보는 과정이 꽤 도움이 된다. 무엇을 만들지 모호할 때 AntiGravity가 구조 정리에 유리하다.

Q3. 문의 폼을 실제 메일 발송까지 연결해야 하나

첫날은 아니다. 첫 실습은 화면과 동작 이해가 먼저다. 실제 메일 발송은 다음 단계에서 Formspree, EmailJS, 서버 API 같은 방식으로 붙이면 된다.

Q4. 코드를 다 이해하지 못해도 괜찮나

처음부터 전부 이해할 필요는 없다. 대신 어떤 파일이 어떤 역할을 하는지는 설명할 수 있어야 한다. 그 정도면 다음 수정이 가능하다.

오늘 5분 실습

1. lecture-landing-page 폴더를 만든다.
2. index.html, style.css, app.js 파일을 생성한다.
3. AntiGravity에 랜딩페이지 화면 구조 프롬프트를 넣는다.
4. Claude Code에 최소 버전 랜딩페이지 생성을 요청한다.
5. 로컬 서버를 띄우고 신청 버튼이 문의 섹션으로 내려가는지만 확인한다.

마무리

Claude Code와 AntiGravity 조합의 진짜 장점은 비전공자도 작업 단계를 나눠서 생각하게 만든다는 점이다. 어떤 화면을 만들지 먼저 정하고, 실제 파일을 생성하고, 브라우저에서 바로 검증하는 흐름이 생긴다. 이 흐름만 잡혀도 바이브 코딩은 막연한 유행어가 아니라 관리 가능한 작업이 된다.

오늘 만든 강의 소개 랜딩페이지는 작은 예제지만 확장성은 충분하다. 다음 단계에서는 후기 슬라이더, 신청 데이터 저장, 캘린더 연동, PDF 강의안 다운로드까지 붙일 수 있다. 하지만 첫날 목표는 단순하다. 한 페이지가 뜨고, 버튼이 반응하고, 내가 왜 이렇게 만들었는지 설명할 수 있으면 이미 제대로 시작한 것이다.

참고자료

• Anthropic, Claude Code overview
• Anthropic, Claude Code 설치 및 시작 문서
• Google Antigravity 제품 소개 페이지