요즘 바이브 코딩 v0 + 커서 입문 PRD 기획·개발·배포, 일주일 완성

[파트 01] 코딩의 첫걸음 : 도구와 기술 익히기

_챕터 01 바이브 코딩의 첫걸음
__커서와 친해지기
__커서와 의사소통 방법
__커서의 유료 플랜과 무료 플랜, 어떤 차이가 있을까?
__구독을 해지하려면?
_챕터 02 개발 도구 준비하기
__커서 설치하기
__Node.js 설치 및 터미널 옵션 변경하기
__간단한 프로젝트 생성하기
__Shadcn UI 설치하기
_챕터 03 메모 앱 만들며 프롬프트 작성 기술 익히기
__프롬프트 작성 팁 4가지 알아보기
__보강된 프롬프트 예 확인하기
__메모 앱 만들며 프롬프트 작성 연습해보기

[파트 02] 스티커 메모 앱 만들며 커서와 협업하는 방법 알아보기

_챕터 04 스티커 메모 앱의 기본 구조 만들기
__프로젝트 열고 작업 시작하기
_챕터 05 스티커 메모 앱을 더 멋지게 만들기
__Shadcn UI로 더 멋지게 꾸며보기
_챕터 06 스티커 메모 앱에 기능 추가하기
__메모 삭제, 수정 기능 추가하기
_챕터 07 커서와 함께 디버깅 실습하기
__오류 일부러 만들어보기
_챕터 08 아이디어를 바로 화면으로,v0로 시작하기
__v0 사용해보기
__v0 + 커서 워크플로 살펴보기

[파트 03] v0로 로또 6/45 앱 만들고 배포하기

_챕터 09 프로젝트 소개 및 앱 기본 구조 만들기
__v0에서 로또 6/45 생성기 인터페이스 구성하기
_챕터 10 로또 번호 저장, 삭제 기능 추가하기
__로또 번호 저장, 삭제 기능 추가하기
_챕터 11 v0에서 배포해서 다른 사람과 앱 공유하기
__임시 URL 생성 및 공유 절차 알아보기

[파트 04] AI 챗봇 만들기

_챕터 12 AI 챗봇 제작을 위한 준비하기
__[바이브 코딩 01] Next.js 프로젝트 생성하고 shadcn/ui 설정 및 초기화하기
__[바이브 코딩 02] v0로 챗봇 UI 만들고 테마 토글 기능 추가하기
__[바이브 코딩 03] v0에서 만든 UI 코드를 커서로 가져오기
__[바이브 코딩 04] 챗봇을 위한 API 키 준비하고 연결하기
__[바이브 코딩 05] 필요한 도구 설치하기
_챕터 13 단계별 프롬프트로 스트리밍 챗봇 만들기
__[바이브 코딩 06] 백엔드 통신 담당 API Route 만들기
__[바이브 코딩 07] 사용자와 대화하는 창 만들기
_챕터 14 대화 저장을 위한 수파베이스 준비하기
__[바이브 코딩 08] 수파베이스 프로젝트 생성하기
__[바이브 코딩 09] SQL Editor로 수파베이스에 테이블 생성하기
_챕터 15 수파베이스를 이용하여 대화 생성하고 저장하기
__[바이브 코딩 10] 수파베이스 클라이언트 설정하기
__[바이브 코딩 11] 새 대화 시작 기능 구현하기
__[바이브 코딩 12] 메시지 내용 저장 및 불러오기 기능 구현하기
__[바이브 코딩 13] 이전 대화 내용 불러오기 기능 구현하기

[파트 05] AI 챗봇에 인증 페이지 만들기

_챕터 16 챗봇이 나를 알아보게 만드는 인증 시스템 준비하기
__인증과 인가, 뭐가 다른 걸까?
__로그인 확인 방식, 세션과 토큰
__클릭 한 번으로 로그인! OAuth 2.0의 마법
__[바이브 코딩 14] 구글 클라우드 API 키로 외부 서비스 연동 준비하기
__[바이브 코딩 15] .env.local 파일에 사용자 인증 설정 추가하기
__[바이브 코딩 16] 폼 관리/검증 도구 준비하기
_챕터 17 챗봇의 ‘얼굴’, 로그인과 회원가입 페이지 만들기
__말보다 그림! AI에게 ‘보여주며’ 직관적으로 요청하기
__[바이브 코딩 17] v0에서 디자인한 UI, 내 프로젝트로 이동시키기
__[바이브 코딩 18] 인증 기능으로 들어가는 ‘문’ 만들기
__[바이브 코딩 19] 인증 시스템 핵심 설정하기
_챕터 18 로그인과 회원가입 기능 구현하기
__[바이브 코딩 20] 유효성 검사 스키마 정의하기
__[바이브 코딩 21] 회원가입 폼 로직 구현하기
__[바이브 코딩 22] 로그인 폼 로직 구현하기
_챕터 19 데이터베이스 연동 강화하기
__[바이브 코딩 23] ‘나’를 알아보는 챗봇 만들기
__[바이브 코딩 24] 챗봇이 회원을 제대로 알아볼까요?
__[바이브 코딩 25] 구글 로그인 구현하기
__[바이브 코딩 26] 구글 로그인, 완벽하게 작동할까?

