Claude Code와 AntiGravity로 비전공자도 만드는 수업용 퀴즈 생성기, 30분 실습 튜토리얼

왜 수업용 퀴즈 생성기가 첫 실습으로 좋은가

비전공자가 바이브 코딩을 배울 때 중요한 건 거창한 서비스를 완성하는 일이 아니다. 오늘 안에 작동하는 결과물을 하나 만들고, 그 과정을 이해하는 게 먼저다. 수업용 퀴즈 생성기는 이 조건에 잘 맞는다. 입력값이 명확하고, 화면도 단순하고, 저장 결과도 눈으로 바로 확인된다. 게다가 실제 수업 준비에 바로 써먹을 수 있다.

이번 실습에서는 AntiGravity로 먼저 화면 구조를 잡고, Claude Code로 파일 생성과 로직 구현을 맡긴다. 역할을 나누면 초보자도 덜 헷갈린다. AntiGravity는 빠른 시안용, Claude Code는 실제 동작용이라고 생각하면 된다. 오늘 목표는 문제 제목, 난이도, 보기 4개, 정답, 해설을 입력하면 퀴즈 카드가 저장되고 다시 불러와지는 작은 웹앱을 만드는 것이다.

Claude Code와 AntiGravity 준비

1. Claude Code 설치

Mac 기준으로 가장 간단한 시작은 아래 명령이다.

brew install --cask claude-code
mkdir class-quiz-builder
cd class-quiz-builder
claude

처음 실행하면 로그인 절차가 나온다. 여기서 겁먹을 필요 없다. 지금 필요한 건 현재 폴더 안에 HTML, CSS, JS 파일을 만들고 수정하는 수준이다.

2. 실습용 파일부터 만든다

복잡한 프레임워크는 이번 글에서 일부러 뺐다. 비전공자 실습은 브라우저에서 바로 열리는 구조가 낫다.

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

폴더가 비어 있어도 괜찮다. Claude Code는 현재 구조를 읽고 필요한 파일 내용을 채워 넣는 데 강하다.

3. AntiGravity에는 화면 요구만 짧게 넣는다

처음부터 기능 명세를 길게 적으면 오히려 꼬인다. 아래처럼 화면과 흐름 위주로 짧게 주는 편이 좋다.

수업용 퀴즈 생성기 웹앱 화면을 설계해줘.
상단에는 제목과 설명,
왼쪽에는 문제 입력 폼,
오른쪽에는 저장된 퀴즈 목록,
각 퀴즈 카드에는 문제, 보기 4개, 정답, 해설, 난이도 배지를 보여줘.
초보자도 읽기 쉬운 밝은 UI로 구성해줘.

이 단계에서 얻고 싶은 건 완성 코드가 아니라 화면 합의다. 어떤 입력칸이 필요한지, 카드가 어떤 순서로 보여야 하는지 먼저 눈으로 정리해 두면 Claude Code에게도 덜 흔들리는 요청을 줄 수 있다.

화면 구조와 프롬프트 설계

1. Claude Code에는 한 번에 한 단계씩 시킨다

초보자가 가장 많이 하는 실수는 첫 프롬프트에 욕심을 다 넣는 것이다. 로그인, 검색, 다크모드, CSV 다운로드까지 한 번에 말하면 결과가 흐려진다. 첫 요청은 이 정도면 충분하다.

현재 폴더에 순수 HTML, CSS, JS로 수업용 퀴즈 생성기를 만들어줘.
기능은 문제 입력 폼, 보기 4개 입력, 정답 선택, 해설 저장, localStorage 저장, 카드 목록 렌더링.
파일은 index.html, style.css, app.js만 사용해줘.
초보자가 읽기 쉽게 구조를 단순하게 유지해줘.

이렇게 시작하면 Claude Code가 기본 레이아웃과 파일 분리를 먼저 해준다. 그다음 두 번째 요청에서 필터, 삭제 버튼, 난이도 배지 같은 세부 기능을 추가하면 된다.

2. 저장 방식은 localStorage로 끝낸다

비전공자 첫 실습에서 서버와 데이터베이스를 붙이면 절반은 환경 이슈로 시간이 날아간다. 오늘은 localStorage만 써도 충분하다. 브라우저 새로고침 뒤에도 퀴즈가 남아 있으면 실습 목적은 달성이다.

실제 파일 만들기와 실행

1. Claude Code로 기본 골격 생성

파일을 만든 뒤 Claude Code 대화창에서 아래처럼 요청한다.

index.html에는 제목, 설명, 입력 폼, 퀴즈 목록 영역을 넣어줘.
style.css에는 2단 레이아웃과 카드 스타일을 만들어줘.
app.js에는 폼 제출, 목록 렌더링, localStorage 저장 기능을 구현해줘.

핵심은 기능을 영역별로 끊어서 말하는 것이다. 이렇게 해야 초보자도 어떤 파일이 무슨 역할을 하는지 읽기 쉽다.

2. 미리보기 서버 실행

파일이 채워졌으면 바로 브라우저에서 확인한다.

python3 -m http.server 8000

이후 브라우저에서 http://localhost:8000 을 열면 된다. 입력 폼이 보이고 저장 버튼이 반응하면 방향은 맞게 간 것이다.

3. 두 번째 요청으로 품질 올리기

첫 화면이 뜬 뒤에는 아래처럼 보완한다.

