Claude Code와 AntiGravity로 비전공자가 만드는 학습 플래너 웹앱, 하루 30분 바이브 코딩 실습

왜 지금 학습 플래너 실습이 좋은가

비전공자가 바이브 코딩을 배울 때 가장 좋은 연습은 거대한 서비스가 아니라 하루 안에 완성되는 작은 도구다. 오늘 주제는 학습 플래너 웹앱이다. 해야 할 일, 예상 공부 시간, 완료 체크, 오늘 메모를 한 화면에서 정리하는 아주 단순한 페이지다. 겉보기에는 소박하지만 비전공자가 배우기 좋은 요소가 다 들어 있다. 입력창, 버튼, 목록 렌더링, 상태 변경, 저장, 모바일 레이아웃까지 한 번에 다뤄볼 수 있기 때문이다.

Claude Code는 이런 실습에 강하다. 프로젝트 폴더를 읽고 필요한 파일을 만들고, 실행 명령까지 같이 정리해 주기 때문이다. AntiGravity는 반복 규칙을 따로 묶어두는 데 유리하다. 같은 구조를 다음 날 독서기록 앱, 수업 체크리스트, 상담 메모판으로 바꿔 재사용하기 쉽다. 즉 Claude Code는 지금 눈앞의 작업을 밀어붙이는 실행 담당이고, AntiGravity는 다음 작업까지 이어지는 작업 습관을 고정하는 도구라고 보면 된다.

중요한 건 멋진 AI 데모가 아니다. 비전공자가 직접 폴더를 만들고, 실행하고, 화면을 열어 보고, 이상한 부분을 다시 수정 요청하는 흐름을 익히는 것이다. 그 감각이 붙으면 코딩은 문법 암기 과목이 아니라 결과 검수와 개선 작업으로 바뀐다.

Claude Code와 AntiGravity 준비

1. 실습 폴더 만들기

작업 폴더는 영어 소문자 위주로 짧게 가는 편이 편하다.

mkdir study-planner-app
cd study-planner-app

2. Claude Code 실행

프로젝트 폴더 안에서 바로 시작한다.

claude

아직 설치 전이라면 Claude Code 안내 문서 기준으로 macOS와 Linux에서는 아래 방식이 가장 빠르다.

curl -fsSL https://claude.ai/install.sh | bash

3. AntiGravity용 반복 규칙 폴더 만들기

같은 실습을 내일도 반복할 생각이라면 규칙을 따로 모아두는 편이 훨씬 낫다. 아래처럼 최소 구조만 잡아도 충분하다.

mkdir -p .agent/rules .agent/workflows
printf "항상 index.html style.css app.js 세 파일로 시작
" > .agent/rules/project-rule.md
printf "정적 웹앱을 만들고 마지막에 실행 방법까지 적기
" > .agent/workflows/build-static-app.md

이렇게 해두면 다음에는 길게 설명하지 않아도 Claude Code가 같은 패턴을 더 안정적으로 따라온다. 비전공자일수록 매번 다른 방식으로 요구하는 것보다, 반복 규칙을 고정해 두는 편이 훨씬 덜 흔들린다.

학습 플래너 웹앱 만들기

1. 첫 요청은 기능 기준으로 짧고 선명하게 넣기

처음부터 기술 용어를 길게 붙이지 말고 결과물을 먼저 말하는 게 좋다. 아래 프롬프트 정도면 충분하다.

정적 웹앱을 만들어줘.
파일은 index.html, style.css, app.js 세 개로 구성해.
화면에는 할 일 입력, 예상 공부 시간 입력, 오늘 메모, 추가 버튼, 완료 체크, 삭제 버튼이 필요해.
데이터는 localStorage에 저장하고 모바일에서도 보기 쉽게 카드형 UI로 만들어줘.
마지막에는 python3 -m http.server 실행 방법을 화면 아래 안내문으로 넣어줘.

여기서 핵심은 완벽함이 아니라 작동하는 첫 버전이다. 비전공자가 흔히 하는 실수는 로그인, 회원가입, 서버, AI API, 차트까지 한 번에 다 넣으려는 것이다. 그러면 바로 복잡도가 터진다. 첫 실습은 입력하고 저장되고 체크되는 흐름까지만 살아 있으면 된다.

2. HTML 뼈대 예시

Claude Code가 너무 멀리 가면 아래 수준으로 먼저 줄이라고 하면 된다.

<section class="planner-form">
  <input id="taskInput" type="text" placeholder="오늘 공부할 일을 입력" />
  <input id="timeInput" type="number" placeholder="예상 시간" />
  <textarea id="memoInput" placeholder="메모를 적어 보세요"></textarea>
  <button id="addTaskButton">할 일 추가</button>
</section>
<section>
  <ul id="taskList"></ul>
</section>

이 정도만 있어도 충분하다. 화면 입력부와 결과 목록이 분리되고, 이후 자바스크립트가 붙을 자리가 명확해진다.

3. 자바스크립트 핵심 로직 예시

완전한 앱을 다 외울 필요는 없다. 아래 핵심 흐름만 이해하면 된다. 입력값을 읽고, 배열에 넣고, 다시 화면에 뿌리고, localStorage에 저장한다는 감각이다.

const taskInput = document.getElementById("taskInput");
const timeInput = document.getElementById("timeInput");
const memoInput = document.getElementById("memoInput");
const taskList = document.getElementById("taskList");
const addTaskButton = document.getElementById("addTaskButton");

let tasks = JSON.parse(localStorage.getItem("studyPlannerTasks") || "[]");

function saveTasks() {
  localStorage.setItem("studyPlannerTasks", JSON.stringify(tasks));
}

