[제작기] 사진 한 장으로 과일 맛을 판정하는 서비스를 만든 이유

마트에서 실패 없는 과일 선택을 돕기 위해 사진 한 장으로 외관 상태를 분석하고 점수와 팁을 제공하는 웹서비스 GoodFruit 개발 이야기입니다.

사진 한 장으로 과일 맛을 판정하는 서비스를 만든 이유

한 줄 요약: 마트에서 실패 없는 과일 선택을 돕기 위해, 사진 한 장으로 외관 상태를 분석하고 점수와 구매 팁을 제공하는 웹서비스 GoodFruit를 Vanilla JS와 Serverless(S3, CloudFront, Lambda, Gemini API) 조합으로 구축한 과정입니다.

1. 왜 만들었나

마트나 청과물 시장에서 과일을 살 때 누구나 한 번쯤 고민합니다.

"이 수박은 과연 속까지 빨갛고 달콤할까?", "이 복숭아는 지금 먹기 딱 좋은 상태일까?"

과일을 고를 때 당도나 식감, 향은 직접 잘라서 먹어보기 전까지 알기 어렵지만, 색상, 윤기, 모양, 겉면 상처, 꼭지 상태처럼 눈으로 확인할 수 있는 외관 요소는 맛을 추정하는 매우 중요한 척도입니다. 하지만 일반 소비자는 어떤 과일의 어떤 외관 특징을 살필지 잘 모르고, 현장에서 매번 검색하기도 번거롭습니다.

이 문제를 해결하고자 스마트폰 카메라로 사진 한 장만 찍으면 AI가 과일 종류와 외관 상태를 관찰해 100점 만점의 점수와 맞춤형 고르는 팁을 제공하는 모바일 중심 웹서비스 'GoodFruit'를 기획하게 되었습니다.

2. 사용자는 어떤 문제를 겪나

**전문 지식 부재**: 과일 종류마다 맛있는 개체를 고르는 기준이 완전히 다릅니다. (예: 딸기는 꼭지 근처까지 붉은색이어야 하지만, 수박은 줄무늬가 짙고 배꼽이 작아야 함)

**현장 확인의 번거로움**: 마트 진열대 앞에서 일일이 검색 엔진으로 "맛있는 자두 고르는 법"을 검색하고 읽는 과정이 틱틱거리고 느립니다.

**결과 공유 및 재확인 어려움**: 함께 장을 보러 간 가족이나 친구에게 고른 과일의 상태를 손쉽게 공유하거나 저장할 방법이 필요합니다.

3. 핵심 사용 흐름

GoodFruit 서비스의 주요 사용자 흐름은 앱 설치나 회원가입 절차를 완전히 제거하여 3초 이내에 결과를 확인할 수 있도록 설계되었습니다.

[홈 화면] -> [사진 촬영/업로드] -> [클라이언트 이미지 리사이즈] -> [Lambda + Gemini AI 분석] -> [결과 화면(점수/별점/근거)] -> [고유 URL 공유 & 쿠팡 검색]

**진입**: 모바일 브라우저로 접속 시 홈 화면에서 바로 카메라 촬영 또는 앨범 업로드 버튼 노출.

**전송 전 처리**: 브라우저 단에서 Canvas를 이용해 이미지를 최적 해상도로 압축/리사이즈한 뒤 API 전송.

**분석 중**: 분석 대기 화면에서 지루하지 않게 진행 상태 바와 관련 상품 추천 위젯 표시.

4. 결과 제공: 총점(100점 만점), 0.5단위 별점, 6가지 판단 항목(색상/모양/표면/상처/꼭지/숙도), 보이지 않는 요소(향/무게/촉감) 직접 체크 팁 안내.

5. 공유 및 연계: 고유 링크 생성 후 네이티브 공유창 호출, 쿠팡 과일 검색 연동.

4. 기술 구조

서버 유지비와 관리 부담을 최소화하기 위해 100% Serverless & Static Architecture를 선택했습니다.

**프런트엔드**: Vanilla HTML5, CSS3, Vanilla JavaScript (모듈형 SPA)

**정적 호스팅 및 CDN**: Amazon S3 + CloudFront (HTTPS 및 전 세계 Fast Edge Distribution)

