Flutter와 AI로 만든 나만의 커피, GenLatte!
Flutter 앱과 Firebase 백엔드를 기반으로 AI 이미지 생성 및 커피 프린팅 기능을 갖춘 커피숍 데모(GenLatte)를 구축함
사용자가 입력한 '행복한 장소(Happy Place)' 프롬프트를 기반으로 Gemini와 Nano Banana AI가 이미지를 생성하고, 이를 커피 위에 프린팅하는 경험 제공
콘텐츠 안전성(Content Safety)을 위해 3단계 AI 기반 콘텐츠 검증 및 인간 검토 프로세스를 적용함
GenUI 기술을 활용하여 사용자 취향에 맞춰 이미지를 실시간으로 수정하는 개인화된 경험을 제공함
Flutter의 크로스 플랫폼 지원과 Firebase의 확장성을 통해 성공적으로 데모를 구현하고, 1200~1800잔의 커피를 제공하며 프로젝트를 마무리함
Flutter와 Firebase 기반의 아키텍처 설계
본 프로젝트는 Flutter를 클라이언트 UI로, Firebase를 백엔드로 활용하는 모노레포(Monorepo) 아키텍처를 채택했습니다.
모노레포 장점: 의존성 중복 제거(Dependency Deduplication), 비즈니스 로직 공유(Business Logic Sharing), 원자적 배포(Atomic Deployments) 용이성 확보
Flutter 앱 구성: 키오스크, 바리스타, 모더레이터, 큐, 최근 주문 등 5가지 개별 UI를 개발하여 사용자 경험 분리 및 기능별 최적화 달성
Firebase 활용: Cloud Build와 Firebase Hosting을 통한 효율적인 배포 관리, 트리거 함수(Trigger Functions) 및 HTTP Callable 함수를 이용한 유연한 백엔드 로직 구현
이러한 구조는 빠른 프로토타이핑(Rapid Prototyping)과 확장성(Scalability)을 동시에 만족시키는 데 기여했습니다.
AI 기반 이미지 생성 및 개인화 기술
사용자의 '행복한 장소(Happy Place)' 프롬프트를 기반으로 Gemini와 Nano Banana AI 모델을 활용하여 맞춤 이미지를 생성하고, 이를 커피 위에 프린팅하는 과정을 구현했습니다.
프롬프트 엔지니어링(Prompt Engineering): 사용자의 짧은 입력(최대 50자)을 구체적이고 다양한 이미지 요청 프롬프트로 확장하여 Nano Banana의 결과물 품질 향상
이미지 최적화: '주제를 향하는 S커브(Leading S-curve toward the subject)'와 같은 프롬프팅 기법을 적용하여 시각적으로 매력적인 구도 생성률 증대
실시간 이미지 수정(Real-time Image Modification): GenUI를 통해 사용자에게 이미지 수정 관련 질문(예: 음식 종류, 시간대)을 제시하고, 답변에 따라 새로운 이미지를 동시 생성(Concurrent Generation)하는 개인화 경험 제공
이 과정은 생성형 AI(Generative AI)의 창의성과 사용자 인터랙션(User Interaction)을 결합하여 독특한 경험을 선사했습니다.
콘텐츠 안전성 및 접근 제어 강화 방안
사용자 생성 콘텐츠(User-Generated Content)의 오용을 방지하기 위해 다층적인 보안 메커니즘을 적용했습니다.
콘텐츠 부적절성 방지: 1단계로 Gemini Flash를 이용한 텍스트 프롬프트 사전 검증, 2단계로 Nano Banana 내부 학습 모델을 통한 SFW(Safe For Work) 콘텐츠 생성, 최종적으로 인간 모더레이터(Human Moderator)의 수동 승인 절차를 거쳐 부적절한 이미지 노출 차단
관리자 계정 스푸핑 방지: GoRouter의 선언적 라우팅 검증(Declarative Routing Checks)과 Firebase 커스텀 클레임(Firebase Custom Claims)을 연동하여 인가된 사용자만 특정 화면 접근을 허용
Firestore 무단 쓰기 방지: 모든 데이터 읽기/쓰기에 엄격한 계정 자격 증명(Strict Account Credentials)과 보안 규칙(Security Rules)을 적용하여 데이터 무결성 유지
이러한 조치는 데모 환경에서의 보안 위험(Security Risks)을 최소화하는 데 중점을 두었습니다.
GenUI를 활용한 동적 UI 생성
GenLatte는 단순한 AI 데모를 넘어, GenUI(Generative User Interface) 기술을 통해 사용자 경험을 동적으로 생성하는 사례를 보여줍니다.
상황별 최적 UI 선택: 사용자의 답변 유형(개방형 질문, 선택형 질문)에 따라 텍스트 필드, 라디오 버튼 등 적합한 위젯을 동적으로 선택하여 제시
제한된 위젯 카탈로그 활용: 브랜드 가이드라인을 준수하는 범위 내에서 에이전트가 위젯을 선택하도록 하여 예측 가능하고 일관된 UI 경험 제공 (보수적 접근 방식)
향후 확장성: 더 많은 자유도를 부여하여 에이전트가 다양한 UI 컴포넌트를 조합하도록 하는 고급 구현 방식도 가능함을 시사 (예: Hatcha 앱)
GenUI는 사용자 인터페이스를 데이터 기반으로 생성함으로써, 사용자 맞춤 경험 제공의 새로운 가능성을 제시합니다.
Flutter와 Firebase의 개발 생산성 기여
본 프로젝트에서 Flutter와 Firebase는 개발 생산성 향상에 크게 기여했습니다.
Flutter: 동적 레이아웃 지원, 커스텀 셰이더(Custom Shaders), 크로스 플랫폼(Cross-platform) 지원을 통해 매력적인 UI 구축을 용이하게 함
Firebase: 배포 및 확장성 관리 부담 해소, 반응형 풀스택 데이터 바인딩(Reactive, Full-stack Data Binding) 지원으로 백엔드 개발 간소화
이러한 기술 스택은 복잡한 기능을 가진 데모 앱을 단기간에 효율적으로 구축할 수 있는 기반을 제공했습니다.
결과적으로, 개발팀은 핵심 기능 구현에 집중할 수 있었으며, 이는 프로젝트 성공의 중요한 요인이 되었습니다.
