Claude Code와 AntiGravity로 수강생 출석 체크 보드 만들기, 비전공자용 바이브 코딩 실습 튜토리얼

왜 지금 출석 체크 보드인가

비전공자가 바이브 코딩을 배울 때 제일 빨리 감이 오는 주제는 이미 매일 손으로 하던 일을 화면 하나로 바꾸는 것이다. 출석 체크 보드는 딱 그 조건에 맞는다. 수강생 이름, 출석 상태, 지각 여부, 메모 정도만 다뤄도 화면 설계, 상태 표시, 필터, 요약 카드까지 기본기가 한 번에 들어간다. Claude Code는 기능을 빠르게 구조화하는 데 강하고, AntiGravity는 작업 흐름과 미리보기를 한 화면에서 확인하기 좋다. 둘을 같이 쓰면 비전공자도 지금 무엇을 만들고 있는지 놓치지 않는다.

실무 적용 범위도 넓다. 학원 수업 출석, 특강 참가 체크, 사내 교육 참석 현황, 독서모임 출결 관리까지 거의 같은 구조로 바꿔 쓸 수 있다. 거대한 서비스보다 작은 운영판 하나를 끝까지 완성하는 편이 훨씬 빨리 실력이 붙는다.

Claude Code와 AntiGravity 준비

오늘 실습은 React로 아주 작은 출석 체크 보드를 만드는 흐름이다. Claude Code에는 요구사항을 짧고 분명하게 주고, AntiGravity에서는 에디터와 브라우저를 같이 열어 바뀐 결과를 계속 확인한다. 핵심은 한 번에 다 시키지 않고 단계별로 나누는 것이다.

1. 새 프로젝트 만들기

npm create vite@latest attendance-board -- --template react
cd attendance-board
npm install
npm run dev

여기까지 되면 브라우저에서 기본 React 화면이 뜬다. 이 시점부터 Claude Code에는 구조 요청을 보내고, AntiGravity에서는 미리보기를 열어 바로 확인하면 된다.

2. Claude Code에 첫 지시 주기

claude

React로 수강생 출석 체크 보드를 만들어줘.
필드는 이름, 수업명, 출석상태, 입실시간, 메모 다섯 개만 사용해.
상태는 출석, 지각, 결석 세 가지로 보여주고
초보자가 읽기 쉬운 컴포넌트 구조로 작성해.

여기서 중요한 포인트는 예쁘게보다 무엇을 보여줄지를 먼저 말하는 것이다. 비전공자는 화면 목적이 선명할수록 결과가 덜 꼬인다.

비전공자도 따라가는 단계별 실습

1단계. 고정 데이터로 먼저 성공 경험 만들기

src/App.jsx에서 서버 연동 욕심은 잠깐 접어두고 고정 배열부터 넣는다. 오늘 목표는 작동하는 화면을 완성하는 것이다.

const attendanceData = [
  { id: 1, name: "김하늘", className: "AI 글쓰기", status: "출석", time: "09:58", note: "과제 제출 완료" },
  { id: 2, name: "박준호", className: "AI 글쓰기", status: "지각", time: "10:07", note: "버스 지연" },
  { id: 3, name: "이서윤", className: "AI 글쓰기", status: "결석", time: "-", note: "사전 연락" },
  { id: 4, name: "최민재", className: "AI 글쓰기", status: "출석", time: "09:55", note: "질문 있음" }
];

이 단계에서 이미 화면에 학생 목록만 떠도 반은 끝난 셈이다. 비전공자는 완벽함보다 보이는 결과를 빨리 확보하는 게 중요하다.

2단계. 상태별 색상 규칙을 따로 분리하기

const statusStyle = {
  출석: { background: "#dcfce7", color: "#166534" },
  지각: { background: "#fef3c7", color: "#92400e" },
  결석: { background: "#fee2e2", color: "#991b1b" }
};

이 한 줄 분리가 생각보다 중요하다. 화면 코드와 규칙 코드를 나누는 감각이 여기서 생긴다. Claude Code에 상태 색상 규칙을 따로 빼 달라고 요청하면 코드가 훨씬 읽기 쉬워진다.

3단계. 카드형 화면을 붙이기

