첫째마당 AI 코딩 시작하기

1장 생성형 AI를 이해하는 첫걸음
_1-1 일상을 바꾼 생성형 AI의 등장
__AI는 어떻게 발전해 왔을까?
__생성형 AI의 등장
__AI 코딩에 활용하는 생성형 AI 서비스
_1-2 생성형 AI는 답을 어떻게 만들어 낼까?
__AI가 똑똑하게 대답하는 이유 — 프롬프트와 LLM
__맥락을 이해하는 기술 — 트랜스포머
__AI가 기억하는 문맥의 용량 — 토큰과 컨텍스트 윈도우
__AI 모델, 엔진, 에이전트 구분하기
__LLM을 활용하는 방법
_1-3 더 나은 답을 만드는 프롬프트 엔지니어링
__프롬프트 엔지니어링은 왜 필요할까?
__예제 기반 프롬프트 기법 — n-샷 프롬프트
__원하는 답을 이끌어 내는 프롬프트 설계 기법

2장 AI 코딩의 이해
_2-1 AI 코딩이란 무엇일까?
__인공지능과 함께 개발하기 — AI 코딩
__코딩의 진화 — 기계 중심에서 사람 중심으로
__AI 코딩으로 무엇을 만들 수 있을까?
__AI 코딩 서비스의 주요 기능
__바이브 코딩이란?
_2-2 미래의 AI 코딩과 개발자
__AI 코딩이 가져올 주요 변화
__AI 코딩 시대의 개발자 역량
__AI 시대에 개발자로 성장하기
__AI 코딩 시대의 윤리와 책임
_2-3 어떤 AI 코딩 서비스를 선택해야 할까?
__대화형 AI 서비스
__웹 기반 앱 빌더
__플러그인형 서비스
__통합 개발 환경(IDE)형 서비스
__터미널 기반 AI 에이전트
_2-4 AI 코딩에서 유용한 프롬프트
__새로운 개념을 공부할 때
__코드를 작성할 때
__코드를 수정할 때
__문제를 해결할 때

둘째마당 커서로 웹 사이트 만들기

3장 커서 살펴보기
_3-1 커서는 어떤 서비스일까?
__똑똑한 개발 파트너 — 커서
__커서의 주요 특징
_3-2 커서 시작하기
__커서 가입하기
__커서 설치하기
__커서의 화면 구성
__AI 패널의 화면 구성
_3-3 커서의 개발 환경 준비하기
__프로젝트 폴더 만들기
__커서에 라이브 서버 확장 설치하기
_3-4 커서의 AI 코딩 기능 사용하기
__인라인 프롬프트 사용하기
__AI 패널로 할 일 목록 앱 만들기

4장 웹 사이트 제작을 위한 기본 개념 다지기
_4-1 웹 페이지의 구조를 만드는 HTML
__HTML의 기본 형식
__태그의 속성
_4-2 웹 페이지를 보기 좋게 꾸미는 CSS
__CSS의 기본 형식
__자주 사용하는 선택자
__CSS 속성
__CSS 코드를 작성하는 위치
_4-3 웹 페이지에 동작을 부여하는 자바스크립트
__자바스크립트의 기본 형식
__자주 사용하는 용어 살펴보기
__외부 스크립트 파일
_4-4 코드를 추적하고 관리하는 깃과 깃허브
__깃과 깃허브는 무엇일까?
__깃의 주요 개념
__깃허브 계정 만들기
__깃 설치하기

5장 나만의 포트폴리오 웹 사이트 만들기
_5-1 웹 사이트의 기본 구조 만들기
__AI에게 웹 사이트 제작을 요청하려면
__프로젝트 폴더 추가하고 깃 저장소 만들기
__기본 코드 작성하기
__첫 번째 커밋하기
_5-2 세부 사항 수정하기
__웹 사이트의 구조 살펴보기
__프롬프트 취소하기
__이미지 변경하기
_5-3 웹 사이트 공개하기
__내가 만든 웹 사이트는 어떻게 공개할 수 있을까?
__깃허브 페이지
__깃허브에 저장소 만들기
__커서와 깃허브 연동하기
__깃허브 페이지로 배포하기

셋째마당 커서로 풀스택 앱 만들기

6장 웹 개발 기초 다지기
_6-1 웹의 구조와 동작 이해하기
__웹 사이트의 종류
__웹을 구성하는 요소
__웹의 동작 과정
_6-2 웹에서는 정보를 어떻게 주고받을까?
__클라이언트와 서버
__요청과 응답
__HTTP/HTTPS 프로토콜
__HTTP 요청 메서드와 엔드포인트
__IP 주소, DNS, URL
_6-3 웹 개발의 4단계 살펴보기
__1단계: 앱 기획
__2단계: 프런트엔드 개발
__3단계: 백엔드 개발
__4단계: 앱 배포
_6-4 웹 앱을 개발할 때 사용할 기술
__프런트엔드에 사용하는 기술
__백엔드에 사용하는 기술

7장 커피 주문 앱 개발하기
_7-1 앱 기획하기 — PRD
__앱 구상하기
__사용할 기술 스택 정하기
__PRD 작성하기 — 앱 개요
__깃 저장소 만들기
_7-2 앱 화면 만들기 — 프런트엔드
__구현할 기능 정의하기
__와이어프레임 그려 보기
__프런트엔드 개발을 위한 PRD 작성하기
__프런트엔드 개발 환경 만들기
__커서에서 UI를 만들 때 주의할 점
__"주문하기" 화면 개발하기
__.gitignore 파일
__프로젝트 폴더의 변경 사항 커밋하기
__"관리자" 화면 만들기
__프런트엔드 테스트 및 개선
_7-3 주문 처리하기 — 데이터베이스와 API
__데이터 모델 설계하기
__프롬프트로 API를 만들 때 주의할 점
__주문 처리를 위한 PRD 작성 및 개발 환경 만들기
__데이터베이스 설치하기
__데이터베이스 연결하기
__프런트엔드와 백엔드 연동하기
__메뉴 이미지 지정하기
_7-4 앱 배포하기
__배포 플랫폼 선택하기
__Render 시작하기
__깃허브에 업로드하기
__PostgreSQL 데이터베이스 만들고 연결하기
__백엔드 서비스 배포하기
__프런트엔드 배포 준비하기
__프런트엔드 배포하기

부록 A MCP 서버 활용하기
_A-1 AI와 외부 서비스를 연결하는 MCP
_A-2 커서에서 노션 MCP 활용하기

찾아보기