프로젝트 소개
2025년은 많은 사람들에게 AI 프로그래밍의 원년으로 불리고 있습니다. 점점 더 많은 사람들이 AI로 코드를 작성하기 시작했지만, 여전히 장난감 수준에 머물러 있는 경우가 많습니다. Vibe Coding으로 개발 프로세스를 어떻게 구성해야 할지, 어떤 도구를 선택해야 할지, 그리고 프로토타입에서 서비스 출시까지 어떤 핵심 단계가 필요한지 모르는 경우가 많습니다.
우리는 단계적인 3단계 실전 학습 경로를 채택했습니다. 초보자 입문 단계에서는 소규모 게임을 통해 AI 프로그래밍에 빠르게 익숙해지고, 1단계에서는 Vibe Coding 작업 방식을 마스터하여 웹 애플리케이션 프로토타입을 완성합니다. 2단계에서는 풀스택 개발과 배포를 학습하고, 3단계에서는 크로스 플랫폼 복잡 애플리케이션을 구축합니다.
각 단계에는 완전한 프로젝트 실전이 포함되어 있어, 실제 도전을 통해 장난감에서 제품으로 나아가며, 최종적으로 어떤 아이디어든 사용 가능한 애플리케이션으로 구현하는 능력을 갖추게 됩니다.
우리는 Vibe Coding을 마스터하고 체계적인 훈련과 결합하면, 한 사람이 프론트엔드/백엔드 개발, AI 역량 통합, 제품 설계를 모두 갖춘 올라운드 개발자가 될 수 있다고 믿습니다.
본 프로젝트는 주로 세 가지 유형의 학습자를 대상으로 합니다:
- 초보자 (일반인 / 제품 및 운영 직무): 비기술적 배경을 가진 분들과 입문 학습자가 핵심 개념을 이해하고 첫 번째 AI 소규모 도구나 제품 프로토타입을 완성할 수 있도록 돕습니다.
- 초중급 개발자 (기초 지식이 있는 학생 및 개발자): vibe coding과 네이티브 AI 애플리케이션 개발을 체계적으로 마스터합니다.
- 고급 개발자 (기업 및 스타트업, 오픈소스 및 인디 개발자): 팀과 개인이 네이티브 AI 애플리케이션을 빠르게 구축, 검증 및 반복할 수 있도록 지원합니다.
📖 콘텐츠 내비게이션
총 부록
AI 역량 사전: 일반적인 AI 핵심 개념과 용어, 시나리오 설명
0단계: 유치원
| 챕터 | 핵심 콘텐츠 | 상태 |
|---|---|---|
| 초보자 입문: 학습 지도 | 전체 학습 경로 가이드 | ✅ |
| 초보자 입문: AI 시대, 말할 수 있으면 코딩할 수 있다 | 뱀 게임 등의 사례로 AI 프로그래밍 능력 체감 | ✅ |
1단계: AI 제품 매니저
| 챕터 | 핵심 콘텐츠 | 상태 |
|---|---|---|
| 초급 2: AI IDE 도구 이해하기 | IDE 사용법 학습, 인터페이스 구조와 효율적인 프롬프트 방식 마스터 | ✅ |
| 초급 3: 직접 프로토타입 만들기 | 제품 분석 및 분해부터 다중 페이지 제품 프로토타입 구현까지의 완전한 사이클 | ✅ |
| 초급 4: 프로토타입에 AI 능력 추가하기 | 일반적인 AI 능력(텍스트, 이미지, 비디오)의 API 연동 이해 및 완성 | ✅ |
| 초급 5: 완전한 프로젝트 실전 | 실제 시나리오 시뮬레이션, 사용자 피드백 반복 및 프로젝트 발표 완료(대과제 포함) | ✅ |
부록
| 챕터 | 핵심 콘텐츠 | 상태 |
|---|---|---|
| 부록 A: 제품 사고 보충 | 아이디어 평가부터 요구사항 분해와 MVP까지의 제품 사고 프레임워크 | ✅ |
| 부록 B: 일반적인 오류 및 해결 방법 | vibe coding에서의 일반적인 오류 및 해결 방법 | ✅ |
| 부록: 아이디어를 어디서 찾을까 | 참고 앱, 트렌드, VC 목록에서 세부 방향 발굴 | ✅ |
| 부록: 더블 다이아몬드 모델 | 먼저 문제를 정의한 후 솔루션 설계를 전개하는 완전한 리듬 이해 | ✅ |
| 부록: Jobs to Be Done | JTBD 방법으로 사용자가 정말로 완료하고 싶은 일 파악 | ✅ |
| 부록: The Mom Test 사용자 인터뷰 방법 | 사용자 인터뷰를 통한 요구사항 검증 조사 방법 | ✅ |
2단계: 초중급 개발 엔지니어
프론트엔드 부분
| 챕터 | 핵심 콘텐츠 | 상태 |
|---|---|---|
| lovart로 소재 제작 | lovart를 사용하여 인물, 장면 등 시각 소재를 대량 생성하고, UI 디자인과 프론트엔드 개발을 위한 소재 기반 제공 | 🚧 |
| Figma와 MasterGo 입문 | 디자인 도구로 정보 구조와 페이지 구조를 정리하고, 프론트엔드 구현을 위한 기반 마련 | 🚧 |
| 첫 번째 모던 애플리케이션 구축 - UI 디자인 | 디자인 시안을 기반으로 컴포넌트화된 인터페이스 완성, 디자인에서 코드로의 첫 번째 연결 구현 | 🚧 |
| UI 디자인 가이드라인을 참고하여 페이지와 버튼 디자인 | 주류 디자인 가이드라인을 사용하여 페이지 구조, 버튼 계층을 조직하고, AI를 활용한 디자인 제안 생성 학습 | 🚧 |
| 함께 호그와트 초상화 만들기 | 0부터 1까지 AI 능력을 연동한 프론트엔드 애플리케이션 제작, 디자인과 개발 연결 | 🚧 |
백엔드 개발 부분
| 챕터 | 핵심 콘텐츠 | 상태 |
|---|---|---|
| API란 무엇인가 | HTTP 인터페이스와 요청-응답 모델 이해, 백엔드 통합 및 연동 준비 | 🚧 |
| 데이터베이스부터 Supabase까지 | Supabase에서 데이터베이스와 API 구축, 데이터 모델과 프론트엔드 페이지 연결 | 🚧 |
| 대형 언어 모델 보조 인터페이스 코드 및 인터페이스 문서 작성 | 대형 언어 모델을 활용하여 인터페이스 및 데이터베이스 문서와 코드를 생성하고, 가독성과 테스트가 가능한 백엔드 구현 | 🚧 |
| Git 워크플로우와 Zeabur 배포 | Git 워크플로우에서 코드 관리, 애플리케이션을 Zeabur에 배포하여 서비스 | 🚧 |
| 모던 CLI 개발 도구 | CLI 유형 AI 프로그래밍 도구를 사용하여 개발과 디버깅을 가속화하고 개인 엔지니어링 워크플로우 형성 | 🚧 |
| stripe 등 결제 시스템을 통합하는 방법 | 결제 시스템 연동, 결제 플로우와 기본 정산 프로세스 완성 | 🚧 |
| 첫 번째 모던 애플리케이션 구축 - 풀스택 애플리케이션 | 프론트엔드, 백엔드, 결제 모듈을 종합하여 서비스 가능한 풀스택 웹 애플리케이션 완성 | 🚧 |
| 모던 프론트엔드 컴포넌트 라이브러리 + Trae 실전 | 모던 프론트엔드 컴포넌트 라이브러리와 Trae를 사용하여 로그인/회원가입을 지원하고 유료화가 가능한 제품 독립 완성 | 🚧 |
AI 역량 부록
| 챕터 | 핵심 콘텐츠 | 상태 |
|---|---|---|
| Dify 입문과 지식 베이스 통합 | Dify Workflow와 기본 RAG로 도구 유형 제품 구축, 후속 애플리케이션 업그레이드를 위한 샘플 제공 | 🚧 |
| AI 사전 조회 및 멀티모달 API 통합 학습 | 적합한 모델과 API를 찾는 방법 학습, 텍스트, 이미지 등 멀티모달 능력을 제품에 연동 | 🚧 |