███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗  
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝
# Easy-Vibe : 0에서 1까지 배우는 Vibe Coding

바로 시작해서 함께 vibe 해요! 말할 수 있으면 앱도 만들 수 있습니다
Jump right in and vibe together — if you can talk, you can build apps.

📌 온라인 읽기 (Read Online) · ✨ 대화형 튜토리얼

온라인 읽기 · 학습 지도 · 커뮤니티 교류
Read Online · Learning Map · Community

Stars Forks License

简体中文 繁體中文 English 日本語 Español Français Klingon 한국어 العربية Türkçe Tiếng_Việt Deutsch বাংলা


초보자 전용 학습 지도
기초 지식 제로를 위한 전용 안내, 명확한 경로 설계, "배우고 잊는" 악순환 탈출
친절한 이미지 튜토리얼
상세한 이미지 설명, 마치 개인 과외 선생님이 옆에 있는 것처럼 따라 하기만 하면 습득

몰입형 시뮬레이션 프로그래밍
가상 마우스 자동 탐색으로 IDE 핵심 사용법을 빠르게 습득
눈으로 보는 AI 원리
알고리즘 원리를 애니메이션화하여 AI가 이미지를 그리는 과정을 한눈에 이해

게임처럼 배우는 RAG
독자적인 인터랙티브 컴포넌트로 클릭만 하면 RAG 데이터 흐름을 명확히 확인
시각화된 터미널 원리
명령줄 조작을 시각화하여 백엔드 로직과 원리를 직관적으로 표시

⭐ 이곳을 클릭해 Star를 눌러 업데이트를 응원해주세요 ❤️

AI 시대에 아이디어를 제품으로 만드는 사람은 기술이 가장 뛰어난 사람이 아니라 가장 먼저 행동에 옮기는 사람입니다. AI 어시스턴트가 있어도 "코드를 모르겠다", "환경 설정을 못 하겠다"며 포기하는 분들이 많습니다. **Easy-Vibe는 이를 위해 태어났습니다.** 모든 사람이 기초 지식이 없다는 가정하에, 첫 줄의 코드를 작성하는 것부터 전후방 로직 이해, 그리고 최종 제품 배포까지 손을 잡고 안내해 드립니다. - **대상**: 초보자, 제품 관리자(PM), 프론트엔드/백엔드/풀스택 개발자 - **주제**: AI 프로그래밍, 풀스택 Web 애플리케이션 개발, AI Agent, 워크플로우 및 RAG 시스템 --- Easy-Vibe는 다음 단계들을 통해 당신을 0에서 1로 안내합니다: > 당신의 수준에 따라 다른 단계에서 시작하는 것을 권장합니다: > - **제로 베이스 / 제품 매니저**: Stage 1부터 시작하여 프로그래밍 사고를 기르고 AI IDE로 빠르게 프로토타입 구축 > - **개발자**: Stage 2부터 시작하여 풀스택 개발과 AI 통합 심화 > - **고급 개발자**: Stage 3으로 바로 들어가 Claude Code와 멀티 플랫폼 개발 탐구 | 단계 | 핵심 기술 | 산출물 | | :--- | :--- | :--- | | **Stage 1** | 학습 지도, AI 프로그래밍 입문, AI IDE, 제품 사고, 프로토타입 설계, AI 능력 통합 | 대화형 미니 게임, 완전한 제품 프로토타입 | | **Stage 2** | 풀스택 개발, 데이터베이스, AI 통합, 배포 및 운영 | 프로덕션 준비 풀스택 AI 애플리케이션 | | **Stage 3** | Claude Code 심화, 멀티 플랫폼 개발 | 프로덕션급 멀티 플랫폼 애플리케이션 | | **부록** | 컴퓨터 기초, AI 입문, 9대 지식 영역 | 80개 이상의 대화형 주제 | ## 🔥 News - **[2026-03-25]** 📚 **README가 최신 중국어 버전과 동기화되었습니다**: 한국어 진입 페이지를 최신 소개 문구, 학습 내비게이션, 콘텐츠 구조에 맞춰 업데이트했습니다. - **[2026-03-02]** 🦞 **OpenClaw & AI Agent 지원**: `llms.txt` AI 내비게이션 파일 추가. OpenClaw, Claude, Cursor, Trae 등 AI Agent가 저장소 구조를 빠르게 이해하고 튜토리얼 콘텐츠를 정확하게 찾을 수 있게 되었습니다. 모든 🦞가 즐겁게 학습하시길 바랍니다! - **[2026-03-01]** [고급 개발 섹션](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/) 전면 업그레이드: Claude Code 7개 상세 가이드(MCP, Skills, Agent Teams 등)와 8개 크로스 플랫폼 개발 튜토리얼(PWA, Electron, NFT, VS Code 확장, Qt 산업 앱 등) 추가. - **[2026-02-25]** [부록 지식 창고](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) 업데이트. 9대 지식 영역, 80개 이상의 대화형 주제 포함. - **[2026-01-27]** 안드로이드 및 iOS 플랫폼 앱 개발 튜토리얼 추가. - **[2026-01-19]** Prompt Engineering, AI 진화사, 인증 설계, Git 원리 등 일련의 대화형 데모 컴포넌트 출시.
Past News - **[2026-01-16]** 프로젝트 구조 재구성, "초보자 입문" 장을 공식적으로 설정하여 진입 장벽 완화. - **[2026-01-14]** 1단계 "제품 프로토타입 구축" 문서 대규모 업데이트 완료. - **[2026-01-13]** 문서 아키텍처 재구축 완료, 다국어(i18n) 전면 지원. - **[2026-01-01]** 프로젝트 핵심 학습 지도 (Learning Map) 출시, 학습 경로 명확화.
### 📖 콘텐츠 탐색
Learning Map
### 📚 부록 지식 창고 > **9대 지식 영역**, **80개 이상의 대화형 주제**를 통해 컴퓨터 하부 구조부터 AI 최전선까지의 핵심 개념을 애니메이션과 시각화 컴포넌트로 직관적으로 이해할 수 있도록 돕습니다. > > 👉 [전체 부록 보기](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 능력 사전](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
💻 컴퓨터 기초

