목차
왜 개인 지식 검색 노트부터 만들어야 하나
비전공자가 바이브 코딩을 배울 때 제일 아까운 순간은 배운 내용을 여기저기 흘리고 다시 찾느라 시간을 버리는 때다. Claude Code와 AntiGravity를 같이 써도 결국 손에 남는 건 프로젝트 폴더와 메모 구조다. 그래서 오늘 실습은 거대한 서비스가 아니라 개인 지식 검색 노트다. 강의 중에 적어둔 명령어, 에러 해결 메모, 프롬프트 요약, 실습 포인트를 한 화면에서 검색하고 태그로 거를 수 있게 만드는 작은 앱이다.
이 주제가 좋은 이유는 명확하다. 서버가 없어도 되고, 로그인도 필요 없고, 결과가 바로 눈에 보인다. 게다가 나중에 FAQ 보드, 수업 자료 라이브러리, 프로젝트 회고 보드로 확장하기도 쉽다. Anthropic의 Claude Code 문서는 터미널 안에서 맥락 수집, 작업, 검증 루프를 강조하고, Google Antigravity 자료는 Agent Manager와 Browser를 통한 흐름 점검을 강조한다. 둘을 같이 쓰면 비전공자도 화면과 코드의 역할을 분리해서 배울 수 있다.
Claude Code와 AntiGravity 역할 나누기
둘을 같이 쓸 때 핵심은 같은 일을 중복으로 시키지 않는 것이다. Claude Code는 파일 생성, 컴포넌트 수정, 에러 수정처럼 코드 베이스 안쪽 일을 맡기고, AntiGravity는 화면 구조와 사용 흐름을 먼저 보는 쪽에 맡기면 된다. 정리하면 아래처럼 생각하면 편하다.
- Claude Code: 폴더 읽기, 파일 작성, 컴포넌트 연결, 실행 명령 정리
- AntiGravity: 화면 순서 점검, 입력 흐름 확인, 초보자 관점 검수
- 사용자: 어떤 메모를 쌓을지 결정하고 결과를 선택
이 분업만 익혀도 비전공자는 훨씬 덜 헷갈린다. AI 둘을 경쟁시키는 게 아니라, 한쪽은 공사반장, 한쪽은 동선 감리라고 보면 된다. 괜히 둘 다에게 앱 전체를 한 번에 맡기면 화려한 말만 길어지고 손은 더 느려진다.
1단계. 가장 작은 React 프로젝트 만들기
오늘 예시는 React와 Vite 기준이다. 이유는 단순하다. 설치가 빠르고 파일 구조가 짧아서 비전공자가 보기 덜 부담스럽다. 먼저 Claude Code가 읽기 쉬운 깨끗한 폴더부터 만든다.
npm create vite@latest knowledge-note -- --template react
cd knowledge-note
npm install
npm install lucide-react
npm run dev여기서 중요한 건 시작부터 기능 욕심을 줄이는 일이다. 검색창, 태그 필터, 카드 목록 이 세 가지만 먼저 만든다. 로그인, 데이터베이스, 관리자 화면은 오늘 버린다. 비전공자 실습은 완성 경험이 우선이다.
Claude Code에게는 이렇게 짧게 요청하면 된다.
React Vite 프로젝트에서 개인 지식 검색 노트 화면을 만들어 줘.
상단에 검색창, 그 아래 태그 버튼, 아래에는 메모 카드 목록이 보이게 해 줘.
스타일은 깔끔한 카드형으로 하고 모바일에서도 무너지지 않게 해 줘.2단계. 수업 메모 데이터를 구조화하기
초보자가 자주 놓치는 부분이 바로 데이터 모양이다. 메모를 그냥 긴 문장으로만 두면 나중에 검색이 약해진다. 최소한 제목, 카테고리, 난이도, 태그, 요약, 명령어 예시는 나눠두는 편이 좋다. 아래처럼 src/data/notes.js를 만들면 시작이 편하다.
export const notes = [
{
id: 1,
title: "Claude Code 설치와 첫 실행",
category: "기초",
level: "입문",
tags: ["Claude Code", "터미널", "설치"],
summary: "설치 후 현재 폴더를 기준으로 작업을 시작하는 가장 작은 흐름",
command: "claude"
},
{
id: 2,
title: "AntiGravity에서 화면 흐름 검토하기",
category: "실습",
level: "입문",
tags: ["AntiGravity", "화면설계", "검토"],
summary: "입력창과 결과 카드 위치를 먼저 보고 수정 포인트를 찾는 방법",
command: "브라우저 미리보기 후 수정 포인트 3개 정리"
},
{
id: 3,
title: "에러 메모를 검색 가능한 형태로 남기기",
category: "문제해결",
level: "초급",
tags: ["에러", "검색", "메모"],
summary: "에러 원인과 해결 결과를 분리해서 저장하면 다음 실습이 빨라진다",
command: "npm run dev"
}
];이 구조의 장점은 태그 필터가 쉬워진다는 점이다. 나중에 메모가 50개, 100개로 늘어나도 무엇을 찾을지 기준이 남아 있다. 바이브 코딩은 결국 잘 쌓은 메모 구조가 반이다.
3단계. 검색과 필터 화면 붙이기
이제 Claude Code가 진짜 잘하는 구간이다. 검색어와 태그를 받아서 보이는 목록만 바꾸면 된다. 아래처럼 App.jsx를 단순하게 시작하면 충분하다.
import { useMemo, useState } from "react";
import { notes } from "./data/notes";
const allTags = [...new Set(notes.flatMap((note) => note.tags))];
export default function App() {
const [query, setQuery] = useState("");
const [activeTag, setActiveTag] = useState("전체");
const filteredNotes = useMemo(() => {
return notes.filter((note) => {
const matchQuery =
note.title.includes(query) ||
note.summary.includes(query) ||
note.tags.join(" ").includes(query);
const matchTag = activeTag === "전체" || note.tags.includes(activeTag);
return matchQuery && matchTag;
});
}, [query, activeTag]);
return (
<main className="wrap">
<h1>개인 지식 검색 노트</h1>
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="명령어, 태그, 주제를 검색"
/>
<div className="tags">
<button onClick={() => setActiveTag("전체")}>전체</button>
{allTags.map((tag) => (
<button key={tag} onClick={() => setActiveTag(tag)}>{tag}</button>
))}
</div>
<section className="grid">
{filteredNotes.map((note) => (
<article key={note.id} className="card">
<h2>{note.title}</h2>
<p>{note.summary}</p>
<code>{note.command}</code>
</article>
))}
</section>
</main>
);
}여기서 포인트는 코드가 멋져 보이는가가 아니다. 검색어 하나 넣었을 때 바로 결과가 줄어드는 경험을 만드는 게 중요하다. 이 한 번의 성공이 비전공자에게는 다음 실습으로 가는 연료가 된다.
4단계. AntiGravity로 사용 흐름 검수하기
화면이 떴다고 끝이 아니다. AntiGravity 쪽에서는 입력창이 바로 보이는지, 태그 버튼이 너무 많은지, 카드 안 정보가 과한지 먼저 본다. Google Antigravity Codelab이 말하는 Agent Manager, Editor, Browser 흐름을 여기서 그대로 써먹으면 된다. 즉 코드를 바로 더 짜기 전에 먼저 화면 동선을 점검하는 거다.
예를 들어 AntiGravity에 아래처럼 요청하면 된다.
개인 지식 검색 노트 화면을 초보자 관점에서 검토해 줘.
검색창이 첫 화면에서 바로 이해되는지,
태그 버튼 수가 과하지 않은지,
메모 카드에 꼭 필요한 정보만 남았는지 확인해 줘.검토 결과가 나오면 다시 Claude Code에게 아주 작게 지시한다. 예를 들면 검색창 placeholder를 더 직관적으로 바꿔 줘, 카드 상단에 난이도 배지를 추가해 줘, 태그 버튼을 두 줄로 정리해 줘 정도면 충분하다. 이 리듬이 중요하다. 큰 요청 한 번보다 작은 요청 세 번이 훨씬 덜 망가진다.
5단계. 비전공자가 막히는 지점 줄이기
실습을 하다 보면 초보자는 늘 비슷한 데서 멈춘다. 첫째, 파일 이름이 틀린다. 둘째, import 경로가 엇갈린다. 셋째, 검색은 되는데 왜 결과가 안 바뀌는지 감이 안 온다. 이럴 때는 개념 설명보다 체크포인트가 더 잘 먹힌다.
- 검색이 안 되면 input의 value와 onChange가 연결됐는지 본다.
- 카드가 안 보이면 notes 배열 export와 import 경로를 먼저 본다.
- 태그가 안 먹히면 activeTag 기본값이 전체인지 확인한다.
- 한글 검색이 어색하면 title, summary, tags 세 군데 모두 includes 대상으로 넣는다.
이 정도 체크리스트만 있어도 비전공자는 덜 무너진다. 바이브 코딩의 진짜 생산성은 AI가 대신 짜준 코드량이 아니라, 내가 다시 들어가서 고칠 수 있는 거리까지 줄여주는 데 있다.
Q&A
Q1. 꼭 React여야 하나
아니다. HTML 파일 하나로 시작해도 된다. 다만 검색 상태와 태그 상태를 같이 다루기에는 React가 조금 더 읽기 쉽다.
Q2. Claude Code와 AntiGravity 중 하나만 써도 되나
된다. 그런데 둘을 나눠 쓰면 코드 작성과 화면 검토가 분리돼서 초보자가 덜 지친다. 역할 분리가 생각보다 크다.
Q3. 이걸 어디까지 확장할 수 있나
FAQ 보드, 강의 자료 검색기, 프로젝트 회고 노트, 팀 온보딩 자료함까지 자연스럽게 이어진다. 오늘 만든 구조가 씨앗이다.
Q4. 데이터베이스 없이도 의미가 있나
충분하다. 처음에는 직접 배열에 메모를 넣어보는 경험이 더 중요하다. 검색 구조를 이해한 뒤에야 저장 방식을 바꿔도 늦지 않다.
오늘 5분 실습
- 메모 3개만 가진
notes.js파일을 만든다. - 검색창 하나와 카드 목록 하나만 먼저 띄운다.
- 태그 버튼은 전체 포함 4개 이하로 줄인다.
- Claude Code에게 카드 배치만 수정해 달라고 짧게 요청한다.
- AntiGravity로 첫 화면 이해도가 어떤지 한 번 검토받는다.
딱 여기까지만 해도 오늘 실습은 성공이다. 많이 만드는 것보다 끝까지 보는 게 먼저다.
미래이음연구소
미래이음연구소는 비전공자도 바로 따라 할 수 있는 바이브 코딩 실습을 설계한다. Claude Code, AntiGravity, ChatGPT 같은 도구를 기능 소개로 끝내지 않고 강의자료 제작, 업무 자동화, 수업 운영 보드 같은 결과물 중심으로 연결한다.
강의 문의: 010-3343-4000 | lab.duonedu.net
마무리
오늘 만든 개인 지식 검색 노트는 겉으로 보면 작은 앱이다. 그런데 비전공자 입장에서는 꽤 큰 전환점이다. 메모가 흩어지는 상태에서 검색 가능한 구조로 넘어오고, AI에게 막연히 부탁하던 방식에서 역할을 나눠 지시하는 방식으로 넘어오기 때문이다. Claude Code는 코드 공사를 빠르게 밀어주고, AntiGravity는 화면 흐름을 덜 삐끗하게 잡아준다.
결국 바이브 코딩은 거대한 서비스를 한 번에 만드는 기술이 아니다. 내가 자주 부딪히는 불편 하나를 작게 구조화하고, AI 둘셋을 적당히 분업시켜 끝까지 완성하는 감각에 가깝다. 오늘 노트 앱 하나 완성했다면 이미 방향은 제대로 잡은 거다.
참고자료
- Anthropic Claude Code Docs, Quickstart
- Anthropic Claude Code Docs, How Claude Code works
- Google Codelabs, Getting Started with Google Antigravity
