📚 Today I Learned 24회차 - Gemini AI 채팅봇 만들기 🤖

오늘은 Gemini AI를 활용한 나만의 채팅봇 서비스를 만들어봤습니다! 🤖 HTTP 요청과 REST API를 이용한 AI 통신, Isar NoSQL 데이터베이스를 활용한 채팅 기록 관리, 그리고 StreamBuilder를 사용한 실시간 UI 업데이트까지 실전 프로젝트를 통해 배워보았어요!

🎯 학습 목표

• Gemini API를 사용한 AI 채팅 메시지 송수신 구현하기
• Isar NoSQL 데이터베이스로 채팅 기록 저장 및 조회하기
• StreamBuilder를 활용한 실시간 UI 업데이트 구현하기
• HTTP 요청과 REST API 개념 이해하고 실습하기
• ListView의 자동 스크롤 애니메이션 제어 방법 익히기

📊 프로젝트 개요

💡 구현 기능

기능	설명	사용 기술
AI 채팅	Gemini API를 통한 실시간 대화	REST API, HTTP 요청
데이터 저장	채팅 기록을 로컬에 영구 보관	Isar NoSQL Database
실시간 UI	메시지 도착 시 자동 화면 갱신	StreamBuilder
자동 스크롤	새 메시지 수신 시 자동 스크롤	ScrollController

🏗️ 프로젝트 아키텍처

사용자 입력 (TextField)
      │
      ▼
채팅 메시지 전송 (HTTP POST)
      │
      ▼
Gemini API 응답 (Stream)
      │
      ├─▶ 실시간 UI 업데이트 (StreamBuilder)
      │
      ▼
Isar DB 저장
      │
      ▼
채팅 기록 조회 및 표시 (ListView)

📚 주요 내용

⭐ HTTP 요청의 이해

HTTP(HyperText Transfer Protocol)는 클라이언트와 서버 간 데이터를 주고받기 위한 통신 규약입니다.

🔍 HTTP URL 구조 분석

http://www.domain.com:1234/path/to/resource?a=b&x=y

구성 요소	예시	설명
프로토콜	http://	통신 방식 (http 또는 https)
호스트	www.domain.com	요청하는 서버의 도메인 주소
포트	:1234	서버 내 특정 포트 번호 - HTTP: 기본 80 - HTTPS: 기본 443
경로	/path/to/resource	서버 내 리소스 위치 (API 엔드포인트)
쿼리	?a=b&x=y	추가 전달 정보 - ?로 시작 - &로 구분 - key=value 형식

📋 HTTP 헤더 (Header)

헤더는 HTTP 요청/응답에 대한 메타데이터를 담는 영역입니다.

// 헤더 예시
headers: {
  'Content-Type': 'application/json',       // 데이터 형식
  'Authorization': 'Bearer $token',         // 인증 토큰
  'User-Agent': 'Flutter/3.0',              // 클라이언트 정보
  'Content-Length': '1234',                 // 데이터 크기
}

💡 핵심: 헤더는 데이터 형식, 인증 정보, 클라이언트 정보 등을 전달하는 데 사용됩니다!

🌐 HTTP API 방식의 종류

방식	설명	특징
REST API	자원 중심의 표준 HTTP 방식	간단하고 범용적, 가장 널리 사용됨
GraphQL	쿼리 언어 기반 API	필요한 데이터만 선택적으로 요청 가능
gRPC	구글의 고성능 RPC 프레임워크	빠르고 효율적이지만 복잡함

⚡ REST API

REST(Representational State Transfer) API는 HTTP를 효율적으로 사용하기 위한 아키텍처 스타일입니다.

🎯 REST API의 4가지 핵심 원칙

원칙	설명	예시
균일한 인터페이스	일관된 URL 구조와 HTTP 메서드 사용	GET /users/1, POST /users
무상태(Stateless)	각 요청은 독립적이며 서버는 상태를 저장하지 않음	매 요청마다 인증 토큰 전송
계층화 시스템	클라이언트-서버 간 중간 계층 허용	로드밸런서, 캐시 서버 등
캐시 가능	응답 데이터를 캐싱하여 성능 향상	Cache-Control 헤더 활용

📌 HTTP 메서드와 REST API

메서드	용도	설명
GET	조회	데이터를 가져올 때 사용 (Read)
POST	생성	새로운 데이터를 생성할 때 (Create)
PUT	전체 수정	기존 데이터를 완전히 교체 (Update)
PATCH	부분 수정	데이터의 일부만 수정 (Update)
DELETE	삭제	데이터를 삭제할 때 (Delete)

🔧 Flutter에서 Dio 패키지 사용하기

Dio는 Flutter에서 가장 많이 사용되는 HTTP 클라이언트 라이브러리입니다.

// dio 패키지 import
import 'package:dio/dio.dart';

