바이브 코딩으로 배우는 풀스택 만들기 (처음 시작하는 웹 개발)

이희찬

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

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

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

1장|바이브코딩으로시작하는웹개발
1.1프로그래밍이란?
1.2바이브코딩이란?
1.3VS코드설치및화면구성익히기
1.4학습정리및연습문제

2장|바이브코딩의시작
2.1VS코드확장프로그램
2.2HTML기초:태그와요소
2.3VS코드필수확장프로그램설치하기
2.4나의첫AI코딩파트너,클라인-지능형내비게이터
2.5제미나이:구글이만든차세대AI,새로운개발파트너
2.6"Hello,World!"웹페이지만들기
2.7학습정리및연습문제

3장|바이브코딩활용-웹페이지구조화및CSS기초
3.1HTML:웹페이지의뼈대
3.2CSS:웹페이지의디자인
3.3VS코드+클라인AI활용
3.4학습정리및연습문제

4장|피그마MCP활용-개성있는웹디자인
4.1UI/UX디자인과피그마
4.2VS코드MCP와피그마MCP의이해
4.3디자인템플릿생성AI서비스
4.4백엔드개발을위한필수도구:Node.js설치하기
4.5VS코드+클라인AI+피그마활용
4.6학습정리및연습문제

5장|디자인AI적용및정적페이지프로젝트
5.1디자인AI의진화,스티치
5.2스티치→피그마→VS코드워크플로의이해
5.3개인프로필및관심사소개페이지만들기
5.4학습정리및연습문제

6장|웹페이지인터랙션기초(자바스크립트와DOM조작)
6.1자바스크립트:웹페이지에생명을불어넣는언어
6.2DOM:자바스크립트의눈으로바라본HTML문서
6.3VS코드+클라인AI활용:프롬프트중심접근프롬프트요청
6.4.학습정리및연습문제

7장|데이터베이스관리시스템(DBMS)및MariaDB
7.1데이터베이스
7.2‘나만의일기장’데이터베이스와테이블만들기
7.3학습정리및연습문제

8장|데이터베이스연동을준비하는인터랙티브웹페이지제작
8.1나만의할일목록(TodoList)웹앱프론트엔드&DB설계
8.21단계:데이터베이스설계및생성하기(MariaDB&SQLDDL)
8.32단계:UI/UX디자인하기(스티치+피그마+AI이미지)
8.43단계:프론트엔드구현하기(바이브코딩/HTML/CSS&피그마MCP)
코드변환하기
8.54단계:인터랙션구현하기(자바스크립트&DOM조작)
8.6발표및평가

9장|Node.js의이해와자바스크립트복습/심화
9.1Node.js:브라우저밖으로나온자바스크립트
9.2Node.js의심장:비동기논블로킹I/O
9.31단계:Node.js개발환경설정하기(프롬프트요청)
9.4학습정리및연습문제

10장|웹계산기제작
10.1통합요구사항정의:PRD란?
10.2웹계산기제작-1단계:구조와디자인만들기(PRD1단계전달)
10.32단계:기능및로직구현하기(PRD2단계전달)
10.4학습정리및연습문제

11장|TodoList백엔드API서버구축
11.1API란무엇인가?RESTfulAPI의이해
11.2Node.js와MariaDB연동:mysql2라이브러리
11.3TodoList백엔드API서버구축-1단계:프로젝트환경및DB설정하기(PRD1단계전달)
11.42단계:API엔드포인트로직구현하기(PRD2단계전달)
11.5학습정리및연습문제

12장|TodoList프론트엔드구축및API연동
12.1클라이언트와서버의만남:API통신의전체흐름
12.2TodoList프론트엔드구축및연동-1단계:프론트엔드구조및디자인하기
12.32단계:프론트엔드기능및API연동하기
12.4학습정리및연습문제

13장|나만의일기장앱제작(풀스택)
13.1개발환경의진화:제미나이CLI
13.2다중뷰SPA
13.3단계별PRD와제미나이CLI를활용한일기장앱제작하기

13.41단계:DB설계및백엔드API구축하기
13.52단계:프론트엔드UI구조및디자인하기
13.63단계:프론트엔드로직및API연동하기
13.7학습정리및연습문제

14장|오목게임제작
14.1왜오목게임인가?-로직과상태관리의집약체
14.2배열의이해:1차원배열과2차원배열
14.31단계:오목게임판구조및디자인하기
14.42단계:게임로직및인터랙션구현하기
14.5학습정리및연습문제

15장|미니SNS제작
15.1코드작성자를넘어소프트웨어설계자로
15.2사용자인증&인가
15.3데이터베이스관계설계(1:N,N:M)
15.4실시간상호작용의구현:폴링
15.5준비단계:프로젝트준비및사전설정하기
15.61단계:DB설계및백엔드API구축하기
15.72단계:프론트엔드UI/UX구축하기
15.83단계:프론트엔드로직구현및완성하기
15.9학습정리및연습문제

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

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

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

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

STEP3.풀스택프로젝트&서비스구현
프론트엔드와백엔드를통합하여AI로완전한웹애플리케이션제작