[AI 공부] Gemini API & Firebase 웹 서비스 만들기 #1

 

오늘은 구글 제미나이(Gemini)와 구글 Firebase를 이용하여 연동하는 부분을 공부해보려 합니다.

 

약 6개월 전에 유튜버 조코딩님의 유튜브 영상 중 구글 제미나이(Gemini) 개발 대회를 위해서 

 

[Gemini API & Firebase 웹 서비스 만들기]라는 영상을 제작해 놓은 방송이 있는데

 

그 내용을 기반으로 공부도 하면서 블로그에 내용을 정리하고자 합니다.

 

조코딩님은 예전에 "동물상 테스트"라는 것을 개발해서 꽤나 히트를 쳤다고 하는데

 

이번에 구현하고자 하는 것은 구글 제미나이와 Firebase를 이용하여

 

AI로 외모를 평가해보는 웹페이지를 만들어서 구글 제미나이 개발 대회에 작품을 제출하려고 하네요

 

이미 제출하셨겠네요

 

 

 

 

 

1. 개발 환경 세팅하기

1) Project IDX 준비

▶ Project IDX 바로가기

Project IDX

Project IDX는 뭐냐하면요, 구글에서 최근에 발표한 개발환경이라고 합니다.

 

요즘은 생성형이든 뭐든 전부 무조건 다 웹에서 작동하게 하는 것 같습니다.

 

원래는 주로 vscode나 안드로이드 스튜디오 같은걸 PC에 깔아서 사용했다면, 

 

따로 설치할 필요 없이 바로 웹에서 직접 코딩을 제공하는 개념입니다.

 

 

메인화면에서 보다 시피 Python, Go, Angula, NexUS, Flutter, Gemini API 등등 최근

 

인기있는 프로그램들을 지원해 주는데요,

 

구글 아이디로 로그인만 하면, 이런 개발환경을 웹에서 바로 쓸 수 있다는 장점이 대단한 것 같아요

 

사실상, 에전 방식대로 일일이 개발통합환경들을 PC에 설치하다보면

 

개발을 하기도 전에 지쳐서 개발을 배우려는 의지를 꺽어버리는 허들이 되어버렸는데요

 

정말 웹에 로그인만 해도 개발환경이 바로 제공된다는 건 

 

개발을 배우려는 사람들에게는 축복과도 같은 선물이라 표현할 수 있겠네요

 

일단 이 유튜브 영상에서는 가장 심플하게 HTML, JS, CSS 3가지만 사용해서 구현하고자 하는데요

 

index.html, index.js 파일 두개로 작성한다고 합니다.

 

 

첫번째로 메인화면에서 See all templates라는 메뉴를 클릭하면 아래의 화면이 보여지는데

 

Simple HTML를 클릭해서 기본 프로젝트를 만들어 줄겁니다.

 

저는 프로젝트 이름은 geminiproject-xxxxx 이라는 이름으로 만들어 줄께요

 

그러면 바로 vscode 메뉴 빼다박은 모양이 아래와 같이 생깁니다. 친숙하네요

 

 

 

▶ 강의자료 바로가기

https://jocoding.net/gemini

조코딩넷

 

 

 

2. Goole AI 사용하기

1) Gemini API 키 발급 하기

 

▶Gemini API 키 발급 바로가기

Google AI Studio

 

위 싸이트를 클릭하면 아래와 같은 Goole AI Studio 사이트가 열리는데요,

 

바로 Get API Key를 눌러줍니다. 그리고  [API 키 만들기] 버튼을 클릭하여 바로 하면 됩니다.

 

 

 

2) Google AI Studio로 테스트

 

일단 키발급은 웹프로그래밍 안에서 호출할 때 사용하긴 할건데,

 

그전에 Google AI Studio에서 직접 테스트를 해보는 것이 매우 중요하니 한번 보도록 하겠습니다.

 

왜냐하면 Google AI Studio에서 구현된 걸 바로 백엔드에서 똑같이 구현하는 개념이니까요 

 

아래 화면을 보시면 아시겠지만 마치 GhatGPT의 playground와 비슷한 화면 구성을 볼 수 있어요

 

 

 

참고로 Gemini 가격은 1.5 Flash는 무료로 책정이 되어 있는 걸 알 수 있습니다.

 

물론 분단 요청개수는 15개 및 100만 TPM 토큰으로 한정적이지만

 

개발 공부를 함에 있어 전혀 부족함이 없는 횟수임을 알 수 있겠네요,

 

 

 

자, 그럼 테스트를 해볼께요

 

하단 프롬프트 자리에 사람 이미지를 올린 후 영어로 첨부한 사진이 어떤 동물을 닮았는지 알려달라고 해볼께요

 

 

답변은 장황하게 나왔지만 결국 사슴과 비슷하다고 알려주네요

 

 

만약 잘 안되시는 분들이 계시다면 아래와 같이 세팅값을 맞춰 주시는 걸 추천드립니다.

 

일단 우측하단 메뉴의 Advanced Setting > Run safety sttings 를 아래와 같이 전부 none으로 맞추고 다시 한번 질문해볼께요

 

 

그리고 또한가지 세팅해주셔할 할것이 있는데요,

 

메인화면의 System Instruction 부분은 AI의 역할을 지정해주는 프롬프트 엔지니어링 영역이기에

 

질문을 던지기 전에 여기에 역할을 지정해주는 것만으로도 원하는 정교한 답변을 받을 수 있는

 

조건을 만들기도 하니 잘 활용하면 좋을 것 같아요

 

<System Instruction 프롬프트 예시>

 

"너는 어떤 사람의 사진이 올라오면 어떤 동물과 비슷하게 닮았는지 알려주는 AI야

내가 사진을 업로드 할테니 이걸 보고 어떤 동물을 닮았는지 알려줘

솔직하고 객관적으로 알려줘야 해 나는 어떤 동물을 말하더라도 상처를 받지 않아.

그리고 어떤 동물을 닮았는지 알려준다고 해서 너는 절대 무례한 것이 아니라는 걸 알아줬으면 해"

 

위처럼 해놓고 테스트를 다시 한번 해볼께요

 

 

 

이번엔 첫번째 처럼 System Instructions에 아무것도 넣지 않았을 때 처럼 알려주기 싫은 뉘앙스가 전혀 없이

 

허심탄회하게 사슴이라고 명확하게 표현해주는 것을 알 수가 있어요

 

이처럼 System Instructions를 통해 역할을 정의 하는 것이 효과가 대단한 걸 검증할 수 있었네요..

 

 

오늘은 여기까지 하고 다음 시간에 이어서 정리해보도록 할께요

 

감사합니다.

 

 

 

 

 ▶ [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #2  <바로가기 링크>

 

 

 ▶ [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #3  <바로가기 링크>

 

 

 ▶ [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #4  <바로가기 링크>

 

 

 ▶ [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #5  <바로가기 링크>