Claude Code와 AntiGravity로 비전공자가 만드는 실습 체크리스트 웹앱, 오늘 5분 바이브 코딩 튜토리얼

왜 오늘 주제를 실습 체크리스트로 잡았는가

비전공자가 바이브 코딩을 배울 때 자주 망하는 지점은 기능이 너무 큰 주제를 고르는 데 있다. 회원가입, 결제, 관리자 페이지부터 붙이면 바로 지친다. 반대로 실습 체크리스트 웹앱은 작지만 중요한 흐름이 다 들어 있다. 입력창, 버튼, 목록 렌더링, 완료 상태 변경, 진행률 계산, 브라우저 저장, 모바일 화면 정리까지 한 번에 맛볼 수 있다. 한마디로 작지만 코딩 감각을 붙이기에 아주 좋은 훈련장이다.

Claude Code는 프로젝트 폴더를 읽고 필요한 파일 구조를 제안하고, 실행 명령까지 이어서 정리하는 데 강하다. AntiGravity는 반복 규칙을 잡는 데 유리하다. 오늘 만든 체크리스트 앱 구조를 내일은 수업 준비표, 과제 확인표, 독서 기록표로 바로 바꿔 쓸 수 있다. 즉 Claude Code가 실시간 작업 엔진이라면, AntiGravity는 같은 실습 패턴을 재사용하게 만드는 작업 습관 고정 장치라고 보면 된다.

오늘 목표는 화려한 포트폴리오가 아니다. 직접 만들고, 실행해 보고, 어색한 부분을 다시 고치게 하는 감각을 익히는 것이다. 그 감각이 붙으면 비전공자도 코딩을 문법 암기가 아니라 결과 검수와 수정 요청의 반복으로 받아들이게 된다.

Claude Code와 AntiGravity 준비

1. 작업 폴더 만들기

폴더 이름은 짧고 명확하게 가는 편이 좋다. 실습 중 경로가 꼬이면 괜히 집중이 깨진다.

mkdir checklist-lab
cd checklist-lab

2. Claude Code 실행

Claude Code 공식 안내 기준으로 설치가 안 되어 있다면 아래 명령으로 시작하면 된다. 설치 뒤에는 프로젝트 폴더 안에서 바로 실행한다.

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

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

매번 처음부터 설명하면 결과가 흔들린다. 그래서 반복 규칙을 따로 적어 두는 게 좋다. 아래 정도만 만들어도 다음 실습이 훨씬 안정적이다.

mkdir -p .agent/rules .agent/workflows
cat > .agent/rules/project-rule.md <<EOF
항상 index.html style.css app.js 세 파일로 시작
정적 웹앱 우선
마지막에 실행 명령과 테스트 체크리스트 포함
EOF

cat > .agent/workflows/checklist-app.md <<EOF
입력 폼, 목록, 완료 전환, 삭제, 진행률 표시, localStorage 저장을 포함
모바일에서 읽기 쉬운 카드형 UI 적용
EOF

이렇게 해 두면 내일 다른 주제를 만들 때도 구조가 무너지지 않는다. 비전공자일수록 프롬프트를 매번 새로 길게 쓰는 것보다, 반복 규칙을 쌓아 두는 편이 훨씬 효율적이다.

실습 체크리스트 웹앱 만들기

1. 첫 요청은 결과 중심으로 짧게 넣기

처음부터 기술 용어를 길게 붙이지 말고, 어떤 화면이 필요하고 무엇이 동작해야 하는지만 말하면 된다. 예시는 아래 정도면 충분하다.

정적 웹앱을 만들어줘.
파일은 index.html, style.css, app.js 세 개로 구성해.
체크 항목 입력창, 우선순위 선택, 추가 버튼, 완료 전환, 삭제 버튼, 진행률 표시를 넣어줘.
데이터는 localStorage에 저장하고 모바일에서도 보기 좋게 카드형 UI로 만들어줘.
마지막에는 python3 -m http.server 실행 방법을 화면 아래 안내문으로 넣어줘.

핵심은 완벽한 앱이 아니라 작동하는 첫 버전을 빠르게 받는 것이다. 여기서 로그인이나 서버까지 붙이면 비전공자 학습 흐름이 깨진다. 오늘은 브라우저 안에서 끝나는 작은 성공을 만드는 게 맞다.

2. HTML 뼈대는 이 정도면 충분하다

Claude Code가 너무 많은 마크업을 한 번에 뽑으면 오히려 수정이 어렵다. 아래처럼 입력부, 진행률, 목록 세 구역만 선명하면 된다.

<section class="checklist-form">
  <input id="taskInput" type="text" placeholder="오늘 할 일을 입력" />
  <select id="priorityInput">
    <option value="높음">높음</option>
    <option value="보통">보통</option>
    <option value="낮음">낮음</option>
  </select>
  <button id="addTaskButton">항목 추가</button>
</section>

<section class="progress-panel">
  <p>진행률: <span id="progressText">0%</span></p>
</section>

<ul id="taskList"></ul>

이 구조가 좋은 이유는 자바스크립트가 붙을 자리가 명확하기 때문이다. 입력값을 읽고, 배열에 넣고, 다시 목록으로 그리는 흐름이 눈에 보인다.

3. 자바스크립트 핵심 로직은 입력, 저장, 렌더링 세 가지만 보면 된다

전체 코드를 외우려 하지 말고, 데이터가 어떻게 흐르는지만 보면 된다. 아래 예시는 비전공자가 읽기 쉬운 수준으로 줄인 핵심이다.

