Claude Code와 AntiGravity로 비전공자가 수업 질문 접수 보드 만드는 실습 튜토리얼

왜 수업 질문 접수 보드가 먼저인가

비전공자가 바이브 코딩을 배울 때 중요한 건 멋진 서비스 하나를 상상하는 일이 아니라, 지금 반복되는 불편을 바로 줄이는 경험이다. 수업 현장에서는 질문이 늘 메신저, 종이 메모, 구글 문서, 말로 한 번씩 흩어진다. 그러면 어느 질문이 급한지, 누가 답을 기다리는지, 이미 처리했는지 금방 헷갈린다. 그래서 오늘 실습은 질문 접수 보드다.

이 보드는 거창한 회원가입도 없고 서버도 없다. 대신 질문 제목, 작성자, 우선순위, 처리 상태, 메모만 잘 보이게 묶는다. 이런 작은 보드 하나만 있어도 강의 운영이 훨씬 덜 어수선해진다. Claude Code는 코드 파일을 빠르게 정리하고, AntiGravity는 화면 구조를 먼저 확인하는 데 유리하다. 둘을 분업하면 비전공자도 결과물이 빨리 나온다.

Anthropic이 최근 Claude를 실제 작업 툴과 연결하는 흐름을 강조한 것도 같은 맥락이다. 채팅을 잘하는 것보다 내 업무 화면으로 바로 연결하는 쪽이 훨씬 실무적이다. 오늘 보드 실습은 그 감각을 익히는 가장 쉬운 출발점이다.

Claude Code와 AntiGravity 역할 나누기

둘을 같이 쓸 때 제일 흔한 실수는 둘 다에게 같은 지시를 던지는 거다. 그러면 결과가 겹치고, 오히려 무엇을 채택해야 할지 더 헷갈린다. 역할을 분명히 나누면 훨씬 편하다.

• AntiGravity: 상단 요약 카드, 필터 버튼 줄 배치, 카드 간격, 모바일 흐름 확인
• Claude Code: index.html, style.css, main.js 생성과 수정, 데이터 배열 작성, 렌더링 함수 연결
• 내 역할: 요구를 작게 쪼개고, 먼저 돌아가게 만든 뒤, 마지막에 필요한 기능만 더하기

Claude Code 공식 문서에서도 이 도구를 코드베이스를 읽고 파일을 편집하고 명령을 실행하는 에이전트형 코딩 도구로 설명한다. 반대로 화면 감각은 먼저 눈으로 보는 편이 빠르다. 그래서 AntiGravity로 구조를 보고 Claude Code로 구현하는 순서가 비전공자에게 잘 맞는다.

1단계. Vite로 가장 작은 프로젝트 시작하기

프레임워크를 무겁게 시작하면 초보자는 파일 구조에서 먼저 지친다. Vite는 빠른 개발 서버와 가벼운 시작점이 장점이라 이런 실습에 잘 맞는다. 바닐라 템플릿으로 바로 시작하자.

npm create vite@latest question-intake-board -- --template vanilla
cd question-intake-board
npm install
npm run dev

폴더 구조는 단순하게 유지한다.

question-intake-board/
  index.html
  style.css
  main.js

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

비전공자 실습용 수업 질문 접수 보드를 만들어줘.
파일은 index.html, style.css, main.js로 유지해줘.
상단에는 오늘 접수 수, 긴급 질문 수, 처리 완료 수 요약 카드를 넣어줘.
중간에는 검색창과 우선순위 필터 버튼을 배치해줘.
아래에는 질문 카드 목록을 보여줘.
각 카드에는 이름, 질문 제목, 카테고리, 우선순위, 상태, 메모를 넣어줘.
모바일에서도 버튼이 자연스럽게 줄바꿈되게 해줘.

여기서 포인트는 욕심을 줄이는 거다. 로그인, 데이터베이스, 알림 발송까지 한 번에 넣지 마라. 오늘 목표는 질문이 눈에 잘 보이고 상태가 정리되는 화면 하나를 끝내는 것이다.

2단계. AntiGravity로 화면 흐름 먼저 설계하기

이제 AntiGravity에는 코드가 아니라 레이아웃을 요청한다. 잘 만든 실습은 보기 좋은 화면보다 동선이 좋은 화면이다. 선생 입장에서 3초 안에 긴급 질문을 찾을 수 있어야 한다.

비전공자도 바로 이해할 수 있는 수업 질문 접수 보드 화면 초안을 만들어줘.
상단에는 페이지 제목과 요약 카드 3개를 넣어줘.
그 아래에는 검색창과 우선순위 필터 버튼을 배치해줘.
중간에는 질문 카드 목록을 넣고, 카드에는 작성자 이름, 질문 제목, 카테고리, 상태 배지가 보이게 해줘.
하단에는 다음 수업 공지 박스를 넣어줘.
색감은 흰색, 남색, 연한 회색 중심으로 차분하게 구성해줘.

