Claude Code와 AntiGravity로 비전공자가 과제 제출 현황 보드 만드는 실습 튜토리얼

왜 과제 제출 현황 보드부터 만들어야 하는가

비전공자가 바이브 코딩을 익힐 때 제일 먼저 체감해야 하는 건 내가 매일 겪는 반복 업무가 화면 하나로 정리되는 경험이다. 과제 제출 관리가 딱 그렇다. 수강생 이름, 과제 제목, 제출 여부, 확인 메모만 있어도 업무 피로도가 확 줄어든다. 메신저 대화방을 위아래로 뒤지는 일, 누가 아직 안 냈는지 눈으로 세는 일, 다시 공지하는 일을 한 번에 줄일 수 있다.

오늘 실습은 복잡한 로그인 시스템이나 서버 배포까지 가지 않는다. 대신 브라우저에서 바로 돌아가는 작은 관리 보드를 만든다. AntiGravity로는 화면 구조를 먼저 잡고, Claude Code로는 실제 HTML, CSS, JavaScript를 정리한다. 이 순서를 익히면 나중에는 출석 체크, 수강생 질문 접수, 피드백 정리판으로 바로 확장 가능하다.

Claude Code와 AntiGravity 역할 나누기

둘을 같이 쓴다고 해서 둘 다 같은 일을 시키면 오히려 꼬인다. AntiGravity는 화면 흐름과 섹션 배치를 빠르게 보는 데 좋고, Claude Code는 코드 파일 생성과 수정 반복에서 강하다. 실전에서는 이렇게 나누면 편하다.

• AntiGravity: 상단 요약 카드, 상태 필터 버튼, 제출 목록 배치, 모바일 줄바꿈 확인
• Claude Code: 파일 생성, 샘플 데이터 작성, 렌더링 함수, 상태 변경 버튼, localStorage 연결
• 내 역할: 한 번에 욕심내지 않고 기능을 작게 끊어서 지시하기

비전공자가 가장 많이 망하는 패턴은 관리자 페이지, 로그인, 파일 업로드, 문자 발송까지 한 번에 넣는 거다. 오늘은 정적 보드 하나를 확실히 끝내는 게 목표다. 작게 끝내는 사람이 결국 빨리 간다.

1단계. 바닐라 Vite 프로젝트 시작하기

복잡한 프레임워크부터 들이밀 필요 없다. HTML, CSS, JavaScript가 보이는 상태로 시작해야 수정 감이 빨리 잡힌다. 아래 명령으로 새 프로젝트를 만든다.

npm create vite@latest class-assignment-board -- --template vanilla
cd class-assignment-board
npm install
npm run dev

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

비전공자 실습용 과제 제출 현황 보드를 만들어줘.
index.html, style.css, main.js 구조로 유지해줘.
상단에는 오늘 제출 요약 카드 3개,
중간에는 검색창과 상태 필터,
아래에는 제출 목록 카드를 보여줘.
상태는 미제출, 제출완료, 피드백완료 3개로 해줘.
모바일에서도 버튼이 줄바꿈되도록 작성해줘.

처음부터 요구를 작게 주는 게 중요하다. Claude Code는 한 번에 많은 일을 할 수 있지만, 초보자에게는 읽기 쉬운 결과가 더 중요하다. 화면이 돌아가고, 내가 수정할 위치가 보이면 그다음부터 속도가 붙는다.

추천 파일 구조

class-assignment-board/
  index.html
  style.css
  main.js

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

이제 AntiGravity에는 코드보다 구조를 요청한다. 핵심은 예쁜 시안보다 동선 확인이다. 수업 현장에서 중요한 건 선생이 3초 안에 누가 안 냈는지 찾을 수 있느냐지, 배경 그라데이션이 얼마나 화려한지가 아니다.

