Claude Code와 AntiGravity로 비전공자가 FAQ 상담 페이지 만드는 실습 튜토리얼

왜 FAQ 상담 페이지부터 만드는가

비전공자가 바이브 코딩을 시작하면 제일 먼저 부딪히는 벽이 있다. 뭘 만들지부터 너무 크게 잡는다는 점이다. 로그인, 결제, 데이터베이스까지 한 번에 붙이려 하면 바로 멘붕 온다. 반대로 FAQ 상담 페이지는 화면 결과가 바로 보이고, 텍스트 수정도 쉽고, HTML CSS 자바스크립트의 핵심 흐름을 한 번에 익히기 좋다. 특히 강의 소개, 수강 신청, 교육 서비스 안내처럼 실제 업무에 바로 붙일 수 있어서 실습 만족도가 높다.

오늘 목표는 Claude Code는 구조와 코드 정리 담당, AntiGravity는 화면 초안 아이디어 담당으로 역할을 나누는 것이다. 이 흐름이 익숙해지면 이후에는 신청 폼, 랜딩페이지, 수업 안내 페이지까지 같은 패턴으로 확장할 수 있다.

Claude Code와 AntiGravity 역할 나누기

핵심은 도구를 섞되 역할을 섞지 않는 것이다. AntiGravity에서는 먼저 페이지 구성과 문구 배치를 잡는다. 헤더가 먼저 와야 하는지, 질문 카테고리를 어떻게 나눌지, 버튼 문구를 어떤 톤으로 할지 결정하는 식이다. 그다음 Claude Code에서는 실제 파일 생성, 섹션 구조화, FAQ 데이터 배열, 검색창 동작, 아코디언 열기 닫기까지 코드화한다. 비전공자 입장에서는 이 순서가 훨씬 덜 헷갈린다.

• AntiGravity: 화면 흐름, 섹션 순서, 텍스트 초안
• Claude Code: 파일 생성, 코드 작성, 동작 구현, 수정 반복
• 내 역할: 프롬프트로 방향을 잡고 결과를 고르는 것

1단계. 작업 폴더와 기본 파일 준비

가장 단순한 실습은 바닐라 HTML 파일 3개만으로 시작하는 것이다. Node를 이미 설치했다면 Vite로 시작하면 되고, 초보라면 그냥 폴더를 만들어도 된다. 아래 예시는 Vite 기준이다.

npm create vite@latest faq-lab -- --template vanilla
cd faq-lab
npm install
npm run dev

이제 Claude Code에 아래처럼 요청한다.

프로젝트는 비전공자용 FAQ 상담 페이지 실습이다.
파일은 index.html, style.css, main.js 중심으로 단순하게 유지해줘.
질문 카테고리는 수강신청, 수업방식, 환불안내, 준비물 4개로 구성하고
검색창과 아코디언 토글 기능을 넣어줘.
모바일 화면도 깨지지 않게 작성해줘.

여기서 중요한 건 기능을 한 번에 길게 늘어놓지 않는 것이다. 비전공자는 프롬프트도 모듈식으로 던지는 습관이 필요하다. 한 문장에 모든 요구를 몰아넣지 말고, 구조와 기능을 나눠서 요청하면 수정도 훨씬 쉽다.

2단계. AntiGravity로 화면 초안 잡기

이제 AntiGravity에는 코드 요청이 아니라 화면 요청을 한다. 예를 들어 아래처럼 말하면 된다.

비전공자도 바로 이해할 수 있는 교육 서비스 FAQ 페이지 초안을 만들어줘.
상단에는 제목과 설명문,
중간에는 카테고리 버튼 4개,
아래에는 자주 묻는 질문 아코디언,
맨 아래에는 상담 문의 버튼을 배치해줘.
색감은 깔끔한 파랑 계열, 글씨는 큼직하게.

이 단계의 목적은 정답 코드를 뽑는 게 아니다. 화면 흐름을 눈으로 먼저 보는 것이다. 초안이 나오면 구성만 가져오고, 구체 구현은 Claude Code로 넘긴다. 이 방식이 좋은 이유는 화면 감각과 코드 감각을 억지로 동시에 처리하지 않아도 되기 때문이다.

화면 초안에서 체크할 것

• 질문 목록이 너무 길게 늘어지지 않는지
• 카테고리 버튼이 모바일에서 두 줄로 자연스럽게 줄바꿈되는지
• 상담 문의 버튼이 페이지 마지막에서 잘 보이는지

3단계. Claude Code로 FAQ 데이터와 인터랙션 붙이기

이제 화면 초안을 본 뒤 Claude Code에 실제 동작을 붙이게 한다. 비전공자가 가장 빨리 성취감을 느끼는 지점이 바로 이 단계다. 아래처럼 데이터 배열을 만들고 자바스크립트로 FAQ 목록을 렌더링하면 된다.