• 트랜지스터에서 CPU까지
• 운영체제
• 데이터 인코딩, 저장 및 전송
• 네트워크: 두 컴퓨터의 대화법
• 자료구조
• 알고리즘 사고 입문 		🔧 개발 도구

• Git: 코드 타임머신
• 명령줄 및 Shell 스크립트
• 패키지 매니저
• 디버깅의 예술
• 정규표현식
• 환경 변수와 PATH 		🌐 브라우저 및 프론트엔드

• JavaScript 언어 심화
• 브라우저 렌더링 파이프라인
• 프론트엔드 프레임워크 비교
• 그래픽 및 애니메이션
• 웹 성능 측정 및 최적화
• 프론트엔드 엔지니어링 전체상
🖥️ 서버 및 백엔드

• HTTP 프로토콜
• API 설계 철학
• 인증 및 인가 체계
• 병행성, 비동기 및 멀티스레딩
• 메시지 큐 및 이벤트 드리븐
• 백엔드 계층 구조 		📊 데이터

• SQL
• 데이터베이스 원리
• 데이터 트래킹 및 사용자 행동 수집
• 데이터 분석 기초
• A/B 테스트 및 실험 기반
• 데이터 시각화 및 대시보드 		🏗️ 아키텍처 및 시스템 설계

• 모놀리스에서 마이크로서비스로의 진화
• 분산 시스템의 도전 과제
• 고가용성 및 재해 복구
• 시스템 설계 방법론
☁️ 인프라 및 운영

• Docker 컨테이너화
• Kubernetes 오케스트레이션
• CI / CD 자동화
• 도메인, DNS 및 HTTPS
• 모니터링, 로그 및 알람
• 코드형 인프라 (IaC) 		🤖 인공지능

• 거대 언어 모델의 작동 원리
• Transformer와 어텐션 메커니즘
• RAG 아키텍처
• AI Agent와 도구 호출
• 프롬프트 엔지니어링
• 이미지 생성 원리 		🎯 엔지니어적 소양

