Step-by-Step Guide to Connect Google Gemini AI with Spring Boot and React

개요

이 가이드에서는 Google Gemini AI를 Spring Boot 백엔드와 React 프론트엔드를 사용하는 전체 스택 애플리케이션에 통합하는 방법을 단계별로 안내합니다.

주요 내용

• 아키텍처 구성: React 프론트엔드는 사용자 프롬프트를 캡처하고 UI를 표시하며, Spring Boot 백엔드는 Gemini API 키를 안전하게 관리하고, React로부터 프롬프트를 받아 Google 서버와 통신한 후 응답을 반환하는 보안 프록시 역할을 합니다.
• Spring Boot 백엔드 설정:
• pom.xml에 spring-boot-starter-web 의존성을 추가합니다.
• application.properties에 Gemini API URL과 API 키를 설정합니다.
• Google Gemini API와 통신하기 위한 DTO(Data Transfer Objects) 클래스(GeminiDTO.java)를 생성하여 요청 및 응답 JSON 구조를 매핑합니다.
• GeminiService.java에서 Spring의 RestTemplate을 사용하여 Google의 REST API에 HTTP POST 요청을 보내고 응답을 처리하는 로직을 구현합니다.
• GeminiController.java에서 /api/ai/chat 엔드포인트를 생성하여 React 프론트엔드에서 서비스 호출을 할 수 있도록 API를 노출합니다.
• React 프론트엔드 설정:
• AIChat.jsx 컴포넌트를 생성하여 채팅 기록을 관리하고 Spring Boot 백엔드의 API 엔드포인트에 POST 요청을 보냅니다.
• 사용자 입력 처리, 채팅 메시지 상태 관리, API 응답 수신 및 표시 기능을 구현합니다.
• 일반적인 오류 및 해결 방법:
• 404 Not Found: 사용 중인 모델이 오래되었거나 지원이 중단된 경우 발생하며, application.properties의 API URL을 최신 모델로 업데이트하여 해결합니다.
• 429 Too Many Requests: 무료 티어 요청 제한(분당 15회)을 초과한 경우이며, 잠시 기다리거나 국가별 무료 티어 지원 여부를 확인하고 필요 시 결제 또는 다른 API 제공업체 사용을 고려해야 합니다.
• Cannot construct instance of GeminiDTO$Content: Jackson JSON 파서가 중첩 객체를 생성할 때 기본 생성자를 필요로 하는데, DTO 클래스 내 모든 중첩 클래스에 빈 생성자(public Content() {})를 추가하여 해결합니다.
• 403 (Forbidden): Spring Security 사용 시 백엔드에서 예외 발생 시, 보안되지 않은 /error 페이지로 리다이렉트될 때 발생할 수 있으며, Java 백엔드 콘솔에서 실제 오류를 확인하고 수정해야 합니다.

시사점

이 접근 방식은 API 키를 안전하게 보호하면서 AI 기능을 애플리케이션에 통합하는 모범 사례를 제공하며, Spring Boot와 React의 조합을 통해 견고하고 확장 가능한 AI 기반 애플리케이션 구축이 가능합니다.