test-repo/docs-readme/ko-KR/README.md

███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗  
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

Easy-Vibe : 0에서 1까지 배우는 Vibe Coding

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

온라인 읽기 · 학습 지도 · 커뮤니티 교류

초보자 전용 학습 지도 기초 지식 제로를 위한 전용 안내, 명확한 경로 설계, "배우고 잊는" 악순환 탈출	친절한 이미지 튜토리얼 상세한 이미지 설명, 마치 개인 과외 선생님이 옆에 있는 것처럼 따라 하기만 하면 습득
몰입형 시뮬레이션 프로그래밍 가상 마우스 자동 탐색으로 IDE 핵심 사용법을 빠르게 습득	눈으로 보는 AI 원리 알고리즘 원리를 애니메이션화하여 AI가 이미지를 그리는 과정을 한눈에 이해
게임처럼 배우는 RAG 독자적인 인터랙티브 컴포넌트로 클릭만 하면 RAG 데이터 흐름을 명확히 확인	시각화된 터미널 원리 명령줄 조작을 시각화하여 백엔드 로직과 원리를 직관적으로 표시

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

AI 시대에 아이디어를 제품으로 만드는 사람은 기술이 가장 뛰어난 사람이 아니라 가장 먼저 행동에 옮기는 사람입니다.

AI 어시스턴트가 있어도 "코드를 모르겠다", "환경 설정을 못 하겠다"며 포기하는 분들이 많습니다. Easy-Vibe는 이를 위해 태어났습니다. 모든 사람이 기초 지식이 없다는 가정하에, 첫 줄의 코드를 작성하는 것부터 전후방 로직 이해, 그리고 최종 제품 배포까지 손을 잡고 안내해 드립니다.

• 대상: 초보자, 제품 관리자(PM), 프론트엔드/백엔드/풀스택 개발자
• 주제: AI 프로그래밍, 풀스택 Web 애플리케이션 개발, AI Agent, 워크플로우 및 RAG 시스템

---

Easy-Vibe는 다음 단계들을 통해 당신을 0에서 1로 안내합니다:

단계	핵심 기술	산출물
1단계	AI 프로그래밍 입문, 제품 사고, 프로토타입 설계	대화형 미니 게임, Web 앱 프로토타입 (초보자 & PM)
2단계	풀스택 개발, AI 통합, 데이터베이스	완전한 풀스택 AI 애플리케이션
3단계	Claude Code 심화, 미니 프로그램 및 안드로이드 개발	프로덕션급 멀티 플랫폼 애플리케이션
부록	컴퓨터 및 AI 기초 개념 이해 지원	9대 지식 영역, 80개 이상의 대화형 주제

🔥 News

• [2026-02-25] 부록 지식 창고 업데이트. 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) 출시, 학습 경로 명확화.

📖 콘텐츠 탐색

📚 부록 지식 창고

9대 지식 영역, 80개 이상의 대화형 주제를 통해 컴퓨터 하부 구조부터 AI 최전선까지의 핵심 개념을 애니메이션과 시각화 컴포넌트로 직관적으로 이해할 수 있도록 돕습니다.

👉 전체 부록 보기 · AI 능력 사전

