Claude Code와 AntiGravity로 비전공자도 만드는 프롬프트 실험 기록판, 30분 실습 튜토리얼

왜 프롬프트 실험 기록판부터 만들어야 하나

비전공자가 바이브 코딩을 시작할 때 가장 흔한 실수는 앱을 크게 잡는 것이다. 회원가입, 결제, 관리자 화면 같은 무거운 기능부터 붙들면 초반에 바로 지친다. 반대로 프롬프트 실험 기록판은 입력, 목록, 필터, 저장 네 가지만 있으면 실습이 된다. 구조는 단순한데 실제 활용도는 높다. 어떤 프롬프트를 넣었고, 어떤 모델을 썼고, 결과 점수가 어땠는지 남겨 두면 다음 실험이 훨씬 빨라진다.

특히 Claude Code와 AntiGravity 조합은 이 작은 앱에 잘 맞는다. AntiGravity에서 먼저 화면 구조를 빠르게 잡고, Claude Code로 실제 파일과 동작을 붙이면 비전공자도 눈으로 확인하면서 따라가기 쉽다. 중요한 건 완벽한 제품이 아니라 작동하는 첫 버전을 오늘 안에 만드는 것이다. 이 글은 그 기준으로 간다.

Claude Code와 AntiGravity 준비

1. Claude Code 설치

Mac 기준으로 가장 단순한 설치 흐름은 Homebrew다. 터미널에서 아래처럼 실행하면 된다.

brew install --cask claude-code
mkdir prompt-lab-board
cd prompt-lab-board
claude

처음 실행하면 로그인 과정을 거친다. 여기서 핵심은 Claude Code를 거대한 개발 도구로 겁먹지 않는 것이다. 지금 필요한 건 현재 폴더 안에서 파일 몇 개를 만들고, 수정하고, 미리보기 서버를 띄우는 정도다.

2. AntiGravity에서 화면 문장 먼저 잡기

AntiGravity에는 처음부터 긴 명세를 넣지 말고, 화면이 어떤 일을 해야 하는지만 한 문단으로 주는 편이 낫다. 예를 들면 이렇게 시작하면 된다.

프롬프트 실험 기록판 웹앱을 만들어줘.
상단에는 제목과 설명,
중앙에는 실험명, 사용 모델, 프롬프트, 점수, 메모 입력 폼,
아래에는 저장된 실험 카드 목록,
오른쪽에는 모델별 필터와 점수 높은 순 정렬 버튼을 둬.
초보자도 읽기 쉬운 밝은 UI로 구성해줘.

이 단계의 목적은 코드 생성이 아니라 화면 합의다. 폼이 먼저인지, 카드가 먼저인지, 필터가 필요한지부터 눈으로 확인해야 Claude Code에게도 덜 흔들리는 요청을 줄 수 있다.

3. 폴더 구조는 작게 간다

첫 실습은 파일 세 개면 충분하다.

touch index.html style.css app.js
mkdir assets

React나 데이터베이스로 바로 가지 마. 오늘 목표는 브라우저에서 열리는 작동 앱이다. localStorage만 써도 기록판 실습에는 충분하다.

30분 만에 앱 뼈대 만들기

1. Claude Code에 할 일을 짧게 던진다

폴더를 만든 뒤 Claude Code에는 한 번에 모든 욕심을 넣지 말고, 단계별로 요청하는 게 낫다. 첫 프롬프트는 아래 정도면 충분하다.

현재 폴더에 순수 HTML, CSS, JS로 프롬프트 실험 기록판을 만들어줘.
기능은 입력 폼, 카드 목록 렌더링, localStorage 저장, 모델 필터, 점수 높은 순 정렬.
파일은 index.html, style.css, app.js만 사용해줘.
코드는 초보자가 읽기 쉽게 주석도 조금 넣어줘.

