Do it! 커서로 시작하는 AI 코딩 입문 : 웹 앱 제작, 데이터베이스 연동, 프롬프트 작성법, MCP 연결, 바이브 코딩, 서비스 배포, 깃허브 활용

고경희 저자 지음

이지스퍼블리싱 2025년 10월 17일 출간 국내도서 : 2025년 09월 26일 출간

작품소개

책소개

AI가 코드를 생성하는 시대, 이제 복잡한 문법을 외우지 않아도 웹 개발을 시작할 수 있다. 《Do it! 커서로 시작하는 AI 코딩 입문》은 AI 코딩 서비스인 커서(Cursor)를 활용해 프론트엔드와 백엔드를 아우르는 웹 개발의 전 과정을 단계별 실습으로 안내한다.
HTML, CSS, 자바스크립트에서 사용하는 기초 개념부터 시작해 데이터베이스, API, 배포까지 웹 개발에 꼭 필요한 요소를 입문자도 이해할 수 있게 풀어냈고, 커서를 사용해 포트폴리오 웹사이트와 커피 주문 풀스택 앱을 직접 만들며 개발의 흐름을 체감할 수 있도록 구성했다. 단순히 코드를 생성하는 데 그치지 않고, AI와 협업하여 코딩하는 감각을 기르고 기초 개발 지식도 함께 키울 수 있다.
웹 분야 1위 저자인 고경희 선생님의 풍부한 설명과 'Do it! 실습'으로 누구나 따라 하기 쉽게 구성해서 웹 개발을 처음 시작하는 입문자는 물론, 프런트엔드나 백엔드 중 한쪽 기술만 다뤄 왔던 개발자도 AI 시대의 풀스택 개발자로 성장할 수 있는 든든한 첫걸음이 되어 줄 것이다.

목차

첫째마당 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 활용하기

찾아보기

인물정보

저자(글) 고경희 저자

홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부했다. 인터넷이 막 대중화되던 1990년대 후반부터 웹 기술을 쉽게 배우고 가르치는 일에 관심을 갖고, 지금까지 70여 권이 넘는 책을 집필했다. HTML, CSS, 자바스크립트, 깃·깃허브 등 웹의 기본기를 누구나 이해할 수 있도록 풀어내며 많은 독자들이 웹 개발의 첫걸음을 떼는 데 도움을 주었고, 특히 《Do it! HTML+CSS+자바스크립트 웹 표준의 정석》은 수많은 입문자들이 웹 개발을 시작할 때 가장 먼저 찾는 책으로 자리 잡았다. ‘기본기를 놓치지 않는 학습이 가장 중요하다’는 신념으로 독자들이 단단한 기초 위에 실력을 쌓을 수 있도록 돕고 있다. 생성형 AI가 코딩의 판도를 바꾸고 있는 지금도 개발자의 기본 소양을 기르는 일에 변함없이 최선을 다하고 있다.대표 저서•《Do it! 5일 만에 끝내는 깃 & 깃허브 입문》(이지스퍼블리싱, 2024)•《Do it! HTML + CSS + 자바스크립트 웹 표준의 정석》(이지스퍼블리싱, 2024)•《Do it! Node. js 프로그래밍 입문》(이지스퍼블리싱, 2023)•《Do it! 모던 자바스크립트 프로그래밍의 정석》(이지스퍼블리싱, 2022)•《Do it! 자바스크립트 입문》(이지스퍼블리싱, 2021)•《Do it! HTML5+CSS3 웹 표준의 정석》(이지스퍼블리싱, 2019)