뒤처지기 싫은 일잘러를 위한! 제로부터 시작하는 바이브 코딩 입문,

웹 명함 제작부터 사내 스터디 관리 플랫폼까지 커서, n8n, MCP로 완성하는 올인원 실습서

바이브 코딩은 AI를 단순한 자동화 도구가 아닌 함께 사고하고 실행하는 협업 파트너로 활용하는 새로운 업무 방식으로, 이제는 누구나 아이디어만 입력하면 원하는 서비스를 만들 수 있다. 이 책은 프로그래밍 경험과 IT 지식이 없지만, 나만의 웹 서비스를 만들고 싶은 독자들을 대상으로 한다. 본격적인 실습을 진행하기 전에 웹/앱, 프런트엔드/백엔드의 개념 등 필수적인 IT 지식을 설명하고, 커서 개발 환경 역시 상세하게 설명한다. 또한, 웹 명함 만들기부터 재무제표 시각화, 유튜브 댓글 분석, 네이버 뉴스 분석, AI 퀴즈 플랫폼, 사내 스터디 관리 플랫폼 등 다양한 난이도와 스펙트럼의 실습 프로젝트를 가득 담았다. 더불어 n8n과 MCP를 활용하여 좀 더 완성도 있는 프로젝트를 만들어 보는 경험까지 할 수 있도록 구성했다. 최신 커서 2.0 버전을 반영하고, Plan 모드까지 본격적으로 사용하는 이 책으로 바이브 코딩의 처음부터 끝까지 차근차근 완전히 정복해 보자!

[목 차]
  

1부 바이브 코딩 이해

 

1장 바이브 코딩이란

1.1 바이브 코딩 이해

1.2 바이브 코딩 연습

1.3 바이브 코딩 도구 둘러보기

 

2장 웹/앱 서비스는 어떻게 작동할까?

2.1 웹/앱 서비스의 구조 이해

2.2 프런트엔드 핵심 키워드

2.3 백엔드와 데이터베이스

 

2부 바이브 코딩 실습 준비

 

3장 개발 환경 준비

3.1 사전 준비: 필요한 계정

3.2 파이썬 설치

3.3 Node.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.5 Plan 모드 사용 방법

 

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

 

7장 개인 브랜딩 사이트 만들기

7.1 Plan 모드로 프로젝트 계획 세우기

7.2 개인 브랜딩 사이트 만들기

7.3 커피챗 기능 추가

7.4 깃허브 페이지로 배포

 

특별코너 저자와 편집자가 마주한 11가지 에러 상황

01 커서 채팅창에 편하게 물어보세요

02 [환경] 노드, 깃허브 CLI 명령어를 실행할 수 없는 에러

03 [환경] 명령 프롬프트 / 파워셸 권한 문제

04 [환경] 설치 과정에서 멈춘 것처럼 보인다면?

05 요청한 대로 수정이 잘되지 않을 경우

06 [웹 브라우저] 커서가 알려 준 URL로 접속했는데 웹 사이트로 연결할 수 없다면?

07 [웹 브라우저] 빈 화면이 나온다면?

08 [웹 브라우저] 화면에 에러가 나온다면?

09 [웹 브라우저] 화면은 나오나 원하는 대로 작동하지 않는다면?

10 [LLM] 제미나이 관련 에러 메시지가 표시된다면?

11 Connection failed 메시지를 해결하는 방법

 

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

 

8장 재무제표 시각화 및 AI 분석

8.1 전자공시시스템 오픈다트 키 발급받기

8.2 생성형 AI의 API 키 발급받기

8.3 프로젝트 시작

8.4 프로젝트 계획 세우기

8.5 재무제표 시각화 개발 시작

8.6 깃허브 업로드 및 버셀로 배포

 

9장 유튜브 댓글 AI 분석 서비스

9.1 구글 콘솔에서 API 키 발급받기

9.2 OpenAI API 키 발급받기

9.3 프로젝트 계획 세우기

9.4 유튜브 댓글 분석 서비스 개발

 

10장 네이버 뉴스 검색 및 AI 분석 서비스

10.1 네이버와 OpenAI API 키 발급받기

10.2 프로젝트 계획 세우기

10.3 실시간 뉴스 분석 서비스 개발

7부 데이터베이스를 활용한 서비스 제작

 

11장 AI 퀴즈 서비스

11.1 파이어베이스 설정

11.2 프로젝트 계획 세우기

11.3 AI 퀴즈 플랫폼 서비스 개발

11.4 파이어베이스로 배포

 

