모두를 위한 바이브코딩_기본편
과정소개
학습목표
1.AI 도구를 활용해 서비스 요구사항을 정의하고, 목표·범위·산출물·검증기준을 포함한 프롬프트(RFP) 문서를 작성할 수 있다.
2.Lovable 시안을 기반으로 Vite+React+TypeScript+Tailwind 환경에서 페이지/컴포넌트 구조를 설계하고 실행 가능한 웹 UI를 구현할 수 있다.
3.Supabase를 활용해 DB 스키마 및 Storage(이미지) 연동을 구성하고, 환경변수 관리로 로컬/운영 환경을 분리하여 데이터 기반 화면 동작을 완성할 수 있다.
4.관리자(Admin) CRUD 기능을 구현하고 GitHub/Vercel로 배포하여 외부 접속 가능한 운영 URL을 생성하며, 배포 환경 이슈(권한/환경변수/스토리지)를 점검·해결할 수 있다.
2.Lovable 시안을 기반으로 Vite+React+TypeScript+Tailwind 환경에서 페이지/컴포넌트 구조를 설계하고 실행 가능한 웹 UI를 구현할 수 있다.
3.Supabase를 활용해 DB 스키마 및 Storage(이미지) 연동을 구성하고, 환경변수 관리로 로컬/운영 환경을 분리하여 데이터 기반 화면 동작을 완성할 수 있다.
4.관리자(Admin) CRUD 기능을 구현하고 GitHub/Vercel로 배포하여 외부 접속 가능한 운영 URL을 생성하며, 배포 환경 이슈(권한/환경변수/스토리지)를 점검·해결할 수 있다.
강의목차
| 차시 | 강의명 |
|---|---|
| 1차시 | 바이브코딩 오리엔테이션 |
| 2차시 | chatGPT와 기획 같이 하기 |
| 3차시 | Lovable로 랜딩 디자인 만들기 |
| 4차시 | Cursor로 프론트 골격 만들기 |
| 5차시 | 랜딩 행동 유도 CTA 완성 |
| 6차시 | GitHub로 배포하기 |
| 7차시 | 웹서비스 5요소와 통합 설계 |
| 8차시 | chatGPT로 브랜드 홈페이지 기획 완성하기 |
| 9차시 | Lovable로 UI 시안 설계하기 |
| 10차시 | Cursor로 프로젝트 골격 만들기 |
| 11차시 | Supabase로 데이터베이스 연결하기 |
| 12차시 | Admin CRUD, 관리자 운영 구축하기 |
| 13차시 | 블로그(blog), 서비스 구축하기 |
| 14차시 | 블로그/포트폴리오 Storage & CRUD |
| 15차시 | 포트폴리오 CRUD와 이미지 연동 |
| 16차시 | 공지글, 보도자료 CRUD 구현 |
| 17차시 | 콘텐츠 정렬하기 |
| 18차시 | 문의사항 서비스 및 CRUD 구현 |
| 19차시 | GitHub/Vercel 배포하기 |
| 20차시 | 배포, 디버깅, 그리고 확장 |