이 단계에서 하는 것: 실습 폴더(
moneynote)를 VS Code로 열고, Claude Code를 실행한다. 가이드 문서와 회의록을 읽힌 뒤, 팀 규칙(CLAUDE.md)을 직접 만들고, 앱의 빈 뼈대와README.md까지 갖춘다. 다음 단계로 넘길 것: 규칙(CLAUDE.md)과 Next.js 앱 뼈대가 갖춰진 프로젝트.
우리는 코드를 직접 치지 않는다. AI 에이전트(Claude Code)에게 개발팀의 각 자리를 맡기고, 우리는 무엇을 만들지 정하고, 결과를 검토한다. 그 출발점은 프로젝트의 규칙을 갖추는 것이다.
중요한 전제. 압축을 푼 moneynote 폴더 안에는 미리 준비된 두 가지만 있다 — 회사 가이드 문서(docs/가이드/)와 회의록(data/킥오프_회의록.md). 팀 규칙 파일(CLAUDE.md)도, 앱 코드도, README.md도 아직 없다. 이번 장에서 그것들을 직접 만든다.
moneynote.zip을 내려받아 압축을 풀면 moneynote 폴더가 나온다(0장 참고).moneynote 폴더를 선택해 연다.docs/가이드/ 와 data/킥오프_회의록.md 가 보이는지 확인한다. (아직 CLAUDE.md도, 코드 파일도 없다. 정상이다.)용어: 회의록은 고객·기획 회의에서 나온 요구를 적은 글이다. 실제 회사에서 개발은 이렇게 회의에서 나온 이야기에서 출발한다.
data/킥오프_회의록.md가 우리의 출발점이고, 2장에서 AI가 이 회의록을 읽고 첫 문서(PRD)를 만든다.
이렇게 나오면 성공: 왼쪽에 docs/가이드/ 문서들과 data/킥오프_회의록.md가 보인다.
bash 터미널인지 확인).claude
이렇게 나오면 성공: Claude Code 입력창이 뜬다. AI가 답만 하는 게 아니라, 이 폴더의 파일을 직접 읽고 만들 수 있는 상태다.
먼저 AI에게 우리 회사 규칙과 이번 일의 출발점을 읽힌다. 아래를 그대로 붙여 넣는다.
이 프로젝트 폴더의 docs/가이드 폴더에 있는 문서들을 훑어보고, 우리 팀이 어떤 규칙으로 개발하는지 한국어로 요약해줘.
그리고 data/킥오프_회의록.md 를 읽고, 이 서비스에서 무엇을 원하는지 핵심 요구를 한국어로 정리해줘.
아직 아무것도 만들지 말고, 읽고 설명만 해줘.
이렇게 나오면 성공: 가이드 문서(디자인시스템·코딩컨벤션·프로젝트구조·깃커밋컨벤션) 요약과, 회의록에서 나온 핵심 요구(회원가입/로그인·수입·지출 기록·월별 통계·AI 자동 분류·요약·프리미엄 결제 등)가 한국어로 정리된다. — AI가 우리 회사 규칙과 이번 일의 출발점을 이해한 것이다.
CLAUDE.md는 프로젝트 공통 규칙을 적어 두는 파일이다. Claude Code가 모든 대화에서 자동으로 읽는다. 아직 이 파일이 없으니, 방금 읽힌 가이드 문서를 바탕으로 지금 만든다. 아래를 그대로 붙여 넣는다.
이 프로젝트의 공통 규칙을 CLAUDE.md로 만들어줘. 우리 팀 헌법이야. 방금 읽은 docs/가이드 문서를 따른다는 것과 함께, 다음을 꼭 넣어줘:
1) 잔액·통계 계산과 프리미엄 판정, AI 호출은 반드시 서버에서 한다. 화면에서 계산하지 않는다.
2) 클라이언트(화면)에서 Supabase를 직접 호출하지 않는다. 데이터 접근은 서버를 거친다.
3) 비밀값(Supabase 키·API 키)은 코드에 직접 쓰지 않고 .env / 환경변수로 관리한다.
4) 디자인·코드·폴더 구조·커밋은 docs/가이드 문서(디자인시스템·코딩컨벤션·프로젝트구조·깃커밋컨벤션)를 따른다.
5) 모든 기능은 정상·경계·실패 세 경우를 테스트한다.
6) 한국어로 설명하고, 결정을 내리면 이유를 짧게 기록한다. 큰 변경 전에는 계획을 먼저 보여주고 내 승인을 받는다.
이렇게 나오면 성공: 왼쪽 탐색기에 CLAUDE.md 가 새로 생기고, 위 규칙들이 담겨 있다. 이제부터 여는 모든 대화에서 AI가 이 규칙을 먼저 읽고 시작한다.
아직 이 폴더에는 규칙·문서와 회의록만 있고, 실행할 앱이 없다. Claude Code에게 Next.js 앱을 만들게 한다. 방금 만든 규칙과 가이드 문서를 따르게 한다.
이 폴더에는 CLAUDE.md와 docs/가이드 문서, data/킥오프_회의록.md 가 있어. 이것들은 그대로 두고, 이 폴더에
Next.js(App Router) + TypeScript + Tailwind CSS 앱을 만들어줘.
- 데이터 접근용 @supabase/supabase-js 와 AI 호출용 SDK도 함께 설치해줘.
- docs/가이드/디자인시스템.pdf 의 색·간격 토큰(primary·income·expense·balance 등)을
프로젝트의 Tailwind 설정 방식에 맞게 등록해줘(Tailwind v4면 globals.css의 @theme, v3면 tailwind.config).
- 폴더·파일 구조는 docs/가이드/프로젝트구조.pdf 를 따라줘.
다 만들면 개발 서버를 실행하는 방법을 알려줘.
만들어지면 개발 서버를 켜고 브라우저로 확인한다.
npm run dev
브라우저에서 http://localhost:3000 을 연다.
이렇게 나오면 성공: 브라우저에 기본 Next.js 화면이 뜨고, Tailwind 설정에 디자인시스템 토큰이 등록돼 있다. 이제부터 만드는 모든 코드가 이 앱 위에 쌓인다. (개발 서버는 터미널에서 Ctrl + C 로 멈춘다.)
마지막으로, 이 프로젝트가 무엇인지 적은 README.md를 만든다. 저장소를 여는 사람이 가장 먼저 보는 안내문이다.
이 프로젝트의 README.md를 만들어줘. 머니노트(AI 가계부)가 무엇인지 한두 줄로 소개하고,
기술 스택(Next.js·TypeScript·Tailwind·Supabase·Vercel)과 로컬 실행 방법(설치·개발 서버 실행)을 적어줘.
커밋은 docs/가이드/깃커밋컨벤션.pdf 를 따른다는 점도 한 줄 넣어줘.
이렇게 나오면 성공: 왼쪽 탐색기에 README.md가 생기고, 머니노트 소개와 실행 방법이 담겨 있다.
moneynote 폴더를 VS Code로 열었고, Claude Code가 실행됐다.CLAUDE.md를 직접 만들었고, Next.js 앱 뼈대가 만들어져 http://localhost:3000에 뜬다. 디자인 토큰이 Tailwind 설정에 배선됐다. README.md도 생겼다.claude가 실행되지 않으면 0단계로 돌아가 설치를 다시 확인한다. npm run dev가 안 되면 0단계의 Node.js(v22 이상)를 확인한다. 앱 생성이 폴더 충돌로 멈추면, "기존 CLAUDE.md와 docs/가이드, data 폴더는 유지하고 앱을 만들어줘"라고 다시 부탁한다.다음 단계에서 기획자 역할을 세워, 이 회의록을 근거로 PRD를 만든다.