Claude Code와 AntiGravity로 비전공자가 시간표 웹앱 만드는 실습 튜토리얼

왜 이 실습이 비전공자에게 잘 맞는가

비전공자가 바이브 코딩에서 제일 많이 막히는 이유는 코드를 몰라서가 아니라 작업 순서를 한 번에 다 잡으려 하기 때문이다. 오늘 예제는 그 부담을 줄이기 위해 반응형 시간표 웹앱 하나만 만든다. 수업명, 요일, 시간, 강의실, 색상 구분만 들어가도 결과가 바로 보이고, HTML과 CSS, 간단한 자바스크립트 흐름까지 한 번에 익힐 수 있다.

핵심은 도구를 섞어 쓰는 감각이다. AntiGravity에서는 화면 초안을 빠르게 만들고, Claude Code에서는 터미널 기준으로 구조를 다듬고 오류를 잡는다. 이 조합이 좋은 이유는 비전공자도 화면과 코드의 역할을 분리해서 생각할 수 있기 때문이다. 눈으로 먼저 보고, 그다음 로직을 붙이면 훨씬 덜 무섭다.

오늘 완성 목표는 거창하지 않다. 휴대폰에서도 보이는 시간표 카드형 웹앱, 필터 버튼, 데이터 배열 수정 포인트, 그리고 혼자 다시 응용할 수 있는 프롬프트 습관까지 챙기면 성공이다.

Claude Code와 AntiGravity 역할 나누기

Claude Code는 코드베이스를 읽고 파일을 만들고 명령을 실행하면서 구조를 정리하는 데 강하다. 실제로 폴더를 만들고, HTML과 CSS를 분리하고, 스크립트를 손봐야 할 때 훨씬 안정적이다. 반대로 AntiGravity는 첫 화면 분위기와 배치, 카드 모양, 버튼 구성을 빠르게 잡을 때 속도가 좋다.

실전에서는 이렇게 나누면 편하다.

• AntiGravity: 화면 레이아웃 초안, 색감, 카드 구조, 문구 정리
• Claude Code: 파일 생성, 코드 정리, 오류 수정, 반응형 다듬기
• 내 역할: 요구사항을 짧고 선명하게 말하고, 결과를 확인하면서 다음 수정 지시 내리기

즉, 처음부터 완벽한 프롬프트를 쓰려고 애쓰지 말고, 화면 초안과 로직 보강을 분리하면 된다. 이게 비전공자에게 제일 덜 피곤한 루트다.

1단계. 작업 폴더와 기본 파일 만들기

먼저 빈 폴더를 하나 만들고 정적 웹앱으로 시작한다. 프레임워크를 바로 얹지 않아도 된다. 첫 실습은 단순해야 오래 간다.

mkdir timetable-app
cd timetable-app
mkdir assets

touch index.html

touch styles.css

touch app.js

이제 Claude Code를 켜서 작업 범위를 짧게 던진다. 한 번에 여러 요구를 쏟아붓지 말고, 파일 구조와 목표부터 말하는 편이 훨씬 잘 맞는다.

claude

이 폴더에서 index.html, styles.css, app.js를 사용하는 정적 시간표 웹앱을 만들어줘.
요구사항은 다음과 같아.
1. 상단 제목과 설명이 있어야 함
2. 월요일부터 금요일까지 시간표 카드를 보여줘
3. 모바일에서 한 줄씩 자연스럽게 내려와야 함
4. 수업 종류별 색상 구분이 있어야 함
5. 데이터는 app.js 배열로 분리해줘

여기서 중요한 건 완성도를 요구하기보다 구조를 요구하는 것이다. 비전공자가 처음부터 애니메이션, 다크모드, 필터, 저장 기능까지 한꺼번에 넣으려 하면 바로 꼬인다.

2단계. AntiGravity로 화면 초안 만들기