export default function App() {
  return (
    <div style={{ maxWidth: "960px", margin: "40px auto", padding: "24px" }}>
      <h1>수강생 출석 체크 보드</h1>
      <p>오늘 수업 출결 상태를 한 화면에서 확인하는 실습 앱</p>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "16px", marginTop: "24px" }}>
        {attendanceData.map((item) => (
          <div key={item.id} style={{ border: "1px solid #e5e7eb", borderRadius: "16px", padding: "20px", background: "#ffffff" }}>
            <h3 style={{ marginTop: 0, marginBottom: "12px" }}>{item.name}</h3>
            <p>수업명: {item.className}</p>
            <p>입실시간: {item.time}</p>
            <p>메모: {item.note}</p>
            <span style={{ ...statusStyle[item.status], padding: "6px 12px", borderRadius: "999px", fontWeight: 700 }}>
              {item.status}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

여기서 AntiGravity 브라우저 패널을 같이 보면 카드 간격, 글자 크기, 배경색을 고칠 때 바로 결과가 보인다. 초보자에게는 이 즉시 피드백이 진짜 중요하다.

4단계. 상단 요약 카드와 필터 붙이기

이제 Claude Code에 한 번 더 짧게 지시한다.

출석, 지각, 결석 인원을 상단 요약 카드로 추가해줘.
상태별 필터 버튼도 넣고
모바일에서 카드가 너무 넓지 않게 정리해줘.

이런 식으로 두 번째 요청을 보내면 기존 구조를 크게 망가뜨리지 않으면서 필요한 기능만 확장할 수 있다. 한 번에 달려들면 코드가 길어지고, 비전공자는 어디가 바뀌었는지 놓치기 쉽다.

5단계. 체크 버튼까지 붙이면 실습 완성

const toggleStatus = (id) => {
  setAttendanceData((prev) =>
    prev.map((item) =>
      item.id === id
        ? {
            ...item,
            status:
              item.status === "출석"
                ? "지각"
                : item.status === "지각"
                ? "결석"
                : "출석"
          }
        : item
    )
  );
};

이 함수 하나만 이해해도 상태가 바뀌는 앱이 어떻게 움직이는지 감이 온다. 클릭할 때 값이 바뀌고, 화면이 다시 그려지는 흐름을 몸으로 배우는 것이다.

실수 방지 체크포인트

• 처음부터 로그인, 데이터베이스, 관리자 페이지까지 붙이지 말 것
• 프롬프트에 기능을 한 번에 너무 많이 넣지 말 것
• 코드가 길어지면 Claude Code에 지금 바뀐 부분만 요약해 달라고 요청할 것
• AntiGravity에서는 에디터와 브라우저를 같이 보며 수정 결과를 바로 확인할 것
• 완성 기준을 먼저 정할 것. 오늘은 목록 표시와 상태 변경이 되면 성공이다

Q&A

Q1. 비전공자인데 React를 꼭 깊게 알아야 하나

깊게 알 필요는 없다. 다만 배열, 컴포넌트, 상태 변경 정도는 손으로 한 번 만져봐야 이후 프롬프트 품질이 올라간다.

Q2. Claude Code와 AntiGravity 중 하나만 써도 되나

가능하다. 그래도 처음 배우는 단계에서는 코드 생성과 작업 확인을 분리해 두는 편이 덜 막힌다. 그래서 둘을 같이 쓰는 흐름이 안정적이다.

Q3. 출석 체크 보드를 실무에 바로 쓸 수 있나

가능하다. 오늘 만든 구조를 바탕으로 수업명만 바꾸면 특강 출결, 면담 예약 현황, 상담 체크 보드 같은 운영판으로 금방 확장된다.

오늘 5분 실습

1. Vite React 프로젝트를 만든다
2. 수강생 데이터 4개만 고정 배열로 넣는다
3. 출석, 지각, 결석 색상 규칙을 분리한다
4. Claude Code에 상단 요약 카드만 추가 요청한다
5. AntiGravity에서 모바일 폭으로 줄여 카드 배치를 확인한다

마무리

바이브 코딩은 거창한 서비스에서 시작할 필요가 없다. 오늘처럼 출석 체크 보드 하나만 제대로 만들어도 자연어로 요구사항을 쪼개고, 코드를 확인하고, 화면으로 검수하는 흐름을 충분히 배울 수 있다. Claude Code는 속도를 올려주고, AntiGravity는 작업의 방향을 잃지 않게 잡아준다. 비전공자에게 필요한 것은 완벽한 문법보다 작은 성공을 반복하는 구조다. 오늘 만든 보드를 내일은 상담 접수판, 다음 주에는 과제 확인판으로 바꿔보면 바이브 코딩 감각이 훨씬 빠르게 붙는다.

참고자료

• Claude Code Quickstart
• Getting Started with Google Antigravity
• Google Antigravity Docs