💻 컴퓨터 기초 • 트랜지스터에서 CPU까지 • 운영체제 • 데이터 인코딩, 저장 및 전송 • 네트워크: 두 컴퓨터의 대화법 • 자료구조 • 알고리즘 사고 입문	🔧 개발 도구 • Git: 코드 타임머신 • 명령줄 및 Shell 스크립트 • 패키지 매니저 • 디버깅의 예술 • 정규표현식 • 환경 변수와 PATH	🌐 브라우저 및 프론트엔드 • JavaScript 언어 심화 • 브라우저 렌더링 파이프라인 • 프론트엔드 프레임워크 비교 • 그래픽 및 애니메이션 • 웹 성능 측정 및 최적화 • 프론트엔드 엔지니어링 전체상
🖥️ 서버 및 백엔드 • HTTP 프로토콜 • API 설계 철학 • 인증 및 인가 체계 • 병행성, 비동기 및 멀티스레딩 • 메시지 큐 및 이벤트 드리븐 • 백엔드 계층 구조	📊 데이터 • SQL • 데이터베이스 원리 • 데이터 트래킹 및 사용자 행동 수집 • 데이터 분석 기초 • A/B 테스트 및 실험 기반 • 데이터 시각화 및 대시보드	🏗️ 아키텍처 및 시스템 설계 • 모놀리스에서 마이크로서비스로의 진화 • 분산 시스템의 도전 과제 • 고가용성 및 재해 복구 • 시스템 설계 방법론
☁️ 인프라 및 운영 • Docker 컨테이너화 • Kubernetes 오케스트레이션 • CI / CD 자동화 • 도메인, DNS 및 HTTPS • 모니터링, 로그 및 알람 • 코드형 인프라 (IaC)	🤖 인공지능 • 거대 언어 모델의 작동 원리 • Transformer와 어텐션 메커니즘 • RAG 아키텍처 • AI Agent와 도구 호출 • 프롬프트 엔지니어링 • 이미지 생성 원리	🎯 엔지니어적 소양 • 코드 품질 및 리팩토링 • 테스트 전략 • 디자인 패턴 • 보안 사고 및 공방 기초 • 기술 문서 작성 • 오픈소스 협업

1단계: 제로 베이스 입문

장	핵심 내용	상태
머리말: 학습 지도	전체 학습 경로 안내	✅
초급 1: AI 시대, 말이 곧 프로그래밍	스네이크 게임 사례를 통해 AI 프로그래밍 경험	✅
초급 2: 좋은 아이디어 찾기	제품 아이디어 탐색 및 검증 방법 습득	✅
초급 3: AI IDE 도구 이해하기	IDE 사용법 습득, 로컬에서 미니 게임 제작	✅
초급 4: 프로토타입 직접 만들기	요구사항 분석부터 AI 기반 프로토타입 생성까지	✅
초급 5: 프로토타입에 AI 능력 더하기	AI 모델(텍스트, 이미지, 비디오) 연동 방법 습득	✅
초급 6: 전체 프로젝트 실전	실제 시나리오 시뮬레이션 및 피드백 기반 개선	✅

부록: 비즈니스 사고

장	핵심 내용	상태
부록 A: 제품 사고와 방안 설계	제품 제작 시 고려해야 할 사고 프레임워크	✅
부록 B: AI 산업별 적용 사례 (B2B)	산업별 AI 활용 시나리오 이해	✅
부록 C: AI 소비 시나리오 영감 (B2C)	소비재 제품에서의 AI 활용 시나리오 탐색	✅

부록: 기술 방안

장	핵심 내용	상태
부록 D: 코드 오류 발생 시 대처법	Vibe coding 시 자주 발생하는 오류 및 해결법	✅
부록 E: 7가지 AI 프로그래밍 도구 비교	주요 AI 프로그래밍 플랫폼 비교 테스트	✅
부록 F: Agent를 활용한 웹사이트 설계	AI 에이전트 협업 방법 습득	✅

2단계: 중급 개발자

프론트엔드

장	핵심 내용	상태
프론트엔드 0: Lovart로 에셋 생성	시각적 에셋(캐릭터, 배경 등) 대량 생성 방법	🚧
프론트엔드 1: Figma & MasterGo 입문	설계 도구로 정보 구조 및 페이지 구성 정리	🚧
프론트엔드 2: 첫 현대적 앱 구축 - UI 설계	디자인에서 코드로 이어지는 컴포넌트 기반 UI 구현	🚧
프론트엔드 3: UI 설계 표준 및 프로젝트 설계	통일된 비주얼 기반의 시스템 설계 연습	🚧
프론트엔드 4: 호그와트 초상화 만들기	AI 기능이 포함된 프론트엔드 앱 직접 제작	✅

백엔드 및 풀스택

