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

왜 강의자료 다운로드 센터부터 만들어야 하는가

비전공자가 바이브 코딩을 배울 때 중요한 건 거창한 서비스를 시작하는 일이 아니다. 내가 지금 당장 쓰는 업무를 작은 웹페이지로 바꾸는 경험이 먼저다. 강의자료 다운로드 센터는 그 점에서 아주 좋다. 수업 소개 PDF, 실습 예제 ZIP, 안내문 JPG, 과제 양식 DOCX처럼 파일 종류가 다양해도 화면 구조는 단순하다. 결과도 바로 보이고, 수정 포인트도 명확하다.

특히 교육 현장에서는 자료를 메신저로 따로 보내느라 반복 작업이 많다. 파일이 바뀔 때마다 다시 첨부하고, 수강생은 어떤 파일이 최신인지 헷갈린다. 그래서 오늘 실습은 Claude Code로 코드와 동작을 만들고, AntiGravity로 자료실 화면 구성을 빠르게 잡는 흐름에 집중한다. 이 패턴을 익히면 다음에는 과제 제출 보드, 실습 링크 모음, 강의 아카이브 페이지로 바로 확장할 수 있다.

Claude Code와 AntiGravity 역할 나누기

여기서 핵심은 둘 다 코드를 시키는 게 아니라 역할을 나눠 쓰는 것이다. AntiGravity에서는 먼저 강의자료 센터에 필요한 섹션 순서를 잡는다. 상단 설명문, 자료 카테고리 버튼, 카드형 목록, 업데이트 안내 배너, 문의 박스 같은 흐름을 눈으로 확인한다. 그다음 Claude Code에서는 실제 파일 생성, 데이터 배열 설계, 검색 필터, 버튼 액션, 반응형 정리까지 맡긴다.

• AntiGravity: 화면 흐름, 카드 배치, 문구 톤, 색감 초안
• Claude Code: HTML 구조, CSS 정리, 자바스크립트 렌더링, 수정 반복
• 내 역할: 수업 목적에 맞는 프롬프트를 짧고 분명하게 던지는 것

비전공자가 흔히 망하는 패턴은 한 번에 모든 걸 시키는 것이다. 로그인도 넣고, 관리자 페이지도 넣고, 업로드도 넣고, 통계도 넣자고 하면 바로 꼬인다. 오늘은 정적 자료실부터 완성한다. 작게 끝내는 사람이 결국 빨리 간다.

1단계. Vite 프로젝트와 파일 구조 만들기

가장 깔끔한 출발은 바닐라 Vite다. React부터 들이밀 필요 없다. 파일 세 개만 잘 써도 수업용 자료실은 충분히 완성된다.

npm create vite@latest class-resource-center -- --template vanilla
cd class-resource-center
npm install
npm run dev

이제 Claude Code에 아래처럼 요청한다.

비전공자 실습용 강의자료 다운로드 센터를 만들어줘.
파일은 index.html, style.css, main.js 중심으로 유지해줘.
자료 카테고리는 수업안내, 실습파일, 과제양식, 참고자료 4개로 해줘.
카드형 목록, 검색창, 카테고리 필터 버튼, 다운로드 버튼을 넣어줘.
모바일에서도 버튼이 깨지지 않게 작성해줘.

여기서 포인트는 요구를 기능 단위로 나누는 것이다. 처음부터 다크모드, 애니메이션, 관리자 화면까지 한 줄에 몰아넣지 마라. Claude Code는 잘하지만, 비전공자가 읽고 수정하기 쉬운 결과를 받으려면 요청도 정리돼 있어야 한다.

추천 파일 구조

class-resource-center/
  index.html
  style.css
  main.js
  public/
    files/
      intro-guide.pdf
      practice-kit.zip
      assignment-form.docx

실습 단계에서는 실제 파일이 없어도 된다. 일단 경로 이름부터 만들어두면 화면과 버튼 동작 확인이 빨라진다.

2단계. AntiGravity로 화면 초안 잡기

이제 AntiGravity에는 코드가 아니라 레이아웃을 요청한다. 예를 들면 이런 식이다.

비전공자도 바로 이해할 수 있는 강의자료 다운로드 센터 화면 초안을 만들어줘.
상단에는 제목과 한 줄 설명,
그 아래에는 카테고리 버튼 4개,
중간에는 자료 카드 목록,
각 카드에는 파일 종류, 설명, 업데이트 날짜, 다운로드 버튼을 넣어줘.
맨 아래에는 문의 안내 박스를 넣고 색감은 차분한 파랑과 흰색 위주로 구성해줘.