이 단계에서 확인할 건 네 가지다.

• 검색창이 너무 아래로 밀리지 않는지
• 긴급, 보통, 나중 필터 버튼이 모바일에서 두 줄로 자연스럽게 내려가는지
• 상태 배지가 카드 안에서 눈에 띄는지
• 질문 제목이 길어져도 카드 높이가 과하게 무너지지 않는지

여기서 구조가 어색하면 코드를 손대기 전에 먼저 수정해라. 화면 흐름이 꼬인 상태에서 기능을 올리면 계속 되돌아가게 된다.

3단계. Claude Code로 질문 데이터와 카드 UI 만들기

실습 초반에는 데이터베이스보다 배열이 낫다. 내가 무엇을 다루는지 눈으로 바로 보이고, 실패해도 부담이 없다. 아래처럼 샘플 데이터를 먼저 만든다.

const questions = [
  {
    name: "김하늘",
    title: "Claude Code에서 수정한 파일이 어디에 저장되는지 헷갈립니다",
    category: "환경설정",
    priority: "긴급",
    status: "답변대기",
    note: "수업 시작 전 확인 필요"
  },
  {
    name: "박서준",
    title: "AntiGravity로 만든 화면 초안을 실제 코드로 옮기는 순서가 궁금합니다",
    category: "레이아웃",
    priority: "보통",
    status: "검토중",
    note: "실습 예시로 같이 설명 예정"
  },
  {
    name: "이도윤",
    title: "모바일에서 카드 간격이 깨지는 문제를 어떻게 잡나요",
    category: "스타일",
    priority: "나중",
    status: "처리완료",
    note: "다음 자료집에 정리 예정"
  }
];

이제 카드를 렌더링하는 함수를 붙인다.

function renderQuestions(items) {
  const list = document.querySelector("#questionList");
  list.innerHTML = items.map((item, index) => `
    <article class="question-card">
      <div class="question-head">
        <h3>${item.title}</h3>
        <span class="status-badge status-${item.status}">${item.status}</span>
      </div>
      <p class="question-meta">작성자 ${item.name} · 카테고리 ${item.category}</p>
      <p class="question-priority">우선순위 ${item.priority}</p>
      <p class="question-note">메모: ${item.note}</p>
      <button class="next-status-button" data-index="${index}">다음 상태로 변경</button>
    </article>
  `).join("");
}

여기서 핵심은 읽기 쉬운 구조다. 비전공자가 처음 손대는 코드에서는 짧고 분명한 필드 이름이 훨씬 중요하다. 이름, 질문 제목, 우선순위, 상태, 메모 다섯 개만 안정적으로 돌아가도 이미 쓸 만한 도구가 된다.

4단계. 우선순위 필터와 처리 상태 연결하기

질문이 쌓이기 시작하면 정렬보다 먼저 필요한 게 필터다. 긴급 질문만 따로 보고 싶을 때 클릭 한 번으로 줄여야 한다. 상태 전환도 버튼 한 번이면 충분하다.

const PRIORITY_LIST = ["전체", "긴급", "보통", "나중"];
const STATUS_FLOW = ["답변대기", "검토중", "처리완료"];
let currentPriority = "전체";
const searchInput = document.querySelector("#searchInput");

function getFilteredQuestions(keyword) {
  const lowerKeyword = keyword.toLowerCase();
  return questions.filter((item) => {
    const matchPriority = currentPriority === "전체" || item.priority === currentPriority;
    const matchKeyword =
      item.name.toLowerCase().includes(lowerKeyword) ||
      item.title.toLowerCase().includes(lowerKeyword) ||
      item.category.toLowerCase().includes(lowerKeyword) ||
      item.note.toLowerCase().includes(lowerKeyword);
    return matchPriority && matchKeyword;
  });
}

document.addEventListener("click", (event) => {
  if (event.target.matches(".next-status-button")) {
    const index = Number(event.target.dataset.index);
    const currentIndex = STATUS_FLOW.indexOf(questions[index].status);
    questions[index].status = STATUS_FLOW[(currentIndex + 1) % STATUS_FLOW.length];
    renderQuestions(getFilteredQuestions(searchInput.value));
  }

  if (event.target.matches(".priority-filter")) {
    currentPriority = event.target.dataset.priority;
    renderQuestions(getFilteredQuestions(searchInput.value));
  }
});