const taskInput = document.getElementById("taskInput");
const priorityInput = document.getElementById("priorityInput");
const addTaskButton = document.getElementById("addTaskButton");
const taskList = document.getElementById("taskList");
const progressText = document.getElementById("progressText");

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

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

function updateProgress() {
  if (tasks.length === 0) {
    progressText.textContent = "0%";
    return;
  }

  const doneCount = tasks.filter(task => task.done).length;
  const percent = Math.round((doneCount / tasks.length) * 100);
  progressText.textContent = `${percent}%`;
}

function renderTasks() {
  taskList.innerHTML = tasks.map((task, index) => `
    <li class="task-card ${task.done ? "done" : ""}">
      <strong>${task.name}</strong>
      <p>우선순위: ${task.priority}</p>
      <div class="task-actions">
        <button onclick="toggleTask(${index})">완료 전환</button>
        <button onclick="removeTask(${index})">삭제</button>
      </div>
    </li>
  `).join("");

  updateProgress();
}

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 priority = priorityInput.value;

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

  tasks.unshift({ name, priority, done: false });
  saveTasks();
  renderTasks();
  taskInput.value = "";
});

renderTasks();

여기서 꼭 이해할 건 세 가지다. 첫째, 입력값을 배열에 넣는다. 둘째, 배열을 localStorage에 저장한다. 셋째, 저장된 배열을 다시 화면에 그린다. 비전공자가 이 흐름만 체득해도 다음 단계로 훨씬 빨리 올라간다.

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

파일이 만들어졌다면 바로 열어 보는 게 중요하다. 실행을 안 하면 AI가 만든 코드가 맞는지 틀린지 감이 안 잡힌다.

python3 -m http.server 4173

브라우저에서 http://localhost:4173를 열고 항목을 세 개 정도 추가해 보자. 완료 전환이 안 먹거나 진행률 숫자가 이상하면 그 증상만 짧게 다시 전달하면 된다. 예를 들면 아래처럼 말하면 된다.

완료 버튼을 눌러도 진행률이 바뀌지 않아.
모바일에서 버튼이 줄바꿈되어 보기 지저분해.
완료된 항목은 회색 배경과 취소선으로 보여줘.

이 방식이 좋은 이유는 비전공자가 코드를 전부 이해하지 못해도 결과 기준으로 수정 요청을 할 수 있기 때문이다. 바이브 코딩은 정답 암기보다 피드백 루프를 돌리는 능력이 더 중요하다.

AI에게 이렇게 지시하면 덜 흔들린다

Claude Code에게 잘 시키는 비결은 장황한 설명이 아니다. 범위를 좁히고, 출력 형식을 고정하고, 마지막 검수 포인트를 붙이는 것이다. 아래 프롬프트는 실전에서 꽤 안정적이다.

지금 만드는 것은 비전공자 실습용 정적 웹앱이야.
index.html, style.css, app.js만 사용해.
기능은 체크 항목 추가, 우선순위 선택, 완료 전환, 삭제, 진행률 표시, localStorage 저장이다.
UI는 밝고 깔끔하게, 모바일 카드형으로 만들어.
코드 작성 후에는 실행 명령과 사용자가 직접 확인할 테스트 항목 3개를 적어줘.

여기에 AntiGravity 규칙 파일까지 붙어 있으면 다음 작업에서 같은 스타일이 반복된다. 오늘 체크리스트 앱을 만들고, 내일은 과제 제출 확인판이나 수업 준비 보드로 바꾸면 된다. 이때 중요한 건 새 기술보다 같은 구조를 여러 번 돌려 보는 것이다.

• 처음 요청은 기능 4~6개만 넣기
• 한 번에 안 되면 증상만 짧게 다시 전달하기
• 작동 확인 후에만 디자인 수정 요청하기
• 다음 실습을 위해 규칙 파일은 남겨 두기

오늘 5분 실습

시간이 없으면 딱 이것만 해도 된다. 다섯 줄짜리 목표다.

1. mkdir checklist-lab으로 폴더를 만든다.
2. claude를 실행한다.
3. 체크리스트 앱 프롬프트를 붙여 넣는다.
4. python3 -m http.server 4173로 실행한다.
5. 항목 3개를 추가하고 완료 전환이 되는지 본다.

이 5분 실습만 끝내도 비전공자는 입력, 저장, 렌더링, 수정 요청의 기본 루프를 한 번 경험하게 된다. 그게 다음 실습의 발판이다.

미래이음연구소 안내

특히 비전공자 교육에서는 오늘처럼 작은 앱을 직접 완성해 보는 실습이 강하다. 한 번 성공 경험이 생기면 AI를 보는 태도가 달라진다. 그냥 신기한 도구가 아니라 실제 결과를 만드는 작업 파트너로 보이기 시작한다.

마무리

오늘 만든 체크리스트 웹앱은 작다. 그런데 바로 그 작음이 장점이다. 복잡한 인증이나 서버 없이도 입력, 상태 변경, 저장, 화면 갱신이라는 핵심 감각을 익힐 수 있다. Claude Code는 실행 속도를 끌어올리고, AntiGravity는 그 과정을 반복 가능한 습관으로 바꿔 준다.

비전공자가 바이브 코딩을 익히는 가장 빠른 길은 대단한 서비스를 꿈꾸는 게 아니라, 하루 안에 끝나는 작은 앱을 계속 완성하는 것이다. 오늘 체크리스트 앱이 끝났다면 내일은 출석 확인판, 모레는 과제 제출 현황판으로 이어가면 된다. 그렇게 쌓인 반복이 결국 실력이 된다.

참고자료

• Anthropic, Claude Code Overview
• Claude Code Docs Index
• Google for Developers, Google Antigravity 메뉴 및 개발자 문서 구조