이제 AntiGravity에서는 같은 앱을 시각적으로 다듬는 방향으로 요청한다. Claude Code에게는 구조를, AntiGravity에게는 화면 경험을 맡기는 식이다.

반응형 시간표 웹앱 화면 초안을 만들어줘.
대상은 교육 강사와 학부모가 함께 보기 쉬운 스타일.
구성은 제목, 설명, 요일 필터 버튼, 시간표 카드 리스트.
카드는 수업명, 시간, 장소, 대상, 난이도를 보여줘.
색상은 과하지 않게 파란색, 보라색, 민트 계열을 사용하고
모바일에서는 카드가 세로로 정렬되게 해줘.

이 단계에서 확인할 체크포인트는 세 가지다.

• 텍스트 크기가 너무 작지 않은가
• 카드 간격이 답답하지 않은가
• 모바일에서 버튼이 한 줄에 억지로 들어가지 않는가

초안이 마음에 들면 바로 복사해서 쓰기보다, 어떤 부분이 좋았는지 말로 정리해두는 게 좋다. 예를 들면 카드 상단 배지 스타일은 유지하고 필터 버튼 간격만 넓혀줘 같은 식이다. 이런 식의 수정 언어가 쌓이면 다음 작업 속도가 확 올라간다.

3단계. Claude Code로 로직과 반응형 정리하기

이제 다시 Claude Code로 돌아와 실제 동작을 붙인다. 시간표 데이터는 배열로 두고, 버튼을 누르면 해당 요일만 보이게 하면 된다. 이 정도만 들어가도 웹앱 느낌이 확 난다.

const classes = [
  { day: "월", title: "AI 글쓰기", time: "10:00-11:30", room: "온라인", level: "입문", type: "writing" },
  { day: "화", title: "바이브 코딩", time: "14:00-16:00", room: "미래이음랩", level: "초급", type: "coding" },
  { day: "수", title: "영상 제작", time: "19:00-20:30", room: "줌", level: "중급", type: "video" },
  { day: "목", title: "챗봇 만들기", time: "13:00-14:30", room: "온라인", level: "입문", type: "bot" },
  { day: "금", title: "업무 자동화", time: "16:00-18:00", room: "강의실 B", level: "초급", type: "automation" }
];

그리고 Claude Code에는 이렇게 요청하면 된다.

app.js의 시간표 데이터를 카드로 렌더링해줘.
요일 필터 버튼을 누르면 해당 요일만 보이게 하고,
전체 버튼을 누르면 다시 모두 보이게 해줘.
초보자가 읽기 쉽게 함수 이름을 단순하게 써줘.

비전공자 입장에서는 여기서 함수 이름이 중요하다. renderCards, filterByDay, createCard 정도면 나중에 다시 봐도 덜 낯설다. AI가 너무 영리한 이름을 붙이면 오히려 기억에 안 남는다.

예시 렌더링 코드

const listEl = document.querySelector("#class-list");
const buttons = document.querySelectorAll("[data-day]");

function createCard(item) {
  return `
    <article class="class-card ${item.type}">
      <span class="badge">${item.day}</span>
      <h3>${item.title}</h3>
      <p>시간: ${item.time}</p>
      <p>장소: ${item.room}</p>
      <p>난이도: ${item.level}</p>
    </article>
  `;
}

function renderCards(items) {
  listEl.innerHTML = items.map(createCard).join("");
}

function filterByDay(day) {
  if (day === "전체") {
    renderCards(classes);
    return;
  }
  renderCards(classes.filter((item) => item.day === day));
}

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    filterByDay(button.dataset.day);
  });
});

renderCards(classes);

4단계. 시간표 데이터 구조 이해하기

비전공자가 여기서 꼭 가져가야 할 포인트는 디자인보다 데이터 구조다. 시간표 카드가 다섯 개든 쉰 개든, 결국은 같은 형태의 정보를 배열로 넣고 반복해서 보여주는 구조다. 이 감각이 생기면 강의 목록, 행사 일정, 상담 예약, 도서 소개 페이지까지 거의 같은 방식으로 확장된다.