12장 모임 플랫폼 서비스

12.1 파이어베이스 로그인 설정

12.2 프로젝트 계획 세우기

12.3 모임 플랫폼 개발

12.4 파이어베이스로 배포

 

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

 

13장 구글 시트로 만드는 AI 챗봇

13.1 n8n 회원가입

13.2 OpenAI/제미나이 API 키 발급받기

13.3 n8n으로 챗봇 워크플로 만들기

13.4 프로젝트 계획 세우기

13.5 챗봇 서비스 개발

13.6 메모리 기능 추가

13.7 구글 시트 도구 추가

 

14장 MCP를 활용한 웹 브라우저 자동화 및 데이터 크롤링

14.1 MCP란

14.2 Playwright MCP 설치

14.3 MCP 활용 1: 내가 만든 사이트 점검

14.4 MCP 활용 2: 웹 사이트 데이터 크롤링

14.5 마치며

 

부록

찾아보기

[본 문]
  

“생성형 AI를 어떻게 활용해야 하나요?”

요즘 필자가 가장 많이 받는 질문입니다. 불과 1~2년 전만 해도 파이썬, 데이터 분석, 머신러닝, 딥러닝 관련 요청이 대부분이었습니다. 이제는 업종과 직무를 막론하고 같은 질문으로 모입니다. 생성형 AI(LLM)를 우리 업무에, 우리 서비스에 어떻게 적용할 수 있느냐 입니다. 답은 여러 가지입니다. 프롬프트 작성법을 익힐 수도 있고, 업무에 챗봇을 도입할 수도 있습니다. 그중 필자가 주목한 점은 AI와 함께 직접 업무에 필요한 도구를 만들어 보는 것입니다. 흔히 ‘바이브 코딩’이라고 합니다.

 

어디까지 만들 수 있나요?

바이브 코딩을 가르칠 때마다 받는 질문입니다. 답부터 말하자면, 개발 지식이 있다면 한계는 없습니다. 하지만 이 책은 비개발자용입니다. 생성형 AI가 없던 시절, 비개발자 대부분은 만들고 싶은 것이 있더라도 코드 한 줄조차 작성하기가 막막해서 금방 포기했습니다. 바이브 코딩은 이 벽을 낮추었습니다. 이 책의 목표는 프로토타입, 즉 MVP 수준입니다. 아이디어를 눈으로 확인하고, 직접 사용해 보고, 다른 사람에게 보여 줄 수 있는 단계입니다. 비개발자가 스스로 만들어서 업무에 바로 활용할 수 있는 수준을 다룹니다.

 

이 책에서 만드는 것들

이 책은 실제로 작동하는 도구를 직접 만들어 보는 것을 추구합니다. 재무제표 시각화 및 AI 분석 도구, 유튜브 댓글 AI 분석 서비스, 네이버 뉴스 검색 및 AI 분석 서비스를 만듭니다. 파이어베이스로 데이터베이스를 구축하여 AI 퀴즈와 모임 플랫폼까지 직접 만들어 봅니다. 또 구글 시트를 기반으로 AI 챗봇을 만들고, n8n과 커서를 활용하여 업무 자동화 도구를 구축합니다. MCP를 활용한 웹 브라우저 자동화와 데이터 크롤링까지 다룹니다. 완성한 결과물은 깃허브에 올리고, 버셀이나 파이어베이스로 실제 인터넷에 배포합니다. 외부 API를 사용하려면 여러 설정이 필요해서 입문자에게는 쉽지 않습니다. 하지만 한 단계씩 따라 하다 보면 ‘내가 이걸 만들었구나’ 하는 경험을 하게 됩니다.

 

시작하며

업무를 자동화하고 싶은 직장인, 아이디어를 프로토타입으로 확인하고 싶은 기획자, 나만의 서비스를 만들어 보고 싶었던 사람이라면 이 책과 함께 시작할 수 있습니다. 에러가 나도 괜찮습니다. 커서에 물어보고 다시 시도하면 됩니다. 그리고 그 순간, “내가 이걸 만들었다.”라는 뿌듯함을 느낄 수 있을 것입니다. 이제 시작해 볼까요?

 

(지은이의 말 중에서)

박조은 (오늘코드, 마이크로소프트 파이썬 MVP)

