커서ⅹAI로 완성하는 나만의 웹 서비스

커서ⅹAI로 완성하는 나만의 웹 서비스

$24.47
Description
AI와 함께 만드는 나만의 웹 서비스
Cursor × Gemini API로 기획부터 배포까지 완성하는 실전 가이드
AI 덕분에 개발의 문턱은 낮아졌지만, 기본 개념 없이 모든 것을 맡길 수는 없습니다. 그러나 HTML·CSS·JavaScript 정도의 기초만 갖추면 Cursor와 Gemini API는 초보 개발자도 실제 웹 서비스를 빠르게 완성하도록 돕는 강력한 도구가 됩니다. 이 책은 기획, UI 설계, DB 구성, API 구현, 프론트엔드 개발, AI 기능 적용, 배포까지 하나의 서비스를 처음부터 끝까지 따라 만들며 AI와 협업하는 새로운 개발 방식을 체계적으로 익히도록 구성했습니다.

핵심은 ‘직접 만들어보는 경험’입니다. 단계별 실습과 풍부한 스크린샷을 통해 누구나 자신의 아이디어를 실제 서비스로 구현할 수 있으며, Gemini API를 사용해 Todo 생성, 텍스트 분석, 요약/분류 같은 기능도 손쉽게 적용할 수 있습니다. 막히면 AI에 묻고, 수정하고, 다시 만들어가는 과정에서 자연스럽게 실력이 쌓입니다. 이 책은 첫 웹 서비스를 완성해보고 싶은 입문자에게 실전 개발의 전체 흐름을 가장 빠르게 익힐 수 있는 확실한 길을 제시합니다.
저자

성구(강성규)

대기업과스타트업을거쳐1인기업으로독립한인디해커다.하고싶은일이많아나만의길을개척하고있으며,개발·기획·교육의경계를넘나들며다양한프로덕트와콘텐츠를만들고있다.‘프로덕트로그’,‘인디로그’,‘북로그’,‘뽀모닥’등여러웹/앱서비스를직접기획·개발·운영하며얻은실전경험을바탕으로,AI시대에누구나자신의아이디어를실현할수있음을증명하고있다.
웹사이트:https://seonggoos.com
도서관련커뮤니티:https://discord.gg/p8QPqWfb4T(디스코드)

목차

Part1AI개발준비와연습프로젝트

1장AI와함께개발하기
1.1AI시대,개발패러다임의변화
__1.1.1AI모델
__1.1.2개발특화도구
__1.1.3AI도구사용시주의사항
1.2실습프로젝트개요
__1.2.1학습목표
__1.2.2주요기능
__1.2.3사용기술
__1.2.4서비스작동구조
1.3실습프로젝트를위한기초지식빠르게훑기
__1.3.1웹을구성하는세가지기술
__1.3.2클라이언트와서버그리고프런트엔드와백엔드
__1.3.3API
__1.3.4JSON
__1.3.5웹브라우저
__1.3.6데이터베이스
__1.3.7기타용어

2장개발환경설정하기
2.1Node.js설치하기
__2.1.1Node.js란
__2.1.2Node.js설치
__2.1.3npm설치확인
2.2Git설치하기
__2.2.1Git이란
__2.2.2Git설치
__2.2.3Git기본설정

3장커서설치및기본사용법익히기
3.1커서란
__3.1.1AI와함께하는새로운개발방식
__3.1.2커서의핵심기능
3.2커서설치및기본설정하기
__3.2.1커서설치
__3.2.2기본설정
3.3커서기본사용법익히기
__3.3.1인터페이스살펴보기
__3.3.2AI와함께첫프로젝트실행하기
__3.3.3컨텍스트참조활용하기

4장프로젝트의핵심기술스택이해하기
4.1Next.js-웹애플리케이션의뼈대
__4.1.1Next.js의핵심기능
__4.1.2왜Next.js인가
4.2TailwindCSS-빠르고일관된스타일링
__4.2.1TailwindCSS의주요클래스
__4.2.2왜TailwindCSS인가
4.3Shadcn/ui-완성도높은UI컴포넌트
__4.3.1Shadcn/ui주요컴포넌트
__4.3.2왜Shadcn/ui인가
4.4Supabase-데이터저장과인증기능
__4.4.1Supabase핵심기능
__4.4.2왜Supabase인가
4.5AISDK-애플리케이션에AI기능연결
__4.5.1AISDK핵심기능
__4.5.2왜AISDK인가
__4.5.3GeminiAPI살펴보기