이렇게 요청하면 Claude Code가 파일을 나누고 기본 구조를 만든다. 중요한 점은 도구에게 너무 많은 옵션을 먼저 주지 않는 것이다. 다크모드, CSV 내보내기, 로그인 같은 기능은 첫 버전이 뜬 뒤 붙여도 늦지 않다.

2. 미리보기 서버를 바로 띄운다

파일이 생기면 바로 브라우저에서 확인해야 한다. 파이썬이 있다면 아래 명령으로 충분하다.

python3 -m http.server 8000

그다음 브라우저에서 http://localhost:8000 을 열어 본다. 입력 폼이 보이고, 저장 버튼을 눌렀을 때 카드가 생기면 절반은 끝난 셈이다.

3. AntiGravity 시안과 실제 화면 차이를 좁힌다

여기서 AntiGravity 화면과 실제 브라우저 결과를 비교한다. 버튼 위치가 어색한지, 카드 간격이 답답한지, 필터가 너무 아래로 밀렸는지 체크해라. 그다음 Claude Code에 수정 요청을 짧게 넣는다.

카드 간격을 더 넓히고,
입력 폼과 필터 영역을 2단 레이아웃으로 바꿔줘.
모바일에서는 1단으로 내려가게 해줘.

이 흐름이 바이브 코딩의 핵심이다. 한 번에 정답을 뽑는 게 아니라, 시안과 결과의 차이를 짧은 피드백으로 줄여 가는 방식이다.

핵심 코드 넣기

아래 코드는 비전공자 실습에 맞춘 최소 버전이다. 그대로 붙여 넣어도 되고, Claude Code가 만든 코드와 비교해도 된다.

index.html 핵심 구조

<main class="wrap">
  <section class="panel">
    <h1>프롬프트 실험 기록판</h1>
    <p>모델별 실험 결과를 간단히 남기고 비교하는 연습용 앱</p>
    <form id="experiment-form">
      <input id="title" placeholder="실험명" required />
      <input id="model" placeholder="사용 모델 예: Claude 4" required />
      <textarea id="prompt" placeholder="입력한 프롬프트" required></textarea>
      <input id="score" type="number" min="1" max="10" placeholder="점수" required />
      <textarea id="memo" placeholder="결과 메모"></textarea>
      <button type="submit">실험 저장</button>
    </form>
  </section>
  <aside class="panel">
    <select id="filter-model">
      <option value="all">전체 모델</option>
    </select>
    <button id="sort-score" type="button">점수 높은 순 정렬</button>
  </aside>
  <section id="experiment-list" class="grid"></section>
</main>

app.js 핵심 로직

const form = document.querySelector("#experiment-form");
const list = document.querySelector("#experiment-list");
const filterModel = document.querySelector("#filter-model");
const sortScore = document.querySelector("#sort-score");

let experiments = JSON.parse(localStorage.getItem("promptLabData") || "[]");
let sortByScore = false;

function saveData() {
  localStorage.setItem("promptLabData", JSON.stringify(experiments));
}

function render() {
  const selected = filterModel.value;
  let items = [...experiments];

  if (selected !== "all") {
    items = items.filter(item => item.model === selected);
  }

  if (sortByScore) {
    items.sort((a, b) => b.score - a.score);
  }

  list.innerHTML = items.map(item => `
    <article class="card">
      <h3>${item.title}</h3>
      <p><strong>모델:</strong> ${item.model}</p>
      <p><strong>점수:</strong> ${item.score}/10</p>
      <p>${item.prompt}</p>
      <p>${item.memo}</p>
    </article>
  `).join("");
}

function refreshFilter() {
  const models = ["all", ...new Set(experiments.map(item => item.model))];
  filterModel.innerHTML = models
    .map(model => `<option value="${model}">${model === "all" ? "전체 모델" : model}</option>`)
    .join("");
}