비전공자도 바로 이해할 수 있는 과제 제출 현황 보드 화면 초안을 만들어줘.
상단에는 페이지 제목과 오늘 제출률 요약 카드 3개를 넣어줘.
그 아래에는 검색창과 상태 필터 버튼을 배치해줘.
중간에는 학생 이름, 과제명, 마감일, 상태 배지가 보이는 카드 목록을 넣어줘.
하단에는 다음 수업 안내 박스를 넣어줘.
색감은 흰색, 남색, 연한 회색 위주로 차분하게 구성해줘.

여기서 먼저 볼 포인트는 네 가지다.

• 검색창이 너무 아래로 밀려서 찾기 흐름이 끊기지 않는지
• 상태 버튼이 모바일에서 두 줄로 자연스럽게 내려가는지
• 상태 배지가 카드 안에서 눈에 잘 띄는지
• 학생 이름과 과제명이 길어져도 줄바꿈이 무너지지 않는지

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

화면 흐름이 잡혔으면 이제 실제 데이터를 붙인다. 비전공자에게 가장 쉬운 출발점은 배열 하나다. DB를 붙이기 전에도 충분히 실습할 수 있고, 구조 이해가 빨라진다.

const assignments = [
  {
    student: "김하늘",
    task: "Claude Code 첫 화면 만들기",
    dueDate: "2026-04-30",
    status: "미제출",
    note: "메신저로 안내 완료"
  },
  {
    student: "박서준",
    task: "AntiGravity 레이아웃 초안",
    dueDate: "2026-04-30",
    status: "제출완료",
    note: "검토 대기"
  },
  {
    student: "이도윤",
    task: "수업 소개 카드 UI 정리",
    dueDate: "2026-04-30",
    status: "피드백완료",
    note: "수정 반영 확인"
  }
];

이 데이터를 카드로 뿌리는 함수는 단순할수록 좋다. 아래처럼 시작하면 구조를 눈으로 읽기 쉽다.

function renderAssignments(items) {
  const list = document.querySelector("#assignmentList");
  list.innerHTML = items.map((item, index) => `
    <article class="assignment-card">
      <div class="assignment-head">
        <h3>${item.student}</h3>
        <span class="status-badge status-${item.status}">${item.status}</span>
      </div>
      <p class="task-title">${item.task}</p>
      <p class="task-meta">마감일 ${item.dueDate}</p>
      <p class="task-note">메모: ${item.note}</p>
      <button class="next-status-button" data-index="${index}">다음 상태로 변경</button>
    </article>
  `).join("");
}

여기서 중요한 건 예쁘게 만드는 것보다 수정이 쉬운 구조를 만드는 일이다. 학생, 과제, 상태, 메모 네 필드만 안정적으로 돌면 이미 절반은 끝난 거다.

4단계. 제출 상태 변경, 검색, 로컬 저장 붙이기

이제 보드가 진짜 업무 도구가 되려면 상태 변경과 검색이 붙어야 한다. 서버 없이도 localStorage를 붙이면 브라우저 새로고침 뒤에도 데이터가 남는다. 초보 실습에서 체감이 가장 큰 포인트다.

const STATUS_FLOW = ["미제출", "제출완료", "피드백완료"];
const searchInput = document.querySelector("#searchInput");
const filterButtons = document.querySelectorAll("[data-status]");
let currentStatus = "전체";

function saveAssignments() {
  localStorage.setItem("assignmentBoardData", JSON.stringify(assignments));
}

function getFilteredAssignments(keyword) {
  const lowerKeyword = keyword.toLowerCase();
  return assignments.filter((item) => {
    const matchStatus = currentStatus === "전체" || item.status === currentStatus;
    const matchKeyword =
      item.student.toLowerCase().includes(lowerKeyword) ||
      item.task.toLowerCase().includes(lowerKeyword) ||
      item.note.toLowerCase().includes(lowerKeyword);
    return matchStatus && matchKeyword;
  });
}

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

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

필터 버튼은 전체, 미제출, 제출완료, 피드백완료 네 개만 두면 충분하다. 수업용 도구는 기능이 많아지는 순간 오히려 느려진다. 먼저 가장 자주 누를 버튼만 살리고, 나머지는 다음 버전으로 미루는 게 맞다.

