Claude Code와 AntiGravity로 비전공자도 만드는 수업자료 요약 페이지 실습

왜 이 실습이 비전공자에게 좋은가

비전공자가 바이브 코딩을 시작할 때 가장 먼저 막히는 지점은 문법이 아니라 작업 순서다. 무엇을 만들지 정하고, 어떤 파일이 필요하고, 어디까지를 AI에게 맡길지 감이 없으면 첫 화면도 못 띄운다. 그래서 오늘 실습은 일부러 작고 선명한 결과물을 고른다. 교사나 강사가 바로 써볼 수 있는 수업자료 요약 페이지다. 긴 공지, 활동 안내문, 학습자료를 붙여 넣으면 핵심 요약, 핵심 키워드, 학생 질문용 한 줄 과제를 보여주는 페이지다.

여기서 Claude Code는 터미널에서 실제 파일 생성과 구조 정리를 맡고, AntiGravity는 프로젝트 안의 .agent 규칙과 워크플로를 붙여서 같은 일을 다시 반복하기 쉽게 만든다. 즉 Claude Code는 실행 담당, AntiGravity는 작업 습관을 고정하는 틀이라고 이해하면 된다. 이 조합이 좋은 이유는 비전공자도 말로 요구하고, 파일로 결과를 받고, 다시 수정 요청을 하는 루프를 빠르게 익힐 수 있기 때문이다.

Claude Code와 AntiGravity 준비

1. 작업 폴더 만들기

먼저 빈 폴더 하나를 만든다. 폴더 이름은 영어로 짧게 가는 편이 덜 꼬인다.

mkdir class-summary-page
cd class-summary-page

2. Claude Code 실행

Claude Code가 설치되어 있다면 아래처럼 프로젝트 폴더에서 바로 시작한다.

claude

설치 전이라면 공식 안내 기준으로 macOS에서는 아래 방식이 가장 단순하다.

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

3. AntiGravity용 규칙 폴더 잡기

AntiGravity 계열 환경에서는 .agent 폴더를 두고 규칙과 워크플로를 모아두면 반복 작업이 편해진다. 최소 구조는 아래 정도면 충분하다.

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

여기까지 되면 다음부터는 같은 패턴의 실습 페이지를 만들 때 요청이 훨씬 짧아진다.

수업자료 요약 페이지 만들기

1. Claude Code에게 첫 요청 넣기

처음부터 길게 설명하지 말고, 결과물 기준으로 말하는 게 낫다. 아래처럼 요청한다.

정적 웹페이지를 만들어줘.
파일은 index.html, style.css, app.js 세 개로 구성해.
화면에는 긴 학습자료를 붙여 넣는 textarea, 요약 버튼, 핵심 요약 3줄, 핵심 키워드 5개, 학생 질문용 한 줄 과제 영역이 필요해.
한국어 UI로 만들고, 모바일에서도 읽기 쉽게 해줘.
마지막에는 python3 -m http.server 실행 방법까지 README 없이 화면 하단 안내문으로 적어줘.

이 요청만으로도 기본 뼈대는 나온다. 그런데 비전공자는 여기서 끝내면 안 된다. 결과가 나왔을 때 바로 열어보고, 텍스트를 붙여 넣고, 버튼이 실제로 동작하는지 확인해야 한다.

2. 최소 동작 코드 예시

만약 Claude Code가 요약 로직을 너무 무겁게 짜면, 먼저 아래처럼 가벼운 규칙 기반 버전으로 줄이라고 요청하면 된다. 핵심은 복잡한 AI 연결보다 작동하는 첫 버전을 먼저 보는 것이다.

<textarea id="sourceText" placeholder="수업자료를 붙여 넣으세요"></textarea>
<button id="runSummary">요약하기</button>
<div id="summaryBox"></div>

const text = document.getElementById("sourceText").value.trim();
const sentences = text.split(/[.!?
]/).map(v => v.trim()).filter(Boolean);
const summary = sentences.slice(0, 3);
const words = text
  .replace(/[^가-힣a-zA-Z0-9s]/g, " ")
  .split(/s+/)
  .filter(v => v.length >= 2)
  .slice(0, 5);

document.getElementById("summaryBox").innerHTML = `
  <h3>핵심 요약</h3>
  <ul>${summary.map(v => `<li>${v}</li>`).join("")}</ul>
  <h3>핵심 키워드</h3>
  <p>${words.join(", ")}</p>
  <h3>한 줄 과제</h3>
  <p>오늘 자료를 한 문장으로 다시 설명해 보세요.</p>
`;