이 단계의 목적은 예쁜 시안을 뽑는 게 아니라 흐름을 먼저 보는 것이다. 교육용 페이지는 화려함보다 가독성이 중요하다. 수강생이 파일을 3초 안에 찾을 수 있느냐가 핵심이다. 그래서 카드 간격, 버튼 위치, 모바일 줄바꿈만 확인해도 절반은 끝난다.

초안에서 먼저 볼 것

• 검색창이 제목 아래에 바로 보여서 찾기 흐름이 끊기지 않는지
• 카테고리 버튼이 모바일에서 두 줄로 자연스럽게 넘어가는지
• 다운로드 버튼이 카드 맨 아래에서 일정한 위치를 유지하는지
• 업데이트 날짜가 작아도 읽히는지

3단계. Claude Code로 자료 카드와 데이터 붙이기

화면 초안을 봤다면 이제 Claude Code로 실제 데이터를 붙인다. 비전공자가 가장 빨리 감을 잡는 방식은 데이터 배열 하나로 시작하는 것이다. 아래처럼 샘플 자료 4개만 넣어도 충분하다.

const resources = [
  {
    category: "수업안내",
    title: "첫 수업 안내문",
    description: "수업 준비물, 접속 방법, 진행 순서를 정리한 PDF입니다.",
    fileType: "PDF",
    updatedAt: "2026-04-28",
    url: "/files/intro-guide.pdf"
  },
  {
    category: "실습파일",
    title: "Claude Code 실습 예제",
    description: "HTML, CSS, JS 기본 예제가 들어 있는 압축 파일입니다.",
    fileType: "ZIP",
    updatedAt: "2026-04-28",
    url: "/files/practice-kit.zip"
  },
  {
    category: "과제양식",
    title: "과제 제출 양식",
    description: "실습 결과와 느낀 점을 정리하는 문서 양식입니다.",
    fileType: "DOCX",
    updatedAt: "2026-04-28",
    url: "/files/assignment-form.docx"
  }
];

이 데이터를 카드로 뿌리는 렌더링 함수는 아래처럼 단순하게 가면 된다.

function renderResources(items) {
  const list = document.querySelector("#resourceList");
  list.innerHTML = items.map((item) => `
    <article class="resource-card">
      <span class="resource-type">${item.fileType}</span>
      <h3>${item.title}</h3>
      <p>${item.description}</p>
      <div class="resource-meta">
        <span>${item.category}</span>
        <span>업데이트 ${item.updatedAt}</span>
      </div>
      <a class="download-button" href="${item.url}" download>다운로드</a>
    </article>
  `).join("");
}

이 정도만 돌아가도 자료실의 뼈대는 완성이다. 여기서 DB 연동까지 욕심내지 말고, 먼저 화면과 동작이 정확한지 확인하는 게 맞다. 바이브 코딩은 복잡함을 뒤로 미루는 기술이기도 하다.

4단계. 검색, 필터, 다운로드 버튼 완성하기

자료실이 진짜 쓸만해지려면 찾기와 정리가 쉬워야 한다. 그래서 검색과 카테고리 필터를 꼭 붙여야 한다. 아래 코드는 입력값을 기준으로 제목, 설명, 카테고리를 함께 필터링하는 예시다.

const searchInput = document.querySelector("#searchInput");
const filterButtons = document.querySelectorAll("[data-category]");
let currentCategory = "전체";

function getFilteredResources(keyword) {
  return resources.filter((item) => {
    const matchesCategory = currentCategory === "전체" || item.category === currentCategory;
    const lowerKeyword = keyword.toLowerCase();
    const matchesKeyword =
      item.title.toLowerCase().includes(lowerKeyword) ||
      item.description.toLowerCase().includes(lowerKeyword) ||
      item.category.toLowerCase().includes(lowerKeyword);
    return matchesCategory && matchesKeyword;
  });
}

searchInput.addEventListener("input", (event) => {
  renderResources(getFilteredResources(event.target.value));
});

filterButtons.forEach((button) => {
  button.addEventListener("click", () => {
    currentCategory = button.dataset.category;
    renderResources(getFilteredResources(searchInput.value));
  });
});

다운로드 버튼은 정적 파일이면 download 속성만으로도 충분히 동작한다. 만약 실제 운영에서 파일이 새 탭으로 열리게 하고 싶다면 target="_blank" 형태로 바꾸면 된다. 다만 초보 실습에서는 버튼이 눌렸을 때 어떤 자료를 받는지가 더 중요하니, 파일명과 설명을 카드에 분명히 적는 편이 낫다.

이 단계에서 꼭 체크할 것

