Claude Code와 AntiGravity로 비전공자가 수업 자료 다운로드 센터 만드는 실습 튜토리얼

왜 수업 자료 다운로드 센터가 좋은 첫 실습인가

비전공자가 바이브 코딩을 시작할 때 가장 많이 하는 실수는 너무 큰 서비스를 첫 주제로 잡는 것이다. 회원가입, 결제, 관리자 페이지까지 한 번에 만들려 들면 당연히 흐름이 꼬인다. 반대로 수업 자료 다운로드 센터는 작지만 바로 쓸모가 있다. 강의안 PDF, 실습 ZIP, 참고 링크, 과제 제출 폼을 한 화면에 모아두면 수업 운영이 훨씬 깔끔해진다.

이 주제가 좋은 이유는 세 가지다. 첫째, 정적인 자료 목록이라서 데이터 구조를 이해하기 쉽다. 둘째, 검색창과 과목 필터를 붙이면 인터랙션 연습까지 한 번에 된다. 셋째, Claude Code가 초안 생성에 강하고 AntiGravity가 실제 클릭 동선 검수에 강해서 두 도구의 역할 차이를 체감하기 좋다. 비전공자 실습은 화려함보다 완주 경험이 중요하다. 이 정도 크기가 딱 적당하다.

Claude Code와 AntiGravity 역할 나누기

이번 실습의 핵심은 도구를 섞어 쓰는 것이 아니라 역할을 나눠 쓰는 것이다. Claude Code는 파일 뼈대, 데이터 구조, 검색 로직 초안을 빠르게 만든다. AntiGravity는 그 결과물을 브라우저에서 직접 눌러 보며 문제를 잡고, 수정 계획과 검수 흔적을 남기는 데 유리하다. 비전공자에게 필요한 것은 더 어려운 프롬프트가 아니라 이 역할 분리 감각이다.

• Claude Code: 폴더 구조 제안, HTML CSS JS 초안 생성, 기능 추가 요청 처리
• AntiGravity: 브라우저 실행, 검색창 입력 테스트, 필터 동작 확인, 모바일 폭 검수
• 사용자 역할: 목표 기능을 짧게 정의하고 합격 기준을 먼저 적기

이렇게 나누면 결과가 흔들려도 어디서 틀어졌는지 금방 보인다. 초안이 별로면 Claude Code 쪽 문제고, 클릭 흐름이 이상하면 AntiGravity 검수 단계에서 잡으면 된다.

1단계. 프로젝트 폴더와 실행 환경 준비

이번 실습은 프레임워크 없이 시작한다. 비전공자는 처음부터 React나 데이터베이스를 얹기보다 HTML CSS JS 세 파일로 완성 루프를 먼저 경험하는 편이 빠르다.

Claude Code 설치와 버전 확인

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

설치가 끝났다면 실습 폴더를 만든다.

실습 폴더 만들기

mkdir -p ~/projects/resource-center
cd ~/projects/resource-center
printf "" > index.html
printf "" > style.css
printf "" > app.js

이제 로컬 미리보기 서버를 띄운다.

python3 -m http.server 8000

브라우저에서 http://localhost:8000 을 열면 준비 끝이다. 비전공자 입장에서는 이 단계에서 이미 실행 화면을 볼 수 있다는 사실이 중요하다.

Claude Code 첫 요청 문장

cd ~/projects/resource-center
claude

강사용 수업 자료 다운로드 센터를 만들어줘.
파일은 index.html, style.css, app.js 세 개로 나눠줘.
기능은 검색창, 과목 필터 버튼, 자료 카드 목록, 링크 복사 버튼이 필요하다.
모바일에서도 카드가 한 줄씩 잘 보이게 해줘.
코드는 설명보다 바로 붙여 넣기 좋게 작성해줘.

첫 요청은 짧고 분명하게 간다. 비전공자가 가장 자주 망하는 지점은 기능 요구를 한 문장에 열다섯 개씩 밀어 넣는 순간이다.

2단계. 자료 목록 데이터를 구조화하기

수업 자료 다운로드 센터의 핵심은 예쁜 화면이 아니라 자료 목록 구조다. 과목명, 자료명, 형식, 링크, 설명 정도만 정리돼도 앱이 살아난다. app.js에는 아래처럼 시작하면 된다.

const resources = [
  {
    category: "Claude Code",
    title: "기초 실습 안내서",
    type: "PDF",
    url: "https://example.com/claude-guide.pdf",
    summary: "설치부터 첫 프롬프트 작성까지 정리한 입문 자료"
  },
  {
    category: "AntiGravity",
    title: "브라우저 검수 체크리스트",
    type: "DOC",
    url: "https://example.com/antigravity-checklist.docx",
    summary: "검색, 필터, 모바일 검수 항목을 정리한 문서"
  },
  {
    category: "공통",
    title: "실습 파일 모음",
    type: "ZIP",
    url: "https://example.com/workshop-files.zip",
    summary: "실습용 예제 파일과 완성본 압축본"
  }
];

이 구조가 좋은 이유는 단순하다. 나중에 구글시트에서 가져오든, JSON 파일로 분리하든, 워드프레스 페이지에 붙이든 확장 방향이 명확하다. 즉, 비전공자도 데이터 설계를 너무 거창하게 생각할 필요가 없다. 목록 한 덩어리를 잘 정리하면 UI는 그 위에 자연스럽게 올라온다.

3단계. 검색과 필터가 되는 화면 만들기

이제 화면과 동작을 붙인다. 핵심은 검색어와 현재 필터값을 기준으로 자료 목록을 다시 렌더링하는 것이다. 아래 코드는 복사 버튼까지 포함한 실전형 예시다.