이 코드는 진짜 AI 요약기는 아니지만, 입력값을 받아 결과 영역을 갱신하는 기본 흐름을 보여준다. 비전공자 실습에서는 이 단계가 엄청 중요하다. 화면, 버튼, 결과 박스, 문장 분리, 문자열 처리 감각이 한 번에 잡힌다.

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

python3 -m http.server 4173

브라우저에서 http://localhost:4173 를 열고 학습자료 한 단락을 붙여 넣는다. 요약 결과가 이상하면 Claude Code에게 이렇게 다시 말하면 된다. 첫 문장만 잘라 오지 말고 문장 길이 균형을 맞춰줘, 키워드 중복을 제거해줘, 버튼 아래에 예시 입력을 추가해줘. 비전공자에게 중요한 능력은 정답 코드를 외우는 게 아니라, 결과를 보고 수정 지시를 더 정확히 내리는 것이다.

AI에게 시킬 프롬프트 예시

Claude Code와 AntiGravity를 같이 쓸 때는 프롬프트도 두 층으로 나누면 좋다. 첫째는 현재 작업 지시, 둘째는 다음에도 재사용할 규칙이다.

• 현재 작업 지시: 오늘 만들 화면과 기능을 구체적으로 말한다.
• 재사용 규칙: 파일 수, 반응형 여부, 한국어 UI, 실행 방법 표기처럼 매번 반복되는 기준을 .agent 아래에 둔다.

예를 들어 오늘 요청은 아래처럼 충분하다.

교사용 수업자료 요약 페이지를 만들어줘.
중학생이 보기 쉬운 톤의 결과 영역을 넣고,
긴 공지문을 붙여 넣으면 핵심 요약 3줄, 핵심 키워드 5개, 한 줄 과제를 보여줘.
외부 API 없이 브라우저에서 바로 실행되게 하고,
모바일 카드 UI로 정리해줘.

이렇게 해두면 내일은 같은 구조로 독서기록 정리 페이지, 숙제 안내 페이지, 발표 연습 페이지로 쉽게 바꿀 수 있다. 결국 바이브 코딩은 한 번 크게 만드는 기술보다 같은 틀을 바꾸어 재사용하는 기술에 더 가깝다.

실수 방지 체크포인트

• 한 번에 거대한 기능을 요구하지 말 것. 로그인, DB, AI API까지 한 번에 넣으면 바로 꼬인다.
• 먼저 정적 페이지로 동작 확인 후 확장할 것. 첫 버전은 입력, 버튼, 출력 세 가지만 살아 있으면 된다.
• 수정 요청은 감정이 아니라 증상 기준으로 말할 것. 예: 버튼 클릭 후 아무 반응이 없다, 모바일에서 카드가 겹친다.
• AntiGravity 규칙 파일에는 프로젝트 공통 기준만 넣을 것. 오늘만 필요한 요구까지 다 넣으면 다음 작업에서 발목 잡힌다.

오늘 5분 실습

1. 빈 폴더를 만든다.
2. claude 실행 후 위 프롬프트를 붙여 넣는다.
3. python3 -m http.server 4173 로 페이지를 띄운다.
4. 학교 가정통신문이나 수업 안내문 한 단락을 붙여 넣는다.
5. 결과가 마음에 안 들면 수정 요청을 딱 한 줄만 더한다.

이 5분 실습만 해도 비전공자는 AI 코딩 도구를 보는 눈이 달라진다. 막연한 마법 도구가 아니라, 내가 지시하고 검수하는 작업 파트너로 보이기 시작한다.

마무리

Claude Code와 AntiGravity를 비전공자가 배울 때 핵심은 어려운 모델 이름이 아니다. 작은 화면 하나를 만들고, 실행하고, 수정 요청을 주고, 그 규칙을 다음 작업에 재사용하는 흐름을 익히는 것이다. 오늘 만든 수업자료 요약 페이지는 규모는 작지만, 입력과 출력이 분명하고 교육 현장에 바로 붙일 수 있어서 첫 실습 과제로 꽤 좋다.

내일은 같은 방식으로 독서기록 카드 생성기, 발표 연습 질문 생성기, 과제 제출 체크 페이지 같은 주제로 확장하면 된다. 바이브 코딩은 감으로 던지는 놀이가 아니라, 작은 성공을 빠르게 반복하는 운영 방식이다.

참고자료

• Claude Code Overview
• Antigravity Guide
• antigravity claude proxy 소개