Claude Code와 AntiGravity로 비전공자가 수업 후기 정리 보드 만드는 실습 튜토리얼

왜 수업 후기 정리 보드가 좋은 첫 실습인가

비전공자가 바이브 코딩을 배울 때 제일 빨리 손에 잡히는 결과물은 복잡한 서비스가 아니라 이미 내 손에 있는 자료를 보기 좋게 바꾸는 화면이다. 수업 후기 정리 보드는 특히 좋다. 강의 만족도, 기억에 남은 한 줄, 다음에 보강할 포인트를 카드로 묶어 보여주면 결과가 바로 눈에 보이고, 데이터 구조와 화면 구조를 같이 익힐 수 있다.

Claude Code는 파일 생성과 수정 같은 공사 쪽이 강하고, AntiGravity는 화면 순서와 사용자 동선을 먼저 보는 데 강하다. 이 조합으로 가면 비전공자도 코드 한 줄 한 줄에 매달리지 않고, 무엇을 만들고 있는지 흐름을 유지하기 쉽다. 오늘 목표는 화려한 서비스가 아니라 후기 데이터를 필터링해서 읽기 쉬운 보드로 바꾸는 경험이다.

Claude Code와 AntiGravity 역할 나누기

둘을 같이 쓸 때 핵심은 중복 지시를 줄이는 것이다. Claude Code에는 파일 작업과 컴포넌트 연결을 맡기고, AntiGravity에는 첫 화면 이해도와 버튼 동선을 검토하게 하면 된다. 역할을 나누면 초보자도 훨씬 덜 헷갈린다.

• Claude Code: 프로젝트 생성, 데이터 파일 작성, 컴포넌트 연결, 스타일 수정
• AntiGravity: 첫 화면에서 무엇이 먼저 보여야 하는지, 필터가 과한지, 카드 정보가 읽히는지 검토
• 사용자: 어떤 후기 항목이 중요한지 선택하고 최종 화면을 결정

즉 Claude Code는 작업반장, AntiGravity는 사용 흐름 감리라고 보면 된다. 둘 다에게 한 번에 앱 전체를 맡기면 설명은 길어지고 수정 지점은 흐려진다. 작은 덩어리로 나눌수록 결과가 안정적이다.

1단계. 가장 작은 React 프로젝트 만들기

오늘 예시는 React와 Vite 기준으로 간다. 이유는 단순하다. 설치가 빠르고 파일 수가 적어서 비전공자가 전체 구조를 보기 쉽다. 먼저 빈 프로젝트를 만들고 바로 실행한다.

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

여기서 중요한 건 시작부터 욕심을 줄이는 일이다. 검색창, 만족도 필터, 후기 카드 이 세 개만 먼저 만든다. 로그인, 데이터베이스, 관리자 페이지는 오늘 버린다. 완성 경험이 먼저다.

Claude Code에는 아래처럼 짧게 요청하면 된다.

React Vite 프로젝트에서 수업 후기 정리 보드 화면을 만들어 줘.
상단에 검색창과 만족도 필터를 두고,
아래에는 후기 카드를 그리드로 보여 줘.
모바일에서도 카드가 한 줄씩 자연스럽게 보이게 해 줘.

2단계. 후기 데이터를 구조화하기

초보자가 자주 놓치는 부분이 데이터 모양이다. 후기를 그냥 긴 문장으로만 두면 나중에 필터가 약해진다. 최소한 제목, 만족도, 대상 과정, 핵심 한 줄, 다음 액션 정도는 나눠두는 편이 좋다. 아래처럼 src/data/reviews.js를 만들면 시작이 편하다.

export const reviews = [
  {
    id: 1,
    course: "AI 문서작성",
    rating: "매우만족",
    title: "실무에 바로 써먹을 수 있었다",
    summary: "보고서 초안 만드는 시간이 크게 줄었다",
    nextAction: "다음 시간에는 프롬프트 저장 템플릿 추가"
  },
  {
    id: 2,
    course: "바이브 코딩 입문",
    rating: "만족",
    title: "코딩이 덜 무섭게 느껴졌다",
    summary: "검색창과 카드 UI를 직접 만들며 흐름을 이해했다",
    nextAction: "실습 예제를 하나 더 늘려 보기"
  },
  {
    id: 3,
    course: "업무자동화 실습",
    rating: "매우만족",
    title: "반복 업무를 줄일 수 있겠다",
    summary: "메일 정리와 일정 확인 자동화 예시가 인상적이었다",
    nextAction: "팀 공용 체크리스트 자동화 실습 연결"
  }
];

이 구조의 장점은 명확하다. 무엇이 좋았는지와 다음 보강 포인트가 분리되기 때문에, 단순 후기 모음이 아니라 다음 강의 개선 자료로도 바로 쓸 수 있다. 바이브 코딩은 결국 예쁜 코드보다 다음 액션이 남는 데이터 구조가 중요하다.

3단계. 필터와 카드 화면 붙이기

이제 Claude Code가 강한 구간이다. 검색어와 만족도 상태를 받아서 보이는 카드만 바꾸면 된다. 아래처럼 App.jsx를 단순하게 시작하면 충분하다.

import { useMemo, useState } from "react";
import { reviews } from "./data/reviews";