form.addEventListener("submit", event => {
  event.preventDefault();

  const item = {
    title: document.querySelector("#title").value,
    model: document.querySelector("#model").value,
    prompt: document.querySelector("#prompt").value,
    score: Number(document.querySelector("#score").value),
    memo: document.querySelector("#memo").value
  };

  experiments.unshift(item);
  saveData();
  refreshFilter();
  render();
  form.reset();
});

filterModel.addEventListener("change", render);
sortScore.addEventListener("click", () => {
  sortByScore = !sortByScore;
  render();
});

refreshFilter();
render();

이 코드의 장점은 단순하다는 점이다. 서버가 없어도 저장이 되고, 필터와 정렬이 바로 눈에 보인다. 비전공자에게는 이 즉시성이 중요하다. 저장 버튼을 누르자마자 카드가 생기면 코딩이 추상 개념이 아니라 손에 잡히는 작업으로 바뀐다.

style.css에서 꼭 챙길 부분

body {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  color: #1e293b;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.panel, .card {
  background: #ffffff;
  border: 1px solid #dbe7ff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08);
}

.grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

레이아웃이 바로 잡히면 초보자도 내가 진짜 앱을 만들고 있다는 감각을 얻는다. 이 감각이 다음 실습을 이어 가게 만든다.

비전공자가 자주 막히는 지점

1. 첫날부터 기능을 너무 많이 넣는다

검색, 삭제, 수정, 공유, 다크모드, 로그인까지 한 번에 넣으려 하면 바로 꼬인다. 오늘은 저장과 필터만 돌아가도 성공이다.

2. Claude Code에게 설명을 길게만 한다

장문의 배경 설명보다 파일 수, 필요한 기능, 제외할 기능을 짧게 끊어 주는 편이 결과가 안정적이다. 프롬프트는 소설이 아니라 작업 지시문이다.

3. AntiGravity 시안을 완성본으로 착각한다

시안은 방향 확인용이다. 실제 동작은 브라우저에서 점검해야 한다. 클릭이 안 되거나 모바일에서 깨지면 예쁜 화면도 소용없다.

4. 미리보기를 너무 늦게 연다

코드를 길게 만든 뒤 한 번에 확인하면 어디서 깨졌는지 찾기 어렵다. 파일 하나 바꿀 때마다 새로고침하는 습관이 훨씬 빠르다.

오늘 5분 실습

1. 빈 폴더를 하나 만들고 index.html, style.css, app.js 세 파일을 만든다.
2. Claude Code에 입력 폼과 카드 목록만 있는 최소 기록판을 요청한다.
3. 브라우저에서 한 번 띄운 뒤 실험명 하나를 직접 저장해 본다.
4. 점수 정렬 버튼을 눌러 카드 순서가 바뀌는지 확인한다.
5. 마지막으로 내일 붙일 기능 하나만 적어 둔다. 예를 들면 삭제 버튼, CSV 내보내기, 날짜 필터 정도면 충분하다.

딱 여기까지만 해도 비전공자 실습으로는 꽤 크다. 중요한 건 오늘 한 번 돌아가는 화면을 보는 것이다.

마무리

Claude Code와 AntiGravity를 같이 쓰면 비전공자도 코딩을 텍스트 지옥이 아니라 화면 기반 실험으로 받아들이기 쉬워진다. 먼저 시안으로 구조를 잡고, Claude Code로 파일을 만들고, 브라우저에서 바로 확인하는 루프를 짧게 돌리는 게 포인트다.

오늘 만든 프롬프트 실험 기록판은 화려한 서비스는 아니지만, 바이브 코딩 입문용으로는 아주 좋다. 입력, 저장, 렌더링, 정렬, 필터라는 핵심 흐름이 다 들어 있기 때문이다. 이 작은 성공 하나가 다음 앱으로 이어진다. 크게 잡지 말고, 오늘은 작동하는 첫 버전 하나만 끝내자.

참고자료

• Anthropic Claude Code overview
• Claude Code 설치 문서
• AntiGravity 화면 설계 실습 흐름 참고