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

왜 지금 과제 제출 보드인가

비전공자가 바이브 코딩을 시작할 때 가장 자주 막히는 지점은 대단한 서비스를 만들려다가 흐름이 끊기는 순간이다. 그래서 오늘 주제는 의외로 단순한 과제 제출 보드다. 수업명, 제출 상태, 마감일만 보여주는 작은 앱이지만, 이 안에 바이브 코딩의 핵심이 다 들어 있다. Claude Code는 해야 할 일을 자연어로 정리하고 코드를 빠르게 만들어 주는 쪽에 강하고, AntiGravity는 에이전트 관점에서 작업 흐름과 미리보기, 브라우저 확인을 묶어 다루기 좋다. 즉 한쪽은 코딩 속도, 다른 한쪽은 작업 통제력을 챙기는 조합이다.

실무에서도 이런 작은 보드가 바로 쓰인다. 학원 과제 관리, 특강 신청자 후속 안내, 독서모임 제출 현황, 사내 교육 체크리스트까지 거의 같은 구조다. 큰 서비스를 흉내 내는 것보다 이런 작은 업무판 하나를 완성하는 편이 훨씬 빨리 감을 잡는다.

Claude Code와 AntiGravity 준비

Anthropic Claude Code 문서의 빠른 시작 흐름은 설치 후 바로 프로젝트 폴더에서 작업을 시작하는 방식이다. Google Antigravity 시작 가이드는 에이전트 매니저, 에디터, 브라우저 같은 화면을 중심으로 작업을 조율하는 구조를 강조한다. 둘을 같이 쓰면 초보자도 지금 무엇을 만들고 있는지 덜 헷갈린다.

1. 새 프로젝트 만들기

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

여기까지 되면 브라우저에서 기본 React 화면이 열린다. 이 시점에서 Claude Code에는 구조를 설명하고, AntiGravity에서는 에디터와 브라우저 미리보기를 나란히 띄워두면 좋다.

2. Claude Code에 첫 지시 주기

claude

React로 과제 제출 보드를 만들어줘.
필드는 제목, 제출자, 마감일, 제출상태 네 개만 사용해.
상태는 완료, 확인중, 미제출 세 가지로 보여주고
초보자가 읽기 쉬운 컴포넌트 구조로 작성해.

핵심은 길게 설명하는 것이 아니라 데이터 구조와 화면 목적을 또렷하게 주는 것이다. 비전공자는 여기서 “예쁘게 만들어줘”보다 “무엇을 보여줄지”를 먼저 말해야 덜 꼬인다.

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

1단계. 데이터부터 단순하게 고정하기

src/App.jsx를 열고 아래처럼 시작한다. 처음부터 서버 연동까지 욕심내면 바로 피곤해진다. 오늘은 고정 데이터로 완성 경험을 만드는 게 목적이다.

const submissions = [
  { id: 1, title: "AI 자기소개 글쓰기", student: "김하늘", due: "2026-05-08", status: "완료" },
  { id: 2, title: "홍보 문안 초안", student: "박준호", due: "2026-05-09", status: "확인중" },
  { id: 3, title: "수업 후기 카드뉴스", student: "이서윤", due: "2026-05-10", status: "미제출" }
];

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: "920px", margin: "40px auto", padding: "24px" }}>
      <h1>과제 제출 보드</h1>
      <p>오늘 수업 제출 상태를 한 화면에서 확인하는 간단한 실습 앱</p>
      <div style={{ display: "grid", gap: "16px", marginTop: "24px" }}>
        {submissions.map((item) => (
          <div key={item.id} style={{ border: "1px solid #e5e7eb", borderRadius: "16px", padding: "20px" }}>
            <h3 style={{ marginTop: 0 }}>{item.title}</h3>
            <p>제출자: {item.student}</p>
            <p>마감일: {item.due}</p>
            <span style={{ ...statusStyle[item.status], padding: "6px 12px", borderRadius: "999px", fontWeight: 700 }}>
              {item.status}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

여기서 AntiGravity 브라우저 패널로 결과를 확인하면서 카드 간격, 글자 크기, 색상만 조금씩 조정하면 된다. 초보자는 코드 한 줄을 많이 쓰는 것보다, 바뀐 화면을 바로 보는 경험이 훨씬 중요하다.

4단계. Claude Code로 한 번 더 다듬기

제출 상태별 개수를 상단 요약 카드로 추가해줘.
모바일에서도 카드가 너무 넓지 않게 정리하고
코드는 초보자가 읽기 쉽게 유지해줘.

이렇게 두 번째 지시를 주면 Claude Code가 이미 만든 구조를 크게 망가뜨리지 않으면서 확장해주기 쉽다. 한 번에 다 시키는 것보다 작게 나눠 지시하는 편이 결과가 안정적이다.

실수 방지 체크포인트

• 처음부터 로그인, 데이터베이스, 관리자 페이지를 붙이지 말 것
• 프롬프트에 기능을 7개 이상 한꺼번에 넣지 말 것
• 코드가 길어지면 Claude Code에게 요약 설명도 같이 요청할 것
• AntiGravity에서는 에디터와 브라우저를 함께 보며 수정 결과를 즉시 확인할 것
• 완성 기준을 먼저 정할 것. 오늘은 제출 목록이 뜨면 성공이다

Q&A

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

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

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

가능하다. 하지만 처음 배우는 단계에서는 코드 생성과 작업 흐름 관리를 분리하면 덜 막힌다. 그래서 두 도구를 같이 소개하는 것이다.

Q3. 실무 적용은 어디서 시작하면 되나

가장 좋은 시작은 현재 운영 중인 수업이나 모임의 제출 현황판이다. 이미 아는 업무를 앱으로 바꾸면 요구사항이 선명해진다.

오늘 5분 실습

1. 위 명령어로 Vite React 프로젝트를 만든다
2. 제출 데이터 3개만 고정 배열로 넣는다
3. 상태 색상만 완료, 확인중, 미제출로 나눈다
4. Claude Code에 상단 요약 카드 추가만 따로 요청한다
5. AntiGravity 브라우저에서 모바일 폭으로 한 번 줄여 본다

마무리

바이브 코딩은 거창한 앱에서 시작하지 않아도 된다. 오늘처럼 과제 제출 보드 하나만 제대로 만들어도, 자연어로 기능을 쪼개고 화면으로 검수하는 흐름을 익힐 수 있다. Claude Code는 손을 빠르게 만들고, AntiGravity는 흐름을 덜 잃게 돕는다. 비전공자에게 필요한 것은 완벽한 문법보다 작은 성공을 반복하는 구조다. 오늘 만든 보드를 수업 출석판, 상담 접수판, 피드백 확인판으로 바꾸는 순간 실무 앱이 된다.

참고자료

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