[파트 06] PRD 문서 기반으로 할 일 목록 앱 만들기

_챕터 20 체계적인 개발의 시작, 제품 요구사항 문서 준비하기
__개발의 설계도, ‘PRD’가 왜 중요한지 이해하기
__[바이브 코딩 27] 챗GPT와 함께 설계도 만들기 2
__[바이브 코딩 28] 공식 설계도 정하고 v0에게 작업 지시하기
__[바이브 코딩 29] v0 함께 디자인 다듬기
_챕터 21 v0 결과물을 프로젝트에 통합하기
__[바이브 코딩 30] v0에서 디자인한 UI, 이번엔 ‘직접’ 가져오기
_챕터 22 데이터에 기억력 부여하기
__MCP란?
__[바이브 코딩 31] 커서에 Supabase MCP 연결하기
__[바이브 코딩 32] 커서로 코드 분석 후 데이터베이스 설계하기
__[바이브 코딩 33] 수파베이스 클라이언트 만들기
__[바이브 코딩 34] 수파베이스에 기능 연결하기
__[바이브 코딩 35] 새로운 할 일에 ‘영구 기억력’ 부여하기
_챕터 23 완료 및 삭제 기능으로 생명력 완성하기
__[바이브 코딩 36] 할 일 상태를 수정하는 완료 표시 기능 추가하기
__[바이브 코딩 37] 삭제 기능 추가로 CRUD 완성하기

[파트 07] 이미지 갤러리 앱 만들기

_챕터 24 프로젝트 기획 및 설계와 UI 디자인 및 기능 구현하기
__이미지 갤러리 앱 핵심 설계도 만들기
__UI 디자인 및 기능 계획하기
__[바이브 코딩 38] 메인 피드와 게시물 관리 UI 만들기
__[바이브 코딩 39] 댓글 및 태그 기능 UI 만들기
__[바이브 코딩 40] 사진 업로드 및 검색 UI 만들기
_챕터 25 데이터베이스 및 API 연동하기
__[바이브 코딩 41] 수파베이스 연동 설정으로 백엔드와 연결하기
__[바이브 코딩 42] 수파베이스 테이블 생성하기
__[바이브 코딩 43] API 라우트 생성 및 연결하기
__[바이브 코딩 44] 댓글 기능 개선하기
_챕터 26 앱 고도화 및 최종 테스트하기
__[바이브 코딩 45] 새 프로젝트 생성 및 코드 통합하기
__[바이브 코딩 46] 이미지 피드 고도화하기

[파트 08] QR/바코드 앱 만들기

_챕터 27 QR 코드 앱 만들기
__[바이브 코딩 47] QR 코드 생성기 구현하기
__[바이브 코딩 48] QR 코드 인식 기능 구현하기
__[바이브 코딩 49] 앱 배포 후 모바일 테스트하기
_챕터 28 바코드 앱 만들기
__[바이브 코딩 50] 바코드 생성기 구현하기
__[바이브 코딩 51] 바코드 인식 기능 구현하기
__[바이브 코딩 52] 바코드 앱 테스트하기

[파트 09] DeepL 클론 앱 완성하기

_챕터 29 DeepL 기획 및 v0로 UI 설계하기
__DeepL 핵심 기능 분해하기
__[바이브 코딩 53] v0와 함께 UI 설계하기
_챕터 30 백엔드 API 구축 및 연결하기
__[바이브 코딩 54] API 준비하기
__[바이브 코딩 55] 핵심 기능에 생명 불어넣기

[파트 01] 코딩의 첫걸음 : 도구와 기술 익히기
이 파트에서는 바이브 코딩이 무엇인지, 그리고 AI와 함께 개발하는 방식이 기존 코딩과 어떤 점이 다른지 알아봅니다. 커서와 v0를 포함해 개발에 필요한 기본 도구를 준비하고 간단한 메모 앱을 직접 만들어보며 프롬프트 작성의 기본기를 익힙니다. 코드를 외워서 쓰기보다 ‘설명하면 만들어지는 개발 흐름’을 체험하는 데 집중합니다. 전체 학습의 기초 리듬을 만들어주는 파트입니다.

[파트 02] 스티커 메모 앱 만들며 커서와 협업하는 방법 알아보기
Shadcn UI를 사용해 트렌디하고 깔끔한 UI를 직접 만들어보며 프런트엔드 구성 방식을 배웁니다. 커서에게 기능을 설명하고 필요한 로직을 함께 만들어가는 방식으로 협업 코딩을 경험합니다. 버그를 해결하는 디버깅 흐름도 함께 연습하며 실제 개발 환경과 가까운 상황을 체험합니다. 후반에는 v0를 활용해 아이디어를 바로 화면으로 옮기는 방법까지 배웁니다.