Migrate to Firebase Server Prompt Template in Angular using Dependency Injection [GDE]

개요

Firebase Server Prompt Templates는 DotPrompt 형식으로 프롬프트 템플릿을 Firebase 인프라에 저장하고 관리하는 기능으로, Angular 애플리케이션에서 Dependency Injection을 활용하여 기존 프롬프트 텍스트를 마이그레이션하는 방법을 설명합니다.

주요 내용

* Firebase Server Prompt Templates의 이점:
* 보안 강화: 프롬프트 텍스트가 서버 측에 저장되어 네트워크 호출 시 노출되지 않으며, 사용자가 네트워크 탭에서 프롬프트를 검사할 수 없습니다.
* 가드레일 강화: 프롬프트 텍스트가 공개되지 않아 악의적인 사용자가 프롬프트 주입 공격을 시도하기 어렵습니다.
* 프롬프트 드리프트 방지: 모든 엔지니어가 서버에 저장된 동일한 버전의 프롬프트를 사용하게 되어 버전 관리의 혼란을 방지합니다.
* 콘솔에서의 테스트: 개발자가 코드를 작성하기 전에 Firebase Console에서 프롬프트를 미리 테스트할 수 있습니다.
* 배포 최소화: 프롬프트가 서버 측에서 업데이트되면 클라이언트 애플리케이션은 별도의 재배포 없이 업데이트된 프롬프트를 받습니다.
* 구현 단계:
1. 사전 준비: Angular 19, TailwindCSS, Node 22, gemini-3.1-flash-image, Firebase AI Logic, Firebase Cloud Functions, Firebase Remote Config, Firebase Local Emulator Suite 등의 환경 설정 및 firebase-tools 설치.
2. Firebase 초기화: firebase init 명령어를 사용하여 Firebase Cloud Function, Local Emulator Suite, Remote Config 설정.
3. 아키텍처: URL 경로에 따라 GenMediaService를 다른 인젝터(루트 또는 라우트 레벨)에서 주입하고, IMAGE_GENERATOR_TOKEN이 FirebaseService 또는 ServerTemplateService를 가리키도록 설정.
4. Server Prompt Template 생성: Firebase Console의 "AI Logic"에서 "Prompt templates (PREVIEW)" 탭을 통해 새로운 프롬프트 템플릿 생성. gemini-3.1-flash-image 모델과 입력 스키마, 안전 설정 등을 구성.
5. 템플릿 테스트: Firebase Console에서 생성된 프롬프트 템플릿의 입력값(이미지, aspect ratio, resolution 등)을 사용하여 테스트 요청을 실행하고 결과를 확인.
6. Angular 서비스 구현:
* ImageGenerator 인터페이스 정의 및 generateImage 메서드 구현.
* IMAGE_GENERATOR_TOKEN을 FirebaseService 또는 ServerTemplateService로 주입하도록 설정.
* SERVER_TEMPLATE_MODEL Injection Token을 사용하여 TemplateGenerativeModel 인스턴스 주입.
* ServerTemplateService에서 TemplateGenerativeModel을 사용하여 템플릿 기반 이미지 생성 로직 구현. makeTemplateVariables 함수로 입력값 변환 및 getTemplateBase64Images 함수로 결과 처리.
7. Angular 라우트 정의: template-prompt/:featureId 경로에 대해 ServerTemplateService를 IMAGE_GENERATOR_TOKEN에 제공하도록 라우트 설정.
8. 네비게이션 메뉴 업데이트: template-prompt 경로와 해당 템플릿 ID를 참조하는 templateConfigName을 사용하여 메뉴 항목 업데이트.
9. 네트워크 요청 검증: 업데이트 후 네트워크 요청 시 프롬프트 텍스트가 숨겨지고, 설정 정보(aspect ratio, resolution, inline image data)만 포함됨을 확인.

시사점

Firebase Server Prompt Templates를 사용하면 Angular 애플리케이션의 AI 관련 프롬프트 관리가 서버 측에서 중앙 집중화되어 보안, 효율성, 유지보수성을 크게 향상시키며, 프롬프트 변경 시 클라이언트 애플리케이션의 재배포 없이 즉시 적용 가능합니다.