장	핵심 내용	상태
백엔드 1: API란 무엇인가	HTTP 인터페이스 및 요청-응답 모델 이해	✅
백엔드 2: DB에서 Supabase까지	Supabase 기반 DB 및 API 구축	✅
백엔드 3: AI 기반 API 코드 및 문서 생성	AI를 활용한 효율적인 백엔드 코드 생성	🚧
백엔드 4: Git 워크플로우	버전 관리 및 협업을 위한 Git 활용법	✅
백엔드 5: Zeabur 배포	애플리케이션 실제 배포 및 운영	✅
백엔드 6: 현대적 CLI 개발 도구	CLI 기반 AI 도구로 개발 속도 향상	✅
백엔드 7: 결제 시스템 연동 (Stripe)	결제 및 정산 프로세스 구축	🚧
프로젝트 1: 첫 현대적 풀스택 앱 구축	전 과정을 통합한 실제 웹 서비스 제작	🚧
프로젝트 2: UI 라이브러리 + Trae 실전	독립적인 상용 수준 제품 제작 연습	🚧

AI 능력 부록

장	핵심 내용	상태
AI 1: Dify 입문 및 지식 창고 연동	Dify Workflow 및 RAG 기반 툴 제작	✅
AI 2: AI 사전 검색 및 멀티모달 API 연동	적합한 모델 탐색 및 멀티모달 능력 연동	🚧

3단계: 고급 개발자

장	핵심 내용	상태
고급 1: MCP 및 Claude Code Skills	IDE 능력 확장 및 도구 연동	🚧
고급 2: Coding Tools 장기 작업 환경 구축	안정적인 장기 작업 태스크 설계	🚧
고급 3: 위챗 미니 프로그램 개발	미니 프로그램 생태계 및 배포 이해	✅
고급 4: 미니 프로그램 백엔드 연동	복잡한 비즈니스 로직 연동	🚧
고급 5: 안드로이드 앱 개발	Expo 기반 네이티브 앱 개발	✅
고급 6: iOS 앱 개발	Expo 기반 iOS 앱 개발	✅
고급 7: 개인 웹사이트 및 학술 블로그 구축	개인 브랜드 구축을 위한 블로그 제작	🚧

AI 능력 부록

장	핵심 내용	상태
고급 AI 1: RAG의 이해와 작동 원리	RAG 아키텍처 및 원리 심화 이해	✅
고급 AI 2: LangGraph 기반 AI 워크플로우	복잡한 AI 워크플로우 설계	🚧

🛠️ 학습 방법

• 개인의 능력치에 맞는 장을 선택하여 실습하세요. 문의 사항은 Issue를 이용해주세요.

💻 로컬에서 실행하기

최신 방법

AI IDE(VS Code, Cursor, Trae 등) 대화창에 다음 명령을 입력하세요:

이 프로젝트의 로컬 서비스를 실행해 줘.

기존 방법

1. npm install
2. npm run dev
3. 브라우저에서 http://localhost:3000에 접속하여 확인하세요.

🤝 기여하기

• 문제점 발견이나 개선 사항 제안은 Issue를 통해 해주세요.
• 프로젝트 기여를 원하시면 Pull Request를 보내주세요.
• Datawhale의 새로운 프로젝트 발의는 오픈소스 가이드를 참조하세요.

🙏 도움 주신 분들

• 산부(散步) - 프로젝트 리더 (Datawhale 멤버)
• 팡커(方可) - 지도 교수 (Datawhale 멤버, 칭화대)
• Yerim Kang (칭화대)
• 자오즈린(趙芷霖) (칭화대)
• 리이쉬안(李亦萱) (디자인, 칭화대)
• 리우스이(劉思怡) (칭화대)
• suggestion을 주신 모든 베타 테스터 분들께 감사드립니다.

특별 감사

• @Sm1les 님의 도움과 지원에 감사드립니다.
• 기여해주신 모든 개발자분들과 Star를 눌러주신 분들께 감사드립니다 ❤️

  

📧 연락처

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

Datawhale 공식 계정 팔로우:

📄 LICENSE

본 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스 에 따라 이용할 수 있습니다.

Star History