즉, 오늘 만든 것은 시간표 앱이지만 사실은 반복 데이터 화면화 연습이다. 그래서 아래처럼 항목 키를 통일해두면 다음에 다른 주제로 바꾸기 쉽다.

• day: 요일
• title: 수업명
• time: 시간
• room: 장소
• level: 난이도
• type: 색상과 스타일 분기용 값

나중에 수강 링크를 붙이고 싶으면 link 키 하나만 추가하면 되고, 강사 이름을 넣고 싶으면 teacher 키를 추가하면 된다. 결국 확장은 데이터에서 시작한다.

5단계. 자주 망가지는 포인트 점검하기

실습이 끝나기 전에 아래 다섯 가지는 꼭 체크하자. 여기서 무너지면 AI 도구 탓을 하게 되는데, 사실은 요구사항이 너무 넓거나 확인 순서가 빠진 경우가 많다.

• 카드가 안 보이면 index.html에서 app.js 연결 경로부터 확인
• 스타일이 안 먹으면 styles.css 링크 위치와 파일명 확인
• 필터가 안 되면 버튼의 data-day 값과 배열의 day 값을 비교
• 모바일이 깨지면 카드 최소 너비와 컨테이너 그리드 설정 확인
• 수정 요청이 길어지면 AntiGravity와 Claude Code 요청을 다시 분리

특히 마지막이 중요하다. 화면 수정과 로직 수정을 한 문장에 다 넣으면 결과가 섞인다. 버튼 배치는 AntiGravity, 필터 로직은 Claude Code처럼 나눠서 말하면 다시 통제권이 생긴다.

Q&A

Q1. 비전공자는 어느 도구부터 시작하는 게 좋은가

처음엔 AntiGravity로 화면 감을 잡고, 그다음 Claude Code로 구조를 정리하는 순서가 편하다. 눈으로 결과를 먼저 봐야 두려움이 줄어든다.

Q2. 프레임워크 없이 시작해도 되나

된다. 오히려 처음 두세 번은 정적 HTML, CSS, 자바스크립트로 가는 편이 개념이 빨리 붙는다. 프레임워크는 반복 성공 뒤에 올려도 늦지 않다.

Q3. AI가 이상한 코드를 주면 어떻게 해야 하나

한 번에 전부 고치려 하지 말고, 문제를 눈에 보이는 단위로 자른다. 예를 들면 모바일에서 카드가 겹친다, 전체 버튼이 안 먹는다처럼 증상을 잘라서 다시 요청하면 된다.

오늘 5분 실습

1. 위 예제 배열에서 수업 2개를 직접 바꿔본다.
2. 요일 버튼에 토요일을 추가해본다.
3. 카드에 teacher 항목을 넣고 화면에 출력해본다.
4. Claude Code에게 카드 hover 효과는 약하게, 모바일 버튼 간격은 넓게라고 수정 요청해본다.

이 5분 실습만 해도 단순 복붙에서 한 단계 올라간다. 오늘의 핵심은 완성품보다 수정 지시를 분리해서 주는 연습이다.

미래이음연구소

마무리

Claude Code와 AntiGravity를 같이 쓰면 비전공자도 바이브 코딩을 훨씬 덜 막히면서 배울 수 있다. 중요한 건 누가 더 똑똑한 도구인가가 아니라, 어느 도구에 어떤 일을 맡길지 구분하는 감각이다. 오늘처럼 시간표 웹앱 하나를 끝까지 만들어보면 그 감각이 생각보다 빨리 붙는다.

다음에는 이 구조를 그대로 가져가서 수강 신청 페이지, 행사 일정 보드, 강의 후기 모음 페이지로 확장해보면 된다. 작은 결과물을 여러 번 완성하는 쪽이 결국 가장 빨리 는다.

참고자료

• Claude Code Overview
• Google Antigravity