Home

You Might Want to Compare These

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 응답 스트리밍 처리 실습

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

image.png


만들게 되는 작품

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 환경변수 관리

image.png

image.png

2. Gemini 챗봇 구현

  • REST API → SSE 방식 전환

  • 상태 관리를 위한 Zustand 설계

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

image.png

image.png

image.png

image.png

3. 사용자 기능 추가

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

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

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

image.png

image.png

image.png

image.png

4. 서비스 배포

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

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

image.png

image.png

image.png


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

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


수강 전 준비 사항

  • Node.js 설치 및 GitHub 계정

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

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


강사 한마디

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

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

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

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

Class Kit · Coaching Session


Class Curriculum1

Gemini로 만드는 실시간 AI 챗봇 프로젝트
Course started on August 27, 2025
Rookie Difficulty · Video 44 · Attached file 0
총 12 hours 33 minutes
Korean voice
Korean · English · Japanese Subtitles

Curriculum

0 Chapters

Creator

젠코딩

젠코딩

image.png


안녕하세요, 실전 프로젝트 중심의 프론트엔드 개발을 6년간 경험해 온 개발자 jen입니다. 스타트업부터 대기업까지 다양한 조직에서 실전 웹앱 프로젝트를 진행했고, 총 10개 이상의 실서비스를 기획부터 런칭까지 주도적으로 참여한 경험이 있습니다. 현재는 대기업 A사에서 대화형 AI 플랫폼 개발을 담당하며, 실시간 응답 스트리밍, 답변 중지 처리, AI 기반 문서 질의 시스템AI 모델의 복잡성과 UX 모두를 고려한 프론트엔드 설계 및 구현을 맡고 있습니다.

이전에는 대기업 B사에서 모빌리티 멤버십 앱의 웹앱 전환과 디자인 시스템 구축, 스타트업 C사에서는 핀테크 앱의 대출 비교 및 인앱 약정 시스템을 개발하며, Next.js 기반 아키텍처 설계, GraphQL BFF 구성, MSW 기반 테스트 환경 세팅, 성능 최적화 및 코드 품질 향상 등의 고도화 작업을 주도했습니다.

React, Next.js 14, TypeScript, Zustand, GraphQL, Firebase 등 최신 웹 기술에 익숙하며, 디자인 시스템의 초기 설계부터 Storybook 문서화, npm 배포까지 전 과정을 리드한 경험이 있습니다. 또한, 개발 지식 공유에도 힘쓰며, 오픈소스 라이브러리 제작, 사내 기술 문서화, 외부 강의 콘텐츠 제작 등을 활발히 진행하고 있습니다.


이 클래스에서는 현업에서 검증된 개발 기법을 직접 적용해 보며, 완성도 높은 AI 챗봇을 실시간 응답 처리 중심으로 구현하는 전 과정을 실습합니다. 단순 구현을 넘어, AI 서비스 UX 설계와 고도화된 기능 개발, 서비스 배포까지 실무에 꼭 필요한 내용을 담았습니다.


이력 사항

Others Also Viewed

Notes on Copyright Protection

  • All videos and materials included in the class are protected intellectual property under relevant laws.
  • You may face legal action if you copy, distribute, transmit, modify or edit the videos or materials included in the class without permission.
CLASS 101, LLC.
1201 North Market St. Suite 111, Wilmington, DE, 19801
support@101.inc