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

왜 지금 출석 체크 대시보드인가

비전공자가 바이브 코딩을 익힐 때 제일 중요한 건 거창한 서비스를 붙잡지 않는 것이다. 오늘 실습 주제를 출석 체크 대시보드로 잡은 이유가 여기 있다. 입력값은 이름, 과정명, 출석 상태 정도로 단순하지만, 실제 현장에서는 강의 운영, 특강 관리, 스터디 참여 확인처럼 바로 써먹을 수 있다. Claude Code는 자연어 요구사항을 코드로 빠르게 바꾸는 데 강하고, AntiGravity는 여러 작업을 나눠서 검증하고 브라우저에서 확인하는 흐름이 강점이다. 둘을 같이 쓰면 비전공자도 생각보다 빠르게 작은 도구를 완성할 수 있다.

핵심은 완벽한 코드가 아니라 돌아가는 첫 버전을 빨리 만드는 것이다. 출석 체크 대시보드는 표 렌더링, 상태 색상, 필터 버튼, 브라우저 검증까지 한 번에 연습하기 좋다. 오늘 한 번 만들어 보면 다음에는 신청자 명단, 상담 예약판, 과제 진행판으로 그대로 확장할 수 있다.

Claude Code와 AntiGravity 준비

1. 프로젝트 뼈대 먼저 만든다

처음부터 프레임워크를 깊게 이해하려고 하지 말고, 실행되는 개발 환경을 먼저 만든다. 가장 무난한 선택은 Vite 기본 템플릿이다.

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

브라우저에서 기본 화면이 뜨면 절반은 끝났다. 비전공자는 이 단계에서 막히면 안 된다. 명령어를 한 줄씩 복사해서 실행하고, 에러가 나오면 그대로 Claude Code에 붙여넣으면 된다.

2. Claude Code에 첫 작업을 맡긴다

프로젝트 폴더에서 Claude Code를 열고, 한 번에 너무 많은 요구를 던지지 말고 기능 단위로 나눠서 요청한다.

claude

출석 체크 대시보드를 만들어줘.
조건은 아래와 같아.
- 이름, 과정명, 출석 상태, 메모 필드가 보이는 표
- 출석, 지각, 결석 상태별 색상 배지
- 상단에 전체, 출석, 지각, 결석 필터 버튼
- 모바일에서도 표가 깨지지 않게 구성
- sampleData 배열로 예시 데이터 8개 포함
- 완료 후 npm run build로 확인

이렇게 요청하면 Claude Code가 필요한 파일을 읽고 수정 방향을 제안한다. 비전공자 입장에서는 코드를 한 줄씩 쓰는 것보다, 요구사항을 정확하게 적는 능력이 더 중요하다. 여기서 말이 곧 설계다.

3. AntiGravity에서는 검증 중심으로 쓴다

AntiGravity에서는 같은 일을 다시 시키는 것보다, Claude Code가 만든 결과를 검토하고 부족한 부분을 다듬는 역할로 쓰면 효율이 좋다. 예를 들어 에이전트에게 아래처럼 맡기면 된다.

현재 attendance-board 프로젝트를 검토해줘.
- 필터 버튼이 실제로 상태를 잘 거르는지 확인
- 모바일 폭에서 레이아웃이 깨지는지 확인
- 시인성이 떨어지는 버튼이나 배지가 있으면 수정안 제안
- 브라우저에서 확인한 뒤 수정 결과를 요약

이 흐름이 중요한 이유는 바이브 코딩이 단순 생성에서 끝나면 금방 무너지기 때문이다. 생성 다음에는 검증, 그 다음에는 수정이 붙어야 실무에서 쓸 수 있다.

비전공자용 단계별 실습

1. 화면 구조를 먼저 이해한다

이번 앱은 복잡하지 않다. 상단 제목, 상태 필터 버튼, 출석 현황 카드, 아래 표만 있으면 된다. Claude Code가 파일을 만들어 줬더라도 최소한 어떤 블록이 어떤 역할인지 눈으로는 구분할 수 있어야 다음 수정이 쉬워진다.

<section class="toolbar">필터 버튼</section>
<section class="summary">요약 카드</section>
<section class="table-wrap">출석 표</section>

이 세 덩어리만 이해해도 비전공자 실습은 훨씬 편해진다. 어려운 건 문법이 아니라 구조를 못 잡아서 겁먹는 순간이다.

2. 샘플 데이터는 직접 확인한다

AI가 만든 데이터가 이상하면 결과 화면도 이상해진다. sampleData 배열 정도는 직접 보고 이름, 상태, 메모가 잘 들어갔는지 확인하자.

const sampleData = [
  { name: "김하늘", course: "AI 글쓰기", status: "출석", note: "과제 제출 완료" },
  { name: "박민서", course: "바이브 코딩", status: "지각", note: "10분 늦게 입장" },
  { name: "이도윤", course: "업무자동화", status: "결석", note: "사전 연락 있음" }
];

데이터를 바꾸는 것만으로도 자신감이 붙는다. 비전공자에게 가장 좋은 첫 수정은 레이아웃보다 데이터 수정이다. 눈에 바로 보이고, 실패해도 복구가 쉽다.

