마트 진열대 카메라 크롭 동기화와 멀티 과일 AI 인식 및 뒤로가기 UX 개선기
마트 과일 코너에서 주변 과일이 노이즈로 작용하던 문제를 1:1 센터 크롭 엔진과 Gemini AI 렌즈 튜닝, 그리고 뒤로가기 재분석 방지 로직으로 해결했습니다.
중앙 크롭 엔진멀티 과일 인식SPA 히스토리 개선
GoodFruit AI 웹앱을 마트나 과일 가게 현장에서 직접 사용할 때, 과일이 매대 상자에 여러 개 쌓여 있거나 카메라 뷰파인더와 제출 사진의 잘림 영역이 달라 AI가 엉뚱한 결과를 반환하거나 에러를 내는 문제가 관찰되었습니다. 이번 개선에서는 시각적 프레이밍, AI 프롬프트 캘리브레이션, 그리고 SPA 뒤로가기 탐색 경험을 종합적으로 재설계했습니다.
1. 뷰파인더 1:1 센터 크롭 파이프라인 구축 (UX & Image Crop)
기존 모바일 웹 카메라 및 갤러리 업로드 로직은 뷰파인더 화면에서는 1:1 정사각형으로 표시되었으나, 실제 AI API로 제출할 때는 원본 4:3 / 16:9 이미지를 축소만 하여 전송했습니다. 이로 인해 유저가 중앙에 맞춘 과일 외에 진열대의 주변 과일이나 바닥 노이즈가 과도하게 포함되어 AI 판독 신뢰도가 떨어졌습니다.
- makeResizedImageData 모듈 개편: 카메라 캡처 및 갤러리 파일 업로드 모두 중심부 1:1 영역(sx, sy, cropSize)으로 자동 크롭
- AI 전송 데이터 동기화: 클라이언트 캔버스에서 잘라낸 중심 1:1 Base64 이미지만 백엔드 Gemini API 및 결과 카드에 전달
- 체감 효과: 과일 매대 현장에서 촬영 시 타겟 과일이 사진의 90% 이상을 차지하도록 정밀 포커싱
2. 마트 진열대 다중 과일 AI 프롬프트 및 스키마 튜닝 (Gemini Vision)
배경에 여러 수박이나 과일이 함께 보이는 마트 환경에서 기존 프롬프트는 `multiple_fruits`나 `not_fruit`을 반환하여 '과일은 아닌 것 같은데...'와 같은 유쾌 모드 멘트가 오발송되는 문제가 있었습니다.
- 핵심 대상 판단 규칙 적용: 배경에 여러 과일이 있더라도 화면 중앙(중심부)에 위치한 주 과일을 타깃으로 지정하여 status=ok로 정밀 분석 수행
- not_fruit 판정 엄격화: 사물(신발, 인형, 가구)이 중앙에 있을 때만 유쾌 모드로 전환되도록 제약 강화
- multiple_fruits 폴백: 다중 과일 감지 시에도 중앙 대표 과일의 품종을 추출하여 당도/신선도 별점과 체크리스트 정상 발급
3. 결과 화면 뒤로가기(Back Button) 재분석 방지 및 History Replace
결과 화면(/result)에서 브라우저 뒤로가기를 누르면 이전 /analyzing 경로로 돌아가며 세션 스토리지에 남은 동일 사진으로 AI 분석이 재실행되는 문제가 존재했습니다.
- 1단계: AI 분석이 성공/실패하는 즉시 sessionStorage.removeItem('fruitAnalysis')로 임시 사진 데이터 파기
- 2단계: 결과 이동 시 history.pushState 대신 history.replaceState를 적용하여 /analyzing 히스토리 스택 완전 제거
- 3단계: 결과 화면에서 뒤로가기 누르면 재분석 없이 깔끔하게 메인 홈(/)으로 직행하도록 UX 개선