책 이미지
책 정보
· 분류 : 국내도서 > 컴퓨터/모바일 > 인공지능
· ISBN : 9791194383659
· 쪽수 : 392쪽
· 출판일 : 2026-01-01
책 소개
★ 하루짜리 아이디어도 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] 스티커 메모 앱 만들며 커서와 협업하는 방법 알아보기
Shadcn UI를 사용해 트렌디하고 깔끔한 UI를 직접 만들어보며 프런트엔드 구성 방식을 배웁니다. 커서에게 기능을 설명하고 필요한 로직을 함께 만들어가는 방식으로 협업 코딩을 경험합니다. 버그를 해결하는 디버깅 흐름도 함께 연습하며 실제 개발 환경과 가까운 상황을 체험합니다. 후반에는 v0를 활용해 아이디어를 바로 화면으로 옮기는 방법까지 배웁니다.
[파트 03] v0로 로또 6/45 앱 만들기
v0에서 로또 앱의 전체 화면 구조를 설계하고 필요한 UI 요소를 자동으로 생성해봅니다. 생성된 UI를 기반으로 기능을 구현하는 흐름을 익히며 화면 초안에서 기능 구현의 연결 과정을 자연스럽게 배웁니다. 완성된 앱을 v0 내에서 바로 배포해 실제로 동작하는 링크를 만들고 다른 사람에게 공유하는 방법도 알아봅니다. UI 제작과 배포까지 한 번에 이어지는 실습이 특징이에요.
[파트 04] AI 챗봇 만들기
v0로 AI 챗봇의 화면을 만들고 커서와 함께 단계별 프롬프트로 스트리밍 기반 챗봇 기능을 구현합니다. 대화의 흐름이 실시간으로 표시되는 로직을 배워보며 AI 챗봇의 작동 원리를 이해하게 됩니다. 이어서 수파베이스로 데이터베이스를 만들고 메시지를 저장하는 기능까지 구현하여 완성형 챗봇을 만들어봅니다. UI와 기능, 데이터 연동이 자연스럽게 연결되는 파트입니다.
[파트 05] AI 챗봇 인증 페이지 만들기
OAuth 2.0 개념을 이해하며 로그인 흐름이 어떻게 돌아가는지 쉽게 설명해드립니다. 구글 로그인과 같은 소셜 로그인 기능을 직접 구현하며 인증 로직을 단계별로 익혀봅니다. 폼 검증, JWT 토큰 처리, 유효성 검사 등 보안에 필요한 요소들도 함께 배웁니다. ‘사용자 인증이 가능한 실제 서비스’ 형태로 AI 챗봇을 완성하는 과정입니다.
[파트 06] PRD 문서 기반 할 일 목록 앱 만들기
아이디어를 챗GPT에게 전달해 기능명세서인 PRD를 자동으로 생성하고 이를 기반으로 앱 구조를 설계합니다. v0에서 디자인을 생성한 뒤 커서와 통합해 기능을 하나씩 완성하는 실습을 진행합니다. 그런 다음 Supabase MCP를 연동해 API와 데이터베이스를 자동으로 관리하는 흐름도 배웁니다. 기획 ? 설계 ? 개발의 전체 사이클을 경험할 수 있는 파트입니다.
[파트 07] 이미지 갤러리 앱 만들기
이미지 업로드, 불러오기, 삭제 등 실제 서비스에서 많이 사용하는 기능을 구현해봅니다. 수파베이스 스토리지·데이터베이스를 연동하며 API 호출 방식과 데이터 흐름을 자연스럽게 익힙니다. 구현이 어느 정도 마무리되면 앱의 안정성을 높이기 위한 기능 고도화, 테스트 과정도 함께 경험합니다. 보다 실무적인 프로젝트를 통해 수준을 한 단계 끌어올립니다.
[파트 08] QR/바코드 앱 만들기
v0로 QR/바코드 생성 앱 UI를 만들고 필요한 기능을 커서와 함께 구현합니다. 텍스트를 입력하면 즉시 QR이나 바코드를 생성하는 기능을 구축하며 시각적 결과를 바로 확인할 수 있습니다. 간단하지만 실용성이 높은 프로젝트를 통해 빠른 개발 경험을 쌓습니다. API 호출 방식과 이미지 렌더링 로직도 자연스럽게 익힐 수 있습니다.
[파트 09] DeepL 클론 앱 완성하기
여러 언어를 번역할 수 있는 DeepL 스타일 번역 앱을 직접 만들어봅니다. v0에서 UI를 설계와 번역 API 연동 및 백엔드 로직까지 완성합니다. 텍스트 입력·번역·음성 기능까지 추가하여 완성도 높은 AI 번역 앱을 구현합니다. 이 책의 마지막 프로젝트로 AI 기능을 활용한 서비스 완성의 흐름을 끝까지 경험하는 파트입니다.
목차
[파트 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를 활용해 아이디어를 바로 화면으로 옮기는 방법까지 배웁니다.