3. 필터 로직은 이 정도만 알아도 된다

상태 버튼을 누르면 해당 상태만 다시 그리면 된다. 아래 로직은 길지 않아서 직접 읽어볼 만하다.

function filterRows(status) {
  const rows = status === "전체"
    ? sampleData
    : sampleData.filter((item) => item.status === status);

  renderTable(rows);
  renderSummary(rows);
}

여기서 기억할 건 하나다. 버튼은 데이터를 바꾸는 것이 아니라 화면에 보여줄 목록을 바꾼다. 이 차이만 이해해도 나중에 검색창, 날짜 필터, 과정별 필터로 쉽게 확장할 수 있다.

4. 스타일 수정은 구체적으로 지시한다

AI 코딩 도구는 막연한 예쁘게보다 구체적 지시에 훨씬 잘 반응한다. 예를 들어 아래처럼 요청하면 결과가 좋아진다.

상태 배지는 출석은 초록, 지각은 주황, 결석은 빨강으로 보여줘.
표 헤더는 진한 남색, 카드 배경은 흰색, 전체 배경은 연한 회색으로 맞춰줘.
모바일에서는 표를 가로 스크롤 가능하게 처리해줘.

이 방식은 디자인 감각이 약한 사람에게 특히 유리하다. 감성 표현 대신 속성 표현으로 말하면 된다.

검증과 수정 루프 만들기

Claude Code가 초안을 만들고, AntiGravity가 브라우저 기준으로 검증하는 흐름을 한 번 경험하면 바이브 코딩 생산성이 확 올라간다. 권장 순서는 아래와 같다.

1. Claude Code로 기본 기능 구현
2. npm run dev로 로컬 실행
3. AntiGravity로 버튼 동작, 모바일 화면, 표 정렬 확인
4. 문제점을 다시 Claude Code에 짧은 문장으로 전달
5. 마지막에 npm run build로 배포 전 점검

이 루프를 지키면 비전공자도 무작정 복붙하는 단계에서 벗어난다. 중요한 건 도구를 여러 개 쓰는 게 아니라, 생성과 검증의 역할을 분리하는 습관이다.

npm run build

build가 통과하면 최소한 문법 수준의 큰 문제는 줄어든다. 브라우저에서 한 번 더 눌러보고 저장하면 된다.

실수 방지 체크포인트

• 한 번에 로그인, DB 저장, 엑셀 업로드까지 다 넣지 말 것
• 상태값을 출석, 지각, 결석처럼 고정해서 오타를 줄일 것
• 에러 메시지는 요약하지 말고 그대로 Claude Code에 전달할 것
• 표가 길어지면 모바일에서 가로 스크롤을 허용할 것
• AntiGravity 검증 결과를 보고 수정할 때는 한 번에 한 문제씩 고칠 것

Q&A

Q1. 코드를 거의 몰라도 해볼 수 있나

가능하다. 대신 요구사항을 짧고 구체적으로 말해야 한다. 잘 만들어 달라보다 표를 만들고 상태 필터를 넣어달라가 훨씬 잘 먹힌다.

Q2. Claude Code와 AntiGravity를 둘 다 꼭 써야 하나

꼭 그렇진 않다. 하지만 하나는 생성, 하나는 검증에 배치하면 훨씬 안정적이다. 특히 브라우저 확인이 필요한 화면 작업은 AntiGravity 쪽이 감이 좋다.

Q3. 다음 단계로 뭘 붙이면 좋나

CSV 업로드, 날짜별 출석 필터, 과정명 검색, 결석자만 메시지 추출 같은 기능이 좋다. 오늘 만든 대시보드를 업무 도구로 바꾸는 가장 빠른 길이다.

오늘 5분 실습

1. sampleData에 본인 수업이나 모임 기준으로 5명 데이터를 다시 넣는다.
2. 상태를 신청완료, 대기, 취소로 바꿔 본다.
3. Claude Code에 카드 상단에 총원 수를 더 크게 보여달라고 요청한다.
4. AntiGravity에서 모바일 화면만 따로 확인한다.

이 5분만 해도 같은 구조로 신청자 관리판을 다시 만들 수 있다. 그때부터 바이브 코딩이 진짜 자기 일이 된다.

미래이음연구소 안내

마무리

오늘 만든 출석 체크 대시보드는 겉으로 보면 작은 예제지만, 바이브 코딩의 기본기를 거의 다 담고 있다. Claude Code로 초안을 만들고, AntiGravity로 검증하고, 다시 수정하는 루프를 몸에 익히면 다음에는 신청자 관리판, 상담 예약판, 과제 현황판도 같은 방식으로 확장된다. 비전공자에게 필요한 건 천재적인 코딩 실력이 아니라, 작게 만들고 바로 확인하는 리듬이다. 그 리듬만 잡히면 AI 코딩은 더 이상 구경거리가 아니라 실무 도구가 된다.

참고자료

• Claude Code overview
• Google Antigravity product 소개 페이지
• Vite 시작 가이드