한 걸음 앞선 일잘러가 지금 꼭 알아야 할 바이브 코딩 with 커서 (웹 명함 제작부터 사내 스터디 관리 플랫폼까지 커서, n8n, MCP로 완성하는 나의 첫 바이브 코딩 올인원

김태헌(퇴근후딴짓)

2025년SideOnAI를창업하여교육·업무·창작전반에AI를더하는콘텐츠를만들고있다.AI입문유튜브채널'퇴근후딴짓'을운영하며비개발자도생성형AI와바이브코딩을통해자신의아이디어를실제서비스로구현할수있도록돕는다.기업,공공기관,대학을대상으로생성형AI활용과업무자동화교육을진행하고있으며,데이터분석프로젝트도수행하고있다.인프런에서누적수천명의수강생에게높은평점을받았다.저서로는『2026시나공빅데이터분석기사실기』(길벗,2025),『파이썬딥러닝텐서플로』(정보문화사,2021)가있다.

[목차]

1부바이브코딩이해

1장바이브코딩이란
1.1바이브코딩이해
1.2바이브코딩연습
1.3바이브코딩도구둘러보기

2장웹/앱서비스는어떻게작동할까?
2.1웹/앱서비스의구조이해
2.2프런트엔드핵심키워드
2.3백엔드와데이터베이스

2부바이브코딩실습준비

3장개발환경준비
3.1사전준비:필요한계정
3.2파이썬설치
3.3Node.js설치
3.4깃설치
3.5깃허브CLI설치
3.6커서설치

4장커서AI살펴보기
4.1커서실행및로그인
4.2초기설정
4.3커서UI구성
4.4최신AI모델설정가이드

3부나의첫바이브코딩프로젝트

5장AI와함께만드는나만의웹명함
5.1미니프로젝트1:나만의웹명함만들기
5.2미니프로젝트2:웹명함공유를위한깃허브(GitHub)연동

4부바이브코딩실전

6장바이브코딩스킬업:Plan으로체계잡기
6.1바이브코딩의작업방식:Say→Run→See
6.2투두리스트개발전체과정예시
6.3복잡한서비스의한계점
6.4커서의Plan모드란
6.5Plan모드사용방법

5부Plan적용프로젝트:나만의브랜딩사이트

7장개인브랜딩사이트만들기
7.1Plan모드로프로젝트계획세우기
7.2개인브랜딩사이트만들기
7.3커피챗기능추가
7.4깃허브페이지로배포

특별코너저자와편집자가마주한11가지에러상황
01커서채팅창에편하게물어보세요
02[환경]노드,깃허브CLI명령어를실행할수없는에러
03[환경]명령프롬프트/파워셸권한문제
04[환경]설치과정에서멈춘것처럼보인다면?
05요청한대로수정이잘되지않을경우
06[웹브라우저]커서가알려준URL로접속했는데웹사이트로연결할수없다면?
07[웹브라우저]빈화면이나온다면?
08[웹브라우저]화면에에러가나온다면?
09[웹브라우저]화면은나오나원하는대로작동하지않는다면?
10[LLM]제미나이관련에러메시지가표시된다면?
11Connectionfailed메시지를해결하는방법

6부외부데이터를활용한서비스제작

8장재무제표시각화및AI분석
8.1전자공시시스템오픈다트키발급받기
8.2생성형AI의API키발급받기
8.3프로젝트시작
8.4프로젝트계획세우기
8.5재무제표시각화개발시작
8.6깃허브업로드및버셀로배포

9장유튜브댓글AI분석서비스
9.1구글콘솔에서API키발급받기
9.2OpenAIAPI키발급받기
9.3프로젝트계획세우기
9.4유튜브댓글분석서비스개발

10장네이버뉴스검색및AI분석서비스
10.1네이버와OpenAIAPI키발급받기
10.2프로젝트계획세우기
10.3실시간뉴스분석서비스개발
7부데이터베이스를활용한서비스제작

11장AI퀴즈서비스
11.1파이어베이스설정
11.2프로젝트계획세우기
11.3AI퀴즈플랫폼서비스개발
11.4파이어베이스로배포

12장모임플랫폼서비스
12.1파이어베이스로그인설정
12.2프로젝트계획세우기
12.3모임플랫폼개발
12.4파이어베이스로배포

8부커서와n8n으로만드는업무도구

13장구글시트로만드는AI챗봇
13.1n8n회원가입
13.2OpenAI/제미나이API키발급받기
13.3n8n으로챗봇워크플로만들기
13.4프로젝트계획세우기
13.5챗봇서비스개발
13.6메모리기능추가
13.7구글시트도구추가

14장MCP를활용한웹브라우저자동화및데이터크롤링
14.1MCP란
14.2PlaywrightMCP설치
14.3MCP활용1:내가만든사이트점검
14.4MCP활용2:웹사이트데이터크롤링
14.5마치며

부록
찾아보기

아이디어를입력하는순간,바이브코딩이시작된다
코드를몰라도AI와의티키타카만으로완주하는실전프로젝트가이드

일의속도와구조를모두바꾸는새로운업무방식,바이브코딩
바이브코딩은AI를단순한자동화도구가아닌,함께사고하고실행하는협업파트너로활용하는새로운업무방식이다.아이디어를정리하고구조를설계하는단계부터구현까지,일의흐름자체가이전과는달라진다.이책은개인의생산성을넘어업무방식전체를한단계끌어올리는바이브코딩의실전을다룬다.개념설명에그치지않고,직접만들고부딪히며체득하는방식으로구성했으며실습을통해바이브코딩의핵심인‘느낌과감각’을자연스럽게익히도록설계했다.

코드를전혀몰라도따라하기만하면프로젝트완성
프로그래밍문법을몰라도괜찮다.코드한줄작성하는것조차막막해포기하고싶던과거는잊어도된다.이제중요한것은‘어떻게코드를작성할것인가’가아니라‘무엇을만들것인가’를명확히설명하는능력이다.온라인·오프라인강의를통해검증된저자의노하우와,실무에서바로활용가능한프로젝트실습을한데담았다.웹명함과개인브랜딩사이트부터,재무제표시각화,AI분석서비스,데이터베이스기반플랫폼까지.이책의내용을따라가다보면실무에곧바로연결되는다양한프로젝트를직접완성하며바이브코딩을자연스럽게내것으로만들수있다.

기획,설계,구현,배포까지앱제작전체프로세스를내것으로
이책의목표는단편적인기능구현이아니라,실제서비스개발의전체프로세스를경험하는것이다.아이디어를글로정리해커서에요청하고,AI가만들어준프로젝트를실행해본다.기획→설계→구현→배포로이어지는전체프로세스를여러개의프로젝트를만들며자연스럽게익힌다.여기에더해,n8n과MCP를활용해AI결과물을업무흐름으로연결하고확장하는방법까지다룬다.여러서비스와도구를연결해반복업무를자동화하고,AI활용범위를넓히는경험을제공하여이후어떤프로젝트에도적용할수있는기반을마련한다.이책과함께바로써먹을수있는나의첫바이브코딩프로젝트를가장쉽게시작해보자.