[Project] Google Gemini API 활용

이번 프로젝트 컨셉이 여행 관련 사이트를 만드는 것인데, 요즘 또 대 AI 시대인 만큼 나도 AI 챗봇 등에 관심이 많아서 프로젝트에 AI를 활용한 시스템을 한 번 만들고 싶어졌다.

그래서 여러가지 챗봇 API 중 현재 무료로 사용 가능한 Google Gemini를 내 프로젝트에 적용시켜 보기로 했다.

 

Chat GPT도 일정 크레딧 까지는 무료로 사용이 가능하다고 나와있었는데, 내 계정엔 크레딧이 없어서 다른걸 찾던 중 Gemini를 사용하게 되었다.

그럼 Gemini API를 어떻게 불러와서 사용하는지, 내 프로젝트에 어떻게 적용시켰는지를 포스팅 해보겠다.

---

가장 먼저, Gemini API를 사용하기 위해서는 API 키를 발급받아야 한다.

 

https://ai.google.dev/

Gemini Developer API | Gemma open models  |  Google AI for Developers

위 링크로 들어가서 회원가입을 한 후 API 키를 발급 받고 따로 키를 메모를 해둬야 한다.

 

키를 다 발급 받았으면 본격적으로 API를 불러와서 사용할 수 있다.

CDN 방식과 NPM 환경에서 하는 방법이 있는데, 나는 CDN 방식을 사용했다.

 

1. 라이브러리 호출

<script type="importmap">
{
    "imports": {
        "@google/generative-ai": "https://esm.run/@google/generative-ai"
    }
}
</script>

 

이렇게 라이브러리를 CDN 방식으로 불러온다.

 

2. 객체 생성

import { GoogleGenerativeAI } from "@google/generative-ai";

// API 키 설정
const API_KEY = 'API KEY';

// GoogleGenerativeAI 객체 생성
const genAI = new GoogleGenerativeAI(API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

 

이런 식으로 API 키를 사용하여 GoogleGenerativeAI 객체를 생성해주고, 어떤 모델을 사용할지 적어줘야 한다.

flash 모델, pro 모델이 있지만 무료로 사용하기에 가장 적합한 flash 모델을 사용해주었다.

 

3. 프롬프트 생성

이제 Gemini에게 요청을 보낼 프롬프트를 생성해야 한다.

<div class="input-group">
    <label for="category">여행 카테고리:</label> 
    <select id="category">
        <option value="자연">자연</option>
        <option value="휴양">휴양</option>
        <option value="액티비티">액티비티</option>
        <option value="도시">도시</option>
    </select>
</div>

<div class="input-group">
    <label for="country">여행 국가:</label> 
    <input type="text" id="country" placeholder="여행할 국가를 입력하세요">
</div>

<div class="input-group">
    <label for="days">여행 일수:</label> 
    <input type="number" id="days" placeholder="여행 일수를 입력하세요">
</div>
<button id="generate-button">추천 경로 생성</button>

 

나는 위와 같이 HTML 에서 사용자가 원하는 여행 국가, 카테고리, 여행 일 수를 선택할 수 있게 하여 그걸 토대로 프롬프트를 생성하도록 구현하였다.

 document.getElementById('generate-button').addEventListener('click', async () => {
    const category = document.getElementById('category').value.trim();
    const country = document.getElementById('country').value.trim();
    const days = document.getElementById('days').value.trim();
    
 const prompt = `${country}에서 ${category} 컨셉의 ${days}일 여행 도시를 추천해주고, ...`;

 

자세한 요청 문장과 함께 조합하여 프롬프트를 생성해 주었다.

 

4. Gemini API 호출 및 응답 처리

이제 위에서 생성한 프롬프트를 API 호출하여 날아오는 응답을 처리해주면 된다.

try {
    // API 호출
    const result = await model.generateContent(prompt);
    console.log('API Result:', result);

    // 응답 데이터 처리
    if (result && result.response && result.response.candidates.length > 0) {
        const content = result.response.candidates[0].content.parts[0].text;
        document.getElementById('response').innerText = content;
    } else {
        document.getElementById('response').innerText = "추천 결과가 없습니다.";
    }
} catch (error) {
    console.error('API 호출 중 오류 발생:', error);
    document.getElementById('response').innerText = "오류가 발생했습니다.";
}

 

API 호출 후 응답 처리를 해야 하는데, 생각보다 해당 응답이 복잡한 경로 안에 있다.

위에 적힌 코드와 같이 result > candidates[0] > content > parts[0] > text 이 경로에 응답이 들어있다...

 

여기에 있는 응답을 innerText로 화면에 잘 출력해주기만 하면 된다.

 

---

처음엔 이렇게 복잡할 줄도 모르고 그냥 다른 사람들이 올려놓은 Gemini API 호출 방법만 보고 간단해 보여서 사용해보았는데, 생각보다 막히는 부분도 많고 복잡했다.

특히, 아직 JavaScript에 대한 지식이 많이 부족해서 더 힘들었던 것도 있었다.

 

거의 다 구현하고 응답을 처리해주기만 하면 되는데, 화면에 계속 응답이 출력이 되질 않아서 애를 많이 먹었다.

개발자 도구로 하나하나 뒤져 가면서 찾아 내어 겨우 처리할 수 있었다..

 

힘들었던 기능이지만 막상 구현해놓고 보니 뿌듯하기도 하고, 더 많은 것을 배운 느낌이라 오히려 기분은 더 좋다.