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 학습 정리 및 연습문제