책의 전개 방식은 이론 위주보다 ‘무엇을 만들고 있는가’에 초점을 맞춥니다. 화면은 어떤 역할을 하는지, 기능은 어떤 순서로 연결되는지, 외부 API는 왜 필요한지를 구체적인 맥락 속에서 설명하여 단순한 실습을 넘어 전체 구조를 파악할 수 있도록 돕습니다. 화면 구성과 기능 구현을 함께 다루면서도 용어를 풀어서 설명해 주어 개발 경험이 없더라도 내용을 따라갈 수 있습니다.

학습 과정에서 눈에 보이는 결과물을 빠르게 확인할 수 있다는 점도 장점입니다. 버튼이나 화면 하나라도 직접 작동하는 모습을 보며 진행할 수 있어, 무엇을 만들고 있는지 확인하기 쉽고 학습 방향을 잃지 않게 됩니다. 개인 소개 페이지나 간단한 서비스 화면에서 시작하여 데이터베이스, 외부 서비스 연동으로 확장해 나가는 흐름은 서비스를 구현하는 개발 과정을 자연스럽게 이해하는 데 도움이 됩니다.

 

이경록 (유튜브 크리에이터 ‘테디노트’ / 랭체인 엠버서더)

바이브 코딩은 더 이상 일시적인 유행이 아닙니다. 이제는 개발의 새로운 방법론으로 업계에서 정식으로 인정받고 있습니다. 하지만 중요한 점은 단순히 AI에 코드를 맡기는 것이 아니라, 올바른 방식으로 바이브 코딩을 활용하여 완성도 높은 프로덕트를 만들어 내는 방법을 터득하는 것입니다. 그렇지 않으면 반쪽짜리 결과물에 그치기 쉽습니다.

이 책은 바로 그 부분을 해결해 줍니다. 웹 명함, 개인 브랜딩 사이트, 재무제표 시각화, 유튜브 댓글 분석, 모임 플랫폼까지 다양한 실전 프로젝트를 만들면서 기획부터 배포까지 엔드-투-엔드로 서비스를 완성하는 전 과정을 경험할 수 있습니다. 직접 만든 서비스가 실제로 작동하는 순간의 성취감은 다음 도전을 하는 강력한 동력이 됩니다.

 

챗대리 (유튜브 크리에이터 ‘챗대리의 AI연구소’)

AI 시대에 개발의 문턱은 낮아졌고 바이브 코딩에 관심 있는 사람도 많아졌지만, 정작 내 업무에 어떻게 적용할지는 막연하게 느끼는 경우가 많습니다. 이 책은 재무제표 시각화, 뉴스 분석, 파이어베이스 설정 등 방법을 저자의 실전 경험이 응축된 사례로 그 방법을 구체적으로 제시합니다. AI 코딩을 내 업무 무기로 만들고 싶은 모든 직장인과 기획자에게 이 책을 강력 추천합니다.

 

김영욱 (Hello AI 대표)

코딩은 이제 문법 암기가 아닌 AI와 대화하는 ‘바이브 코딩’의 시대로 접어들었습니다. 이 책은 환경 설정부터 서비스 배포까지 저자 특유의 세심하고 꼼꼼한 가이드로 독자를 낙오 없이 안내합니다. 특히 독자가 겪을 시행착오를 미리 앞질러 정리한 ‘11가지 에러 상황’ 코너는 독자를 끝까지 책임지려는 저자의 성실한 배려가 돋보이는 대목입니다. 유튜브 분석부터 재무제표 시각화까지 실무 중심의 프로젝트를 따라가다 보면 어느새 상상은 현실이 됩니다. 김태헌 작가가 정성껏 닦아 놓은 이 길을 따라, 여러분도 AI 시대의 당당한 ‘개발자’로 거듭나시기를 강력히 기원합니다.

 

김정욱 (브레인크루 이사)

이제 코딩은 컴퓨터 언어를 정복해야 하는 고통스러운 과정이 아니라, AI와 즐겁게 대화하며 내 아이디어를 실현하는 ‘티키타카’의 과정이 되었습니다. 이 책은 복잡한 이론에 매몰되는 대신 ‘느낌(vibe)’만으로도 충분히 가치 있는 서비스를 만들 수 있음을 실전적으로 증명합니다. 단순한 기술서를 넘어, 누구나 창작자가 될 수 있는 새로운 시대의 지침서가 되어 줄 것입니다. 비전공자에게는 코딩에 대한 막연한 두려움을 자신감으로 바꾸어 주고, 개발자에게는 AI와 협업하는 압도적 생산성을 선사할 이 책을 강력히 추천합니다.

 

류지영 (전자신문인터넷 국장)