• 코드 품질 및 리팩토링
• 테스트 전략
• 디자인 패턴
• 보안 사고 및 공방 기초
• 기술 문서 작성
• 오픈소스 협업
### 1단계: 제로 베이스 입문 | 장 | 핵심 내용 | 상태 | | :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- | | [머리말: 학습 지도](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | 전체 학습 경로 안내 | ✅ | | [초급 1: AI 시대, 말이 곧 프로그래밍](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 스네이크 게임 사례를 통해 AI 프로그래밍 경험 | ✅ | | [초급 2: 좋은 아이디어 찾기](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | 제품 아이디어 탐색 및 검증 방법 습득 | ✅ | | [초급 3: AI IDE 도구 이해하기](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE 사용법 습득, 로컬에서 미니 게임 제작 | ✅ | | [초급 4: 프로토타입 직접 만들기](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 요구사항 분석부터 AI 기반 프로토타입 생성까지 | ✅ | | [초급 5: 프로토타입에 AI 능력 더하기](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | AI 모델(텍스트, 이미지, 비디오) 연동 방법 습득 | ✅ | | [초급 6: 전체 프로젝트 실전](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | 실제 시나리오 시뮬레이션 및 피드백 기반 개선 | ✅ | #### 부록: 비즈니스 사고 | 장 | 핵심 내용 | 상태 | | :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- | | [부록 A: 제품 사고와 방안 설계](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | 제품 제작 시 고려해야 할 사고 프레임워크 | ✅ | | [부록 B: AI 산업별 적용 사례 (B2B)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | 산업별 AI 활용 시나리오 이해 | ✅ | | [부록 C: AI 소비 시나리오 영감 (B2C)](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | 소비재 제품에서의 AI 활용 시나리오 탐색 | ✅ | #### 부록: 기술 방안 | 장 | 핵심 내용 | 상태 | | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- | | [부록 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: Agent를 활용한 웹사이트 설계](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | AI 에이전트 협업 방법 습득 | ✅ |
2단계: 중급 개발자 #### 프론트엔드 | 장 | 핵심 내용 | 상태 | | :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- | | [프론트엔드 0: Lovart로 에셋 생성](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | 시각적 에셋(캐릭터, 배경 등) 대량 생성 방법 | 🚧 | | [프론트엔드 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/) | 디자인에서 코드로 이어지는 컴포넌트 기반 UI 구현 | 🚧 | | [프론트엔드 3: 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) | AI 기능이 포함된 프론트엔드 앱 직접 제작 | ✅ | #### 백엔드 및 풀스택 | 장 | 핵심 내용 | 상태 | | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- | | [백엔드 1: API란 무엇인가](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP 인터페이스 및 요청-응답 모델 이해 | ✅ | | [백엔드 2: DB에서 Supabase까지](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase 기반 DB 및 API 구축 | ✅ | | [백엔드 3: AI 기반 API 코드 및 문서 생성](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | AI를 활용한 효율적인 백엔드 코드 생성 | 🚧 | | [백엔드 4: Git 워크플로우](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | 버전 관리 및 협업을 위한 Git 활용법 | ✅ | | [백엔드 5: Zeabur 배포](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | 애플리케이션 실제 배포 및 운영 | ✅ | | [백엔드 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: UI 라이브러리 + Trae 실전](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | 독립적인 상용 수준 제품 제작 연습 | 🚧 | #### AI 능력 부록 | 장 | 핵심 내용 | 상태 | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- | | [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) | 적합한 모델 탐색 및 멀티모달 능력 연동 | 🚧 |
3단계: 고급 개발자 #### Claude Code 핵심 스킬 | 장 | 핵심 내용 | 상태 | | :--- | :--- | :--- | | [Claude Code 퀵 스타트](../../docs/zh-cn/stage-3/core-skills/basics/) | 설치, 기본 조작, 실용 팁 및 자주 사용하는 명령어 | ✅ | | [Claude Code MCP 완벽 가이드](../../docs/zh-cn/stage-3/core-skills/mcp/) | MCP로 Claude Code를 GitHub, 데이터베이스, API 등 외부 서비스에 연결 | ✅ | | [Claude Code Skills 완벽 가이드](../../docs/zh-cn/stage-3/core-skills/skills/) | 전문 지식을 재사용 가능한 스킬 팩으로 패키징 | ✅ | | [Claude Code 워크플로우 모범 사례](../../docs/zh-cn/stage-3/core-skills/workflow/) | 일상 개발, 리팩토링, 코드 리뷰 등 모범 사례 | ✅ | | [Claude Agent Teams 완벽 가이드](../../docs/zh-cn/stage-3/core-skills/agent-teams/) | 여러 AI 인스턴스가 실제 개발 팀처럼 병렬 협업 | ✅ | | [Claude Code Superpowers 엔지니어링 개발](../../docs/zh-cn/stage-3/core-skills/superpowers/) | TDD와 모범 사례를 따르는 엔지니어링급 코드 작성 | ✅ | | [Claude Code 장시간 작동 방법](../../docs/zh-cn/stage-3/core-skills/long-running-tasks/) | 장기 실행 작업 설계, 완료까지 지속적으로 작동 | ✅ | #### 멀티 플랫폼 개발 | 장 | 핵심 내용 | 상태 | | :--- | :--- | :--- | | [위챗 미니 프로그램 구축 방법](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | 미니 프로그램 생태계, 공식 템플릿부터 출시까지 | ✅ | | [백엔드 포함 위챗 미니 프로그램 구축 방법](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 미니 프로그램에 데이터베이스와 백엔드 로직 통합 | ✅ | | [안드로이드 앱 개발](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Expo 등 도구로 Web/네이티브 통합 안드로이드 앱 개발 | ✅ | | [iOS 앱 개발](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Expo 등 도구로 Web/네이티브 통합 iOS 앱 개발 | ✅ | | [PWA 개발](../../docs/zh-cn/stage-3/cross-platform/3.7-pwa/) | 오프라인 지원 프로그레시브 웹 앱 구축 | 🚧 | | [Electron 데스크톱 앱 개발](../../docs/zh-cn/stage-3/cross-platform/3.8-electron/) | 크로스 플랫폼 데스크톱 애플리케이션 구축 | 🚧 | | [VS Code 확장 개발](../../docs/zh-cn/stage-3/cross-platform/3.9-vscode-extension/) | VS Code 확장 및 플러그인 개발 | 🚧 | | [Qt 산업 앱 개발](../../docs/zh-cn/stage-3/cross-platform/3.10-qt-industrial/) | Qt로 산업급 데스크톱 애플리케이션 구축 | 🚧 |
## 🛠️ 학습 방법 - 개인의 능력치에 맞는 장을 선택하여 실습하세요. 문의 사항은 Issue를 이용해주세요. ## 💻 로컬에서 실행하기 ### 최신 방법 AI IDE(VS Code, Cursor, Trae 등) 대화창에 다음 명령을 입력하세요: ``` 이 프로젝트의 로컬 서비스를 실행해 줘. ``` ### 기존 방법 1. npm install 2. npm run dev 3. 브라우저에서 `http://localhost:3000`에 접속하여 확인하세요. ## 🤝 기여하기 - 문제점 발견이나 개선 사항 제안은 Issue를 통해 해주세요. - 프로젝트 기여를 원하시면 Pull Request를 보내주세요. - Datawhale의 새로운 프로젝트 발의는 오픈소스 가이드를 참조하세요. ## 🙏 도움 주신 분들 - [산부(散步) - 프로젝트 리더](https://github.com/sanbuphy) (Datawhale 멤버) - 팡커(方可) - 지도 교수 (Datawhale 멤버, 칭화대) - [Yerim Kang](https://github.com/yerim25) (칭화대) - 자오즈린(趙芷霖) (칭화대) - [리이쉬안(李亦萱)](https://yixuan20.github.io/) (디자인, 칭화대) - 리우스이(劉思怡) (칭화대) - suggestion을 주신 모든 베타 테스터 분들께 감사드립니다. ### 특별 감사 - [@Sm1les](https://github.com/Sm1les) 님의 도움과 지원에 감사드립니다. - 기여해주신 모든 개발자분들과 Star를 눌러주신 분들께 감사드립니다 ❤️

Stargazers    Forkers

## 📧 연락처

질문이나 제안, 교류를 원하시면 아래 QR 코드를 스캔해 주세요.

Datawhale 공식 계정 팔로우:

## 📄 LICENSE
知识共享许可协议
본 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스 에 따라 이용할 수 있습니다.
## Star History [![Star History Chart](https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=date&legend=top-left)](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)