| [부록 D: 코드 작성 시 오류 발생 시 대처 방법](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Vibe Coding의 일반적인 오류 및 문제 해결 방법 | ✅ |
| [부록 E: 7가지 AI 프로그래밍 도구 비교](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 주요 AI 프로그래밍 플랫폼 비교 테스트 | ✅ |
| [부록 F: 디자인 및 프로그래밍 에이전트로 웹사이트 설계](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | AI 에이전트 협업 사용 방법 학습 | ✅ |
| [프론트엔드 0: lovart 사용하여 소재 생성](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | lovart를 사용하여 캐릭터, 장면 등 시각 자료 일괄 생성, UI 디자인과 프론트엔드 개발에 자료 기반 제공 | 🚧 |
| [프론트엔드 1: Figma와 MasterGo 입문](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | 디자인 도구로 정보 아키텍처와 페이지 구조 정리, 프론트엔드 구현 기반 마련 | 🚧 |
| [프론트엔드 2: 첫 번째 현대 애플리케이션 구축 - UI 디자인](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | 디자인 안을 기반으로 컴포넌트화 인터페이스 완성, 디자인에서 코드까지의 첫 번째 경로 실현 | 🚧 |
| [프론트엔드 3: UI 디자인 사양 및 다중 프로덕트 UI 디자인 참조](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | 통합된 메인 비주얼을 중심으로 다중 프로덕트 인터페이스 확장, 체계적 디자인 능력 연습 | 🚧 |
| [프론트엔드 4: 함께 해리포트 초상화 만들기](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 0에서 1까지 AI 능력을 통합한 프론트엔드 애플리케이션 제작, 디자인과 개발 연결 | ✅ |
| [백엔드 1: API란](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP 인터페이스와 요청-응답 모델 이해, 백엔드 통합과 연동 조정 준비 | ✅ |
| [백엔드 2: 데이터베이스에서 Supabase로](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase상에서 데이터베이스와 API 구현, 데이터 모델과 프론트엔드 페이지 연결 | ✅ |
| [백엔드 3: 대규모 언어 모델 지원 인터페이스 코드 및 문서 작성](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | 대규모 언어 모델을 활용하여 인터페이스와 데이터베이스 문서 및 코드 생성 지원, 읽기 쉽고 테스트 가능한 백엔드 실현 | 🚧 |
| [백엔드 4: Git 워크플로우](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Git 워크플로우에서 코드 관리, 버전 관리 및 협업 수행 | ✅ |
| [백엔드 6: 현대 CLI 개발 도구](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLI 계열 AI 프로그래밍 도구 사용하여 개발과 디버깅 가속화, 개인 엔지니어링 워크플로우 형성 | ✅ |
| [백엔드 7: Stripe 등 유료 시스템 통합 방법](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | 결제 시스템 연결, 유료 경로와 기본 정산 흐름 완성 | 🚧 |
| [대 과제 1: 첫 번째 현대 애플리케이션 구축 - 풀스택 앱](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | 프론트엔드, 백엔드, 결제 모듈 통합, 온라인 가능한 풀스택 웹 애플리케이션 완성 | 🚧 |
| [대 과제 2: 현대 프론트엔드 컴포넌트 라이브러리 + Trae 실전](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | 현대 프론트엔드 컴포넌트 라이브러리와 Trae 사용, 로그인/등록 가능하고 유료 지원 프로덕트 독립 완성 | 🚧 |
| [AI 1: Dify 입문과 지식 베이스 통합](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Dify Workflow와 기본 RAG 사용하여 도구 계열 프로덕트 구축, 이후 애플리케이션 업그레이드 모델 사례 작성 | ✅ |
| [AI 2: AI 사전 검색 및 멀티모달 API 통합 학습](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 적절한 모델과 API 검색 방법 학습, 텍스트, 이미지 등 멀티모달 능력을 프로덕트에 통합 | 🚧 |
| [고급 1: MCP와 ClaudeCode Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/) | MCP와 Skills를 통해 IDE 능력 확장, 외부 서비스를 도구로 연결 | 🚧 |
| [고급 2: Coding Tools를 장시간 작동시키는 방법](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | 장시간 실행되는 작업 설계 및 구성, Coding Tools를 더 안정적이고 신뢰할 수 있게 | 🚧 |
| [고급 3: 멀티플랫폼 개발: 위챗 미니 프로그램 구축 방법](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | 위챗 미니 프로그램 생태계 이해, 공식 템플릿부터 출시까지 프론트엔드 미니 프로그램 완성 | ✅ |
| [고급 4: 멀티플랫폼 개발: 위챗 미니 프로그램 구축 방법 - 백엔드 포함](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 미니 프로그램에 데이터베이스와 백엔드 로직 통합, 완전한 비즈니스 폐루프 실현 | 🚧 |
| [고급 5: 멀티플랫폼 개발: 안드로이드 앱 구축 방법](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Expo 등 도구 사용, Web/네이티브 일체화 안드로이드 앱 개발 완성 | 🚧 |
| [고급 6: 멀티플랫폼 개발: iOS 앱 구축 방법](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expo 등 도구 사용, Web/네이티브 일체화 iOS 앱 개발 완성 | 🚧 |
| [고급 7: 자신만의 개인 웹페이지와 학술 블로그 구축 방법](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | 선정, 구축부터 배포까지, 개인 프로젝트와 학술 성과를 전시하는 장기 온라인 홈페이지 구축 | 🚧 |
| [고급 AI 1: RAG란 무엇이며 어떻게 작동하는가](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | RAG 원리와 일반적인 아키텍처 체계적 이해, 복잡한 애플리케이션에 지식 검색 기반 제공 | ✅ |
| [고급 AI 2: 중고급 RAG와 워크플로우 편성: LangGraph 예시](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraph 등 도구 사용하여 다단계 워크플로우와 중고급 RAG 시스템 설계 | 🚧 |
- 개인 능력에 따라 관련 장을 선택적으로 읽고 실습하며, 문제가 있으면 Issue로 질문해 주세요.
## 💻 이 과정을 로컬에서 시작
### 현대적 방법
AI IDE 대화상자(vscode, cursor, trae 등)에서 다음 프롬프트를 입력하여 이 과정을 시작:
```
이 프로젝트의 로컬 서비스를 실행해주세요
```
### 구식 방법
1. npm install
2. npm run dev
3. 브라우저를 열고 `http://localhost:3000`에 접속하여 확인.
## 🤝 기여 참여
- 문제를 발견했거나 이 프로젝트를 개선할 수 있는 점이 있다고 생각되시면 Issue를 제출하여 피드백해 주세요. 제출 후 아무도 응답하지 않으면 [보모 팀](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 멤버에게 연락하여 피드백과 후속 조치를 받을 수 있습니다~
- 이 프로젝트에 기여하고 싶으시면 Pull Request를 제출해 주세요. 제출 후 아무도 응답하지 않으면 [보모 팀](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 멤버에게 연락하여 피드백과 후속 조치를 받을 수 있습니다~
- Datawhale에 매우 흥미가 있고 새 프로젝트를 시작하고 싶으시면 [Datawhale 오픈소스 프로젝트 가이드](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)에 따라 조작해 주세요~
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
