홈앤서비스 SK BROADBAND

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 실무 경험 쌓기