Claude Code와 AntiGravity로 비전공자가 만드는 실습 회고 제출 웹앱, 오늘 5분 바이브 코딩 튜토리얼

왜 오늘 주제를 실습 회고 제출 앱으로 잡았는가

비전공자가 바이브 코딩을 배울 때 자주 놓치는 부분은 코드를 만드는 순간보다 배운 내용을 다시 정리하는 순간이다. 앱을 하나 만들어도 무엇이 됐고 무엇이 막혔는지 기록하지 않으면 다음 실습에서 같은 실수를 반복한다. 그래서 오늘은 결과물을 자랑하는 페이지가 아니라 실습 회고를 저장하는 작은 웹앱을 만든다. 입력 폼, 목록 저장, 상태 분류, 복습 흐름이 모두 들어가서 학습용으로 아주 좋다.

Claude Code는 프로젝트 폴더를 읽고 필요한 파일을 나누고, 동작하는 첫 버전을 빠르게 만드는 데 강하다. 반면 Google Antigravity는 에이전트 중심 개발 흐름, 여러 작업면을 오가는 방식, 반복 가능한 워크플로를 잡는 감각에 초점이 있다. 공식 소개에서도 editor, terminal, browser를 넘나드는 에이전트 흐름과 task 기반 검증을 강조한다. 비전공자 입장에서는 Claude Code로 첫 결과를 만들고, AntiGravity식 규칙 정리로 반복 실습 구조를 고정하는 조합이 꽤 실용적이다.

오늘 목표는 복잡한 서비스가 아니다. 한 번의 실습 뒤에 제목, 배운 점, 막힌 점, 다음 액션을 남길 수 있는 앱을 직접 만드는 것이다. 이렇게 작은 도구를 여러 번 완성해 보면 코딩이 문법 시험이 아니라 작업 루프라는 감각이 붙는다.

Claude Code와 AntiGravity 준비

1. 작업 폴더부터 짧게 만든다

경로가 길어지면 비전공자는 바로 집중이 끊긴다. 폴더 이름은 짧고 목적이 보이게 두는 편이 낫다.

mkdir retro-lab
cd retro-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/retrospective-app.md <<EOF
입력 폼, 회고 카드 저장, 난이도 선택, 다음 액션, localStorage 저장 포함
모바일 카드형 UI 적용
EOF

Google Antigravity 소개 페이지가 말하는 agent first 흐름을 비전공자식으로 번역하면 결국 같은 작업 패턴을 다시 꺼내 쓸 수 있게 만드는 것이다. 거창한 자동화보다 이런 규칙 파일이 먼저다.

실습 회고 제출 웹앱 만들기

1. 첫 요청은 기능만 명확하게 넣는다

처음부터 디자인 취향, 애니메이션, 배경색까지 다 넣으면 오히려 결과가 흔들린다. 첫 요청은 기능 위주가 맞다.

정적 웹앱을 만들어줘.
파일은 index.html, style.css, app.js 세 개로 구성해.
실습 제목 입력, 난이도 선택, 배운 점, 막힌 점, 다음 액션 입력칸을 넣어줘.
저장 버튼을 누르면 회고 카드가 아래에 쌓이게 해줘.
카드는 localStorage에 저장하고 새로고침 후에도 유지되게 해줘.
모바일에서도 읽기 쉬운 카드형 UI로 만들어줘.
마지막에는 python3 -m http.server 실행 안내를 넣어줘.

이 정도면 비전공자도 앱 구조를 따라가기 쉽다. 입력받고, 저장하고, 다시 그리는 흐름이 분명하기 때문이다.

2. HTML 뼈대는 입력 구역과 결과 목록만 선명하면 된다

마크업이 지나치게 길면 수정 포인트를 찾기 어렵다. 아래 정도 구조면 충분하다.

<section class="retro-form">
  <input id="titleInput" type="text" placeholder="오늘 실습 제목" />
  <select id="levelInput">
    <option value="쉬움">쉬움</option>
    <option value="보통">보통</option>
    <option value="어려움">어려움</option>
  </select>
  <textarea id="learnedInput" placeholder="오늘 배운 점"></textarea>
  <textarea id="blockedInput" placeholder="막힌 지점"></textarea>
  <textarea id="nextInput" placeholder="다음 액션"></textarea>
  <button id="saveButton">회고 저장</button>
</section>

<section class="summary-box">
  <p>총 회고 수: <span id="countText">0</span></p>
</section>

<section id="retroList" class="retro-list"></section>

이 구조는 자바스크립트가 붙는 자리가 분명해서 좋다. 입력값을 읽어 객체로 만들고, 저장하고, 카드 목록으로 다시 렌더링하기 쉽다.

3. 자바스크립트는 입력, 저장, 렌더링 세 동작만 보면 된다

전체 코드를 외우려 하지 말고 데이터 흐름만 보면 된다. 아래 예시는 핵심 로직만 남긴 버전이다.

