도서 소개

AI가 코드를 생성하는 시대, 이제 복잡한 문법을 외우지 않아도 웹 개발을 시작할 수 있다. 《Do it! 커서로 시작하는 AI 코딩 입문》은 AI 코딩 서비스인 커서(Cursor)를 활용해 프론트엔드와 백엔드를 아우르는 웹 개발의 전 과정을 단계별 실습으로 안내한다.

HTML, CSS, 자바스크립트에서 사용하는 기초 개념부터 시작해 데이터베이스, API, 배포까지 웹 개발에 꼭 필요한 요소를 입문자도 이해할 수 있게 풀어냈고, 커서를 사용해 포트폴리오 웹사이트와 커피 주문 풀스택 앱을 직접 만들며 개발의 흐름을 체감할 수 있도록 구성했다. 단순히 코드를 생성하는 데 그치지 않고, AI와 협업하여 코딩하는 감각을 기르고 기초 개발 지식도 함께 키울 수 있다.

웹 분야 1위 저자인 고경희 선생님의 풍부한 설명과 'Do it! 실습'으로 누구나 따라 하기 쉽게 구성해서 웹 개발을 처음 시작하는 입문자는 물론, 프런트엔드나 백엔드 중 한쪽 기술만 다뤄 왔던 개발자도 AI 시대의 풀스택 개발자로 성장할 수 있는 든든한 첫걸음이 되어 줄 것이다.

  출판사 리뷰

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

웹 분야 1위 저자의 독자 맞춤형 설명으로 웹 개발의 기초를 이해하고,
든든한 개발 AI 파트너인 '커서'와 함께 웹 사이트를 만든다!
이제 누구나 AI를 활용해 개발을 손쉽게 시작할 수 있는 시대가 되었지만, AI가 작성해 주는 코드만으로는 완전한 앱을 만들기 어렵습니다. 앱을 제대로 완성하려면 기본적인 개발 지식과 체계적인 학습 과정이 반드시 필요합니다. 웹 개발의 뼈대를 이루는 HTML, CSS, 자바스크립트는 물론, 백엔드와 데이터베이스, 배포까지 실제 서비스할 때 알아야 할 필수 개념을 꼼꼼하게 설명합니다. 이렇게 기초 개념을 단단히 다진 뒤에는 든든한 AI 코딩 파트너인 '커서'와 함께 웹 사이트를 직접 만들어 보면서, 웹 개발의 전체 흐름을 자연스럽게 경험할 수 있습니다.

따라 하기 쉬운 단계별 실습과 프롬프트 예제로 AI와 함께 코딩하는 감각을 기른다!
말만 하면 코드를 작성해 준다는 바이브 코딩, 직접 해보니 내가 원하는 기능을 AI가 딱 알아차리지 못해 답답했던 경험이 있나요? 이 책은 그러한 시행착오를 줄이기 위해 누구나 따라 하기 쉬운 'Do it! 실습'과 구체적인 프롬프트 예제를 담았습니다. 실습 단계에 따라 프롬프트를 작성하다 보면 어떤 상황에서 어떤 프롬프트를 입력할지, 원하는 기능을 AI에게 어떻게 설명해야 할지 자연스럽게 익힐 수 있습니다. 또한 부록에서는 MCP를 활용해 노션과 연동하는 방법까지 다루어, 단순한 웹 사이트 제작에 그치지 않고 AI 활용 능력까지 높일 수 있습니다.

생성형 AI의 작동 원리를 이해하고 '커서'를 제대로 활용하는 법을 배운다!
일상 속에서 생성형 AI를 활용하는 사람은 많지만 작동 원리까지 이해하며 쓰는 경우는 드뭅니다. 하지만 AI가 응답을 만들어 내는 원리를 알면 훨씬 더 효과적으로 활용할 수 있습니다. 이 책은 생성형 AI가 응답을 만들어 내는 과정을 쉽고 간결하게 설명하고, 이를 바탕으로 원하는 결과를 빠르고 정확하게 얻을 수 있는 프롬프트 작성법을 체계적으로 알려 줍니다. 이어서 AI 코딩 서비스인 '커서'를 설치하고 설정하는 방법부터 기능별 활용법까지 단계적으로 안내합니다. 생성형 AI의 작동 원리를 이해하면 '커서'의 활용도가 더 높아집니다.

이런 분께 추천합니다!
o 개발 공부를 어떻게 시작해야 할지 고민인 입문자
o AI 코딩을 체험하고, 실무 활용 감각까지 기르고 싶은 분
o 생성형 AI를 활용해 나만의 웹 사이트를 직접 만들어 보고 싶은 예비 개발자
o 웹 개발의 전체 흐름을 빠르게 파악하고 싶은 분
o 기초부터 탄탄하게 쌓으며 AI를 활용해 풀스택 개발에 도전하고 싶은 개발자

입문자라면 5일, 개발자라면 이틀 만에 완성!
2가지 학습 계획표와 예제 파일을 제공합니다
이 책은 AI와 함께 개발의 첫걸음을 내딛고 커서 활용법까지 자연스럽게 익힐 수 있도록 2가지 학습 계획표를 제공합니다. 웹 개발 경험이 없는 입문자라면 '5일 학습 계획표'를, 커서를 빠르게 활용하고 싶은 개발자라면 '주말 학습 계획표'를 활용해 보세요. 또한 이 책의 실습에 필요한 예제 파일을 이지스퍼블리싱 홈페이지와 저자 깃허브에서 제공합니다. 이 자료를 활용하면 커피 주문 앱을 실습 결과에 가까운 모습으로 완성할 수 있습니다.
o 이지스퍼블리싱 홈페이지 | www.easyspub.co.kr → [자료실] → 도서명으로 검색
o 저자 깃허브 | github.com/funnycom/doit-cursor

'Do it! 스터디룸'에서 공부단을 신청해 보세요!
혼자 계획을 세우고 공부하다 보면 금방 지치기 마련입니다. 'Do it! 스터디룸'의 공부단에 접속해서 이 책 완독에 도전해 보세요. 함께 공부하는 사람들도 만나고, 공부하는 내용을 올려 공유하고 인증하면 책 선물도 드립니다. 또한 어려운 내용이 있다면 'Do it! 스터디룸' 게시판에 질문을 남겨 보세요. 전문가와 저자가 명쾌하게 해결해 드립니다.
o Do it! 스터디룸: cafe.naver.com/doitstudyroom

  작가 소개

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

  목차

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

찾아보기

  회원리뷰