피그마, 스티치, MariaDB, Node.js까지 한 권으로 끝내는 웹 프로젝트 풀스텍 구현을 위한 바이브코딩 웹 개발 프로그래밍이 어렵다고만 생각했던 적이 있는가? 디자인 감각이 부족해 웹 페이지 만들기가 막막했는가? 컴퓨터 관련 전공자가 아니라서 코딩은 나와 먼 이야기라고 생각했는가? 이 책은 바로 그런 생각에 도전하기 위해 집필되었다. 《바이브 코딩으로 배우는 풀스택 만들기》는 쉬운 예제부터 시작해 계산기, 투두리스트, 일기장, 게임 등 구체적인 미니 프로젝트를 완성하고, 이를 바탕으로 점진적으로 더 복잡한 프로젝트를 해결해 나가는 과정을 통해, 프로그래밍에 대한 자신감을 얻고 나아가 자신만의 아이디어를 현실로 만들어내는 즐거움을 느낄 것이다. 그리고 각 프로젝트에서는 UI 설계, CSS 스타일링, 자바스크립트 로직 구현을 종합적으로 적용하는 경험을 제공한다. 《바이브 코딩으로 배우는 풀스택 만들기》는 ‘바이브 코딩 입문’이라는 주제로 시작되지만, 궁극적으로는 ‘Agentic AI 코딩 여정’에 든든한 동반자가 되어, 디지털 자동화 시대에 필요한 새로운 역량을 기르는 데 실질적인 도움이 될 것이다.

저자 : 이희찬 Lee, Heechan 현재 명지전문대학교 AI게임소프트웨어학과에서 인공지능, 가상현실, 게임 이론을 가르치고 있다. 성균관대학교 KDT AI 헬스케어 과정, 연세대학교 의과대학 Healthcare 해커톤 과정, 두산로보틱스 부트캠프 1·2기에서 파이썬, 이미지 프로세싱, 자율주행을 가르쳤다. 고용노동부 지원 멋쟁이사자에서 클라우드 서버 네트워크 기반 게임 개발, 심화 과정을 지도했다. 가천대학교 GRRC 인공지능연구센터에서 헬스케어 시스템 연구 활동을 했다. 연성대학교, 동서울대학교 게임콘텐츠과, 순천향대학교, 원광대학교에서 게임엔진 개발 방법론과 생성형 AI를 가르쳤으며, 다수의 공공기관(SBA/GBSA)에서 재직자 전문가 과정을 지도했다. 주요 연구 분야 교육을 위한 AI 튜터링 연구 및 모델 개발, 가상현실 공간에서의 휴먼 AI 연구, AI 기반 개인 맞춤형 헬스케어 시스템 연구