function renderTasks() {
  taskList.innerHTML = tasks.map((task, index) => `
    <li class="task-card ${task.done ? "done" : ""}">
      <strong>${task.name}</strong>
      <p>예상 시간: ${task.minutes}분</p>
      <p>${task.memo}</p>
      <button onclick="toggleTask(${index})">완료 전환</button>
      <button onclick="removeTask(${index})">삭제</button>
    </li>
  `).join("");
}

function toggleTask(index) {
  tasks[index].done = !tasks[index].done;
  saveTasks();
  renderTasks();
}

function removeTask(index) {
  tasks.splice(index, 1);
  saveTasks();
  renderTasks();
}

addTaskButton.addEventListener("click", () => {
  const name = taskInput.value.trim();
  const minutes = timeInput.value.trim();
  const memo = memoInput.value.trim();

  if (!name || !minutes) {
    alert("할 일과 시간을 먼저 입력해 주세요");
    return;
  }

  tasks.unshift({ name, minutes, memo, done: false });
  saveTasks();
  renderTasks();
  taskInput.value = "";
  timeInput.value = "";
  memoInput.value = "";
});

renderTasks();

이 코드가 좋은 이유는 복잡한 외부 연결 없이도 바로 결과가 보이기 때문이다. 비전공자에게 필요한 건 거대한 프레임워크보다 입력값이 데이터가 되고, 데이터가 화면으로 돌아오는 구조를 몸으로 익히는 것이다.

4. 바로 실행해서 확인하기

python3 -m http.server 4173

브라우저에서 http://localhost:4173 를 열고 할 일 몇 개를 넣어 본다. 공부 시간 숫자가 안 보이거나 완료 상태 표시가 어색하면 Claude Code에게 증상 기준으로 다시 지시하면 된다. 예를 들면 완료된 카드는 흐리게 보여줘, 총 예상 시간을 상단에 합계로 보여줘, 모바일에서 버튼이 줄바꿈되게 해줘처럼 말하면 된다. 이게 바이브 코딩의 핵심이다. 정답 코드를 외우는 게 아니라 결과를 보고 수정 지시를 점점 정확하게 만드는 것이다.

AI에게 지시하는 프롬프트 예시

실전에서는 현재 작업 지시와 반복 규칙을 분리하는 게 좋다. 오늘 작업 지시는 아래처럼 짧게, 반복 규칙은 .agent 폴더에 남겨 둔다.

학습 플래너 웹앱을 만들어줘.
할 일, 예상 공부 시간, 메모를 입력하면 카드로 추가되고,
완료 전환과 삭제가 가능해야 해.
데이터는 localStorage에 저장하고,
한국어 UI와 모바일 카드형 레이아웃을 적용해 줘.
작업이 끝나면 실행 명령도 화면에 적어줘.

이 프롬프트 하나로 기본 버전이 나오고, 그다음부터는 세부 개선만 시키면 된다. 내일은 같은 구조를 독서기록 앱으로 바꾸고 싶다면 할 일 대신 책 제목, 예상 시간 대신 읽은 페이지로 바꿔 달라고만 하면 된다. 즉 바이브 코딩은 큰 기적보다 잘 만든 틀 하나를 다른 주제로 계속 돌리는 기술에 가깝다.

Q&A

Q1. 비전공자인데 HTML, CSS, JS를 다 알아야 하나

다 외울 필요 없다. 다만 화면 구조는 HTML, 모양은 CSS, 동작은 JS가 맡는다는 정도의 역할 구분은 아는 편이 훨씬 좋다. 그 정도만 알아도 Claude Code가 만든 결과를 검수하고 수정 요청하기가 쉬워진다.

Q2. Claude Code와 AntiGravity를 같이 쓰면 뭐가 다른가

Claude Code는 지금 만드는 파일과 명령 실행에 강하고, AntiGravity는 같은 방식의 작업을 반복할 때 규칙을 고정하는 데 유리하다. 하나는 실행, 하나는 반복 최적화라고 보면 이해가 빠르다.

Q3. 처음부터 React나 데이터베이스를 붙여야 하나

아니다. 첫 실습은 정적 페이지와 localStorage만으로 충분하다. 여기서 저장과 수정 흐름을 익힌 뒤 필요할 때만 확장하는 편이 훨씬 안정적이다.

Q4. 결과가 마음에 안 들면 프롬프트를 다시 길게 써야 하나

길게 쓰기보다 증상을 짧게 찍는 편이 낫다. 예를 들면 완료 카드 색 대비가 약하다, 추가 버튼을 상단 고정으로 바꿔줘, 시간 입력은 분 단위 안내를 넣어줘처럼 말하면 된다.

마무리

오늘 만든 학습 플래너 웹앱은 화려한 서비스는 아니다. 그런데 비전공자가 바이브 코딩 감각을 익히기에는 꽤 좋다. 입력, 저장, 렌더링, 수정 요청, 재실행까지 한 번에 경험할 수 있기 때문이다. Claude Code로 첫 버전을 만들고, AntiGravity로 반복 규칙을 남겨 두면 내일은 같은 틀로 다른 교육용 도구를 훨씬 빠르게 만들 수 있다.

결국 실력 차이는 모델 이름보다 반복 횟수에서 난다. 오늘은 학습 플래너 하나만 만들어도 충분하다. 대신 직접 실행해 보고, 한 번 수정해 보고, 내일 다른 주제로 다시 돌려보면 된다. 그 반복이 쌓이면 비전공자도 금방 자기 도구를 직접 만드는 쪽으로 넘어간다.

참고자료

• Claude Code Overview
• Claude Code in Antigravity Guide
• Google Antigravity