export default function App() {
  const [query, setQuery] = useState("");
  const [rating, setRating] = useState("전체");

  const filteredReviews = useMemo(() => {
    return reviews.filter((review) => {
      const matchQuery =
        review.title.includes(query) ||
        review.summary.includes(query) ||
        review.course.includes(query);

      const matchRating = rating === "전체" || review.rating === rating;
      return matchQuery && matchRating;
    });
  }, [query, rating]);

  return (
    <main className="wrap">
      <h1>수업 후기 정리 보드</h1>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="과정명, 후기 제목, 핵심 문장을 검색"
      />
      <div className="filters">
        {["전체", "매우만족", "만족"].map((item) => (
          <button key={item} onClick={() => setRating(item)}>{item}</button>
        ))}
      </div>
      <section className="grid">
        {filteredReviews.map((review) => (
          <article key={review.id} className="card">
            <p className="badge">{review.rating}</p>
            <h2>{review.title}</h2>
            <p>{review.summary}</p>
            <strong>다음 액션</strong>
            <p>{review.nextAction}</p>
          </article>
        ))}
      </section>
    </main>
  );
}

여기서 포인트는 멋진 아키텍처가 아니다. 검색어 하나 넣었을 때 카드가 바로 줄어드는지, 만족도 버튼을 누르면 목록이 즉시 바뀌는지, 이 작은 반응을 만드는 게 중요하다. 비전공자에게는 이 한 번의 반응이 다음 실습으로 가는 연료가 된다.

4단계. AntiGravity로 동선 검수하기

화면이 뜨면 바로 기능을 더 붙이고 싶어지는데, 그 전에 AntiGravity로 첫 화면 동선을 검수하는 편이 낫다. 검색창이 너무 아래 있지 않은지, 만족도 버튼이 시선을 분산시키지 않는지, 카드 안 정보가 과하지 않은지 보는 식이다. 코드보다 동선을 먼저 보면 수정 횟수가 줄어든다.

예를 들어 AntiGravity에는 이렇게 요청하면 된다.

수업 후기 정리 보드를 초보자 관점에서 검토해 줘.
첫 화면에서 검색창 목적이 바로 보이는지,
만족도 필터가 헷갈리지 않는지,
카드 안에 꼭 필요한 정보만 남았는지 확인해 줘.

검토 결과가 나오면 Claude Code에는 작게 나눠 다시 지시한다. 예를 들면 검색 placeholder를 더 쉽게 바꿔 줘, 만족도 배지 색을 구분해 줘, 카드 하단 여백을 줄여 줘 정도면 충분하다. 큰 요청 한 번보다 작은 요청 세 번이 훨씬 덜 망가진다.

5단계. 비전공자가 자주 막히는 부분 줄이기

이 단계에서 초보자는 늘 비슷한 데서 멈춘다. 파일 경로가 틀리거나, 상태값은 바뀌는데 화면이 안 줄어들거나, 데이터 배열 이름이 헷갈린다. 이럴 때는 긴 설명보다 체크포인트가 더 잘 먹힌다.

• 검색이 안 되면 input의 value와 onChange가 연결됐는지 먼저 본다.
• 카드가 안 보이면 reviews 배열 export와 import 경로를 먼저 확인한다.
• 필터가 안 먹히면 rating 기본값이 전체인지, 버튼 클릭 시 setRating이 실행되는지 본다.
• 후기 문장이 길면 summary와 nextAction을 분리해 카드 높이를 줄인다.

이 정도 체크리스트만 있어도 비전공자는 훨씬 덜 무너진다. 바이브 코딩의 생산성은 AI가 대신 친 코드량보다, 내가 다시 들어가 고칠 수 있는 거리까지 줄여주는 데서 나온다.

Q&A

Q1. 꼭 React여야 하나

아니다. HTML 파일 하나로도 가능하다. 다만 검색 상태와 필터 상태를 함께 다루려면 React가 조금 더 읽기 쉽다.

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

된다. 하지만 둘을 나눠 쓰면 코드 작성과 사용 흐름 검토가 분리돼서 초보자가 덜 지친다.

Q3. 이 보드를 어디까지 확장할 수 있나

강의 만족도 리포트, 자주 나온 질문 모음, 과정별 개선 이력 보드까지 자연스럽게 이어진다. 오늘 만든 구조가 씨앗이다.

Q4. 데이터베이스 없이도 의미가 있나

충분하다. 처음에는 배열 데이터만으로도 필터와 화면 구조를 이해하는 데 큰 도움이 된다.

오늘 5분 실습

1. 후기 3개만 가진 reviews.js 파일을 만든다.
2. 검색창 하나와 카드 목록 하나만 먼저 띄운다.
3. 만족도 버튼은 전체 포함 3개로 제한한다.
4. Claude Code에게 카드 간격만 수정해 달라고 짧게 요청한다.
5. AntiGravity로 첫 화면 이해도를 한 번 검토받는다.

딱 여기까지만 해도 오늘 실습은 성공이다. 많이 만드는 것보다 끝까지 보는 게 먼저다.

마무리

오늘 만든 수업 후기 정리 보드는 겉으로 보면 작은 화면이다. 그런데 비전공자 입장에서는 꽤 큰 전환점이 된다. 자료를 그냥 쌓아두는 상태에서 구조화된 데이터로 넘어오고, AI에게 막연히 부탁하던 방식에서 역할을 나눠 지시하는 방식으로 넘어가기 때문이다. Claude Code는 코드 공사를 빠르게 밀어주고, AntiGravity는 화면 흐름을 덜 삐끗하게 잡아준다.

결국 바이브 코딩은 거대한 서비스를 한 번에 만드는 기술이 아니다. 지금 손에 있는 자료 하나를 작게 구조화하고, AI 도구를 적절히 분업시켜 끝까지 완성하는 감각에 가깝다. 오늘 후기 보드 하나 완성했다면 이미 방향은 제대로 잡은 셈이다.

참고자료

• Anthropic Claude Code Docs, Quickstart
• Anthropic Claude Code Docs, Tutorials
• Google Antigravity Tutorial