2026. 2. 21. 09:16ㆍAI 기술/Claude
7편까지 Claude의 기능을 하나씩 배웠는데, 이번에는 다 합칩니다. "진짜 앱 하나를 처음부터 끝까지 만들어보자"는 겁니다.
예제로 습관 트래커 웹앱을 만듭니다. 습관을 추가하고, 매일 체크하고, 연속 달성(스트릭)을 보여주는 앱입니다. 기획은 claude.ai에서, 개발과 배포는 Claude Code에서 합니다. 코딩 경험이 있든 없든, 전 과정을 자연어로 진행하는 흐름을 따라가면 됩니다.
Claude AI 완전 정복 시리즈 8/9
목차
1. 전체 흐름 5단계
2. STEP 1: 기획 (claude.ai)
3. STEP 2: 설계 + CLAUDE.md
4. STEP 3: 구현 — 자연어로 코딩
5. STEP 4: 테스트 + 디버깅
6. STEP 5: 배포
7. 시리즈 도구 총동원 맵
8. 바이브 코딩의 핵심 원칙 5가지
9. 실전 팁
10. FAQ
1. 전체 흐름 5단계
앱을 만드는 전체 과정은 5단계입니다. (1) 기획, (2) 설계+CLAUDE.md, (3) 구현, (4) 테스트, (5) 배포. 각 단계에서 어떤 Claude 도구를 쓰는지가 핵심입니다.
| 단계 | 도구 | 핵심 작업 |
|---|---|---|
| 1. 기획 | claude.ai (Research + Projects) | 시장 조사, 경쟁 앱 분석, 기능 목록 정리 |
| 2. 설계 | Claude Code (init + Plan Mode) | CLAUDE.md 작성, 기술 스택 결정, 구조 설계 |
| 3. 구현 | Claude Code | 자연어로 기능 구현, 파일 생성/수정, git commit |
| 4. 테스트 | Claude Code | 테스트 실행, 에러 수정, 엣지 케이스 검토 |
| 5. 배포 | Claude Code | 빌드 + GitHub Pages/Vercel 배포 + README |
2. STEP 1: 기획 (claude.ai)
코드를 치기 전에 "뭘 만들 건지"를 정해야 합니다. 여기서 7편에서 배운 claude.ai 기능을 씁니다.
Research로 시장 조사
"습관 트래커 앱 시장을 조사해줘. Streaks, Habitify,
Loop Habit 등 주요 앱의 핵심 기능, 차별점, 사용자
리뷰에서 나오는 불만 사항을 분석해줘."
Claude가 5~15분간 조사한 뒤, 경쟁 앱 분석 + 사용자 니즈 + 기회 영역이 담긴 보고서를 줍니다.
Projects에 기획서 저장
"습관 트래커 프로젝트"를 만들고, Research 결과를 바탕으로 기능 목록과 우선순위를 정리합니다. 이후 모든 대화가 이 프로젝트 안에서 이루어지므로 맥락이 유지됩니다.
필수 기능과 나중에 추가할 기능으로 나눠줘."
[Claude 답변 예시]
MVP 필수: 습관 추가/삭제, 오늘 체크, 스트릭 표시, 주간 그리드
V2 추가: 카테고리, 통계 차트, 알림, 다크 모드
3. STEP 2: 설계 + CLAUDE.md
이제 터미널로 넘어갑니다. Claude Code로 프로젝트를 초기화하고, CLAUDE.md 파일을 만듭니다. 이 파일이 프로젝트의 두뇌 역할을 합니다.
프로젝트 초기화
$ claude
$ /init
/init 명령으로 Claude가 자동으로 CLAUDE.md를 생성합니다. 여기에 프로젝트 정보를 추가합니다.
CLAUDE.md에 넣을 것
프로젝트 개요 (무엇을 만드는지), 기술 스택 (React, TypeScript, Tailwind 등), 코딩 규칙 (명명 규칙, 컴포넌트 스타일), 현재 진행 상황 (할 일 목록). Claude는 모든 대화에서 이 파일을 자동으로 읽으므로, 매번 "이 프로젝트는..."이라고 설명할 필요가 없습니다.
Plan Mode로 구조 확인
습관 트래커 앱의 폴더 구조를 잡아줘.
Vite로 빌드하고, GitHub Pages로 배포할 거야.
[Plan Mode — Shift+Tab 두 번]
Claude가 계획을 보여주고, 승인하면 실행합니다.
핵심: Plan Mode(Shift+Tab 두 번)를 쓰면 Claude가 뭘 할 건지 먼저 보여줍니다. "이대로 해도 될까?"를 확인한 뒤 승인하세요. 이게 바이브 코딩과 무계획 코딩의 차이입니다.
4. STEP 3: 구현 — 자연어로 코딩
CLAUDE.md의 할 일 목록을 하나씩 자연어로 요청합니다. Claude Code가 파일을 만들고, 수정하고, 테스트까지 합니다.
기능 1: 습관 추가/삭제
습관 이름과 아이콘을 입력하면 목록에 추가되고,
삭제 버튼으로 제거할 수 있게 해줘.
[Claude → Plan → 실행 → 4개 파일 생성]
> 잘 됐어. git commit 해줘.
Committed: 'feat: 습관 추가/삭제 기능 구현'
기능 2: 오늘 체크 + 스트릭
연속 달성일(스트릭)도 계산해서 보여줘.
체크할 때 만족스러운 애니메이션도 넣어줘.
기능 3: 주간 그리드
이번 주 7일간 각 습관의 완료 여부를
격자로 보여주는 컴포넌트를 만들어줘.
철칙: 매 기능 완료 후 반드시 git commit을 요청하세요. Claude가 실수로 코드를 깨뜨리면 git checkout으로 바로 되돌릴 수 있습니다. 이게 안전망입니다.
5. STEP 4: 테스트 + 디버깅
에러가 있으면 고쳐줘.
[Claude가 npm run dev 실행 → 에러 발견 → 자동 수정]
> 엣지 케이스도 확인해줘.
습관 이름이 빈 값이거나, 같은 이름 중복 등.
3개 엣지 케이스 발견. 입력 검증 로직을 추가합니다...
Done. Committed: 'fix: 입력 검증 + 엣지 케이스 처리'
Claude Code는 코드를 실행하고, 에러를 감지하고, 스스로 수정합니다. 에러 메시지를 복사해서 붙여넣을 필요도 없습니다 — 터미널 출력을 직접 읽습니다.
6. STEP 5: 배포
vite.config.ts 설정도 맞춰주고,
GitHub Actions로 자동 배포되게 해줘.
1. vite.config.ts에 base 경로 설정
2. .github/workflows/deploy.yml 생성
3. git push → GitHub Actions 자동 실행
> README.md도 만들어줘.
설치 방법, 사용법, 스크린샷 위치 포함.
배포까지 자연어로 끝납니다. GitHub에 push하면 GitHub Actions가 자동으로 빌드하고 배포합니다. Vercel을 쓰고 싶다면 "Vercel로 배포해줘"라고 하면 됩니다.
7. 시리즈 도구 총동원 맵
이 프로젝트에서 쓴 도구들이 시리즈 몇 편에서 배운 건지 정리해봤습니다. 1~7편에서 배운 것들이 전부 여기에 합쳐집니다.
| 도구 | 시리즈 | 이 프로젝트에서의 역할 |
|---|---|---|
| Claude Code 기본 | 2편 | 프로젝트 생성, 코드 구현, git 관리 |
| Agent Teams | 3편 | 복잡한 리팩토링 시 병렬 작업 |
| MCP (GitHub) | 4편 | PR 생성, 이슈 관리 |
| claude.ai Projects | 7편 | 기획서 저장, 맥락 유지 |
| claude.ai Research | 7편 | 시장 조사, 경쟁 앱 분석 |
| Artifacts | 7편 | UI 프로토타입 빠른 미리보기 |
8. 바이브 코딩의 핵심 원칙 5가지
이 프로젝트를 통해 배운 바이브 코딩(Vibe Coding)의 핵심 원칙입니다.
원칙 1: 계획을 먼저 세워라
"앱 만들어줘"보다 "이 기능 목록의 1번을 구현해줘"가 10배 좋은 결과를 냅니다. CLAUDE.md에 할 일 목록을 정리하고, Plan Mode로 구현 전에 계획을 확인하세요.
원칙 2: 작게 나눠서 요청하라
한 번에 전체 앱을 만들라고 하면 Claude도 헷갈립니다. 기능 하나씩, 컴포넌트 하나씩 요청하세요. 작은 단위로 나누면 에러도 적고, 디버깅도 쉽습니다.
원칙 3: 매번 commit하라
기능 하나 완성될 때마다 git commit. 이게 안전망입니다. Claude가 다음 기능 작업 중에 이전 코드를 깨뜨리면, 바로 되돌릴 수 있습니다.
원칙 4: 결과를 직접 확인하라
Claude가 "완료했습니다"라고 해도 반드시 직접 실행해서 확인하세요. 버튼 클릭, 입력값 테스트, 엣지 케이스 — 사람의 검증이 필수입니다.
원칙 5: CLAUDE.md를 살아있게 유지하라
진행 상황, 설계 결정, 알게 된 것들을 계속 업데이트하세요. Claude가 대화 중에 자동 업데이트하기도 하지만, 중요한 결정은 직접 기록하는 게 좋습니다.
9. 실전 팁
1. UI가 마음에 안 들면 자연어로
"여백을 더 넓혀줘", "색상이 너무 강해, 부드럽게 바꿔줘", "모바일에서 보기 좋게 만들어줘" 같은 디자인 피드백도 자연어로 주면 됩니다. CSS를 직접 건드릴 필요 없습니다.
2. Artifacts로 빠르게 프로토타입
Claude Code로 코딩하기 전에, claude.ai Artifacts에서 React 컴포넌트를 빠르게 프로토타입해볼 수 있습니다. UI 방향이 확정되면 그 코드를 프로젝트에 가져오세요.
3. 컨텍스트가 길어지면 새 대화
한 대화에서 너무 많은 작업을 하면 Claude의 컨텍스트가 혼잡해집니다. 기능 단위로 대화를 나누고, CLAUDE.md가 맥락을 이어줍니다. /compact 명령으로 대화를 정리할 수도 있습니다.
4. 에러가 루프에 빠지면 멈춰라
Claude가 같은 에러를 반복 수정하면서 더 꼬이는 경우가 있습니다. 3번 이상 같은 에러가 반복되면, git checkout으로 되돌리고 다른 접근법을 요청하세요.
10. FAQ
Q. 코딩을 전혀 몰라도 따라할 수 있나요?
기본적인 개념(파일, 폴더, 터미널 명령)을 알면 따라할 수 있습니다. 코드를 직접 쓸 필요는 없지만, Claude가 만든 결과를 확인하고 피드백하는 능력은 필요합니다. "작동하는지 아닌지"를 판단하는 건 사람의 몫입니다.
Q. 어떤 앱이든 이 방식으로 만들 수 있나요?
프론트엔드 중심의 웹앱, 간단한 풀스택 앱은 충분히 가능합니다. 다만 대규모 엔터프라이즈 시스템이나 하드웨어 연동이 필요한 앱은 Claude만으로는 한계가 있습니다.
Q. 비용이 얼마나 드나요?
Claude Max($100/월) 기준으로 이 정도 프로젝트는 한 달 구독 안에 충분합니다. Pro($20/월)에서도 가능하지만 사용량 제한이 있어서 큰 프로젝트에는 Max를 추천합니다. 배포는 GitHub Pages를 쓰면 무료입니다.
Q. Claude Code 없이 claude.ai만으로도 가능한가요?
가능합니다. claude.ai의 Artifacts에서 전체 앱을 React로 만들 수 있고, "파일 생성" 기능으로 코드를 다운로드할 수 있습니다. 다만 파일 시스템 접근, git 관리, 빌드/배포 자동화는 Claude Code가 훨씬 편합니다.
Q. TypeScript를 모르면 JavaScript로 해도 되나요?
물론입니다. CLAUDE.md에 "JavaScript 사용, TypeScript 사용하지 않음"이라고 적으면 Claude가 그에 맞춰 코드를 생성합니다. 기술 스택은 자유롭게 바꿀 수 있습니다.
다음 편 예고 — 9편 (최종회): 요금제 비교 + AI 3강 비교
시리즈 마지막 편에서는 Claude vs ChatGPT vs Gemini 3강 비교, 그리고 Claude의 Free/Pro/Max/Team/Enterprise 요금제를 실제 사용 시나리오 기준으로 분석합니다.
Claude AI 완전 정복 시리즈 전체 글
1편: 내가 반한 AI, Claude — 2026 최신 기능 총정리
2편: Claude Code 입문 — 터미널에서 AI가 코딩한다
3편: Agent Teams 완전 정복 — AI 팀을 병렬로 일시키기
4편: MCP 연동 — Claude에게 손과 발을 달아주기
5편: Claude in Excel — AI가 수식을 진짜로 이해한다
6편: Claude in PowerPoint — 내 템플릿으로 슬라이드 만들기
7편: Claude.ai 200% 활용법 — 숨은 기능 8가지
8편: 실전 프로젝트 — 앱 하나를 처음부터 끝까지 (현재 글)
9편: 요금제 비교 + AI 3강 비교 (예정)
이 글은 2026년 2월 기준이며, Claude Code 설치에는 Node.js v18 이상이 필요합니다. 최신 정보는 code.claude.com을 확인하시기 바랍니다.