요즘 바이브 코딩 v0 + 커서 입문 PRD 기획·개발·배포, 일주일 완성 (인공지능 코딩, vercel, 기획, PRD, 설계, 인증, 배포, QR·바코드 생성 앱, 챗GPT,

김동학

20여년간풀스택개발자로활동하며그룹웨어·CRM시스템개발부터서버구축·운영까지폭넓은경험을쌓았습니다.현장에서다져온실전기술력과문제해결역량을바탕으로,현재는페이스북‘바이브코딩’커뮤니티를운영하며개발자들이AI시대의새로운코딩흐름을쉽고자연스럽게익힐수있도록돕고있습니다.
-YouTube_youtube.com/@anthony.jikime
-Blog_devway.tistory.com
-Kakao_open.kakao.com/o/gs1VxCrh

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

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

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

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

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

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

[파트04]AI챗봇만들기

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

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

_챕터16챗봇이나를알아보게만드는인증시스템준비하기
__인증과인가,뭐가다른걸까?
__로그인확인방식,세션과토큰
__클릭한번으로로그인!OAuth2.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함께디자인다듬기
_챕터21v0결과물을프로젝트에통합하기
__[바이브코딩30]v0에서디자인한UI,이번엔‘직접’가져오기
_챕터22데이터에기억력부여하기
__MCP란?
__[바이브코딩31]커서에SupabaseMCP연결하기
__[바이브코딩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/바코드앱만들기

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

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

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

★왜v0와커서인가?
★하루짜리아이디어도PRD를제대로작성하면
★바로서비스가되는개발속도를극단까지끌어올리는AI듀오!

v0는아이디어를설명하면바로화면을만들어주는AI기반UI생성도구이고,커서는자연어로기능을설명하면코드·API·로직을자동으로구성해주는AI개발환경입니다.v0가빠르게보이는화면을준비해주고커서가그뒤를이어실제로동작하는기능을완성해주기때문에두도구를함께쓰면기획·디자인·개발이하나의흐름으로연결되는시너지가생깁니다.화면과기능을오가며수정해야하는기존개발방식과달리,이조합은아이디어부터UI,기능,배포모두를AI가돕는올인원워크플로를제공합니다.그래서이책은v0와커서를결합한실습중심의구성으로독자가처음부터끝까지AI와함께완성형서비스를만드는방법을체험할수있도록설계했습니다.

★이론만배우다가지쳤나요?이제는바로만들고,바로실행하며배우세요
★v0와커서AI가기획부터개발·배포까지전과정을함께합니다
★이책과함께라면누구나‘실제서비스’를직접완성할수있습니다

이책은아이디어를머릿속에만두지않고,바로앱으로만들고싶은사람들을위한책입니다.복잡한개발지식이없어도괜찮습니다.v0에서화면을만들고커서에서코드를자동생성하며수파베이스로데이터베이스와인증을연결하는과정까지모두AI와대화만으로진행합니다.메모앱,로또6/45앱,할일목록앱,이미지갤러리앱,QR/바코드앱,DeepL클론까지일상적이면서도실용적인프로젝트를직접만들어보면서AI시대의개발흐름을자연스럽게익혀보세요.

★프롬프트한줄이면UI가자동생성되고,
★피드백한번이면코드가즉시개선되고,
★설계도만주면AI가전체프로그램을구현하는과정을직접경험해보세요!

v0와커서의사용법을단순기능설명이아니라실제만들면서익히는방식으로안내합니다.초반에는메모앱과로또앱처럼작고단순한프로젝트로프롬프트작성감각을익히고중반에는AI챗봇·인증시스템·이미지갤러리처럼구조를갖춘프로젝트를단계별로완성하며개발관련프로세스감각을확장합니다.후반에는PRD기반으로할일목록앱을설계하고수파베이스MCP를연동하며,번역·음성기능까지갖춘DeepL클론앱을완성합니다.v0는UI초안을즉시만들어주고커서는API·로직·테스트·배포까지책임지는AI페어프로그래밍환경을제공합니다.덕분에독자여러분은오류를두려워하지않고복잡한구조에매이지않으며시작하자마자결과를확인하는새로운경험을누릴수있습니다.

★이책의대상독자
매번UI를직접그리느라시간을많이쓰고,개발흐름을빨리잡고싶은〈프런트엔드입문자A씨〉
아이디어는넘치지만MVP개발이막막해AI의도움을적극활용하고싶은〈예비창업가B씨〉
학생들에게최신IT흐름을가르치고싶지만프로그래밍은두려운교육자디지털역량을키우고싶은〈디지털역량이필요한교사C선생님〉
포트폴리오경쟁력을높이기위한AI·IT역량을빠르게습득하고싶은〈취업준비생·대학생D군〉

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

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

[파트03]v0로로또6/45앱만들기
v0에서로또앱의전체화면구조를설계하고필요한UI요소를자동으로생성해봅니다.생성된UI를기반으로기능을구현하는흐름을익히며화면초안에서기능구현의연결과정을자연스럽게배웁니다.완성된앱을v0내에서바로배포해실제로동작하는링크를만들고다른사람에게공유하는방법도알아봅니다.UI제작과배포까지한번에이어지는실습이특징이에요.

[파트04]AI챗봇만들기
v0로AI챗봇의화면을만들고커서와함께단계별프롬프트로스트리밍기반챗봇기능을구현합니다.대화의흐름이실시간으로표시되는로직을배워보며AI챗봇의작동원리를이해하게됩니다.이어서수파베이스로데이터베이스를만들고메시지를저장하는기능까지구현하여완성형챗봇을만들어봅니다.UI와기능,데이터연동이자연스럽게연결되는파트입니다.

[파트05]AI챗봇인증페이지만들기
OAuth2.0개념을이해하며로그인흐름이어떻게돌아가는지쉽게설명해드립니다.구글로그인과같은소셜로그인기능을직접구현하며인증로직을단계별로익혀봅니다.폼검증,JWT토큰처리,유효성검사등보안에필요한요소들도함께배웁니다.‘사용자인증이가능한실제서비스’형태로AI챗봇을완성하는과정입니다.

[파트06]PRD문서기반할일목록앱만들기
아이디어를챗GPT에게전달해기능명세서인PRD를자동으로생성하고이를기반으로앱구조를설계합니다.v0에서디자인을생성한뒤커서와통합해기능을하나씩완성하는실습을진행합니다.그런다음SupabaseMCP를연동해API와데이터베이스를자동으로관리하는흐름도배웁니다.기획➝설계➝개발의전체사이클을경험할수있는파트입니다.

[파트07]이미지갤러리앱만들기
이미지업로드,불러오기,삭제등실제서비스에서많이사용하는기능을구현해봅니다.수파베이스스토리지·데이터베이스를연동하며API호출방식과데이터흐름을자연스럽게익힙니다.구현이어느정도마무리되면앱의안정성을높이기위한기능고도화,테스트과정도함께경험합니다.보다실무적인프로젝트를통해수준을한단계끌어올립니다.

[파트08]QR/바코드앱만들기
v0로QR/바코드생성앱UI를만들고필요한기능을커서와함께구현합니다.텍스트를입력하면즉시QR이나바코드를생성하는기능을구축하며시각적결과를바로확인할수있습니다.간단하지만실용성이높은프로젝트를통해빠른개발경험을쌓습니다.API호출방식과이미지렌더링로직도자연스럽게익힐수있습니다.

[파트09]DeepL클론앱완성하기
여러언어를번역할수있는DeepL스타일번역앱을직접만들어봅니다.v0에서UI를설계와번역API연동및백엔드로직까지완성합니다.텍스트입력·번역·음성기능까지추가하여완성도높은AI번역앱을구현합니다.이책의마지막프로젝트로AI기능을활용한서비스완성의흐름을끝까지경험하는파트입니다.