Do it! 커서로 시작하는 AI 코딩 입문

고경희

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

대표저서
•《Doit!5일만에끝내는깃&깃허브입문》(이지스퍼블리싱,2024)
•《Doit!HTML+CSS+자바스크립트웹표준의정석》(이지스퍼블리싱,2024)
•《Doit!Node.js프로그래밍입문》(이지스퍼블리싱,2023)
•《Doit!모던자바스크립트프로그래밍의정석》(이지스퍼블리싱,2022)
•《Doit!자바스크립트입문》(이지스퍼블리싱,2021)
•《Doit!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-1AI코딩이란무엇일까?
__인공지능과함께개발하기—AI코딩
__코딩의진화—기계중심에서사람중심으로
__AI코딩으로무엇을만들수있을까?
__AI코딩서비스의주요기능
__바이브코딩이란?
_2-2미래의AI코딩과개발자
__AI코딩이가져올주요변화
__AI코딩시대의개발자역량
__AI시대에개발자로성장하기
__AI코딩시대의윤리와책임
_2-3어떤AI코딩서비스를선택해야할까?
__대화형AI서비스
__웹기반앱빌더
__플러그인형서비스
__통합개발환경(IDE)형서비스
__터미널기반AI에이전트
_2-4AI코딩에서유용한프롬프트
__새로운개념을공부할때
__코드를작성할때
__코드를수정할때
__문제를해결할때

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

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데이터베이스만들고연결하기
__백엔드서비스배포하기
__프런트엔드배포준비하기
__프런트엔드배포하기

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

찾아보기

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

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

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

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

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

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