• 검색어가 비어 있을 때 전체 자료가 다시 보이는지
• 필터 버튼을 누른 뒤 검색해도 결과가 정상적으로 줄어드는지
• 모바일 화면에서 카드 버튼이 옆으로 밀리지 않는지
• 파일 설명이 두 줄이 넘어가도 카드 높이가 너무 깨지지 않는지

5단계. 실제 수업용으로 다듬고 배포 점검하기

이제 마지막으로 교육 현장에 맞게 다듬는다. 자료명만 예쁘게 쓰는 것보다 파일 최신성을 드러내는 게 더 중요하다. 예를 들어 제목은 실습 예제보다 2주차 실습 예제 ZIP이 낫다. 설명도 다운로드하세요보다는 수업 시작 전 압축을 풀어 두세요처럼 행동 지시가 들어가면 훨씬 친절하다.

Claude Code에는 마무리 단계에서 아래처럼 요청하면 좋다.

현재 자료실을 수업 현장용으로 다듬어줘.
카드 간격을 정리하고 모바일 화면을 우선으로 맞춰줘.
파일이 없을 때 보여줄 안내 문구도 추가해줘.
상단 설명문에는 비전공자도 바로 따라오는 실습 자료실이라는 메시지를 넣어줘.

실제 배포 전에는 로컬에서 한 번 더 확인한다.

npm run dev
npm run build
npm run preview

여기까지 되면 비전공자도 충분히 결과물을 손에 쥔 상태다. 코드 한 줄 한 줄을 다 이해하지 못해도 괜찮다. 중요한 건 내가 원하는 구조를 말하고, 나온 결과를 눈으로 검수하고, 필요한 수정만 다시 요청하는 흐름을 체득하는 것이다.

자주 막히는 포인트

• 카테고리 버튼은 눌리는데 결과가 안 바뀐다. 현재 선택 상태를 저장하는 변수가 빠졌을 가능성이 크다.
• 다운로드 버튼을 눌렀는데 404가 뜬다. 파일명과 실제 경로를 먼저 맞춰라. 코드보다 경로 오타가 더 흔하다.
• 카드 높이가 제각각이라 지저분하다. 버튼 위치를 하단에 고정하고 카드 내부를 flex로 정리하면 깔끔해진다.
• Claude Code가 너무 긴 결과를 주면 한 번에 받지 말고 검색 기능, 카드 스타일, 모바일 정리처럼 작업을 나눠 다시 요청하면 된다.

Q&A

Q1. 비전공자인데 파일 업로드 기능까지 바로 넣어야 하나

아니다. 오늘은 정적 자료실만 끝내도 충분하다. 파일 업로드는 다음 단계다. 먼저 보는 화면과 찾는 흐름을 완성해라.

Q2. AntiGravity 없이 Claude Code만 써도 되나

된다. 다만 비전공자는 화면 감을 먼저 잡는 편이 훨씬 덜 헤맨다. AntiGravity는 정답 생성기가 아니라 빠른 초안 도구로 쓰면 된다.

Q3. 자료가 많아지면 어떻게 확장하나

처음에는 배열로 시작하고, 나중에 JSON 파일이나 CMS 데이터로 분리하면 된다. 중요한 건 처음부터 구조를 복잡하게 만들지 않는 것이다.

오늘 5분 실습

1. 자료 카드 3개만 들어 있는 배열을 만든다.
2. Claude Code에 카드 레이아웃만 먼저 작성해달라고 요청한다.
3. 그다음 검색창 하나만 추가한다.
4. 마지막으로 내 수업명에 맞춰 제목과 설명문을 바꾼다.

이 5분 루틴만 해도 비전공자는 초안 보기 → 코드 받기 → 직접 고르기 → 결과 확인하기 흐름을 한 번 완주할 수 있다. 이게 쌓이면 더 복잡한 웹앱도 겁이 덜 난다.

미래이음연구소

마무리

바이브 코딩은 어려운 코드를 외우는 싸움이 아니다. 필요한 화면을 먼저 떠올리고, 도구별 역할을 나눠서, 작은 결과물을 끝까지 완성하는 싸움이다. 오늘처럼 강의자료 다운로드 센터 하나만 제대로 만들어도 비전공자는 바로 실무 감각을 잡는다. AntiGravity로 화면을 보고, Claude Code로 동작을 붙이고, 내가 마지막 선택을 하면 된다. 이 패턴이 익숙해지면 다음 실습은 훨씬 가볍다.

참고자료

• Anthropic, Claude Code overview
• Vite Guide, Getting Started
• MDN Web Docs, HTML download attribute