피그마, 스티치, MariaDB, Node.js까지 한 권으로 끝내는 웹 프로젝트

풀스텍 구현을 위한 바이브코딩 웹 개발

 

프로그래밍이 어렵다고만 생각했던 적이 있는가?

디자인 감각이 부족해 웹 페이지 만들기가 막막했는가?

컴퓨터 관련 전공자가 아니라서 코딩은 나와 먼 이야기라고 생각했는가?

 

이 책은 바로 그런 생각에 도전하기 위해 집필되었다.

 

《바이브 코딩으로 배우는 풀스택 만들기》는 쉬운 예제부터 시작해 계산기, 투두리스트, 일기장, 게임 등 구체적인 미니 프로젝트를 완성하고, 이를 바탕으로 점진적으로 더 복잡한 프로젝트를 해결해 나가는 과정을 통해, 프로그래밍에 대한 자신감을 얻고 나아가 자신만의 아이디어를 현실로 만들어내는 즐거움을 느낄 것이다.

 

그리고 각 프로젝트에서는 UI 설계, CSS 스타일링, 자바스크립트 로직 구현을 종합적으로 적용하는 경험을 제공한다.

 

《바이브 코딩으로 배우는 풀스택 만들기》는 ‘바이브 코딩 입문’이라는 주제로 시작되지만, 궁극적으로는 ‘Agentic 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 학습 정리 및 연습문제