1장 | 바이브 코딩으로 시작하는 웹 개발 1.1 프로그래밍이란? 1.2 바이브 코딩이란? 1.3 VS 코드 설치 및 화면 구성 익히기 1.4 학습 정리 및 연습문제 2장 | 바이브 코딩의 시작 2.1 VS 코드 확장 프로그램 2.2 HTML 기초: 태그와 요소 2.3 VS 코드 필수 확장 프로그램 설치하기 2.4 나의 첫 AI 코딩 파트너, 클라인 - 지능형 내비게이터 2.5 제미나이: 구글이 만든 차세대 AI, 새로운 개발 파트너 2.6 "Hello, World!" 웹 페이지 만들기 2.7 학습 정리 및 연습문제 3장 | 바이브 코딩 활용 - 웹 페이지 구조화 및 CSS 기초 3.1 HTML: 웹 페이지의 뼈대 3.2 CSS: 웹 페이지의 디자인 3.3 VS 코드 + 클라인 AI 활용 3.4 학습 정리 및 연습문제 4장 | 피그마 MCP 활용 - 개성 있는 웹 디자인 4.1 UI/UX 디자인과 피그마 4.2 VS 코드 MCP와 피그마 MCP의 이해 4.3 디자인 템플릿 생성 AI 서비스 4.4 백엔드 개발을 위한 필수 도구: Node.js 설치하기 4.5 VS 코드 + 클라인 AI + 피그마 활용 4.6 학습 정리 및 연습문제 5장 | 디자인 AI 적용 및 정적 페이지 프로젝트 5.1 디자인 AI의 진화, 스티치 5.2 스티치 → 피그마 → VS 코드 워크플로의 이해 5.3 개인 프로필 및 관심사 소개 페이지 만들기 5.4 학습 정리 및 연습문제 6장 | 웹 페이지 인터랙션 기초(자바스크립트와 DOM 조작) 6.1 자바스크립트: 웹 페이지에 생명을 불어넣는 언어 6.2 DOM: 자바스크립트의 눈으로 바라본 HTML 문서 6.3 VS 코드 + 클라인 AI 활용: 프롬프트 중심 접근 프롬프트 요청 6.4. 학습 정리 및 연습문제 7장 | 데이터베이스 관리 시스템(DBMS) 및 MariaDB 7.1 데이터베이스 7.2 ‘나만의 일기장’ 데이터베이스와 테이블 만들기 7.3 학습 정리 및 연습문제 8장 | 데이터베이스 연동을 준비하는 인터랙티브 웹 페이지 제작 8.1 나만의 할 일 목록(Todo List) 웹 앱 프론트엔드 & DB 설계 8.2 1단계: 데이터베이스 설계 및 생성하기(MariaDB & SQL DDL) 8.3 2단계: UI/UX 디자인하기(스티치 + 피그마 + AI 이미지) 8.4 3단계: 프론트엔드 구현하기(바이브 코딩/HTML/CSS & 피그마 MCP) 코드 변환하기 8.5 4단계: 인터랙션 구현하기(자바스크립트 & DOM 조작) 8.6 발표 및 평가 9장 | Node.js의 이해와 자바스크립트 복습/심화 9.1 Node.js: 브라우저 밖으로 나온 자바스크립트 9.2 Node.js의 심장: 비동기 논블로킹 I/O 9.3 1단계: Node.js 개발 환경 설정하기(프롬프트 요청) 9.4 학습 정리 및 연습문제 10장 | 웹 계산기 제작 10.1 통합 요구 사항 정의: PRD란? 10.2 웹 계산기 제작 - 1단계: 구조와 디자인 만들기(PRD 1단계 전달) 10.3 2단계: 기능 및 로직 구현하기(PRD 2단계 전달) 10.4 학습 정리 및 연습문제 11장 | Todo List 백엔드 API 서버 구축 11.1 API란 무엇인가? RESTful API의 이해 11.2 Node.js와 MariaDB 연동: mysql2 라이브러리 11.3 Todo List 백엔드 API 서버 구축 - 1단계: 프로젝트 환경 및 DB 설정하기(PRD 1단계 전달) 11.4 2단계: API 엔드포인트 로직 구현하기(PRD 2단계 전달) 11.5 학습 정리 및 연습문제 12장 | Todo List 프론트엔드 구축 및 API 연동 12.1 클라이언트와 서버의 만남: API 통신의 전체 흐름 12.2 Todo List 프론트엔드 구축 및 연동 - 1단계: 프론트엔드 구조 및 디자인하기 12.3 2단계: 프론트엔드 기능 및 API 연동하기 12.4 학습 정리 및 연습문제 13장 | 나만의 일기장 앱 제작(풀스택) 13.1 개발 환경의 진화: 제미나이 CLI 13.2 다중 뷰 SPA 13.3 단계별 PRD와 제미나이 CLI를 활용한 일기장 앱 제작하기 13.4 1단계: DB 설계 및 백엔드 API 구축하기 13.5 2단계: 프론트엔드 UI 구조 및 디자인하기 13.6 3단계: 프론트엔드 로직 및 API 연동하기 13.7 학습 정리 및 연습문제 14장 | 오목 게임 제작 14.1 왜 오목 게임인가? - 로직과 상태 관리의 집약체 14.2 배열의 이해: 1차원 배열과 2차원 배열 14.3 1단계: 오목 게임판 구조 및 디자인하기 14.4 2단계: 게임 로직 및 인터랙션 구현하기 14.5 학습 정리 및 연습문제 15장 | 미니 SNS 제작 15.1 코드 작성자를 넘어 소프트웨어 설계자로 15.2 사용자 인증 & 인가 15.3 데이터베이스 관계 설계(1:N, N:M) 15.4 실시간 상호 작용의 구현: 폴링 15.5 준비 단계: 프로젝트 준비 및 사전 설정하기 15.6 1단계: DB 설계 및 백엔드 API 구축하기 15.7 2단계: 프론트엔드 UI/UX 구축하기 15.8 3단계: 프론트엔드 로직 구현 및 완성하기 15.9 학습 정리 및 연습문제

클라인 AI, 피그마, 스티치 등 최신 도구를 활용해 HTML부터 풀스택까지, 프로젝트 중심으로 웹 개발! 웹 개발의 기초부터 프론트엔드·백엔드 통합 프로젝트까지, 최신 AI 도구와 함께 실습 중심으로 배우는 신개념 웹 개발 입문서입니다. 클라인 AI, VS 코드, 피그마, 스티치 등 다양한 도구를 활용하여 HTML, CSS, JS부터 데이터베이스와 API 서버 구축, 나만의 풀스택 앱 제작까지 전 과정을 단계적으로 익힐 수 있습니다. 초보자 도 따라 할 수 있도록 친절하고 체계적으로 구성된 이 책은 개발이 처음이어도 AI 의 도움을 받아 자신만의 웹 서비스를 완성할 수 있도록 도와드릴 것입니다. STEP 1. 기초부터 구조화 웹 개발의 기초 개념을 이해 및 HTML/CSS 중심의 정적 웹 페이지를 AI 도구와 함께 제작 STEP 2. 자바스크립트 & 인터랙션 정적인 웹 페이지에 자바스크립트로 동적인 기능을 추가하여 웹앱 구현 STEP 3. 풀스택 프로젝트 & 서비스 구현 프론트엔드와 백엔드를 통합하여 AI로 완전한 웹 애플리케이션 제작