웹 개발 기초부터 AI 코딩 서비스인 커서 활용법까지!

AI 코딩을 시작하는 모두를 위한 가장 친절한 입문서

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 활용하기

 

찾아보기