5장연습프로젝트:AI감성분석웹서비스만들기
5.1프로젝트개요
__5.1.1이프로젝트에서배우는내용
__5.1.2사용할기술스택
5.2프로젝트환경설정하기
__5.2.1프로젝트폴더생성하기
__5.2.2Next.js프로젝트생성하기
__5.2.3Shadcn/ui설정및컴포넌트추가하기
__5.2.4AISDK설치하기
__5.2.5프로젝트폴더구조이해하기
__5.2.6개발서버실행하고결과확인하기
5.3감성분석화면만들기
__5.3.1감성분석화면구성하기
__5.3.2화면구성결과확인하기
5.4감성분석기능구현하기
__5.4.1GeminiAPI연동하기
__5.4.2감성분석기능구현하기
__5.4.3감성분석기능확인하기

Part2실습프로젝트:AI할일관리웹서비스만들기

6장프로젝트시작하기:환경설정및규칙정의
6.1프로젝트개요
__6.1.1프로젝트정의와핵심기능
__6.1.2실제사용시나리오
__6.1.3프로젝트에서배우는내용
__6.1.4프로젝트진행계획
6.2프로젝트환경설정하기
__6.2.1프로젝트폴더생성하기
__6.2.2Next.js프로젝트생성하기
__6.2.3Shadcn/ui설정및컴포넌트추가하기
__6.2.4AISDK설치하기
__6.2.5프로젝트폴더구조살펴보기
__6.2.6개발서버실행하고결과확인하기
6.3프로젝트규칙설정하기
__6.3.1규칙의유형
__6.3.2프로젝트규칙의구조와작성방식
__6.3.3규칙생성하기

7장프로젝트기획하기:PRD작성
7.1PRD개요
__7.1.1PRD개념과필요성
__7.1.2프로젝트의PRD구성요소
7.2AI와함께PRD작성하기
__7.2.1PRD작성요청하기
__7.2.2결과검토하기
7.3PRD와커서연동하기
__7.3.1PRD저장하기
__7.3.2PRD참조하기

8장화면구성하기:디자인시스템과로그인/메인페이지
8.1디자인시스템이해와활용하기
__8.1.1브랜드컬러정의하기
__8.1.2할일관리컴포넌트생성하기
8.2로그인과회원가입화면구성하기
__8.2.1로그인화면구성하기
__8.2.2회원가입화면구성하기
8.3할일관리메인화면구성하기

9장백엔드구축하기:데이터베이스,인증,CRUD
9.1Supabase프로젝트생성
__9.1.1Supabase프로젝트생성하기
__9.1.2환경변수설정하기
__9.1.3프로젝트에Supabase연결하기
9.2데이터베이스테이블생성하기
__9.2.1SQL쿼리생성하기
__9.2.2SQL실행하기
9.3회원가입과로그인/로그아웃기능구현하기
__9.3.1회원가입기능구현하기
__9.3.2로그인/로그아웃기능구현하기
__9.3.3사용자인증상태관리기능구현하기
9.4할일관리기능구현하기
__9.4.1코드작성하기
__9.4.2기능확인하기
__9.4.3기능개선하기

10장AI기능구현하기:자연어처리및분석
10.1AI할일생성기능구현하기
__10.1.1자연어입력을구조화데이터로변환하기
__10.1.2시스템프롬프트개선하기
__10.1.3사용자입력검증하기
10.2AI요약및분석기능구현하기
__10.2.1AI분석기능구현하기
__10.2.2분석로직최적화하기
__10.2.3분석결과UI개선하기

11장서비스배포하기:실제서비스공개
11.1배포준비하기
__11.1.1환경변수점검하기
__11.1.2로컬빌드테스트하기
__11.1.3기능점검하기
__11.1.4메타태그설정하기
__11.1.5파비콘추가하기
11.2Github에코드업로드하기
__11.2.1원격저장소생성하기
__11.2.2원격저장소연결하기
__11.2.3원격저장소에코드업로드하기
11.3Vercel로자동배포하기
__11.3.1프로젝트생성하기
__11.3.2자동배포테스트하기

12장프로젝트마무리와이후학습
12.1전체과정되돌아보기
__12.1.1개발과정의변화
__12.1.2AI협업능력경험
__12.1.3완성된결과물
12.2이후학습방향
__12.2.1현재서비스개선하기
__12.2.2새로운프로젝트도전하기
__12.2.3기술스택확장하기
__12.2.4실무경험쌓기