이 구조만 익혀도 비전공자는 꽤 많은 화면을 만들 수 있다. 문의 보드, 출석 확인판, 과제 피드백 목록도 거의 같은 패턴으로 확장된다. 중요한 건 큰 서비스를 한 번에 만드는 게 아니라, 작은 구조를 재사용하는 감각을 잡는 일이다.

이 단계에서 꼭 확인할 것

• 검색어를 지웠을 때 전체 목록이 다시 보이는지
• 긴급 필터 상태에서 버튼을 눌러도 화면이 바로 갱신되는지
• 처리완료 상태 색이 너무 흐려서 안 보이지 않는지
• 질문 제목이 길어질 때 버튼이 아래로 자연스럽게 내려가는지

5단계. localStorage로 실사용감 올리기

브라우저를 새로고침했더니 상태가 전부 초기화되면 실습 재미가 확 떨어진다. 그래서 localStorage를 붙여서 최소한의 유지감을 준다. 서버 없이도 실사용 같은 감각을 바로 얻을 수 있다.

const savedQuestions = localStorage.getItem("questionBoardData");
if (savedQuestions) {
  questions.splice(0, questions.length, ...JSON.parse(savedQuestions));
}

function saveQuestions() {
  localStorage.setItem("questionBoardData", JSON.stringify(questions));
}

document.addEventListener("click", (event) => {
  if (!event.target.matches(".next-status-button")) return;
  const index = Number(event.target.dataset.index);
  const currentIndex = STATUS_FLOW.indexOf(questions[index].status);
  questions[index].status = STATUS_FLOW[(currentIndex + 1) % STATUS_FLOW.length];
  saveQuestions();
  renderQuestions(getFilteredQuestions(searchInput.value));
});

searchInput.addEventListener("input", (event) => {
  renderQuestions(getFilteredQuestions(event.target.value));
});

마지막으로 Claude Code에 아래처럼 마무리를 요청하면 좋다.

현재 질문 접수 보드를 수업 현장용으로 다듬어줘.
상단 요약 카드에 전체 질문 수, 긴급 질문 수, 처리 완료 수를 계산해서 보여줘.
검색 결과가 없을 때 안내 문구를 넣어줘.
모바일에서 카드 간격과 버튼 높이를 정리해줘.
상태 배지와 우선순위 텍스트는 한눈에 보이게 대비를 높여줘.

그리고 기본 확인도 잊지 마라.

npm run dev
npm run build
npm run preview

비전공자 입장에서는 이 확인 루프가 진짜 중요하다. 한 번 만들고 끝이 아니라, 돌아가게 만들고, 다시 눌러보고, 어색한 부분만 고치는 흐름을 몸에 익혀야 다음 결과물이 빨라진다.

Q&A

Q1. 처음부터 서버와 데이터베이스를 붙여야 하나

아니다. 지금 단계에서는 화면과 데이터 흐름을 이해하는 게 먼저다. 배열과 localStorage만으로도 충분히 실습할 수 있다. 서버는 그다음 문제다.

Q2. AntiGravity 없이 Claude Code만으로도 가능하지 않나

가능하다. 다만 화면 감각이 약한 초보자는 구조를 먼저 보는 편이 훨씬 덜 막힌다. AntiGravity는 정답 도구라기보다 시각적 출발점에 가깝다.

Q3. 질문 접수 보드를 다른 수업에도 재사용할 수 있나

그렇다. 필드 이름만 바꾸면 상담 접수판, 피드백 요청 보드, 학습 질문 모음판으로 쉽게 확장된다. 오늘 만든 틀 자체가 재사용 자산이 된다.

오늘 5분 실습

• 샘플 질문 3개를 6개로 늘려보기
• 우선순위에 따라 카드 왼쪽 테두리 색을 다르게 주기
• 검색창에서 카테고리까지 찾히는지 테스트하기
• 처리완료 질문만 따로 보이는 버튼을 하나 더 만들어보기

딱 여기까지만 해도 비전공자에게는 꽤 큰 진전이다. 결과물이 손에 잡히면 다음 실습이 훨씬 덜 무섭다.

미래이음연구소

마무리

오늘 만든 질문 접수 보드는 화려하지 않다. 그런데 실전에서는 이런 작은 도구가 가장 오래 남는다. 비전공자가 바이브 코딩으로 자신감을 얻는 순간도 거창한 앱을 완성했을 때가 아니라, 내 업무가 실제로 덜 복잡해졌을 때다. AntiGravity로 구조를 먼저 보고, Claude Code로 구현하고, 마지막에 내가 검수하는 흐름만 익혀도 결과물 속도는 확 달라진다. 오늘은 질문 보드 하나로 끝내고, 내일은 여기에 답변 템플릿이나 강의 메모 탭을 붙여보면 된다.

참고자료

• Anthropic, Claude for Creative Work
• Claude Code overview
• Vite Getting Started