바이브 코딩으로 배우는 풀스택 만들기

클라인 AI, 피그마, 스티치 등 최신 도구를 활용해
HTML부터 풀스택까지, 프로젝트 중심으로 웹 개발!

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

STEP 1. 기초부터 구조화
웹 개발의 기초 개념을 이해 및 HTML/CSS 중심의 정적 웹 페이지를 AI 도구와 함께 제작

STEP 2. 자바스크립트 & 인터랙션
정적인 웹 페이지에 자바스크립트로 동적인 기능을 추가하여 웹앱 구현

STEP 3. 풀스택 프로젝트 & 서비스 구현
프론트엔드와 백엔드를 통합하여 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 학습 정리 및 연습문제

이희찬 Lee, Heechan
현재 명지전문대학교 AI게임소프트웨어학과에서 인공지능, 가상현실, 게임 이론을 가르치고 있다. 성균관대학교 KDT AI 헬스케어 과정, 연세대학교 의과대학 Healthcare 해커톤 과정, 두산로보틱스 부트캠프 1·2기에서 파이썬, 이미지 프로세싱, 자율주행을 가르쳤다.

고용노동부 지원 멋쟁이사자에서 클라우드 서버 네트워크 기반 게임 개발, 심화 과정을
지도했다. 가천대학교 GRRC 인공지능연구센터에서 헬스케어 시스템 연구 활동을 했다. 연성대학교, 동서울대학교 게임콘텐츠과, 순천향대학교, 원광대학교에서 게임엔진 개발 방법론과 생성형 AI를 가르쳤으며, 다수의 공공기관(SBA/GBSA)에서 재직자 전문가 과정을 지도했다.

주요 연구 분야
교육을 위한 AI 튜터링 연구 및 모델 개발, 가상현실 공간에서의 휴먼 AI 연구, AI 기반 개인 맞춤형 헬스케어 시스템 연구