AI와 함께 만드는 나만의 웹 서비스

Cursor × Gemini API로 기획부터 배포까지 완성하는 실전 가이드

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

 

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

[목 차]
  

Part 1 AI 개발 준비와 연습 프로젝트

 

1장 AI와 함께 개발하기

1.1 AI 시대, 개발 패러다임의 변화

__1.1.1 AI 모델

__1.1.2 개발 특화 도구

__1.1.3 AI 도구 사용 시 주의사항

1.2 실습 프로젝트 개요

__1.2.1 학습 목표

__1.2.2 주요 기능

__1.2.3 사용 기술

__1.2.4 서비스 작동 구조

1.3 실습 프로젝트를 위한 기초 지식 빠르게 훑기

__1.3.1 웹을 구성하는 세 가지 기술

__1.3.2 클라이언트와 서버 그리고 프런트엔드와 백엔드

__1.3.3 API

__1.3.4 JSON

__1.3.5 웹 브라우저

__1.3.6 데이터베이스

__1.3.7 기타 용어

 

2장 개발 환경 설정하기

2.1 Node.js 설치하기

__2.1.1 Node.js란

__2.1.2 Node.js 설치

__2.1.3 npm 설치 확인

2.2 Git 설치하기

__2.2.1 Git이란

__2.2.2 Git 설치

__2.2.3 Git 기본 설정

 

3장 커서 설치 및 기본 사용법 익히기

3.1 커서란

__3.1.1 AI와 함께하는 새로운 개발 방식

__3.1.2 커서의 핵심 기능

3.2 커서 설치 및 기본 설정하기

__3.2.1 커서 설치

__3.2.2 기본 설정

3.3 커서 기본 사용법 익히기

__3.3.1 인터페이스 살펴보기

__3.3.2 AI와 함께 첫 프로젝트 실행하기

__3.3.3 컨텍스트 참조 활용하기

 

4장 프로젝트의 핵심 기술 스택 이해하기

4.1 Next.js - 웹 애플리케이션의 뼈대

__4.1.1 Next.js의 핵심 기능

__4.1.2 왜 Next.js인가

4.2 Tailwind CSS - 빠르고 일관된 스타일링

__4.2.1 Tailwind CSS의 주요 클래스

__4.2.2 왜 Tailwind CSS인가

4.3 Shadcn/ui - 완성도 높은 UI 컴포넌트

__4.3.1 Shadcn/ui 주요 컴포넌트

__4.3.2 왜 Shadcn/ui인가

4.4 Supabase - 데이터 저장과 인증 기능

__4.4.1 Supabase 핵심 기능

__4.4.2 왜 Supabase인가

4.5 AI SDK - 애플리케이션에 AI 기능 연결

__4.5.1 AI SDK 핵심 기능

__4.5.2 왜 AI SDK인가

__4.5.3 Gemini API 살펴보기

 

5장 연습 프로젝트: AI 감성 분석 웹 서비스 만들기

5.1 프로젝트 개요

__5.1.1 이 프로젝트에서 배우는 내용

__5.1.2 사용할 기술 스택

5.2 프로젝트 환경 설정하기

__5.2.1 프로젝트 폴더 생성하기

__5.2.2 Next.js 프로젝트 생성하기

__5.2.3 Shadcn/ui 설정 및 컴포넌트 추가하기

__5.2.4 AI SDK 설치하기

__5.2.5 프로젝트 폴더 구조 이해하기

__5.2.6 개발 서버 실행하고 결과 확인하기

5.3 감성 분석 화면 만들기

__5.3.1 감성 분석 화면 구성하기

__5.3.2 화면 구성 결과 확인하기

5.4 감성 분석 기능 구현하기

__5.4.1 Gemini API 연동하기

__5.4.2 감성 분석 기능 구현하기

__5.4.3 감성 분석 기능 확인하기

 

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

 

6장 프로젝트 시작하기: 환경 설정 및 규칙 정의

6.1 프로젝트 개요

__6.1.1 프로젝트 정의와 핵심 기능

__6.1.2 실제 사용 시나리오

__6.1.3 프로젝트에서 배우는 내용

__6.1.4 프로젝트 진행 계획

6.2 프로젝트 환경 설정하기

__6.2.1 프로젝트 폴더 생성하기

__6.2.2 Next.js 프로젝트 생성하기

__6.2.3 Shadcn/ui 설정 및 컴포넌트 추가하기

__6.2.4 AI SDK 설치하기

__6.2.5 프로젝트 폴더 구조 살펴보기

__6.2.6 개발 서버 실행하고 결과 확인하기

6.3 프로젝트 규칙 설정하기

__6.3.1 규칙의 유형

__6.3.2 프로젝트 규칙의 구조와 작성 방식

__6.3.3 규칙 생성하기

 

7장 프로젝트 기획하기: PRD 작성

7.1 PRD 개요

__7.1.1 PRD 개념과 필요성

__7.1.2 프로젝트의 PRD 구성 요소

7.2 AI와 함께 PRD 작성하기

__7.2.1 PRD 작성 요청하기

__7.2.2 결과 검토하기

7.3 PRD와 커서 연동하기

__7.3.1 PRD 저장하기

__7.3.2 PRD 참조하기

 

8장 화면 구성하기: 디자인 시스템과 로그인/메인 페이지

8.1 디자인 시스템 이해와 활용하기

__8.1.1 브랜드 컬러 정의하기

__8.1.2 할 일 관리 컴포넌트 생성하기

8.2 로그인과 회원가입 화면 구성하기

__8.2.1 로그인 화면 구성하기