void main() async {
  final dio = Dio();

  // GET 요청 - 데이터 조회
  final getResp = await dio.get('https://api.example.com/users');

  // POST 요청 - 데이터 생성
  final postResp = await dio.post(
    'https://api.example.com/users',
    data: {'name': 'John', 'age': 30},
  );

  // PUT 요청 - 데이터 전체 수정
  final putResp = await dio.put(
    'https://api.example.com/users/1',
    data: {'name': 'John Updated', 'age': 31},
  );

  // DELETE 요청 - 데이터 삭제
  final deleteResp = await dio.delete('https://api.example.com/users/1');
}

🤖 Gemini API 요청 예시

// Gemini API 호출 예시
final String apiKey = 'YOUR_API_KEY';
final String baseUrl = 'https://generativelanguage.googleapis.com/v1beta';

final response = await dio.post(
  '$baseUrl/models/gemini-1.5-flash:generateContent?key=$apiKey',
  data: {
    'contents': [
      {
        'parts': [
          {'text': '안녕하세요! Flutter에 대해 설명해주세요.'}
        ]
      }
    ]
  },
);

항목	값
요청 URL	https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent
Query	key=$API_KEY
Method	POST
Content-Type	application/json

💾 Isar 데이터베이스

Isar는 Flutter에 최적화된 초고속 NoSQL 데이터베이스입니다.

📊 SQL vs NoSQL 비교

구분	SQL	NoSQL
구조	엄격한 스키마 (테이블, 컬럼)	유연한 구조 (컬렉션, 문서)
장점	데이터 무결성, 관계 관리	빠른 속도, 유연성
단점	복잡한 설정, 속도 제한	무결성 관리 필요
주요 용도	서버 데이터베이스	모바일 로컬 DB, 캐시

💡 핵심: 서버는 무결성이 중요하여 SQL을 선호하고, 모바일 앱은 성능과 사용성이 중요하여 NoSQL을 많이 사용합니다!

🏗️ Isar 컬렉션 정의하기

Isar에서는 데이터를 컬렉션(Collection) 단위로 관리합니다.

import 'package:isar/isar.dart';

// @collection 어노테이션으로 컬렉션 정의
@collection
class MessageModel {
  // Id 타입은 Isar에서 제공하는 고유 식별자
  Id id = Isar.autoIncrement;  // 자동 증가 ID

  // 필드 정의
  bool isMine;          // 내가 보낸 메시지인지 여부
  String message;       // 메시지 내용
  int? point;           // 포인트 (선택적)
  DateTime date;        // 메시지 전송 시간

  // 생성자
  MessageModel({
    this.point,
    required this.isMine,
    required this.message,
    required this.date,
  });
}

⚙️ Build Runner 실행

Build Runner를 실행하여 Isar가 사용할 보조 파일을 생성합니다.

# 패키지 설치
flutter pub add isar isar_flutter_libs
flutter pub add dev:isar_generator
flutter pub add dev:build_runner

# Build Runner 실행
dart run build_runner build

# watch 모드로 실행 (파일 변경 시 자동 재생성)
dart run build_runner watch

실행 후 message_model.g.dart 파일이 생성되며, 이 파일에는 Isar가 사용할 스키마와 메서드가 정의되어 있습니다.

🔧 Isar 초기화하기

import 'package:path_provider/path_provider.dart';
import 'package:isar/isar.dart';

// Isar 인스턴스 초기화
Future<Isar> initIsar() async {
  // 앱 문서 디렉토리 가져오기
  final dir = await getApplicationDocumentsDirectory();

  // Isar 데이터베이스 열기
  final isar = await Isar.open(
    [MessageModelSchema],  // 사용할 컬렉션 스키마
    directory: dir.path,   // 저장 경로
  );

  return isar;
}

💻 실습 및 구현

🏗️ 프로젝트 구조

lib/
├── main.dart                  # 앱 진입점
├── models/
│   └── message_model.dart     # 메시지 데이터 모델
├── screens/
│   └── home_screen.dart       # 채팅 화면
├── widgets/
│   ├── logo.dart              # 로고 위젯
│   ├── message.dart           # 메시지 위젯
│   ├── date_divider.dart      # 날짜 구분선
│   ├── chat_text_field.dart   # 입력 필드
│   └── point_notification.dart # 포인트 알림
└── services/
    └── gemini_service.dart    # Gemini API 서비스

📦 1. 의존성 패키지 설치

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  dio: ^5.4.0                  # HTTP 클라이언트
  isar: ^3.1.0                 # NoSQL 데이터베이스
  isar_flutter_libs: ^3.1.0    # Isar Flutter 라이브러리
  path_provider: ^2.1.1        # 파일 경로 제공
  get_it: ^7.6.4               # 의존성 주입

dev_dependencies:
  isar_generator: ^3.1.0       # Isar 코드 생성
  build_runner: ^2.4.6         # 빌드 도구

🔧 2. Isar 데이터베이스 세팅

GetIt을 사용한 의존성 주입

import 'package:get_it/get_it.dart';
import 'package:isar/isar.dart';
import 'package:path_provider/path_provider.dart';

// GetIt 싱글톤 인스턴스
final getIt = GetIt.instance;