퀴즈 카드에 난이도 배지를 추가해줘.
정답은 카드 하단 버튼을 눌렀을 때만 보이게 해줘.
각 카드에 삭제 버튼도 넣어줘.
모바일 화면에서는 세로 1단으로 정렬되게 해줘.

이 방식이 중요한 이유는, 바이브 코딩에서도 순서가 품질을 좌우하기 때문이다. 먼저 뜨게 만들고, 그다음 다듬는다. 이 순서를 놓치면 초보자는 어디서 틀렸는지 감을 잃는다.

핵심 자바스크립트 코드 붙이기

1. 저장 로직 예시

아래 코드는 퀴즈 데이터를 배열로 저장하는 가장 단순한 형태다. Claude Code가 비슷한 코드를 만들더라도, 이 구조를 읽을 줄 알면 수정이 쉬워진다.

const form = document.querySelector("#quiz-form");
const list = document.querySelector("#quiz-list");
const storageKey = "class-quiz-items";

function getItems() {
  return JSON.parse(localStorage.getItem(storageKey) || "[]");
}

function saveItems(items) {
  localStorage.setItem(storageKey, JSON.stringify(items));
}

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

  const item = {
    question: document.querySelector("#question").value,
    level: document.querySelector("#level").value,
    choices: [
      document.querySelector("#choice1").value,
      document.querySelector("#choice2").value,
      document.querySelector("#choice3").value,
      document.querySelector("#choice4").value
    ],
    answer: document.querySelector("#answer").value,
    explanation: document.querySelector("#explanation").value,
    createdAt: Date.now()
  };

  const items = getItems();
  items.unshift(item);
  saveItems(items);
  renderItems();
  form.reset();
});

이 코드에서 꼭 봐야 할 부분은 세 군데다. 첫째, getItems 가 기존 데이터를 읽는다. 둘째, saveItems 가 저장한다. 셋째, 제출 이벤트 안에서 새 퀴즈 객체를 만들고 맨 앞에 넣는다. 구조를 이렇게 나누면 나중에 수정하기도 쉽다.

2. 화면 렌더링 예시

function renderItems() {
  const items = getItems();

  if (!items.length) {
    list.innerHTML = "<p>아직 저장된 퀴즈가 없습니다.</p>";
    return;
  }

  list.innerHTML = items.map((item, index) => `
    <article class="quiz-card">
      <span class="level-badge">${item.level}</span>
      <h3>${index + 1}. ${item.question}</h3>
      <ol>${item.choices.map((choice) => `<li>${choice}</li>`).join("")}</ol>
      <details>
        <summary>정답과 해설 보기</summary>
        <p>정답: ${item.answer}</p>
        <p>해설: ${item.explanation}</p>
      </details>
    </article>
  `).join("");
}

여기서는 details 태그가 꽤 유용하다. 정답을 처음부터 다 보여주지 않고, 눌렀을 때만 펼치게 만들 수 있다. 이런 작은 HTML 요소를 Claude Code에게 요청하면 UI 완성도가 금방 올라간다.

비전공자가 자주 막히는 지점

• 한 번에 너무 많은 기능을 넣는다. 첫 버전은 저장과 출력만 되면 충분하다.
• 화면 설계 없이 바로 코드부터 만든다. AntiGravity에서 레이아웃을 먼저 잡는 편이 훨씬 덜 흔들린다.
• 오류가 나면 전체를 다시 만들려고 한다. 그보다 콘솔 에러 한 줄을 Claude Code에 그대로 붙여 넣는 게 빠르다.
• 로컬 서버를 안 띄우고 파일만 더블클릭한다. 상대경로, 스크립트 로딩 문제 때문에 괜히 헷갈린다.
• 정답, 보기, 해설 필드 이름을 제각각 쓴다. 입력 id 이름을 단순하게 맞춰야 app.js도 읽기 쉬워진다.

오늘 5분 실습

1. 폴더를 만들고 index.html, style.css, app.js 세 파일을 만든다.
2. AntiGravity에 화면 구조 프롬프트를 넣고 배치 아이디어를 먼저 본다.
3. Claude Code에 입력 폼과 카드 목록만 있는 최소 버전을 만들어 달라고 요청한다.
4. 문제 1개를 직접 입력하고 저장해 본다.
5. 새로고침 뒤에도 남아 있으면 오늘 실습은 성공이다.

마무리

Claude Code와 AntiGravity 조합의 장점은 비전공자에게도 역할 분담이 분명하다는 점이다. AntiGravity는 화면을 빠르게 상상하게 만들고, Claude Code는 그 상상을 실제 파일과 로직으로 연결한다. 이 두 단계를 분리하면 바이브 코딩이 막연한 마법처럼 보이지 않는다. 오히려 충분히 관리 가능한 작업으로 내려온다.

오늘 만든 수업용 퀴즈 생성기는 작은 예제지만 확장 가능성은 크다. 다음 단계에서는 과목 필터, CSV 내보내기, 문제 랜덤 출제, 학습자 점수 기록까지 붙일 수 있다. 하지만 첫날에는 여기까지면 충분하다. 저장되고, 다시 열리고, 설명할 수 있으면 이미 제대로 시작한 것이다.

참고자료

• Anthropic Claude Code overview
• Claude Code Quickstart
• AntiGravity 기반 Claude Code 연결 가이드