플러터, Gemini API 연동하기

최근 구글에서 발표한 생성형 인공지능 모델인 Gemini는 다양한 형태의 콘텐츠를 생성할 수 있는 능력을 갖춘 LLM(Large Language Model)로, ChatGPT의 대항마로도 불릴 만큼 큰 관심을 받고 있어요. 특히 Flutter 개발자 입장에서는 이 Gemini AI를 활용한 챗봇이나 AI 기반 앱을 만들 수 있다는 점에서 매우 매력적인 도구죠.

 

이번 글에서는 Flutter 앱에서 Gemini API를 연동하는 방법을 실제 예제와 함께 차근차근 소개할게요. Gemini API 키 발급부터 Flutter 프로젝트에 SDK를 연동하고, .env 파일을 활용한 안전한 키 관리 방법, 그리고 간단한 챗봇 구현까지 전반적인 흐름을 정리해보겠습니다.

 

 

Gemini란 무엇이고, API 키는 어떻게 발급할까?

먼저 Gemini에 대해 간단히 짚고 넘어갈게요. Gemini는 구글이 개발한 대화형 생성 AI 모델로, 자연어를 입력하면 이에 대해 텍스트로 응답하거나, 다양한 형태의 콘텐츠를 생성할 수 있어요. 구조적으로는 ChatGPT와 유사하지만, 구글 생태계와의 연동성이 더 좋다는 점에서 Flutter와 함께 활용하기에 적합하죠.

 

Flutter에서는 별도의 복잡한 SDK 없이, google_generative_ai라는 패키지를 활용해 HTTP 통신 기반으로 Gemini를 연동할 수 있어요. 그러니 기본적인 네트워크 통신 이해만 있다면 어렵지 않게 사용할 수 있습니다. 가장 먼저 해야 할 일은 Gemini API 키를 발급받는 것이에요. 구글의 AI Studio 사이트에 접속한 뒤, 간단한 약관 동의를 거치면 바로 API 키를 생성할 수 있어요.

1. 사이트 접속 후 Get API Key 클릭
2. 약관 동의 후 API 키 만들기 선택
3. 발급된 키를 안전하게 복사해서 별도로 저장

이 키는 이후 앱 내부에서 직접 사용되지만, 중요한 점은 절대로 이 API 키를 코드에 하드코딩해서는 안 된다는 것이에요. 깃허브 같은 공개 저장소에 노출될 경우, 타인이 무단으로 사용할 수 있고 과금이 발생할 수도 있거든요. 그래서 우리는 다음 본문에서 .env 파일과 --dart-define-from-file 옵션을 활용한 안전한 API 키 관리 방식에 대해 살펴보려고 해요.

 

 

Flutter 프로젝트에 Gemini API 연동하고 키 안전하게 관리하기

이제 Gemini API 키를 발급받았다면, 실제로 Flutter 앱에서 이를 어떻게 활용할지 본격적인 작업에 들어갈 차례예요. 이번 단계에서는 SDK 설치, API 키 보호 방식, 그리고 앱 실행 시 .env 파일로부터 API 키를 안전하게 불러오는 방법까지 다뤄볼게요.

 

우선, Gemini와 Flutter를 연동하기 위해 필요한 패키지를 프로젝트에 추가해요. 터미널에서 다음 명령어를 실행합니다.

flutter pub add google_generative_ai
flutter pub add flutter_riverpod

• google_generative_ai: Gemini API 호출을 위한 패키지
• flutter_riverpod: ViewModel을 구조화하기 위한 상태관리 도구

패키지를 추가한 후에는 main.dart에 ProviderScope를 적용해 Riverpod의 상태관리를 전역으로 사용할 수 있도록 설정해줍니다.

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

그리고 이제 중요한 부분, API 키를 안전하게 관리하는 방법이에요. 실무에서는 보안을 위해 소스코드에 민감한 정보를 직접 작성하지 않는 것이 기본 원칙이에요. 이를 위해 .env 파일을 만들어 API 키를 별도로 관리하고, 실행 시 해당 값을 환경변수로 앱에 전달할 수 있어요.

 

1. 루트 경로에 .env 파일 생성

GEMINI_API_KEY=발급받은_API_KEY

 

2. vscode/launch.json 생성 또는 수정

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "flutter_env",
      "request": "launch",
      "type": "dart",
      "toolArgs": ["--dart-define-from-file", "./.env"]
    }
  ]
}

 