// Isar 초기화 및 등록
Future<void> setupIsar() async {
  // 앱 문서 디렉토리 가져오기
  final dir = await getApplicationDocumentsDirectory();

  // Isar 인스턴스 생성
  final isar = await Isar.open(
    [MessageModelSchema],  // 사용할 스키마
    directory: dir.path,
  );

  // GetIt에 등록하여 어디서든 사용 가능하게 함
  getIt.registerSingleton<Isar>(isar);
}

// main.dart에서 초기화
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await setupIsar();  // Isar 초기화
  runApp(MyApp());
}

📱 3. StreamBuilder로 실시간 UI 구현

StreamBuilder는 Stream 데이터를 실시간으로 감지하여 UI를 자동으로 업데이트합니다.

import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gemini 채팅봇')),
      body: Column(
        children: [
          // 메시지 리스트 (StreamBuilder 사용)
          Expanded(
            child: StreamBuilder<List<MessageModel>>(
              // Isar의 watch()로 데이터 변경 감지
              stream: GetIt.I<Isar>()
                  .messageModels
                  .where()
                  .watch(fireImmediately: true),  // 즉시 실행
              builder: (context, snapshot) {
                // 로딩 중일 때
                if (!snapshot.hasData) {
                  return Center(child: CircularProgressIndicator());
                }

                // 메시지 데이터
                final messages = snapshot.data ?? [];

                // 메시지가 없을 때
                if (messages.isEmpty) {
                  return Center(child: Text('메시지가 없습니다'));
                }

                // 메시지 리스트 렌더링
                return ListView.builder(
                  controller: scrollController,
                  itemCount: messages.length,
                  itemBuilder: (context, index) {
                    final message = messages[index];
                    return MessageWidget(message: message);
                  },
                );
              },
            ),
          ),
          // 입력 필드
          ChatTextField(
            onSendMessage: (text) async {
              await sendMessage(text);
              scrollToBottom();  // 메시지 전송 후 스크롤
            },
          ),
        ],
      ),
    );
  }

  // 메시지 전송 함수
  Future<void> sendMessage(String text) async {
    final isar = GetIt.I<Isar>();

    // 내 메시지 저장
    await isar.writeTxn(() async {
      await isar.messageModels.put(MessageModel(
        isMine: true,
        message: text,
        date: DateTime.now(),
      ));
    });

    // Gemini API 호출 및 응답 저장
    // (실제 구현은 GeminiService에서)
  }

  // 아래로 스크롤
  void scrollToBottom() {
    if (scrollController.hasClients) {
      scrollController.animateTo(
        scrollController.position.maxScrollExtent,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    }
  }
}

⚡ 4. 자동 스크롤 애니메이션

WidgetsBinding.addPostFrameCallback을 사용하여 위젯 렌더링 직후 스크롤을 실행합니다.

class _HomeScreenState extends State<HomeScreen> {
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<MessageModel>>(
      stream: GetIt.I<Isar>().messageModels.where().watch(fireImmediately: true),
      builder: (context, snapshot) {
        final messages = snapshot.data ?? [];

        // 프레임 렌더링 후 스크롤 실행 (딱 한 번만!)
        WidgetsBinding.instance.addPostFrameCallback((_) {
          scrollToBottom();
        });

        return buildMessageList(messages);
      },
    );
  }

  // 스크롤 애니메이션
  Future<void> scrollToBottom() async {
    if (!scrollController.hasClients) return;

    await scrollController.animateTo(
      scrollController.position.maxScrollExtent,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }
}

💡 핵심 포인트: addPostFrameCallback은 현재 프레임이 렌더링된 직후 딱 한 번만 실행됩니다. build()는 자주 호출되므로, 매번 무거운 작업을 실행하면 성능이 저하됩니다!

🎨 5. 주요 위젯 구현 체크리스트

• ✅ Logo 위젯: 앱 상단 로고 표시
• ✅ Message 위젯: 메시지 말풍선 (내 메시지 / 상대 메시지 구분)
• ✅ DateDivider 위젯: 날짜별 구분선
• ✅ ChatTextField 위젯: 메시지 입력 필드와 전송 버튼
• ✅ PointNotification 위젯: 포인트 획득 알림

📝 마무리

✅ 오늘 배운 것

• HTTP & REST API: URL 구조, HTTP 메서드, Dio를 사용한 API 호출 방법
• Gemini AI 연동: REST API를 통한 AI 채팅 메시지 송수신 구현
• Isar NoSQL: 컬렉션 정의, Build Runner 사용법, 데이터 CRUD 작업
• StreamBuilder: 실시간 데이터 변경 감지 및 자동 UI 업데이트
• 자동 스크롤: addPostFrameCallback을 활용한 효율적인 스크롤 제어
• 의존성 주입: GetIt을 사용한 전역 상태 관리

🚀 다음 계획

1. 스트림 심화: Stream, StreamController 직접 다루기
2. 에러 처리: API 호출 실패 시 재시도 로직 구현
3. 오프라인 모드: 네트워크 없을 때 로컬 DB만으로 동작하기
4. 성능 최적화: 메시지 페이징, 이미지 캐싱 적용
5. 고급 기능: 음성 입력, 마크다운 지원, 코드 하이라이팅