const titleInput = document.getElementById("titleInput");
const levelInput = document.getElementById("levelInput");
const learnedInput = document.getElementById("learnedInput");
const blockedInput = document.getElementById("blockedInput");
const nextInput = document.getElementById("nextInput");
const saveButton = document.getElementById("saveButton");
const retroList = document.getElementById("retroList");
const countText = document.getElementById("countText");

let retros = JSON.parse(localStorage.getItem("retroEntries") || "[]");

function saveRetros() {
  localStorage.setItem("retroEntries", JSON.stringify(retros));
}

function renderRetros() {
  retroList.innerHTML = retros.map((item, index) => `
    <article class="retro-card">
      <h3>${item.title}</h3>
      <p>난이도: ${item.level}</p>
      <p><strong>배운 점</strong> ${item.learned}</p>
      <p><strong>막힌 지점</strong> ${item.blocked}</p>
      <p><strong>다음 액션</strong> ${item.next}</p>
      <button onclick="removeRetro(${index})">삭제</button>
    </article>
  `).join("");

  countText.textContent = retros.length;
}

function removeRetro(index) {
  retros.splice(index, 1);
  saveRetros();
  renderRetros();
}

saveButton.addEventListener("click", () => {
  const title = titleInput.value.trim();
  const level = levelInput.value;
  const learned = learnedInput.value.trim();
  const blocked = blockedInput.value.trim();
  const next = nextInput.value.trim();

  if (!title || !learned || !next) {
    alert("제목, 배운 점, 다음 액션은 꼭 입력해 주세요");
    return;
  }

  retros.unshift({ title, level, learned, blocked, next });
  saveRetros();
  renderRetros();

  titleInput.value = "";
  learnedInput.value = "";
  blockedInput.value = "";
  nextInput.value = "";
});

renderRetros();

비전공자가 꼭 잡아야 할 포인트는 세 가지다. 입력값이 객체로 묶이고, 객체 배열이 localStorage에 저장되고, 저장된 배열이 카드 목록으로 다시 그려진다는 점이다. 이 구조를 이해하면 내일은 독서 회고, 수업 피드백, 프로젝트 일지로 바로 바꿔 쓸 수 있다.

4. 스타일은 화려함보다 읽기 쉬움이 우선이다

회고 앱은 꾸미기보다 내용이 잘 읽혀야 한다. 그래서 배경 대비, 카드 간격, 모바일 너비, 버튼 크기만 잡아도 충분하다.

body {
  font-family: "Pretendard", sans-serif;
  background: #f4f7fb;
  color: #1f2937;
  margin: 0;
}

.retro-form,
.retro-card,
.summary-box {
  max-width: 760px;
  margin: 16px auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

input,
select,
textarea,
button {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
}

이 정도만 되어도 실습용 앱으로는 충분히 깔끔하다. 디자인보다 먼저 동작 확인이 우선이라는 점을 계속 기억하면 된다.

5. 실행하고 바로 증상 기준으로 수정한다

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 retro-lab으로 폴더를 만든다.
2. claude를 실행한다.
3. 회고 제출 앱 프롬프트를 붙여 넣는다.
4. python3 -m http.server 4173로 실행한다.
5. 회고 카드 2개를 저장하고 새로고침 후 남아 있는지 확인한다.

이 다섯 단계만 끝내도 입력, 저장, 렌더링, 수정 요청이라는 핵심 루프를 한 번 돌게 된다. 바이브 코딩 입문에서는 이 경험이 아주 크다.

미래이음연구소 안내

특히 비전공자 수업에서는 오늘 같은 작은 앱 실습이 강하다. 한 번 성공 경험이 생기면 코딩이 더 이상 멀게 느껴지지 않는다. 앱 하나를 완성하고 바로 다음 앱으로 확장하는 구조를 계속 반복하면 실제 업무 자동화로도 자연스럽게 이어진다.

마무리

오늘 만든 실습 회고 제출 웹앱은 화려하지 않다. 대신 입력, 저장, 카드 렌더링, 모바일 정리, 수정 요청이라는 핵심 흐름이 전부 들어 있다. Claude Code는 첫 결과를 빠르게 만들고, AntiGravity는 그 과정을 반복 가능한 패턴으로 붙잡아 준다.

비전공자가 바이브 코딩을 익히는 가장 빠른 길은 대단한 서비스를 꿈꾸는 것이 아니라 하루 안에 끝나는 작은 앱을 계속 완성하는 것이다. 오늘 회고 앱이 끝났다면 내일은 수업 피드백 수집판, 모레는 프로젝트 일지 보드로 이어가면 된다. 그렇게 쌓인 반복이 결국 실력으로 남는다.

참고자료

• Anthropic, Claude Code Overview
• Anthropic, Claude Code Docs Index
• Google Antigravity 공식 소개 페이지