const faqs = [
  {
    category: "수강신청",
    question: "수강 신청은 어디서 하나요?",
    answer: "신청 폼에서 이름과 연락처를 남기면 순서대로 안내를 받습니다."
  },
  {
    category: "수업방식",
    question: "비전공자도 따라갈 수 있나요?",
    answer: "예. 실습은 복붙과 수정 중심으로 진행해서 처음 시작하는 분도 무리 없이 따라갈 수 있습니다."
  },
  {
    category: "환불안내",
    question: "일정이 안 맞으면 환불이 가능한가요?",
    answer: "개강 전 환불 기준과 일정 변경 규정을 페이지에 함께 안내하면 문의가 크게 줄어듭니다."
  }
];

그리고 렌더링 함수는 이렇게 간단하게 갈 수 있다.

function renderFaq(items) {
  const list = document.querySelector("#faqList");
  list.innerHTML = items.map((item, index) => `
    <article class="faq-item">
      <button class="faq-question" data-index="${index}">
        <span>${item.question}</span>
        <span>+</span>
      </button>
      <div class="faq-answer">${item.answer}</div>
    </article>
  `).join("");
}

포인트는 어렵게 시작하지 않는 것이다. DB 연결은 나중이다. 지금은 배열 데이터를 직접 넣고, 토글과 검색이 잘 되는지만 확인하면 된다. 이 한 번의 성공 경험이 다음 작업을 훨씬 가볍게 만든다.

4단계. 검색과 아코디언 동작 다듬기

FAQ 페이지가 실제로 쓸만해지려면 검색과 열기 닫기 동작이 부드러워야 한다. 아래 코드는 검색창에 입력한 단어를 기준으로 질문과 답변을 같이 필터링하는 예시다.

const searchInput = document.querySelector("#searchInput");

searchInput.addEventListener("input", (event) => {
  const keyword = event.target.value.toLowerCase();
  const filtered = faqs.filter((item) =>
    item.question.toLowerCase().includes(keyword) ||
    item.answer.toLowerCase().includes(keyword) ||
    item.category.toLowerCase().includes(keyword)
  );
  renderFaq(filtered);
  bindAccordion();
});

아코디언 토글은 더 단순하다.

function bindAccordion() {
  document.querySelectorAll(".faq-question").forEach((button) => {
    button.addEventListener("click", () => {
      const answer = button.nextElementSibling;
      answer.classList.toggle("open");
    });
  });
}

여기서 자주 생기는 실수는 renderFaq를 다시 호출한 뒤 이벤트를 다시 안 붙이는 것이다. 화면은 보이는데 버튼이 안 열리면 거의 이 문제다. Claude Code에 렌더링 이후 이벤트 재바인딩까지 포함해서 정리해줘라고 짚어주면 금방 해결된다.

자주 막히는 포인트

• 질문 버튼은 보이는데 클릭이 안 된다. 원인은 이벤트 재바인딩 누락인 경우가 많다.
• 모바일에서 버튼이 너무 좁다. 패딩과 줄간격보다 먼저 버튼 너비와 flex 정렬을 확인하면 된다.
• 검색 결과가 비어도 안내 문구가 없다. 결과 없음 메시지를 넣으면 완성도가 확 올라간다.
• AI가 준 코드가 길어지면 수정이 어려워진다. 먼저 단일 기능 단위로 다시 쪼개 달라고 요청하는 게 빠르다.

Q&A

Q1. 비전공자인데 Vite부터 꼭 써야 하나

아니다. 그냥 index.html 하나로 시작해도 된다. 다만 파일이 늘어날수록 Vite 쪽이 훨씬 덜 지저분하다.

Q2. AntiGravity 결과가 마음에 안 들면 어떻게 하나

버리지 말고 레이아웃 아이디어만 뽑아라. 제목 위치, 버튼 개수, 카드 간격만 참고해도 충분하다.

Q3. Claude Code가 너무 많은 코드를 주면 어떻게 하나

한 번에 다 받지 말고 헤더, FAQ 목록, 검색 기능, 모바일 정리 순서로 쪼개서 다시 요청하면 된다. 바이브 코딩은 긴 답보다 짧은 왕복이 더 강하다.

오늘 5분 실습

1. FAQ 질문 3개만 있는 가장 작은 배열을 만든다.
2. Claude Code에 검색 기능 없이 아코디언만 먼저 만들어달라고 요청한다.
3. 동작이 확인되면 그다음 검색 기능만 추가한다.
4. 마지막으로 상담 문의 버튼 문구를 내 서비스에 맞게 바꾼다.

이 5분 루틴만 해도 비전공자가 가장 어려워하는 화면 초안 잡기 → 코드 붙이기 → 동작 확인하기 흐름을 한 번 끝낼 수 있다.

미래이음연구소

마무리

바이브 코딩은 거대한 앱부터 만드는 방식이 아니다. 오늘처럼 FAQ 상담 페이지 하나를 끝까지 완성하는 경험이 훨씬 중요하다. AntiGravity로 화면을 먼저 보고, Claude Code로 동작을 붙이고, 내가 마지막에 문구와 구조를 고르면 된다. 이 흐름만 익혀도 비전공자는 더 이상 코드를 무서워할 이유가 없다. 내일은 같은 방식으로 신청 폼이나 수업 안내 카드 페이지까지 바로 확장할 수 있다.

참고자료

• Anthropic, Claude Code overview
• Vite Guide, Getting Started
• MDN Web Docs, details and button interaction patterns