__8.2.2 회원가입 화면 구성하기

8.3 할 일 관리 메인 화면 구성하기

 

9장 백엔드 구축하기: 데이터베이스, 인증, CRUD

9.1 Supabase 프로젝트 생성

__9.1.1 Supabase 프로젝트 생성하기

__9.1.2 환경 변수 설정하기

__9.1.3 프로젝트에 Supabase 연결하기

9.2 데이터베이스 테이블 생성하기

__9.2.1 SQL 쿼리 생성하기

__9.2.2 SQL 실행하기

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.1 AI 할 일 생성 기능 구현하기

__10.1.1 자연어 입력을 구조화 데이터로 변환하기

__10.1.2 시스템 프롬프트 개선하기

__10.1.3 사용자 입력 검증하기

10.2 AI 요약 및 분석 기능 구현하기

__10.2.1 AI 분석 기능 구현하기

__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.2 Github에 코드 업로드하기

__11.2.1 원격 저장소 생성하기

__11.2.2 원격 저장소 연결하기

__11.2.3 원격 저장소에 코드 업로드하기

11.3 Vercel로 자동 배포하기

__11.3.1 프로젝트 생성하기

__11.3.2 자동 배포 테스트하기

 

12장 프로젝트 마무리와 이후 학습

12.1 전체 과정 되돌아보기

__12.1.1 개발 과정의 변화

__12.1.2 AI 협업 능력 경험

__12.1.3 완성된 결과물

12.2 이후 학습 방향

__12.2.1 현재 서비스 개선하기

__12.2.2 새로운 프로젝트 도전하기

__12.2.3 기술 스택 확장하기

__12.2.4 실무 경험 쌓기

김혜진

이 책은 웹 개발 초보자에게는 AI의 도움으로 전체 과정을 쉽게 배울 수 있게 해주고, 경험자에게는 AI로 업무 자동화를 어디까지 구현할 수 있는지 체험할 기회를 제공합니다. 특히 웹 개발을 조금이라도 경험해본 분이라면 실무에서 터득하게 되는 전체 흐름을 책으로 간단히 체험할 수 있어 업무 경험을 쌓는 데 큰 도움이 될 것입니다. 개발 스킬 성장에 실질적인 도움을 주는 책으로 적극 추천합니다.

 

김지학

AI 융합 연구를 하는 문과 출신 연구자로서 개발은 늘 두렵고 먼 이야기였지만, 이 책을 통해 웹 서비스를 직접 만들어 GitHub에 올릴 수 있다는 확신을 얻었습니다. 친절한 선배가 옆에서 알려주듯 세세한 과정까지 구체적으로 설명하며, ASK/AGENT 모드 비교, 감성 분석 웹 서비스 구축 같은 실무 사례를 풍부하게 담고 있습니다. 이 책은 AI 시대에 비전공자라는 배경이 더 이상 장벽이 되지 않음을 보여주는 희망의 가이드입니다. 개발이 두렵지만 도전하고 싶은 모든 분, 특히 연구자와 실무자에게 강력히 추천합니다.

 

박상길

이 책은 커서를 활용해 웹 서비스를 처음부터 끝까지 완성하는 전 과정을 체계적으로 다룹니다. 프론트엔드, 백엔드, 데이터베이스를 통합적으로 다루며, PRD 작성과 기획 노하우를 통해 제품을 설계하는 관점을 익힐 수 있습니다. GitHub와 Vercel을 통한 배포까지 실전 구현 과정을 세밀히 안내해 실무 역량을 높일 수 있습니다. 마지막에 이후 학습 방향과 실무로 나아가기 위한 로드맵을 제공하는 점이 특히 돋보입니다. 기획, 설계, 개발, 배포까지 전 과정을 하나의 맥락에서 배우려는 독자에게 강력히 추천합니다.

 

박상덕

이 책은 커서를 전혀 모르는 초보자도 따라 하며 웹 개발의 전체 흐름을 직접 체험할 수 있도록 구성되었습니다. AI 기초 개념부터 도구 사용법, 프로젝트 시작까지 단계가 자연스럽게 이어져 부담 없이 시작할 수 있습니다. 실습 중심의 구성 덕분에 따라 하다 보면 나만의 웹 서비스를 만들 수 있다는 자신감이 생깁니다. 커서를 활용해 웹 서비스를 직접 만들어보고 싶은 초보자에게 적극 추천합니다.

 

여병훈

AI 도구를 처음 접하는 개발자도 부담 없이 따라 할 수 있도록 구성되었습니다. 단순히 코드를 따라 치는 것이 아니라 프롬프트 활용부터 요구사항 분석, 프론트엔드, 백엔드, DB 구성, Vercel 배포까지 전체 개발 프로세스를 경험할 수 있습니다. 커서의 프롬프트 활용법과 오류 수정 방법을 확실하게 학습할 수 있으며, 환경 설정과 AI 기능 활용 모두 익힐 수 있습니다. 웹 개발자가 AI 도구를 프로젝트에 접목해보고 싶을 때 좋은 시작점이 될 것입니다.

 

허헌

AI가 개발의 주체로 빠르게 자리 잡는 시대에 이 책은 ‘AI와 협업하는 개발자’로의 전환점을 제시합니다. 단순히 코드 작성을 보조하는 도구가 아니라, 문제를 함께 정의하고 해결하는 동료로서 AI를 활용하는 법을 다룹니다. 실전 예제와 실습을 통해 AI와의 협업 방식을 체계적으로 익힐 수 있습니다. AI 시대 개발자로 성장하려는 분에게 실질적인 가이드가 되어줄 것입니다.