sanbuphy
7d0e798672
Add comprehensive guide for AI applications in consumer scenarios with 16 categories and 80+ inspiration ideas. Focus on creating emotional connections and atmosphere rather than just functionality. Includes interactive selection tool to help users find relevant scenarios based on desired vibe and current feeling. Each scenario provides detailed atmosphere creation tips and psychological cues. Also covers core design principles for C-end products, shifting from functional thinking to emotional experience design.
23 KiB
23 KiB
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗ ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝ █████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ ██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ ███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝
Easy-Vibe: Learn Vibe Coding from 0 to 1
0부터, 프로젝트 기반 학습, 첫 번째 AI 제품 구축
📌 온라인으로 읽기 시작하기 (Start Reading Online)
🚀 프로젝트 소개
AI로 코드를 작성하려고 할 때 오류가 계속 발생하고, 포기하고 싶어지며, 프로그램을 실제로 온라인에 배포하는 방법을 명확히 알지 못할 때 😢
이 튜토리얼은 0에서 1까지 Vibe Coding 기술을 점진적으로 마스터할 수 있도록 특별히 설계되었습니다:
- 1단계: 미니게임부터 웹 프로토타입까지, AI 프로그래밍 기초와 제품 사고 습득
- 2단계: 프론트엔드/백엔드 개발과 AI 능력과 관련된 Vibe Coding 테크닉 학습, 완전한 애플리케이션 완성
- 3단계: 멀티플랫폼 복잡 애플리케이션 구축 방법 마스터, 프로덕션급 애플리케이션으로
우리는 Vibe Coding을 마스터하고 체계적인 훈련을 결합하면, 한 사람이 프론트엔드 개발, 백엔드 개발, AI 능력 통합, 프로덕트 디자인을 모두 갖춘 개발자가 될 수 있다고 믿습니다.
이 프로젝트는 주로 세 가지 유형의 학습자를 대상으로 합니다:
- 초보자(일반인 / 프로덕트 및 운용 담당자): 비기술 초보자가 핵심 개념을 이해하고 첫 번째 프로덕트 프로토타입을 완성하도록 지원
- 초중급 개발자(일정 기초가 있는 학생과 개발자): 프론트엔드/백엔드 Vibe Coding과 AI 능력 지식 습득
- 고급 개발자(기업/스타트업, 오픈소스/독립 개발자): 고급 개발 기술, 멀티플랫폼 개발
📖 콘텐츠 네비게이션
총 부록
AI 능력 사전: 일반적인 AI 핵심 개념과 용어, 시나리오 설명
1. 초보자 입문 및 제품 프로토타입
| 장 | 주요 내용 | 상태 |
|---|---|---|
| 서론: 학습 맵 | 전체 학습 경로 가이드 | ✅ |
| 초급 1: AI 시대, 말할 수 있으면 프로그래밍 가능 | 스네이크 게임 등 사례를 통해 AI 프로그래밍 능력을 처음 체험 | ✅ |
| 초급 2: AI IDE 도구 이해 | IDE 사용법 배우기, 로컬에서 미니게임 제작 | ✅ |
| 초급 3: 직접 프로토타입 만들기 | 요구사항 분석, AI 단일 페이지 생성, 다중 페이지 프로덕트 프로토타입 생성으로 | ✅ |
| 초급 4: 프로토타입에 AI 능력 추가 | 일반적인 AI 능력(텍스트, 이미지, 비디오) 연결 방법 습득 | ✅ |
| 초급 5: 완전 프로젝트 실전 | 실제 시나리오 시뮬레이션, 사용자 피드백 수용 반복 개선, 프로젝트 완성 | ✅ |
| 대 과제: 완전한 웹 애플리케이션 프로토타입 만들기 및 전시 | 애플리케이션 완전 구현, 애플리케이션 효과 전시 | ✅ |
부록: 비즈니스 사고
| 장 | 주요 내용 | 상태 |
|---|---|---|
| 부록 A: 프로덕트 사고 및 솔루션 설계 | 0에서 1까지 프로덕트 만들 때 필요한 사고 프레임워크 | ✅ |
| 부록 B: AI 산업 적용 시나리오 참조 (B2B) | 다양한 산업에서 AI 적용 사례 이해 | ✅ |
| 부록 C: AI 소비 시나리오 영감 참조 (B2C) | 소비자 제품에서 AI 적용 사례 탐색 | ✅ |
부록: 기술 솔루션
| 장 | 주요 내용 | 상태 |
|---|---|---|
| 부록 D: 코드 작성 시 오류 발생 시 대처 방법 | Vibe Coding의 일반적인 오류 및 문제 해결 방법 | ✅ |
| 부록 E: 7가지 AI 프로그래밍 도구 비교 | 주요 AI 프로그래밍 플랫폼 비교 테스트 | ✅ |
| 부록 F: 디자인 및 프로그래밍 에이전트로 웹사이트 설계 | AI 에이전트 협업 사용 방법 학습 | ✅ |
2. 초중급 개발 엔지니어
프론트엔드 부분
| 장 | 주요 내용 | 상태 |
|---|---|---|
| 프론트엔드 0: lovart 사용하여 소재 생성 | lovart를 사용하여 캐릭터, 장면 등 시각 자료 일괄 생성, UI 디자인과 프론트엔드 개발에 자료 기반 제공 | 🚧 |
| 프론트엔드 1: Figma와 MasterGo 입문 | 디자인 도구로 정보 아키텍처와 페이지 구조 정리, 프론트엔드 구현 기반 마련 | 🚧 |
| 프론트엔드 2: 첫 번째 현대 애플리케이션 구축 - UI 디자인 | 디자인 안을 기반으로 컴포넌트화 인터페이스 완성, 디자인에서 코드까지의 첫 번째 경로 실현 | 🚧 |
| 프론트엔드 3: UI 디자인 사양 및 다중 프로덕트 UI 디자인 참조 | 통합된 메인 비주얼을 중심으로 다중 프로덕트 인터페이스 확장, 체계적 디자인 능력 연습 | 🚧 |
| 프론트엔드 4: 함께 해리포트 초상화 만들기 | 0에서 1까지 AI 능력을 통합한 프론트엔드 애플리케이션 제작, 디자인과 개발 연결 | ✅ |
백엔드와 풀스택 부분
| 장 | 주요 내용 | 상태 |
|---|---|---|
| 백엔드 1: API란 | HTTP 인터페이스와 요청-응답 모델 이해, 백엔드 통합과 연동 조정 준비 | ✅ |
| 백엔드 2: 데이터베이스에서 Supabase로 | Supabase상에서 데이터베이스와 API 구현, 데이터 모델과 프론트엔드 페이지 연결 | ✅ |
| 백엔드 3: 대규모 언어 모델 지원 인터페이스 코드 및 문서 작성 | 대규모 언어 모델을 활용하여 인터페이스와 데이터베이스 문서 및 코드 생성 지원, 읽기 쉽고 테스트 가능한 백엔드 실현 | 🚧 |
| 백엔드 4: Git 워크플로우 | Git 워크플로우에서 코드 관리, 버전 관리 및 협업 수행 | ✅ |
| 백엔드 5: Zeabur 배포 | 애플리케이션을 Zeabur에 배포하여 온라인화 | ✅ |
| 백엔드 6: 현대 CLI 개발 도구 | CLI 계열 AI 프로그래밍 도구 사용하여 개발과 디버깅 가속화, 개인 엔지니어링 워크플로우 형성 | ✅ |
| 백엔드 7: Stripe 등 유료 시스템 통합 방법 | 결제 시스템 연결, 유료 경로와 기본 정산 흐름 완성 | 🚧 |
| 대 과제 1: 첫 번째 현대 애플리케이션 구축 - 풀스택 앱 | 프론트엔드, 백엔드, 결제 모듈 통합, 온라인 가능한 풀스택 웹 애플리케이션 완성 | 🚧 |
| 대 과제 2: 현대 프론트엔드 컴포넌트 라이브러리 + Trae 실전 | 현대 프론트엔드 컴포넌트 라이브러리와 Trae 사용, 로그인/등록 가능하고 유료 지원 프로덕트 독립 완성 | 🚧 |
AI 능력 부록
| 장 | 주요 내용 | 상태 |
|---|---|---|
| AI 1: Dify 입문과 지식 베이스 통합 | Dify Workflow와 기본 RAG 사용하여 도구 계열 프로덕트 구축, 이후 애플리케이션 업그레이드 모델 사례 작성 | ✅ |
| AI 2: AI 사전 검색 및 멀티모달 API 통합 학습 | 적절한 모델과 API 검색 방법 학습, 텍스트, 이미지 등 멀티모달 능력을 프로덕트에 통합 | 🚧 |
3. 고급 개발 엔지니어
| 장 | 주요 내용 | 상태 |
|---|---|---|
| 고급 1: MCP와 ClaudeCode Skills | MCP와 Skills를 통해 IDE 능력 확장, 외부 서비스를 도구로 연결 | 🚧 |
| 고급 2: Coding Tools를 장시간 작동시키는 방법 | 장시간 실행되는 작업 설계 및 구성, Coding Tools를 더 안정적이고 신뢰할 수 있게 | 🚧 |
| 고급 3: 멀티플랫폼 개발: 위챗 미니 프로그램 구축 방법 | 위챗 미니 프로그램 생태계 이해, 공식 템플릿부터 출시까지 프론트엔드 미니 프로그램 완성 | ✅ |
| 고급 4: 멀티플랫폼 개발: 위챗 미니 프로그램 구축 방법 - 백엔드 포함 | 미니 프로그램에 데이터베이스와 백엔드 로직 통합, 완전한 비즈니스 폐루프 실현 | 🚧 |
| 고급 5: 멀티플랫폼 개발: 안드로이드 앱 구축 방법 | Expo 등 도구 사용, Web/네이티브 일체화 안드로이드 앱 개발 완성 | 🚧 |
| 고급 6: 멀티플랫폼 개발: iOS 앱 구축 방법 | Expo 등 도구 사용, Web/네이티브 일체화 iOS 앱 개발 완성 | 🚧 |
| 고급 7: 자신만의 개인 웹페이지와 학술 블로그 구축 방법 | 선정, 구축부터 배포까지, 개인 프로젝트와 학술 성과를 전시하는 장기 온라인 홈페이지 구축 | 🚧 |
AI 능력 부록
| 장 | 주요 내용 | 상태 |
|---|---|---|
| 고급 AI 1: RAG란 무엇이며 어떻게 작동하는가 | RAG 원리와 일반적인 아키텍처 체계적 이해, 복잡한 애플리케이션에 지식 검색 기반 제공 | ✅ |
| 고급 AI 2: 중고급 RAG와 워크플로우 편성: LangGraph 예시 | LangGraph 등 도구 사용하여 다단계 워크플로우와 중고급 RAG 시스템 설계 | 🚧 |
🛠️ 학습 방법
- 개인 능력에 따라 관련 장을 선택적으로 읽고 실습하며, 문제가 있으면 Issue로 질문해 주세요.
💻 이 과정을 로컬에서 시작
현대적 방법
AI IDE 대화상자(vscode, cursor, trae 등)에서 다음 프롬프트를 입력하여 이 과정을 시작:
이 프로젝트의 로컬 서비스를 실행해주세요
구식 방법
- npm install
- npm run dev
- 브라우저를 열고
http://localhost:3000에 접속하여 확인.
🤝 기여 참여
- 문제를 발견했거나 이 프로젝트를 개선할 수 있는 점이 있다고 생각되시면 Issue를 제출하여 피드백해 주세요. 제출 후 아무도 응답하지 않으면 보모 팀 멤버에게 연락하여 피드백과 후속 조치를 받을 수 있습니다~
- 이 프로젝트에 기여하고 싶으시면 Pull Request를 제출해 주세요. 제출 후 아무도 응답하지 않으면 보모 팀 멤버에게 연락하여 피드백과 후속 조치를 받을 수 있습니다~
- Datawhale에 매우 흥미가 있고 새 프로젝트를 시작하고 싶으시면 Datawhale 오픈소스 프로젝트 가이드에 따라 조작해 주세요~
🙏 모든 기여자에게 감사
- 散步-프로젝트 책임자 (Datawhale 회원)
- 방可-지도 교사(Datawhale 회원, 칭화대학)
- Yerim Kang（실습 프로젝트 부분-칭화대학）
- 赵芷霖（실습 프로젝트 부분-칭화대학）
- 李亦萱（페이지 미술 디자인-칭화대학）
- AI Vibe Coding 101 베타 테스트 그룹에서 제안과 경험을 제공한 모든 동료들
특별한 감사
- @Sm1les 님이 이 프로젝트에 대한 도움과 지원에 감사
- 이 프로젝트에 기여한 모든 개발자에게 감사 ❤️
📧 문의하기
질문, 제안, 불만, 또는 소통을 원하시면 아래 QR 코드를 스캔해 주세요
아래 QR 코드를 스캔하여 공식 계정을 팔로우해 주세요: Datawhale
