[Product] Gemini API 개발자 대회 참여 앱 소개 - AI Fashion Style Analyzer

Google Gemini API 웹서비스 개발 대회에 참가해 AI Fashion Style Analyzer 웹 서비스를 만들었습니다. Firebase로 프론트·백엔드를 구성하고, Gemini로 이미지 분석·패션 평가를 구현한 경험을 정리했습니다.

💡 이런 분들께 추천합니다

• Gemini API·Firebase로 웹 서비스를 만들어 보고 싶은 분
• 이미지 기반 패션·스타일 분석 앱을 설계하는 분
• Google 개발자 대회·Project IDX 활용에 관심 있는 분

🧩 개념 설명 / 배경 지식

Gemini API로 이미지 입력에 대한 분석·평가를 받을 수 있습니다. Firebase Hosting·Functions로 웹 프론트와 백엔드를 배포할 수 있습니다. 이미 익숙하다면 다음 섹션으로 넘어가도 됩니다.

🔍 본론: AI Fashion Style Analyzer 제작

서비스 소개

• 서비스명: AI Fashion Style Analyzer
• 시스템 URL: AI Fashion Style Analyzer 웹사이트
• 주요 기능: 사용자가 사진을 업로드하면 생성형 AI인 Gemini가 해당 의상을 분석하고 패션 스타일을 평가합니다. 분석 결과는 0에서 100점 사이로 제공되며, 점수 판정의 근거와 함께 더 나은 스타일을 위한 조언과 팁도 제공합니다.

이 서비스를 통해 사용자는 자신의 스타일에 대해 객관적인 평가를 받고, 패션에 대한 새로운 인사이트를 얻을 수 있습니다. 서비스는 간단하지만 사용자에게 충분히 재미있고 유용한 경험을 제공하도록 설계되었습니다.

시스템 구성 및 활용 도구

1. Project IDX: Google에서 제공하는 온라인 IDE 도구로, Gemini API를 활용한 코드 작성 지원 등 여러 기능을 제공합니다.
2. 소스 저장소: 모든 소스 코드는 GitHub에서 관리됩니다.
3. Gemini API: Google의 강력한 AI 모델로 이미지를 인식하고 분석해 패션 스타일 평가에 사용되었습니다.
4. Firebase Frontend: 웹 서비스의 프론트엔드를 구성하고 사용자 인터페이스를 제공합니다.
5. Firebase Cloud Functions: 서버리스 백엔드로, Gemini API 호출 기능을 담당합니다.
6. reCAPTCHA: Firebase Cloud Functions 호출 시 보안을 강화하기 위해 사용하였으며, 키 파일 인증으로 사용자 편의성 또한 개선했습니다.

실행 과정

이번 프로젝트의 대략적인 개발 과정은 다음과 같습니다:

1. Gemini 키 발급 및 Firebase 가입: Gemini API 키를 발급받고 Firebase에 가입하여 기본적인 프로젝트 환경을 설정했습니다.
2. Google AI Studio 프롬프트 테스트: Google AI Studio에서 프롬프트 기능을 테스트하고 결과값을 JSON 형식으로 출력되도록 검증했습니다.
3. Project IDX 설치 및 프로젝트 생성: Project IDX를 설치하고 새로운 프로젝트를 생성했으며, 선택적으로 GitHub와 연동했습니다.
4. 개발 및 테스트: 백엔드와 프론트엔드를 순차적으로 개발하고 로컬 환경에서 테스트를 진행했습니다.
5. Firebase 배포: 백엔드와 프론트엔드를 Firebase로 배포했습니다.
6. reCAPTCHA 인증 적용: 백엔드 호출 시 보안을 강화하기 위해 reCAPTCHA 인증을 추가했습니다.

참고자료

• Project IDX 설치 가이드
• Gemini 키 발급 안내
• Firebase 사용법
• Gemini API 사용 방법
• 프론트엔드 배포 방법
• 백엔드 배포 방법

실행 화면

개발 과정을 보여주는 몇 가지 장면을 GIF로 정리한 파일입니다.

⚠️ 주의사항

• Gemini API·Firebase 사용 시 키·보안 규칙을 노출하지 않도록 설정하세요. 이미지·개인정보는 이용 약관과 개인정보 처리 방침에 맞게 처리해야 합니다.

✅ 실습 / 적용 예시

Step 1. Google AI Studio에서 Gemini API 키 발급. Step 2. Project IDX 또는 로컬에서 Firebase 프로젝트 생성, Hosting·Functions 설정. Step 3. 이미지 업로드 → Gemini API 호출 → 스타일 점수·조언 반환 흐름 구현 후 AI Fashion Style Analyzer처럼 배포.

🚧 트러블슈팅 / 자주 묻는 질문

Q. Gemini API 이미지 분석은 어떻게 하나요?
A. 멀티모달 입력으로 이미지와 텍스트(프롬프트)를 함께 전달해 분석·평가 결과를 받을 수 있습니다. 공식 Gemini API 튜토리얼을 참고하세요.
Q. Firebase만으로 프론트·백 둘 다 배포할 수 있나요?
A. 네. Hosting으로 프론트, Functions로 API 서버를 구성해 배포할 수 있습니다.

📝 마무리

• Gemini API와 Firebase로 AI Fashion Style Analyzer 같은 이미지 기반 웹 서비스를 제작·배포할 수 있습니다.
• 대회 참여를 통해 최신 Google 기술을 체험하고, 서비스 확장 가능성을 실험해 볼 수 있습니다.
• 문서·동영상 가이드를 참고해 다른 도메인에도 적용해 보시면 좋습니다.