Build Hybrid Image Analysis Application with Angular, Firebase AI Logic, and Gemini Nano

개요

Angular, Firebase AI Logic, Gemini Nano를 사용하여 하이브리드 이미지 분석 애플리케이션을 구축하는 방법을 설명하는 튜토리얼입니다. 이 애플리케이션은 사용자가 이미지를 업로드하면 Gemini Nano 또는 Gemini 3.5 Flash 모델을 사용하여 태그, 대체 텍스트 및 추천을 생성합니다.

주요 내용

* Firebase AI Logic의 하이브리드 및 온디바이스 웹 SDK: 이 SDK는 온디바이스 또는 클라우드 AI 모델 사용 여부를 결정합니다. Chrome 브라우저에서는 Gemini Nano를 다운로드하여 사용하며, 다른 브라우저에서는 Gemini 3.5 Flash 모델이 이미지 분석을 처리합니다. 사용자에게는 어떤 모델이 사용되는지 투명하게 제공되며, 백엔드에 관계없이 고품질의 응답을 받습니다.
* 사전 요구 사항: Angular 22, TailwindCSS, Node 24, Gemini 3.5 Flash, Firebase AI Logic, Firebase Remote Config, Firebase Local Emulator Suite, Firebase App Hosting, Firebase App Check 등이 필요합니다.
* Firebase 프로젝트 설정: Angular 프로젝트에서 Firebase AI Logic을 사용하기 전에 Firebase 프로젝트를 설정해야 합니다. firebase-tools를 전역으로 설치하고, .firebaserc 및 .firebase.json과 같은 Firebase 구성 파일을 생성합니다. Antigravity CLI와 Gemini를 사용하여 이러한 구성 파일을 생성할 수 있습니다.
* Firebase Remote Config 및 App Object 생성: Firebase Remote Config JSON 파일을 다운로드하고, Node.js 스크립트를 사용하여 Firebase 앱 초기화에 필요한 Firebase 앱 객체, reCAPTCHA Enterprise 키, App Check 디버그 토큰을 생성합니다. 이 정보는 .env 파일에 저장하고 .gitignore에 추가하여 보안을 유지합니다.
* App Hosting 설정: Firebase 콘솔에서 App Hosting을 설정하고 GitHub 리포지토리와 연결하여 프로덕션 배포를 진행합니다. 환경 변수, 롤아웃, 자동 기본 이미지 업데이트를 구성합니다.
* 애플리케이션 아키텍처: Angular 애플리케이션은 Firebase 앱을 초기화하고, Gemini Nano(온디바이스) 또는 Gemini 3.5 Flash(클라우드) 모델을 사용하여 이미지 분석을 수행합니다. Firebase AI Logic Hybrid 및 On-device Web SDK가 디바이스 지원 여부를 판단합니다.
* Angular Firebase 통합: Firebase 앱 초기화, Remote Config 가져오기 및 활성화, App Check를 통한 AI 리소스 보호를 Angular 서비스로 캡슐화합니다. provideFirebaseAI 및 provideAppInitializer를 사용하여 앱 부트스트랩 시 Firebase AI 모델, Firebase 앱, App Check, Firebase Remote Config 값을 초기화합니다.
* 이미지 분석 서비스 및 UI: AiService는 Gemini Nano 또는 Gemini 3.5 Flash 모델을 사용하여 JSON 형식의 구조화된 출력을 스트리밍하고, jsonrepair 라이브러리로 불완전한 JSON 객체를 복구합니다. ImageAnalysisService는 이미지 분석 작업을 위임하고, SYSTEM_INSTRUCTION 및 IMAGE_ANALYSIS_USER_PROMPT를 사용하여 AI의 동작과 응답 형식을 정의합니다. UI 컴포넌트는 이미지 업로더, 분석 버튼, 분석 결과(대체 텍스트, 태그, 추천)를 표시합니다.

시사점

이 튜토리얼은 Angular, Firebase AI Logic, Gemini 모델을 사용하여 로컬에서 실행되고 불안정한 네트워크 환경에서도 오프라인으로 작동할 수 있는 하이브리드 이미지 분석 애플리케이션을 구축하는 방법을 제시합니다. 이를 통해 개발자는 사용자 데이터의 개인 정보를 보호하고 클라우드 AI 사용 비용을 절감할 수 있습니다.