기능 정의: 기존 텍스트 위주의 단순한 알림에서 벗어나, 상품 카테고리별(삼각김밥, 햄버거 등) 고화질 이미지를 알림 카드에 연동하여 매장 작업자가 폐기 대상 상품의 외형을 즉각적으로 인지할 수 있도록 돕는 직관적 UI 시스템 구축.
핵심 기술 적용:
1:1 이미지 DB 매칭 로직 도입: 단순히 상품명에 포함된 텍스트를 검색하는 임시 로직의 치명적 한계(예: ‘더큰참치마요 B’를 해산물로 오인식)를 극복하기 위해, 전체 상품 14종을 4개의 대분류로 세분화하고 각각의 정확한 이미지 경로를 매핑하는 객체(imageDatabase)를 프론트엔드에 설계 및 적용함.
AI 생성 로컬 리소스 최적화 연동: 외부 무료 이미지 API의 잦은 링크 소실(404 에러 등) 문제를 선제적으로 차단하고자, 생성형 AI로 자체 제작한 고해상도 편의점 상품 이미지 4종을 로컬 저장소(/img/)에 독립적으로 구축하고 연동하여 시스템 안정성을 극대화함.
예외 처리 방어망(Fallback) 구현: 신상품 입고 등으로 매칭되는 이미지가 없을 경우 화면이 깨지는 현상(엑스박스)을 방지하기 위해, onerror 속성을 활용하여 단정한 “No Image” 아이콘이 대체 렌더링되도록 UI 방어 코드를 작성함.
2. 실무 시나리오 테스트 결과
시나리오 구성: 데이터베이스 내 과거 누적된 가비지 데이터를 완전히 초기화한 후, 각 이미지 카테고리(샌드위치, 햄버거, 일반김밥, 삼각김밥)를 대표하는 4개의 최신 테스트 상품 데이터를 주입하여 카테고리별 이미지 렌더링 정확도를 검증함.
시스템 피드백 및 검증:
화면 확인 결과, 알림 탭 진입 시 4개의 테스트 상품(아이돌유닛샌드위치, 숯불갈비버거, 종가김치참치김밥, 더큰참치마요 B)이 각각의 카테고리에 맞는 고화질 이미지와 함께 오차 없이 렌더링 됨을 확인함.
특히 이름만으로는 분류 규칙을 적용하기 까다로웠던 ‘더큰참치마요 B’ 상품이 1:1 매칭 로직을 통해 완벽하게 삼각김밥 이미지로 표출됨을 증명함.
이를 통해 현장 작업자가 텍스트를 정독하지 않고도 시각적 이미지만으로 폐기 대상을 직관적으로 식별할 수 있게 되어, 폐기 수거 작업의 속도와 정확도를 대폭 상승시키는 UX 개선 효과가 검증 완료됨.
3. 향후계획
폐기 상품 ‘원클릭 일괄 폐기’ 기능 및 상태 관리 고도화
기능 정의: 이번에 구축한 타겟팅 수거 UI와 연계하여, 알림창에 뜬 여러 개의 폐기 상품을 하나씩 개별적으로 처리해야 하는 불편함을 해소하고자 함. 한 번의 클릭 조작으로 리스트에 있는 모든 폐기 대상 상품의 DB 상태를 ‘expired’로 일괄 업데이트할 수 있는 UI 배치 및 백엔드 API 통신 로직을 설계하여 실무 작업의 효율성을 극대화함.
