길벗·이지톡

길벗스쿨 시나공 IT 길벗 동영상강좌

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