이 설정은 앱을 실행할 때 .env 파일의 내용을 --dart-define 방식으로 전달해주는 역할을 해요. 키를 사용하고자 할 땐 아래처럼 불러오면 됩니다.

final apiKey = const String.fromEnvironment('GEMINI_API_KEY');

이 방식의 장점은 매우 분명해요.

• .env 파일을 .gitignore에 포함시키면 공개 저장소에 API 키가 노출되지 않아요.
• 개발, 테스트, 배포 환경마다 다른 API 키를 쉽게 사용할 수 있어요.
• 키를 변경할 때 소스코드를 수정하지 않고도 교체가 가능해요.

이렇게 연동과 키 관리를 정리하면, 이제 본격적으로 Gemini API를 호출하고 응답을 받아 처리하는 로직을 ViewModel에 작성할 준비가 된 거예요.

 

 

Gemini API로 챗봇 만들기, ViewModel과 UI 구성

이제 준비가 끝났다면 실제로 Gemini API를 활용한 간단한 챗봇 기능을 구현해볼 수 있어요. 우리는 사용자의 입력을 받아 Gemini에 전달하고, 생성된 응답을 화면에 보여주는 흐름을 만들게 됩니다. 이를 위해 먼저 상태관리를 담당할 ViewModel을 구성하고, UI에서 이를 연결하는 방식으로 구현할 거예요.

 

먼저 Chat 모델을 정의하고, HomeViewModel 클래스를 생성합니다. 이 클래스는 google_generative_ai 패키지의 GenerativeModel을 이용해 사용자 메시지를 전송하고 응답을 받아옵니다.

class Chat {
  final String content;
  final bool isReceived;
  const Chat({
    required this.content,
    required this.isReceived,
  });
}

class HomeViewModel extends Notifier<List<Chat>> {
  @override
  List<Chat> build() => [];

  final _model = GenerativeModel(
    model: 'gemini-1.5-flash',
    apiKey: const String.fromEnvironment('GEMINI_API_KEY'),
  );

  void send(String text) async {
    state = [...state, Chat(content: text, isReceived: false)];

    final result = await _model.generateContent([Content.text(text)]);
    if (result.text != null) {
      state = [...state, Chat(content: result.text!, isReceived: true)];
    }
  }
}

final homeViewModel =
    NotifierProvider<HomeViewModel, List<Chat>>(() => HomeViewModel());

여기서 중요한 건 send 메서드예요. 사용자의 입력을 먼저 state에 추가한 후, Gemini에게 해당 내용을 전송하고, 응답이 오면 다시 state에 추가하여 UI가 반응하도록 합니다.

 

이제 UI에서 TextField를 통해 메시지를 입력받고, ListView로 채팅 내역을 보여주는 구조를 만들면 돼요.

TextField(
  controller: textController,
  onSubmitted: (value) {
    ref.read(homeViewModel.notifier).send(value);
    textController.clear();
  },
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    hintText: '메시지를 입력하세요...',
  ),
)

ListView는 ref.watch(homeViewModel)을 통해 상태를 구독하고, 채팅 메시지를 실시간으로 업데이트합니다. 이를 통해 Gemini 기반의 간단한 대화형 챗봇을 완성할 수 있어요.

 

 

마치며...

이번 글에서는 Google의 Gemini API를 Flutter 앱에 연동하고, 키를 안전하게 관리하며, 실제 챗봇 기능을 구현하는 전 과정을 살펴봤어요. Gemini는 단순한 AI가 아닌, 텍스트 기반의 사용자 경험을 강화할 수 있는 강력한 도구입니다. 하지만 중요한 건, 도구보다 어떻게 설계하고 어떻게 연결하느냐예요. Flutter의 반응형 UI 구조와 결합하면, Gemini는 단순한 답변 생성기를 넘어 사용자 맞춤형 인터랙션을 설계하는 핵심 기술로 확장될 수 있어요.

 

이제 막 시작한 AI 연동의 세계지만, 이런 작은 구현이 모여 새로운 사용자 경험의 기준을 바꿀 수도 있어요. Gemini와 함께 Flutter 앱의 한계를 넘어보고 싶다면, 지금이 바로 그 첫걸음을 내딛을 좋은 타이밍이에요.