**도메인**: `https://fruit.nxnl.app`

**백엔드 API**: Amazon API Gateway + AWS Lambda (Node.js 20.x runtime)

**AI 분석 엔진**: Google Gemini API (`gemini-3.1-flash-lite` 모델)

**보안/보관**: AWS Secrets Manager (Gemini API 키 보안 관리), Amazon S3 (공유 결과 HTML/JSON 및 OG 카드 저장)

5. 선택하지 않은 방법과 이유

**React / Next.js 등 무거운 프레임워크 미사용**:

**이유**: 마트 현장에서 셀룰러 네트워크로 접속할 때 초가동 속도(FCP)가 가장 중요합니다. Vanilla JS로 구축하여 번들 크기를 30KB 미만으로 유지했습니다.

**사용자 회원가입 및 DB 구축 미사용**:

**이유**: 회원가입 허들은 유입 사용자의 80% 이상을 이탈시킵니다. 로그인 없이 암호화된 난수 ID 기반 고유 S3 정적 페이지를 생성하는 방식으로 zero-auth 공유를 구현했습니다.

**자체 딥러닝 비전 모델 훈련 미사용**:

**이유**: 과일 외관 관찰과 상황별 유쾌한 리즌 작성을 위해 Gemini API의 Multimodal 추론 능력과 JSON Schema 제약 기능을 활용하는 것이 개발 속도와 품질 면에서 훨씬 뛰어났습니다.

6. 실제 구현 화면

**홈 화면**: 깔끔한 카드로 구성된 과일 사진 업로드 존과 43종 과일 구매 가이드 바로가기.

**분석 중 화면**: 로딩 프로그래스 스피너 및 마트 과일 구매 꿀팁 로테이션.

**결과 화면**:

맛 점수 카드 (예: "92점 · 실패 없는 최상급 사과!")

판단 근거 (색상, 표면 상태, 꼭지 상태에 대한 AI 상세 설명)

재미 요소: 과일이 아닌 사진을 올렸을 때 닮은 과일과 비교해주는 Playful Mode.

7. 현재 한계

**사진 외적 요소 미반영**: 사진만으로 당도(Brix), 내부 썩음, 향기, 무게감을 100% 측정할 수는 없습니다. (이를 보완하기 위해 '직접 확인 체크리스트' 팁 섹션 포함)

**조명 및 카메라 잔상 영향**: 마트 조명이 너무 어둡거나 반사가 심할 경우 AI 인식 신뢰도가 떨어질 수 있습니다.

8. 다음 단계

**GA4 전환 데이터 분석 기반 UX 개선**: 사진 분석 완료 후 공유 및 상품 연결 전환율 개선.

**과일별 가이드 43종 SEO 강화**: 구글 검색을 통한 오가닉 유입 증대.

**주간 운영 보고서 자동화**: Lambda와 GA4 Data API를 연결하여 일별/주간 운영 수치 자동 모니터링.

9. 정리

GoodFruit 프로젝트는 단순한 AI 토이 프로젝트에 그치지 않고, 실제 사용자가 마트에서 겪는 불편함을 해결하고 웹 생태계에서 오가닉 유입과 전환을 만들어내는 실제 서비스로 만들어가고 있습니다.

10. 관련 글

[사진 분석 AI 결과를 점수로 변환하는 구조](file:///Users/uram/dev/goodfruit/posts/02-ai-observation-to-score.md)

[회원가입 없이 결과를 다시 볼 수 있게 만든 방법](file:///Users/uram/dev/goodfruit/posts/03-zero-auth-sharing-structure.md)

[모바일 웹에서 네이티브 공유창을 여는 방법](file:///Users/uram/dev/goodfruit/posts/04-mobile-web-native-share-api.md)

실제 적용 서비스

이 구조는 제가 직접 운영 중인 과일 사진 분석 서비스 GoodFruit에 적용되어 있습니다. 직접 과일 사진을 찍고 분석 결과를 확인해보세요!

👉 [GoodFruit에서 과일 사진 분석해보기](https://fruit.nxnl.app/?utm_source=tistory&utm_medium=content&utm_campaign=goodfruit&utm_content=01_why_built_goodfruit)