처음부터 끝까지, Claude Code로 앱 하나를 완성해봅시다 From start to finish, let's build a complete app with Claude Code
지금까지 배운 모든 것을 하나의 프로젝트에 녹여봅니다. DailyMemo — 간단하지만 완전한 메모 앱을 처음부터 끝까지 만들어봅시다. Put everything you've learned into a single project. DailyMemo — a simple but complete memo app, built from scratch to finish.
요리 교실에서 칼 쓰기, 불 조절, 양념 비율을 각각 배웠다면, 최종 시험은 코스 요리 한 상을 차리는 것입니다.
이 프로젝트가 바로 그 최종 시험입니다. CLAUDE.md 작성, Plan Mode 설계, 에이전트 활용, Hook 설정, Git 워크플로우 — 지금까지 배운 모든 기술을 한 프로젝트에 통합합니다.
개별 기술은 이미 배웠으니, 이제는 어떤 순서로, 어떻게 조합하는지에 집중합니다.
If a cooking class taught you knife skills, fire control, and seasoning ratios separately, the final exam is setting a complete course dinner.
This project is exactly that final exam. Writing CLAUDE.md, designing with Plan Mode, using agents, configuring Hooks, Git workflows — integrate every skill you've learned into one project.
You've already learned the individual techniques, so now focus on the order and how to combine them.
메모를 생성, 읽기, 수정, 삭제할 수 있는 기본 기능. 모든 앱의 근간이 되는 데이터 관리입니다.
Core create, read, update, delete functionality for memos. The data management foundation that underlies every app.
제목과 본문 내용으로 메모를 빠르게 검색. 메모가 쌓여도 원하는 내용을 즉시 찾을 수 있습니다.
Quickly search memos by title and body content. Find what you need instantly even as memos pile up.
메모를 카테고리별로 분류하고 필터링. 업무, 개인, 아이디어 등으로 체계적으로 관리합니다.
Categorize and filter memos. Organize systematically by Work, Personal, Ideas, and more.
메모 본문에 마크다운 문법을 사용할 수 있어 서식 있는 문서를 깔끔하게 작성합니다.
Use markdown syntax in memo bodies to write neatly formatted rich-text documents.
모든 프로젝트의 시작은 기반을 다지는 것입니다. 빈 폴더에서 CLAUDE.md까지, 프로젝트의 뼈대를 세웁니다. Every project starts by laying the foundation. From an empty folder to CLAUDE.md, we build the skeleton of the project.
터미널에서 프로젝트 디렉토리를 만들고 이동합니다.
Create the project directory in your terminal and navigate into it.
빈 폴더에서 Claude를 시작합니다. 아무것도 없는 상태에서 시작하는 것이 핵심입니다.
Start Claude in the empty folder. Starting from nothing is the key.
코드를 작성하기 전에, 프로젝트의 규칙과 컨벤션을 먼저 정의합니다. 이것이 프로 개발자의 습관입니다.
Before writing any code, define the project's rules and conventions first. This is a professional developer habit.
CLAUDE.md가 생성되면 내용을 검토하고, 필요하면 수정을 요청합니다.
Once CLAUDE.md is created, review its contents and request modifications if needed.
코드를 바로 작성하지 않습니다. Plan Mode로 먼저 전체 구조를 설계하고, 검토한 뒤 구현합니다. Don't write code right away. Use Plan Mode to design the overall structure first, review it, then implement.
메모와 카테고리의 타입을 먼저 정의합니다. 이것이 앱의 기초입니다. Plan Mode에서 Claude가 TypeScript 인터페이스를 제안해줍니다.
Define the types for memos and categories first. This is the foundation of the app. In Plan Mode, Claude suggests TypeScript interfaces.
어떤 화면이 필요한지, 각 화면에 어떤 컴포넌트가 들어가는지 정리합니다. 목록 화면, 작성/편집 화면, 검색 결과 화면 등을 설계합니다.
Plan which screens are needed and what components go in each. Design the list screen, create/edit screen, search results screen, etc.
화면 간 이동 흐름을 정의합니다. 사용자가 앱을 열고, 메모를 작성하고, 검색하는 전체 여정을 그립니다.
Define the flow between screens. Map the complete user journey: opening the app, writing a memo, and searching.
설계가 완료되었으니, 이제 한 번에 하나씩 기능을 구현합니다. 순서가 중요합니다. Design is done. Now implement features one at a time. Order matters.
타입 정의와 localStorage 유틸리티 함수부터 만듭니다. 이것이 모든 기능의 기초입니다.
Start with type definitions and localStorage utility functions. This is the foundation for all features.
메모 목록을 보여주고, 실시간으로 검색할 수 있는 메인 화면을 만듭니다.
Build the main screen that shows the memo list and allows real-time search.
마크다운을 지원하는 메모 작성 및 편집 화면을 구현합니다.
Implement the memo creation and editing screen with markdown support.
사이드바 또는 탭으로 카테고리별 필터링 기능을 추가합니다.
Add category-based filtering via a sidebar or tabs.
기능 구현이 끝나면 끝이 아닙니다. 커스텀 에이전트로 코드를 리뷰하고, 테스트로 안정성을 확보합니다. Feature implementation isn't the finish line. Review code with a custom agent and ensure stability with tests.
커스텀 에이전트를 활용하여 코드 전체를 체계적으로 리뷰합니다.
Use the custom agent to systematically review the entire codebase.
리뷰에서 발견된 문제점을 하나씩 수정합니다. 심각도가 높은 것부터 처리합니다.
Fix issues found in the review one by one. Address the most severe ones first.
핵심 로직에 대한 테스트를 작성합니다.
Write tests for the core logic.
작성된 테스트를 실행하고, 실패하는 테스트가 있으면 코드를 수정합니다.
Run the written tests and fix any failing ones by updating the code.
Claude가 실수로 main 브랜치에 직접 커밋하는 것을 방지합니다.
Prevents Claude from accidentally committing directly to the main branch.
지금까지의 변경사항을 기능별로 깔끔하게 커밋합니다.
Cleanly commit all changes made so far, organized by feature.
모든 커밋이 정리되면 PR을 생성합니다.
Once all commits are organized, create the PR.
PR이 생성되면 마지막으로 전체를 한 번 더 점검합니다. 빠진 것이 없는지, 테스트가 모두 통과하는지 확인합니다.
Once the PR is created, do one final check of everything. Verify nothing is missing and all tests pass.
PR을 열면 Claude가 자동으로 코드를 리뷰합니다. 이슈에 @claude를 멘션하면 직접 코드를 짜서 PR을 올려줍니다. 새벽 2시에도, 주말에도.
Open a PR and Claude automatically reviews the code. Mention @claude in an issue and it writes the code and opens a PR. At 2 AM, on weekends — always there.
Claude Code 터미널에서 /install-github-app 명령 하나로 GitHub 앱 설치와 시크릿 설정을 안내받을 수 있습니다. 또는 아래 워크플로우 파일을 직접 추가할 수도 있습니다.
Run /install-github-app in the Claude Code terminal to be guided through GitHub app installation and secret setup. Or manually add the workflow file below.
@beta를 @v1으로 변경하고, mode·direct_prompt 같은 구 파라미터는 제거하세요. v1에서는 자동 모드 감지와 통합 prompt 인터페이스가 기본 제공됩니다.@beta to @v1 and remove old parameters like mode and direct_prompt. v1 provides automatic mode detection and a unified prompt interface by default.PR을 올리면 Claude가 CLAUDE.md 기준으로 자동 리뷰. 이슈를 댓글로 남겨줍니다. 사람 리뷰어가 핵심에만 집중할 수 있습니다.
Open a PR and Claude auto-reviews against your CLAUDE.md. Issues are posted as comments. Human reviewers can focus on what matters most.
이슈에 버그를 설명하고 @claude를 멘션하면, Claude가 코드를 수정해서 PR을 직접 올려줍니다.
Describe a bug in an issue and mention @claude. Claude fixes the code and opens a PR directly.
새 이슈가 열리면 자동으로 분석하여 적절한 라벨을 붙이고, 우선순위를 제안합니다. 이슈 관리 시간을 크게 줄여줍니다.
When a new issue is opened, Claude automatically analyzes it, applies labels, and suggests priority. Greatly reduces issue management time.
CI에서 테스트가 실패하면 Claude가 로그를 분석해 원인을 설명하고 수정 방법을 제안합니다. 디버깅 시간을 절약합니다.
When CI tests fail, Claude analyzes the logs, explains the cause, and suggests a fix. Saves debugging time.
Slack 채널에서 @Claude를 멘션하면 코드 작업을 요청할 수 있습니다. 버그 리포트를 보내면 PR이 돌아옵니다.
Mention @Claude in a Slack channel to request code work. Send a bug report and get a PR back.
Slack 통합은 Claude Code for Teams 플랜에서 지원됩니다. 팀 전체가 동일한 Claude 설정을 공유하고 협업할 수 있습니다.
Slack integration is available on the Claude Code for Teams plan. The whole team shares the same Claude configuration and collaborates seamlessly.
코드 컨벤션, 커밋 규칙, 아키텍처 결정사항을 CLAUDE.md에 정의합니다. 저장소에 커밋하면 모든 팀원이 동일한 기준으로 작업합니다.
Define code conventions, commit rules, and architecture decisions in CLAUDE.md. Commit to the repo so every team member works from the same standard.
자주 쓰는 커스텀 프롬프트(코드 리뷰, PR 생성 등)를 .claude/skills/에 저장하고 버전 관리합니다. 팀원 모두가 동일한 스킬을 사용합니다.
Store frequently used custom prompts (code review, PR generation, etc.) in .claude/skills/ with version control. All team members use the same skills.
코드 리뷰어, 테스트 생성기 등 서브에이전트 정의를 .claude/agents/에 저장합니다. 팀 전체가 동일한 에이전트 설정을 공유합니다.
Store sub-agent definitions like code reviewers and test generators in .claude/agents/. The whole team shares the same agent configurations.
allowedTools로 프로젝트에서 허용할 도구를 지정합니다. 개인 설정은 .claude/settings.local.json에 저장하고 gitignore에 추가하세요.
Use allowedTools to specify which tools are allowed in the project. Store personal settings in .claude/settings.local.json and add to gitignore.
Claude Code는 API 토큰을 소비합니다. 현명하게 사용하면 비용을 크게 줄일 수 있습니다. Claude Code consumes API tokens. Using it wisely can significantly reduce costs.
세션 중 언제든 /cost를 입력하면 현재 세션에서 사용한 토큰과 비용을 확인할 수 있습니다.
Type /cost anytime during a session to see the tokens and cost used so far.
간단한 작업은 Haiku, 일반 개발은 Sonnet, 복잡한 설계나 분석은 Opus를 사용합니다. 작업 난이도에 맞는 모델을 고르면 비용이 크게 줄어듭니다.
Use Haiku for simple tasks, Sonnet for general development, and Opus for complex design or analysis. Matching the model to the task difficulty greatly reduces costs.
대량 반복 작업(파일 분석, 테스트 생성 등)은 작은 모델을 사용하는 서브에이전트에 위임합니다. Opus는 판단이 필요한 핵심 작업에만 사용합니다.
Delegate bulk repetitive tasks (file analysis, test generation, etc.) to sub-agents using smaller models. Reserve Opus for core tasks that require judgment.
프로젝트 시작 전에 규칙을 정의하면 처음부터 끝까지 일관된 코드가 나옵니다. "나중에 정리하자"는 없습니다.
Define the rules before the project starts and you'll get consistent code from beginning to end. There's no "I'll clean it up later."
설계 없이 바로 코딩하면 중간에 구조를 뒤엎어야 합니다. Plan Mode로 미리 검토하면 구현 속도가 2배 빨라집니다.
Jumping straight to code without a design means rebuilding the structure halfway through. Reviewing upfront with Plan Mode doubles implementation speed.
코드 리뷰를 사람 대신 에이전트가 해주면, 혼자 개발해도 팀 개발 수준의 품질 관리가 가능합니다.
Having an agent do code reviews instead of a person means you can achieve team-level quality control even when developing solo.
테스트가 있으면 "이거 수정해도 괜찮을까?" 걱정 없이 과감하게 리팩토링할 수 있습니다.
With tests in place, you can refactor boldly without worrying "is it okay to change this?"
main 브랜치 보호, 커밋 전 린트 체크 등 자동화된 안전장치가 실수를 예방합니다.
Automated safeguards like main branch protection and pre-commit lint checks prevent mistakes before they happen.
기능별 브랜치, 의미 있는 커밋, PR 자동 생성까지. 깔끔한 히스토리는 미래의 나를 위한 선물입니다.
Feature branches, meaningful commits, and auto-generated PRs. A clean history is a gift to your future self.
PR을 올리면 Claude가 자동 리뷰하고, 이슈에 @claude를 멘션하면 직접 PR을 만들어줍니다. CI/CD에 AI가 더해지면 개발 속도가 한 단계 올라갑니다.
Open a PR and Claude auto-reviews. Mention @claude in an issue and it creates a PR directly. Adding AI to CI/CD takes development velocity to another level.
CLAUDE.md, .claude/skills/, .claude/agents/를 저장소에 커밋하면 팀 전체가 동일한 Claude 환경을 공유합니다. 개인 설정은 settings.local.json으로 분리합니다.
Commit CLAUDE.md, .claude/skills/, and .claude/agents/ to the repo so the whole team shares the same Claude environment. Separate personal settings into settings.local.json.
Phase 1 CLAUDE.md로 기반 다지기Build the foundation with CLAUDE.md
Phase 2 Plan Mode로 설계하기Design with Plan Mode
Phase 3 단계별로 기능 구현하기Implement features step by step
Phase 4-5 리뷰 + 테스트로 품질 확보Ensure quality with review + tests
Phase 6 Hook + Git으로 자동화Automate with Hook + Git
+ GitHub Actions로 CI/CD 자동화Automate CI/CD with GitHub Actions
+ 팀 워크플로우 & 비용 관리Team Workflows & Cost Management
이 워크플로우를 기억하세요. 어떤 프로젝트든 적용할 수 있습니다.
Remember this workflow. It applies to any project.
"Claude, 다음 프로젝트를 시작하자""Claude, let's start the next project"
실전 프로젝트를 진행하면서 자주 나오는 궁금증들 Common questions that come up during real-world projects
/install-github-app 명령 하나로 대부분을 자동으로 설정할 수 있습니다. GitHub 앱 설치부터 저장소 시크릿(ANTHROPIC_API_KEY) 추가까지 안내해줍니다. 저장소 관리자 권한이 필요하며, 직접 .github/workflows/에 워크플로우 파일을 추가하는 수동 방법도 있습니다. 설정 후에는 이슈나 PR에서 @claude를 멘션하는 것만으로 바로 사용할 수 있습니다./install-github-app command in the Claude Code terminal. It guides you from installing the GitHub app to adding the repository secret (ANTHROPIC_API_KEY). Repository admin permissions are required. There's also a manual option of adding the workflow file directly to .github/workflows/. After setup, just mention @claude in an issue or PR to start using it immediately..claude/settings.local.json에 저장하고 .gitignore에 추가합니다. .claude/settings.json에는 팀 전체에 적용할 allowedTools 같은 프로젝트 권한만 커밋합니다. Slack 통합은 Claude Code for Teams 플랜에서 지원됩니다..claude/settings.local.json and add to .gitignore. Only commit project permissions like allowedTools to .claude/settings.json. Slack integration is available on the Claude Code for Teams plan.