Gemini로 만드는 실시간 AI 챗봇 프로젝트

React, Gemini API, Firebase로 완성하는 실무형 AI 챗봇 프로젝트

이런 분들께 추천드려요

• Gemini API와 같은 AI 서비스를 프론트에서 활용하고 싶은 개발자

• React & TypeScript 실력을 실무형 프로젝트로 끌어올리고 싶은 분

• Firebase를 통해 인증 및 실시간 데이터베이스를 활용해보고 싶은 분

• 풀스택 프로젝트를 직접 개발하고 배포까지 해보고 싶은 분

이런 걸 배울 수 있어요

실시간 대화가 가능한 AI 챗봇을 직접 만들며

최신 프론트엔드 기술과 AI API의 실전 활용법을 익힙니다.

• Gemini API의 REST 방식과 SSE(서버 전송 이벤트) 방식 차이 이해 및 활용

• React 기반 컴포넌트 구조 설계 및 상태 관리 구현

• Firebase Authentication으로 안전한 사용자 인증 구현

• Firestore를 활용한 실시간 데이터 저장 및 조회

• Render를 통한 클라이언트-서버 통합 배포 전략

• 실무 환경에 가까운 AI 응답 스트리밍 처리 실습

아래처럼 강의를 더 쉽게 볼 수 있는 노션 핸드북도 함께 제공합니다:

만들게 되는 작품

Gemini API 기반 실시간 AI 챗봇 웹앱

• 초반에는 REST API 방식으로 챗봇의 기본 동작을 구성

• 이후 SSE(Server-Sent Events)를 적용하여 실시간 스트리밍 응답 구현

• 사용자 인증, 스레드 관리, 메시지 저장, 모달 UI 등

  챗봇 서비스의 모든 핵심 기능을 직접 개발하게 됩니다

예상 소요 시간

약 12시간 분량의 실습 중심 강의

(초보자도 따라올 수 있도록 단계별로 구성)

사용 기술 스택

• 프론트엔드: React 19, TypeScript, Zustand, Module CSS, Webpack, Babel

• 백엔드 연동: Gemini API (REST + SSE), Express

• 인증 및 데이터: Firebase Authentication, Firestore

• 배포: Render

강의 흐름

실제 챗봇 개발 로드맵 기반으로 구성된 4단계 커리큘럼

1. 프로젝트 환경 세팅

• TypeScript, Webpack, Babel, Express를 활용한 프로젝트 구조 설계

• 클라이언트/서버 연동 및 .env 환경변수 관리

2. Gemini 챗봇 구현

• REST API → SSE 방식 전환

• 상태 관리를 위한 Zustand 설계

• 메시지 흐름에 따른 로딩/에러 처리 UI 구현

3. 사용자 기능 추가

• Firebase Authentication으로 로그인/회원가입 구성

• Firestore 기반 채팅 스레드 및 메시지 저장/조회

• 모달, 토스트 등 사용자 편의 기능 구현

4. 서비스 배포

• Render 플랫폼을 활용한 배포 및 실서비스 구성

• 빌드 최적화 및 배포환경 설정

* 해당 강의는 Vrew로 편집한 영상입니다.

* 자료에 사용된 일부 이미지는 gamma.app에서 생성된 콘텐츠입니다.

수강 전 준비 사항

• Node.js 설치 및 GitHub 계정

• 기본적인 React & TypeScript 문법 이해

• Firebase 기본 사용법(회원가입/콘솔 접근 등)에 대한 간단한 이해

강사 한마디

“AI 기능이 적용된 웹서비스를 처음부터 끝까지 직접 구현해보며,

실무에서 바로 활용할 수 있는 프론트엔드 개발 역량을 키울 수 있도록 구성했습니다.

이 강의에서는 Gemini API와 React를 접목시켜,

프론트엔드 개발자가 AI 기능을 어떻게 활용할 수 있는지를 실습 위주로 익힙니다.”