이 단계에서 꼭 체크할 것

• 검색어가 비어 있을 때 전체 목록이 다시 보이는지
• 상태를 바꾼 뒤 새로고침해도 값이 유지되는지
• 모바일에서 카드 버튼이 옆으로 밀리지 않는지
• 학생 이름이 길어져도 배지 위치가 깨지지 않는지

5단계. 수업 현장용으로 다듬고 점검하기

마지막 단계에서는 예쁜 문장보다 현장 친화성을 챙긴다. 예를 들어 과제명만 적지 말고 2주차 랜딩페이지 초안처럼 주차 정보까지 붙이면 더 실용적이다. 메모도 검토 대기, 보완 요청 예정, 발표 예시로 사용 같은 실제 행동 문장으로 적어두면 바로 쓸 수 있다.

Claude Code에는 마무리 단계에서 아래처럼 요청하면 좋다.

현재 과제 제출 보드를 수업 현장용으로 다듬어줘.
요약 카드에 전체 인원, 제출완료 수, 피드백완료 수를 계산해서 보여줘.
빈 결과일 때 안내 문구를 넣어줘.
모바일 화면에서 카드 간격과 버튼 높이를 정리해줘.
색상은 차분하게 유지하고 상태 배지는 눈에 띄게 만들어줘.

마지막 확인 명령도 꼭 돌린다.

npm run dev
npm run build
npm run preview

바이브 코딩의 포인트는 모든 코드를 외우는 데 있지 않다. 내가 원하는 결과를 분해해서 지시하고, 나온 결과를 검수하고, 다시 한 번 더 다듬는 루프를 몸에 익히는 데 있다. 그 루프가 잡히면 비전공자도 꽤 빨리 실무 도구를 만든다.

Q&A

Q1. 처음부터 로그인 기능까지 넣어야 하나

아니다. 처음에는 로컬에서 돌아가는 작은 결과물이 더 중요하다. 로그인까지 한 번에 넣으면 구조가 급격히 복잡해진다. 오늘은 관리 보드 하나를 끝내는 데 집중하는 편이 낫다.

Q2. 수강생이 직접 입력하게 만들 수 있나

가능하다. 하지만 그건 다음 단계다. 먼저 강사용 확인 보드를 만든 뒤, 별도 제출 폼을 붙이는 순서가 안정적이다. 한 번에 두 시스템을 같이 만들면 오류를 잡기 어려워진다.

Q3. AntiGravity와 Claude Code 중 무엇부터 켜야 하나

레이아웃 감이 없으면 AntiGravity부터, 기능 요구가 이미 또렷하면 Claude Code부터 시작하면 된다. 오늘 같은 실습은 AntiGravity로 흐름을 보고 Claude Code로 구현하는 순서가 잘 맞는다.

오늘 5분 실습

• 샘플 데이터 3개를 6개로 늘려보기
• 상태 배지 색상을 직접 바꿔보기
• 검색창에서 학생 이름뿐 아니라 과제명도 찾히는지 확인하기
• 미제출만 보이게 필터한 뒤 상태를 바꾸고 결과가 즉시 반영되는지 테스트하기

딱 여기까지 해보면 비전공자도 웹앱이 어떻게 자라는지 감이 온다. 작은 수정 한 번이 두려움을 꽤 많이 없앤다.

미래이음연구소

마무리

오늘 만든 과제 제출 현황 보드는 거창한 서비스는 아니다. 그런데 바로 그래서 좋다. 비전공자가 바이브 코딩을 자기 일로 끌어오는 가장 빠른 길은 작은 불편 하나를 직접 해결하는 경험이다. AntiGravity로 화면을 먼저 보고, Claude Code로 기능을 붙이고, 마지막에 내가 검수하는 흐름만 익혀도 다음 결과물은 훨씬 빨라진다. 오늘은 과제 보드로 끝내고, 내일은 여기에 제출 폼이나 피드백 요약 기능을 붙여보면 된다.

참고자료

• Anthropic, Claude for Creative Work
• Claude Code overview
• Vite Guide