feat(docs): add NavGrid/NavCard components and restructure stage pages

- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
@@ -1,42 +0,0 @@
-# Appendix
-
-Knowledge base for AI, Frontend, Backend, and General Skills.
-
-## Content Overview
-
-### AI Basics
- [Prompt Engineering](/ko-kr/appendix/prompt-engineering)
- [AI Evolution](/ko-kr/appendix/ai-evolution)
- [LLM Introduction](/ko-kr/appendix/llm-intro)
- [VLM Introduction](/ko-kr/appendix/vlm-intro)
- [AI Image Generation](/ko-kr/appendix/image-gen-intro)
- [AI Audio Models](/ko-kr/appendix/audio-intro)
- [Context Engineering](/ko-kr/appendix/context-engineering)
- [AI Agents](/ko-kr/appendix/agent-intro)
- [AI Capability Dictionary](/ko-kr/appendix/ai-capability-dictionary)
-
-### Frontend Development
- [Web Basics (HTML/CSS/JS)](/ko-kr/appendix/web-basics)
- [Frontend Evolution](/ko-kr/appendix/frontend-evolution)
- [Frontend Performance](/ko-kr/appendix/frontend-performance)
- [Canvas 2D](/ko-kr/appendix/canvas-intro)
- [URL to Browser](/ko-kr/appendix/url-to-browser)
- [Browser DevTools](/ko-kr/appendix/browser-devtools)
-
-### Backend Development
- [Backend Evolution](/ko-kr/appendix/backend-evolution)
- [Backend Languages](/ko-kr/appendix/backend-languages)
- [Database Principles](/ko-kr/appendix/database-intro)
- [Cache Design](/ko-kr/appendix/cache-design)
- [Message Queues](/ko-kr/appendix/queue-design)
- [Authentication](/ko-kr/appendix/auth-design)
- [Tracking Design](/ko-kr/appendix/tracking-design)
- [Operations](/ko-kr/appendix/operations)
-
-### General Skills
- [API Introduction](/ko-kr/appendix/api-intro)
- [IDE Introduction](/ko-kr/appendix/ide-intro)
- [Terminal Introduction](/ko-kr/appendix/terminal-intro)
- [Git Introduction](/ko-kr/appendix/git-intro)
- [Computer Networks](/ko-kr/appendix/computer-networks)
- [Deployment](/ko-kr/appendix/deployment)
@@ -0,0 +1,186 @@
+# 부록
+
+**부록** 섹션에 오신 것을 환영합니다! 여기는 인공지능 기초와 풀스택 개발 기초를 모은 곳으로, 학습 여정의 중요한 참고 라이브러리입니다.
+
+## 콘텐츠 카테고리
+
+### AI 기초
+
+인공지능의 핵심 개념, 발전 역사 및 최첨단 기술 원리를 이해합니다:
+<NavGrid>
+  <NavCard
+    href="/ko-kr/appendix/prompt-engineering/"
+    title="프롬프트 엔지니어링"
+    description="AI와 효율적으로 대화하는 기술을 마스터하여 대형 모델의 잠재력을 활용합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/ai-evolution"
+    title="AI 진화사"
+    description="AI 개발의 주요 이정표를 되돌아보고 기술 진화의 궤적을 이해합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/llm-intro"
+    title="대형 언어 모델"
+    description="대형 언어 모델(LLM)의 작동 원리와 응용을 깊이 있고 쉽게 설명합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/vlm-intro"
+    title="멀티모달 대형 모델"
+    description="이미지, 오디오 등 여러 데이터 모달리티를 처리할 수 있는 고급 모델을 탐색합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/image-gen-intro"
+    title="AI 이미지 생성 원리"
+    description="AI 이미지 생성의 근본적인 로직과 기술 구현을 밝힙니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/audio-intro"
+    title="AI 오디오 모델"
+    description="음성 합성, 인식 및 음악 생성 분야에서의 AI 응용을 이해합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/context-engineering"
+    title="컨텍스트 엔지니어링"
+    description="컨텍스트 관리를 최적화하여 AI 작업의 장기적인 일관성을 향상시키는 방법을 배웁니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/agent-intro"
+    title="에이전트 인텔리전스"
+    description="자율적 의사결정 및 실행 능력을 갖춘 AI 에이전트 아키텍처를 탐색합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/ai-capability-dictionary"
+    title="AI 기능 사전"
+    description="AI 분야의 일반 용어와 핵심 개념의 빠른 참조 안내서"
+  />
+</NavGrid>
+
+
+### 프론트엔드 기초
+
+프론트엔드 개발의 기술 기반을 다집니다:
+<NavGrid>
+  <NavCard
+    href="/ko-kr/appendix/web-basics"
+    title="HTML/CSS/JS 기초"
+    description="웹 페이지 구축의 3대 기둥, 프론트엔드 개발 입문 필수 과목"
+  />
+  <NavCard
+    href="/ko-kr/appendix/frontend-evolution"
+    title="프론트엔드 진화사"
+    description="프론트엔드 기술 스택의 진화를 이해하고 기술 발전 트렌드를 파악합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/frontend-performance"
+    title="프론트엔드 성능 최적화"
+    description="웹 페이지 로딩 속도와 상호작용의 부드러움을 향상시키는 핵심 전략을 배웁니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/canvas-intro"
+    title="Canvas 2D 입문"
+    description="Canvas 드로잉 API를 마스터하여 멋진 그래픽과 애니메이션 효과를 구현합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/url-to-browser"
+    title="URL에서 브라우저 표시까지"
+    description="브라우저가 페이지를 렌더링하는 완전한 프로세스의 전체 체인 분석"
+  />
+  <NavCard
+    href="/ko-kr/appendix/browser-devtools/"
+    title="브라우저 개발자 도구"
+    description="개발자 도구를 능숙하게 사용하여 프론트엔드 문제를 효율적으로 식별하고 해결합니다"
+  />
+</NavGrid>
+
+
+### 백엔드 기초
+
+백엔드 개발의 핵심 개념을 마스터합니다:
+<NavGrid>
+  <NavCard
+    href="/ko-kr/appendix/backend-evolution"
+    title="백엔드 진화사"
+    description="모놀리식에서 마이크로서비스로, 백엔드 아키텍처의 진화를 탐색합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/backend-languages"
+    title="백엔드 프로그래밍 언어"
+    description="주류 백엔드 언어의 특성과 적용 시나리오를 비교하여 최적의 기술 스택을 선택합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/database-intro"
+    title="데이터베이스 원리"
+    description="데이터베이스의 핵심 원리를 이해하고 데이터 저장 및 검색의 기술을 마스터합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/cache-design"
+    title="시스템 캐시 설계"
+    description="캐싱 전략을 배워 시스템의 고동시 처리 능력을 향상시킵니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/queue-design"
+    title="메시지 큐 설계"
+    description="메시지 큐의 디커플링과 피크 쉐이빙에서의 핵심 역할을 마스터합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/auth-design"
+    title="인증 원리와 실전"
+    description="안전한 신원 인증 및 권한 관리 시스템을 구축합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/tracking-design"
+    title="추적 설계"
+    description="데이터 추적을 과학적으로 설계하여 제품 의사결정에 데이터 지원을 제공합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/operations"
+    title="온라인 운영"
+    description="시스템 배포, 모니터링 및 장애 해결의 운영 기술을 마스터합니다"
+  />
+</NavGrid>
+
+
+### 일반 기술
+
+소프트웨어 개발의 기초 지식:
+<NavGrid>
+  <NavCard
+    href="/ko-kr/appendix/api-intro"
+    title="API 입문"
+    description="API 인터페이스 설계 및 개발의 기초 지식"
+  />
+  <NavCard
+    href="/ko-kr/appendix/ide-intro/"
+    title="IDE 원리"
+    description="통합 개발 환경(IDE)의 내부 작동 메커니즘을 이해합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/terminal-intro"
+    title="터미널 입문"
+    description="명령줄 터미널의 기본 작업을 마스터하여 개발 효율성을 향상시킵니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/git-intro"
+    title="Git 상세 소개"
+    description="Git 버전 관리 원리와 고급 사용법을 깊이 이해합니다"
+  />
+  <NavCard
+    href="/ko-kr/appendix/computer-networks"
+    title="컴퓨터 네트워크"
+    description="네트워크 프로토콜과 통신 원리의 기초 지식"
+  />
+  <NavCard
+    href="/ko-kr/appendix/deployment"
+    title="배포 및 출시"
+    description="애플리케이션 배포 및 릴리스의 완전한 프로세스와 모범 사례"
+  />
+</NavGrid>
+
+
+## 사용 제안
+
+- 학습 과정에서의 참고 자료로 필요에 따라 참조합니다
+- 익숙하지 않은 기술 개념을 만났을 때 먼저 여기에서 설명을 찾습니다
+- 한 번 통독하는 것을 권장하여 완전한 지식 체계를 구축합니다
+
+여기는 당신의 기술 지식 보물창고입니다, 언제든지 참조를 환영합니다!
@@ -1,19 +0,0 @@
-# AI Product Manager
-
-Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
-
-## Stage Overview
-
-### Getting Started
-Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
-
- 1. Learning Map (Coming Soon)
- 2. If you can speak, you can code (Coming Soon)
-
-### Product Manager
-Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
-
- 1. Introduction to AI IDE (Coming Soon)
- 2. Building a Prototype (Coming Soon)
- 3. Integrating AI Capabilities (Coming Soon)
- 4. Complete Project Practice (Coming Soon)
@@ -0,0 +1,66 @@
+# 초보자 및 제품 프로토타입
+
+**AI 제품 관리자** 단계에 오신 것을 환영합니다! 이것은 Easy-Vibe 튜토리얼의 시작점으로, 프로그래밍 경험이 없는 학습자를 위해 설계되었습니다.
+
+## 배울 내용
+
+이 단계에서는 처음부터 시작하여 Vibe Coding 워크플로우를 마스터하고 독립적인 제품 설계를 할 수 있는 슈퍼 개인이 될 것입니다.
+
+### 입문
+
+제품, 운영 및 비기술적 배경에 적합합니다. 게임을 통해 AI 프로그래밍 로직을 이해하고 자신감을 키웁니다:
+<NavGrid>
+  <NavCard
+    href="/ko-kr/stage-0/0.1-learning-map/"
+    title="학습 로드맵"
+    description="전체 학습 경로를 이해하고 각 단계의 목표와 결과를 명확히 합니다"
+  />
+  <NavCard
+    href="/ko-kr/stage-0/0.2-ai-capabilities-through-games/"
+    title="AI 시대: 말할 수 있으면 프로그래밍할 수 있다"
+    description="뱀 게임 등을 통해 AI 프로그래밍의 매력을 경험하고 코딩에 대한 두려움을 극복합니다"
+  />
+</NavGrid>
+
+
+### 제품 관리자
+
+Vibe Coding 워크플로우를 마스터합니다. 요구사항을 분해하고 고충실도 웹 애플리케이션 프로토타입을 독립적으로 완성하는 방법을 배웁니다:
+<NavGrid>
+  <NavCard
+    href="/ko-kr/stage-1/1.1-introduction-to-ai-ide/"
+    title="AI IDE 도구 소개"
+    description="현재 주류 AI 프로그래밍 도구를 알아보고 가장 적합한 개발 파트너를 선택합니다"
+  />
+  <NavCard
+    href="/ko-kr/stage-1/1.2-building-prototype/"
+    title="프로토타입 만들기"
+    description="제품 아이디어를 빠르게 시각적 프로토타입으로 변환하고 저비용으로 시행착오하는 방법을 배웁니다"
+  />
+  <NavCard
+    href="/ko-kr/stage-1/1.3-integrating-ai-capabilities/"
+    title="AI 기능 통합"
+    description="간단한 AI API를 통합하여 프로토타입에 지능을 부여합니다"
+  />
+  <NavCard
+    href="/ko-kr/stage-1/1.4-complete-project-practice/"
+    title="완전한 프로젝트 실습"
+    description="배운 내용을 종합적으로 적용하여 0부터 1까지 완전한 제품 프로토타입 개발을 완성합니다"
+  />
+</NavGrid>
+
+
+## 대상자
+
+- 프로그래밍 경험이 없는 제품 관리자, 운영 직원
+- 아이디어를 빠르게 검증하고 싶은 기업가
+- AI 프로그래밍에 관심이 있는 비기술직 종사자
+- 프로토타이핑 기술을 향상시키고 싶은 디자이너
+
+## 학습 경로
+
+```
+입문 → 제품 관리자 기초 → AI 기능 통합 → 완전한 프로젝트 실습
+```
+
+AI 프로그래밍 여정을 시작할 준비가 되셨나요? 왼쪽 탐색을 클릭하여 학습을 시작하세요!
@@ -1,37 +0,0 @@
-# Full-Stack Development
-
-Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
-
-## Stage Overview
-
-### Frontend Development
-Master modern frontend development with component libraries and design tools.
-
- [Frontend 0: Lovart Assets](/ko-kr/stage-2/frontend/2.0-lovart-assets/)
- [Frontend 1: Figma & MasterGo](/ko-kr/stage-2/frontend/2.1-figma-mastergo/)
- [Frontend 2: UI Design](/ko-kr/stage-2/frontend/2.2-ui-design/)
- [Frontend 3: Multi-Product UI](/ko-kr/stage-2/frontend/2.3-multi-product-ui/)
- [Frontend 4: Hogwarts Portraits](/ko-kr/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
-
-### Backend & Full-Stack
-Learn API design, database management, and deployment strategies.
-
- [Backend 1: What is API](/ko-kr/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
- [Backend 2: Database & Supabase](/ko-kr/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
- [Backend 3: AI Interface Code](/ko-kr/stage-2/backend/2.3-ai-interface-code/)
- [Backend 4: Git Workflow](/ko-kr/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
- [Backend 5: Zeabur Deployment](/ko-kr/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
- [Backend 6: Modern CLI Tools](/ko-kr/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
- [Backend 7: Stripe Payment](/ko-kr/stage-2/backend/2.7-stripe-payment/)
-
-### Assignments
-Practical projects to apply your full-stack skills.
-
- [Assignment 1: Full-Stack App](/ko-kr/stage-2/assignments/2.1-fullstack-app/)
- [Assignment 2: Modern Frontend + Trae](/ko-kr/stage-2/assignments/2.2-modern-frontend-trae/)
-
-### AI Capabilities
-Integrate AI features like knowledge bases and multimodal APIs.
-
- [AI 1: Dify & Knowledge Base](/ko-kr/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
- [AI 2: Multimodal API](/ko-kr/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,126 @@
+# 풀스택 개발
+
+**풀스택 개발** 단계에 오신 것을 환영합니다! 여기에서는 프론트엔드 컴포넌트화, 데이터베이스 설계, 백엔드 API 개발 및 배포를 마스터하여 풀스택 개발에 깊이 파고듭니다.
+
+## 배울 내용
+
+### 프론트엔드 개발
+
+현대적인 프론트엔드 개발을 마스터하고 컴포넌트 라이브러리와 디자인 도구 사용법을 배웁니다:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="프론트엔드 0: Lovart로 에셋 만들기"
+    description="Lovart 등의 AI 도구를 사용하여 고품질 게임 에셋과 UI 리소스를 빠르게 생성하는 방법을 배웁니다"
+  />
+  <NavCard
+    href="#"
+    title="프론트엔드 1: Figma와 MasterGo 입문"
+    description="전문 UI 디자인 도구의 기본 작업과 디자인에서 코드로의 워크플로우를 마스터합니다"
+  />
+  <NavCard
+    href="#"
+    title="프론트엔드 2: 첫 번째 현대적 앱 만들기 - UI 디자인"
+    description="처음부터 현대적인 웹 애플리케이션 인터페이스를 설계하고 UI 디자인 원칙을 실습합니다"
+  />
+  <NavCard
+    href="#"
+    title="프론트엔드 3: UI 디자인 가이드라인과 멀티 제품 UI"
+    description="주류 UI 디자인 가이드라인을 배워 제품 디자인의 일관성과 미학을 향상시킵니다"
+  />
+  <NavCard
+    href="#"
+    title="프론트엔드 4: 호그와트 초상화 만들기"
+    description="실습 프로젝트: AI 생성 이미지를 사용하여 인터랙티브한 호그와트 초상화 애플리케이션을 구축합니다"
+  />
+</NavGrid>
+
+
+### 백엔드 및 풀스택
+
+API 설계, 데이터베이스 관리 및 애플리케이션 배포 전략을 배웁니다:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="백엔드 1: API란 무엇인가"
+    description="API의 핵심 개념, 프론트엔드와 백엔드의 다리를 이해합니다"
+  />
+  <NavCard
+    href="#"
+    title="백엔드 2: 데이터베이스에서 Supabase로"
+    description="관계형 데이터베이스 기초를 마스터하고 현대적인 BaaS 플랫폼인 Supabase 사용법을 배웁니다"
+  />
+  <NavCard
+    href="#"
+    title="백엔드 3: AI 지원 인터페이스 코드 및 문서"
+    description="AI를 사용하여 백엔드 인터페이스 코드와 표준 API 문서 생성을 지원합니다"
+  />
+  <NavCard
+    href="#"
+    title="백엔드 4: Git 워크플로우"
+    description="Git 버전 관리 시스템의 핵심 작업과 협업 워크플로우를 마스터합니다"
+  />
+  <NavCard
+    href="#"
+    title="백엔드 5: Zeabur 배포"
+    description="Zeabur를 사용하여 풀스택 애플리케이션을 클라우드에 빠르게 배포하는 방법을 배웁니다"
+  />
+  <NavCard
+    href="#"
+    title="백엔드 6: 현대적 CLI 개발 도구"
+    description="현대적인 CLI 도구를 탐색하고 명령줄 환경에서의 개발 경험을 향상시킵니다"
+  />
+  <NavCard
+    href="#"
+    title="백엔드 7: Stripe 결제 시스템 통합"
+    description="실습: Stripe 결제 기능을 애플리케이션에 통합하여 수익화를 실현합니다"
+  />
+</NavGrid>
+
+
+### 과제
+
+실습 프로젝트를 통해 풀스택 개발 기술을 다집니다:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="과제 1: 첫 번째 현대적 앱 만들기 - 풀스택"
+    description="배운 내용을 종합적으로 적용하여 완전한 기능을 갖춘 풀스택 애플리케이션을 독립적으로 완성합니다"
+  />
+  <NavCard
+    href="#"
+    title="과제 2: 현대적 프론트엔드 컴포넌트 라이브러리 + Trae"
+    description="현대적인 컴포넌트 라이브러리와 Trae IDE를 사용하여 복잡한 프론트엔드 인터페이스를 효율적으로 구축합니다"
+  />
+</NavGrid>
+
+
+### AI 기능 확장
+<NavGrid>
+  <NavCard
+    href="#"
+    title="AI 1: Dify 입문과 지식 베이스 통합"
+    description="Dify를 사용하여 AI 애플리케이션을 구축하고 프라이빗 지식 베이스를 통합하는 방법을 배웁니다"
+  />
+  <NavCard
+    href="#"
+    title="AI 2: AI 사전 조회와 멀티모달 API 통합"
+    description="더 많은 AI 기능을 탐색하고 비전, 음성 등의 멀티모달 API를 통합합니다"
+  />
+</NavGrid>
+
+
+## 대상자
+
+- 프로그래밍 기초가 있고 체계적으로 풀스택 개발을 배우고 싶은 개발자
+- 제품 관리자에서 풀스택 엔지니어로 전환하고 싶은 학습자
+- 현대적인 개발 도구와 워크플로우를 마스터하고 싶은 초중급 개발자
+- 완전한 제품을 독립적으로 개발하고 싶은 기업가
+
+## 전제 조건
+
+- "초보자 및 제품 프로토타입" 단계를 완료했거나 동등한 기초 지식을 보유하고 있습니다
+- 기본적인 HTML/CSS/JavaScript 개념을 이해하고 있습니다
+- AI 프로그래밍 도구에 대한 예비 지식이 있습니다
+
+풀스택 개발에 깊이 파고들 준비가 되셨나요? 왼쪽 탐색을 클릭하여 학습을 시작하세요!
@@ -1,30 +0,0 @@
-# Advanced Development
-
-Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
-
-## Stage Overview
-
-### Core Skills
-Advanced AI coding skills and long-running task management.
-
- [Advanced 1: MCP & ClaudeCode Skills](/ko-kr/stage-3/core-skills/3.1-mcp-claudecode-skills/)
- [Advanced 2: Long-running Tasks](/ko-kr/stage-3/core-skills/3.2-long-running-tasks/)
-
-### Cross-Platform Development
-Build apps for WeChat, Android, and iOS.
-
- [Advanced 3: WeChat Mini-Program](/ko-kr/stage-3/cross-platform/3.3-wechat-miniprogram/)
- [Advanced 4: WeChat Mini-Program (Backend)](/ko-kr/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
- [Advanced 5: Android App](/ko-kr/stage-3/cross-platform/3.5-android-app/)
- [Advanced 6: iOS App](/ko-kr/stage-3/cross-platform/3.6-ios-app/)
-
-### Personal Brand
-Build your personal website and blog.
-
- [Advanced 7: Personal Website & Blog](/ko-kr/stage-3/personal-brand/3.7-personal-website-blog/)
-
-### AI Advanced
-Deep dive into RAG and advanced agent workflows.
-
- [Advanced AI 1: What is RAG](/ko-kr/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
- [Advanced AI 2: Advanced RAG with LangGraph](/ko-kr/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)
@@ -0,0 +1,93 @@
+# 고급 개발
+
+**고급 개발** 단계에 오신 것을 환영합니다! 여기에서는 복잡한 크로스 플랫폼 애플리케이션을 구축하고, WeChat 미니 프로그램 개발을 마스터하며, 더 고급스러운 AI 네이티브 애플리케이션 개발에 도전합니다.
+
+## 배울 내용
+
+### 핵심 기술
+
+MCP 프로토콜과 Claude Code 고급 기술을 깊이 마스터하여 개발 효율성을 향상시킵니다:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="고급 1: MCP와 ClaudeCode 스킬"
+    description="Model Context Protocol (MCP)을 마스터하여 AI 프로그래밍 도구의 능력을 확장합니다"
+  />
+  <NavCard
+    href="#"
+    title="고급 2: 장기 실행 작업"
+    description="AI 코딩 도구가 장기간 실행되는 복잡한 작업을 처리하는 방법을 배웁니다"
+  />
+</NavGrid>
+
+
+### 크로스 플랫폼 개발
+
+WeChat 미니 프로그램, Android 및 iOS 애플리케이션을 구축하여 크로스 플랫폼 커버리지를 실현합니다:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="고급 3: WeChat 미니 프로그램 구축"
+    description="처음부터 WeChat 미니 프로그램을 개발하고 미니 프로그램 개발의 핵심 워크플로우를 마스터합니다"
+  />
+  <NavCard
+    href="#"
+    title="고급 4: 백엔드가 있는 WeChat 미니 프로그램"
+    description="백엔드 지원이 있는 완전한 WeChat 미니 프로그램 애플리케이션을 구축합니다"
+  />
+  <NavCard
+    href="#"
+    title="고급 5: Android 앱 구축"
+    description="현대적인 크로스 플랫폼 프레임워크를 사용하여 Android 네이티브 애플리케이션을 구축합니다"
+  />
+  <NavCard
+    href="#"
+    title="고급 6: iOS 앱 구축"
+    description="iOS 애플리케이션을 개발 및 출시하고 iOS 생태계의 개발 표준을 마스터합니다"
+  />
+</NavGrid>
+
+
+### 개인 브랜드
+
+자신만의 개인 웹사이트와 기술 블로그를 구축하여 개인적 영향력을 확립합니다:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="고급 7: 개인 웹사이트와 학술 블로그 구축"
+    description="현대적인 기술 스택을 사용하여 고성능이고 시각적으로 매력적인 개인 블로그를 구축합니다"
+  />
+</NavGrid>
+
+
+### 고급 AI 기능
+
+RAG 및 LangGraph와 같은 고급 AI 기술을 탐색하고 복잡한 AI 애플리케이션 워크플로우를 구축합니다:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="고급 AI 1: RAG란 무엇이며 어떻게 작동하는가"
+    description="Retrieval-Augmented Generation (RAG)의 원리와 AI 애플리케이션에서의 가치를 깊이 이해합니다"
+  />
+  <NavCard
+    href="#"
+    title="고급 AI 2: 고급 RAG와 워크플로우 오케스트레이션 - LangGraph"
+    description="LangGraph를 사용하여 복잡한 AI 워크플로우를 오케스트레이션하고 고급 RAG 시스템을 구축하는 방법을 배웁니다"
+  />
+</NavGrid>
+
+
+## 대상자
+
+- 풀스택 개발 경험이 있고 더 복잡한 애플리케이션에 도전하고 싶은 고급 개발자
+- 크로스 플랫폼 개발 기술을 마스터하고 싶은 엔지니어
+- AI 네이티브 애플리케이션 개발을 깊이 이해하고 싶은 탐구자
+- 개인 기술 브랜드를 구축하고 싶은 기술 블로거
+
+## 전제 조건
+
+- "풀스택 개발" 단계를 완료했거나 풀스택 개발 경험이 있습니다
+- 프론트엔드 프레임워크(React/Vue 등)와 백엔드 개발에 능숙합니다
+- 기본적인 AI 개념과 API 사용법을 이해하고 있습니다
+
+고급 개발에 도전할 준비가 되셨나요? 왼쪽 탐색을 클릭하여 학습을 시작하세요!