“생성형 AI의 발전으로 이제 가장 쉬운 프로그래밍 언어는 파이썬도 자바도 아닌 바로 ‘한국어’가 되었습니다.” 이 책을 펼치자마자 제 눈을 사로잡은 문장입니다. ‘한국어’로 인공지능과 티키타카를 하면서 코딩하는 과정이 마치 눈앞에서 저자와 대화하듯 자연스럽고 친절하게 펼쳐집니다. 여기에서 친절은 기술적인 부분을 사용자 눈높이에 맞추어서 전달하는 친절이기도 하고, 그

냥 인간적인 친절이기도 합니다. 책 곳곳에서 저자 특유의 친절함이 고스란히 드러나고 느껴져 좋았습니다. 독자와 책을 홀로 버려두지 않고 끝까지 동행하고자 하는 마음이 느껴지는 책이기에 모두에게 추천합니다.

 

박상우 (kt cloud 인재육성TF, 매니저)

이 책은 바이브 코딩의 기초 개념부터 단계별 실무 적용까지 체계적으로 다루고 있어 입문자부터 숙련자까지 자신의 수준에 맞추어 필요한 부분을 즉시 찾아볼 수 있다는 점이 큰 강점입니다. 특히 상세한 입출력 값과 화면 예시, ‘저자 노트’에 담긴 실무 꿀팁은 바이브 코딩 이해도를 높여 줍니다. 현재 HRD 업무에 바이브 코딩을 접목하고 있는 저에게 이 책은 단순한 가이드를 넘어, 제 기획 의도를 가장 정확하게 결과물로 바꾸어 주는 든든한 ‘바이브 에이전트’가 될 것 같습니다. AI와 호흡하며 실무의 격을 높이고 싶은 모든 사람에게 이 책을 기꺼이 추천합니다.

 

노태규 (DB하이텍 인사 팀, 책임)

코딩을 전혀 모르는 문과생인 저에게 이 책은 혁명이었습니다. 복잡한 코딩 문법 대신 ‘우리말’로 AI와 소통하며 서비스를 만드는 ‘바이브 코딩’의 세계를 쉽고 친절하게 안내합니다. 마치 티키타카를 하듯 대화하며 나만의 앱을 완성하는 과정은 정말 즐거웠습니다. 특히 서비스의 핵심구조를 레스토랑에 비유하여 알기 쉽고 깊이 있게 설명한 대목은 비전공자 눈높이에 딱 맞았습니다. 아이디어만 있다면 누구나 개발자가 될 수 있다는 확신을 주는 최고의 가이드북입니다.

 

한상아 (H그룹 인재개발원, 책임매니저)

AI의 시대, 각 기업에서는 탁월한 인재를 선발하려고 “당신만을 위한 AI 에이전트는 무엇이 있습니까?”라는 질문을 필수적으로 하지 않을까요? 이처럼 AI는 개개인의 업무 효율성과 효과성을 N배 이상 높여 줄 수 있는 필수템이 되었습니다. AI에 잘 묻고 현명한 답을 구하는 것을 넘어 본인만의 시스템을 효과적으로 구현하려면 바이브 코딩은 꼭 경험해야만 하는 이 시대의 연금술이 아닐까 합니다. 바이브 코딩의 A부터 Z까지 친절히 설명된 이 책으로 각자의 탁월한 AI 에이전트를 만들어 보시기를 추천합니다.

 

박승 (두산밥캣 Global HRD 팀, 수석)

프로그래밍 언어는 개발자의 고유 영역이라고 생각할 때가 있었습니다. 저 같은 문과 출신 비개발 직장인에게는 더욱 그러했습니다. 그러나 이제 직장인으로서 AI에 ‘잘 묻는 것’이 하나의 역량이 된 시대에서 이 책은 AI와 대화를 시작하는 길라잡이로 손색이 없습니다. 바이브 코딩의 개념부터 실무에 접목할 수 있는 구체적인 기능까지 AI와 대화할 수 있는 ‘기초 발화’가 필요하다면 이 책은 더없이 소중할 것입니다.

 

김은혜 (파이썬의 벽에 가로막혀 코딩을 포기했던 저를 포함한 모든 비IT 직무자들에게 다시 시작할 용기를 주는 책)

파이썬의 벽에 가로막혀 코딩을 포기했던 저를 포함한 모든 비IT 직무자들에게 다시 시작할 용기를 주는 책입니다. 생성형 AI 시대에 다시는 뒤처지고 싶지 않은 모든 기업 실무자에게 교육수강 전 필수로 권장하고 싶습니다.