const searchInput = document.querySelector("#searchInput");
const buttons = document.querySelectorAll("[data-filter]");
const list = document.querySelector("#resourceList");
const toast = document.querySelector("#toast");

let currentFilter = "전체";

function filteredResources() {
  const keyword = searchInput.value.trim().toLowerCase();
  return resources.filter((item) => {
    const matchFilter = currentFilter === "전체" || item.category === currentFilter;
    const text = `${item.title} ${item.summary} ${item.type}`.toLowerCase();
    const matchKeyword = text.includes(keyword);
    return matchFilter && matchKeyword;
  });
}

function render() {
  const items = filteredResources();
  list.innerHTML = items.map((item) => `
    <article class="card">
      <span class="badge">${item.category}</span>
      <h3>${item.title}</h3>
      <p>${item.summary}</p>
      <div class="meta">형식: ${item.type}</div>
      <div class="actions">
        <a href="${item.url}" target="_blank" rel="noopener">자료 열기</a>
        <button data-copy="${item.url}">링크 복사</button>
      </div>
    </article>
  `).join("");
}

searchInput.addEventListener("input", render);

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    currentFilter = button.dataset.filter;
    render();
  });
});

list.addEventListener("click", async (event) => {
  const button = event.target.closest("button[data-copy]");
  if (!button) return;
  await navigator.clipboard.writeText(button.dataset.copy);
  toast.textContent = "링크를 복사했다.";
  toast.hidden = false;
  setTimeout(() => {
    toast.hidden = true;
  }, 1500);
});

render();

여기서 중요한 포인트는 화려한 문법이 아니다. 검색 입력이 바뀌면 다시 그린다. 필터 버튼을 누르면 다시 그린다. 리스트 내부 버튼은 이벤트 위임으로 처리한다. 이 세 줄기만 이해하면 비전공자도 화면 앱을 계속 확장할 수 있다.

Claude Code에 추가로 던질 개선 요청

지금 만든 자료 다운로드 센터에 아래 개선을 적용해줘.
1. 과목별 자료 개수를 상단 카드로 보여줘.
2. 링크 복사 성공 메시지를 토스트로 1.5초 보여줘.
3. 모바일 폭 390px에서 버튼이 줄바꿈되어도 보기 좋게 정렬해줘.
4. 자료가 없을 때 빈 상태 문구를 넣어줘.

이 요청 문장은 결과 기준이 선명하다. 바이브 코딩은 감각이 아니라 판정 기준 게임이다.

4단계. AntiGravity로 동선 검수하기

초안이 돌아간다고 끝이 아니다. 이제 AntiGravity로 실제 사용 동선을 검수한다. 이 단계가 빠지면 비전공자는 늘 같은 함정에 걸린다. 데스크톱에서는 멀쩡해 보였는데 모바일에서 버튼이 붙어 있거나, 검색어 지웠을 때 목록이 안 돌아오는 식이다.

프로젝트 열기와 검수 요청

cd ~/projects/resource-center
agy .

이 수업 자료 다운로드 센터를 브라우저에서 테스트해줘.
검색어 입력, 과목 필터 전환, 링크 복사 버튼, 빈 검색 결과, 모바일 폭 390px 레이아웃까지 확인하고
문제가 있으면 수정 계획을 먼저 보여준 뒤 패치하고 다시 검수해줘.

이 요청의 장점은 검수 범위가 명확하다는 점이다. AntiGravity가 브라우저 기록과 화면 상태를 기준으로 확인하면, 비전공자도 어디서 동작이 틀렸는지 추적하기 쉬워진다.

검수 체크리스트

• 검색어를 입력했을 때 관련 카드만 남는가
• Claude Code, AntiGravity, 공통 필터가 정확히 나뉘는가
• 링크 복사 버튼을 눌렀을 때 안내 문구가 잠깐 뜨는가
• 결과가 없을 때 빈 화면이 아니라 문장이 보이는가
• 모바일 폭에서 버튼과 카드 여백이 무너지지 않는가

비전공자는 이 체크리스트만 들고 있어도 충분하다. 문법을 다 모르는 대신 합격선을 잡는 사람이 되면 된다.

오늘 5분 실습

오늘은 완성 욕심 버리고 딱 다섯 분만 써도 된다. 아래 순서로 해보면 감이 바로 잡힌다.

1. 실습 폴더를 만들고 Claude Code로 세 파일 초안을 받는다.
2. 자료 목록 세 개만 직접 입력한다.
3. 검색창에서 한 단어를 넣어 카드가 줄어드는지 확인한다.
4. AntiGravity로 모바일 폭 검수를 한 번 돌린다.

이 네 단계만 끝내도 비전공자 입장에서는 앱을 하나 만든 것이다. 거창한 배포보다 이 완주 경험이 다음 실습 속도를 바꾼다.

미래이음연구소 홍보

마무리

Claude Code와 AntiGravity를 같이 쓴다는 말은 도구를 많이 쓴다는 뜻이 아니다. 초안 생성과 검수 책임을 나눠서 실수를 줄인다는 뜻이다. 오늘 만든 수업 자료 다운로드 센터는 작지만 실무형이다. 자료 목록만 바꾸면 강의안 센터, 과제 제출 안내판, 실습 링크 모음 페이지로 그대로 재활용할 수 있다.

비전공자에게 바이브 코딩은 코드를 외우는 일이 아니라 문제를 작은 단위로 자르고, 검수 기준을 먼저 세우고, 수정 루프를 짧게 돌리는 감각을 익히는 일이다. 이 흐름만 잡히면 다음에는 더 큰 화면도 충분히 만든다.

참고자료

• Claude Code Quickstart
• Antigravity IDE 소개 페이지
• 브라우저 local UI 패턴 기초 자료