1. 금주 진행사항

• 기능정의: 실제 편의점 M3 스캐너 기기와 동일한 수준의 ‘초고속 연속 스캔 모드’ 를 도입하고, 직관적인 시청각 피드백 및 개별 항목 삭제 시스템을 구축하여 현장 작업자의 검수 효율과 정확도를 극대화함.
• 핵심 기술 적용:
  • 논블로킹(Non-blocking) 스캔 및 스마트 쿨다운 제어: 기존의 UI 흐름을 끊는 confirm 팝업과 카메라 pause 로직을 완전히 제거함. 대신 변수 상태 추적을 통해 ‘동일 바코드’에만 2초의 쿨다운을 적용하고, ‘다른 상품’ 스캔 시 딜레이 없이 0.1초 만에 즉각 인식되도록 비동기 처리 구조를 전면 개편함.
  • 시청각 피드백(Toast & Audio) 시스템 구현: 바코드 인식 성공 시 브라우저 내장 Audio 객체를 활용한 비프음(Beep) 피드백과, 동적 DOM 제어를 통한 비동기 토스트(Toast) 메시지 애니메이션을 구현하여 작업자의 시선 분산을 완벽히 방지함.
  • 검수 리스트 수정 UX 개선 (개별 삭제 기능 도입): 팝업창을 없애고 연속 스캔 속도를 높임에 따라, 작업자가 실수로 원치 않는 상품을 스캔했을 때 이를 취소할 방법이 없다는 치명적인 한계를 식별함. 이를 해결하기 위해 검수 목록 내에 ‘개별 항목 삭제(X) 버튼’을 새롭게 추가하였으며, 자바스크립트 배열 splice 연산과 동적 DOM 렌더링을 연동하여 쓰레기 데이터가 DB에 저장되기 전에 즉각적으로 삭제할 수 있는 안전망을 구축함.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 여러 종류의 신선식품(FF)이 대량으로 섞여 있는 입고 박스를 연속으로 빠르게 스캔해야 하는 실제 편의점 물류 하차 및 검수 환경을 모사하여 테스트 진행.
• 시스템 피드백 및 검증:
  • 작업자가 화면 팝업 터치 없이각기 다른 상품 3개를 1초 이내에 연속 스캔하고 리스트에 자동 추가되는 것을 확인.
  • 스캔 영역을 제한하던 UI 상자(qrbox)를 제거하여 풀스크린 인식 모드로 전환한 결과, 바코드를 카메라에 정밀하게 조준하지 않고 대략적으로 향하기만 해도 즉시 인식되어 작업 피로도가 대폭 감소함을 검증.
  • 잘못된 상품을 스캔하거나 오인식이 발생했을 때, 새롭게 도입된 [ X ] 삭제 버튼을 클릭하여 해당 항목만 리스트에서 깔끔하게 제거할 수 있음을 완벽하게 검증 완료함.

3. 향후 계획

• 텍스트 위주의 알림 시스템을 시각적으로 고도화하기 위해 ‘상품 이미지 DB 매칭 기술’을 도입할 예정. 이를 통해 알바생이 폐기 대상 상품을 글자로 읽는 것이 아니라, ‘타겟팅 수거 지시’ UI(해당 상품의 실제 이미지 표시)를 통해 직관적으로 찾을 수 있도록 시스템을 진화시킬 계획.

1. 금주 진행사항

GitHub 배포 및 최종 시스템 시연 결과 도출

• 기능 정의: 프로젝트의 전체 소스코드를 안전하게 버전 관리하고, 개발된 시스템의 활용성을 극대화하여 보여주는 투트랙(Two-Track) 시연 영상을 제작함.

• 핵심 기술 적용
  • Git & GitHub 형상관리: Node.js 프로젝트의 특성을 고려하여 .gitignore 파일을 작성해 용량이 큰 node_modules 폴더를 제외하고 핵심 소스코드만 원격 저장소(Repository)에 배포함.
  • ngrok 기반 외부망 포트포워딩: 로컬 호스트(localhost:3000)를 외부망으로 개방하여, 실제 모바일 기기(스마트폰)에서 시스템에 접속해 카메라 스캐너 기능을 사용할 수 있도록 실무 환경을 구축함.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 편의점 현장 업무(입고, 할인 판매)는 스마트폰으로, 관리자 업무(재고 확인, 폐기 처리, 대시보드 통계)는 PC(노트북) 화면으로 분리하여 종합적인 투트랙 시연 진행.

• 시스템 피드백 및 검증
  •  모바일 기기에서의 카메라 스캔이 지연 없이 즉각적으로 DB에 반영됨을 증명함.
  • 모바일에서 발생한 판매 및 폐기 트랜잭션이 실시간으로 PC 대시보드의 Chart.js 그래프(막대/도넛 차트)와 일일 매출액 표기에 동기화되는 것을 최종 검증 완료.

1. 금주 진행사항

마감 할인 알고리즘 검증 및 테스트 자동화 스크립트 구축

• 기능 정의: 유통기한 임박 시간에 따라 차등 할인(1시간 이내 50%, 2시간 이내 30%)이 적용되는 핵심 비즈니스 로직이 DB 및 서버 환경에서 정확히 연산되는지 검증함.
• 핵심 기술 적용:
  • 동적 테스트 데이터 주입 (Node.js): 현재 시각을 기준으로 만료 시간이 30분, 1시간 30분 남은 가상의 상품 데이터를 생성하여 MySQL DB에 자동 INSERT 하는 자동화 스크립트를 구축해 개발 생산성을 향상시킴.
  • 바코드 시간 디코딩 로직 검증: 18자리 바코드의 마지막 4자리(시간, 일)를 파싱하여 현재 시간과 비교(TIMESTAMPDIFF)하는 백엔드 쿼리의 무결성 확인.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 임의로 생성한 임박 바코드(예: 유통기한 오늘 16시, 17시)를 서버에 전송하여 할인율 분기 처리가 정상적으로 반환되는지 API 테스트 진행.
• 피드백 및 검증
  • 1시간 이내 상품 스캔 시 “50% 할인”이 적용된 결제 금액(sale_price)이 반환됨을 확인.
  • 2시간 이내 상품 스캔 시 “30% 할인” 로직이 정확히 분기되어 처리됨을 DB 데이터와 대조하여 검증 완료.

3. 향후 계획

• 시연용 최종 데이터를 세팅하고 프로젝트 소스코드를 GitHub에 배포하여 최종 시연 영상 제작 및 산출물 정리.

1. 금주 진행사항

• 기능정의: 스마트폰 카메라를 활용한 바코드 스캔 과정에서 발생할 수 있는 중복 스캔 오류를 방지하고, 직관적인 쿨다운(Delay) 시스템을 도입하여 현장 작업자의 사용성을 극대화함.
• 핵심 기술 적용:
  • setTimeout 기반 비동기 제어: 바코드 인식 성공 직후 카메라 모듈을 일시 정지(pause)하고, 사용자가 확인 팝업을 조작한 뒤 3초(3000ms)의 쿨다운 시간을 갖도록 비동기 함수를 설계함.
  • 무한 루프 스캔 방지 로직: 카메라가 켜져 있는 상태에서 동일한 바코드가 연속으로 인식되어 팝업창이 무한 생성되는 치명적인 UX 프론트엔드 버그를 완벽하게 해결함.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 모바일 기기를 통해 바코드를 스캔하고 수량을 조절하는 실제 편의점 입고 검수 환경을 모사하여 연속 스캔 테스트 진행.
• 시스템 피드백 및 검증:
  • 1회 스캔 후 3초간의 여유 시간이 확보되어, 작업자가 수량(+) 버튼을 누르거나 다른 상품으로 카메라를 이동시킬 때 오작동이 발생하지 않음을 검증 완료.

3. 향후 계획

• 백엔드(Node.js) 서버와 연동하여 시간대별 마감 할인 알고리즘에 대한 본격적인 API 테스트 및 자동화 검증 진행.

1. 금주진행사항

관리자 종합 대시보드 및 차트 시각화 기능 고도화

• 기능 정의: 기존에 표와 숫자 텍스트로만 제공되던 딱딱한 ‘판매 실적 리포트’ 데이터를 점주가 한눈에 파악할 수 있도록, Chart.js를 활용하여 직관적이고 세련된 형태의 종합 대시보드로 개편.
• 핵심 기술 적용:
  • Chart.js 라이브러리 연동 (script.js): 프론트엔드에 Chart.js를 도입하여, 백엔드(/api/analysis/daily)에서 받아온 데이터를 기반으로 캔버스(<canvas>)에 동적 차트를 렌더링. 날짜 변경 시 기존 차트 인스턴스를 안전하게 메모리 해제(destroy())하고 새 차트를 그리는 안정성 로직 구현.
  • 데이터 시각화 고도화 (누적 막대 차트 & 원형 차트):
    • 판매 vs 폐기 현황 (막대 차트): 초기 일반 막대 그래프 적용 시, 값이 0인 데이터의 빈 공간 때문에 X축 라벨(상품명)과 막대 위치가 어긋나 보이는 시각적 오류 발생. 이를 누적 막대 그래프(Stacked Bar Chart) 로 변경하고 최대 굵기와 중앙 정렬 옵션을 세밀하게 조정하여 가독성 및 매칭 정확도를 100%로 끌어올림.
    • 상품별 매출 기여도 (원형/도넛 차트): 11주차에 완성한 ‘마감할인 결제가(sale_price)’ 데이터를 총합산하여, 당일 전체 매출에서 각 상품군이 차지하는 비중을 도넛형 차트로 직관적으로 표현.
  • 직관적 UI/UX 설계 (index.html): 대시보드 상단에 그날의 ‘당일 총 매출액’을 보여주는 요약 카드 UI를 배치하여, 관리자용 시스템으로서의 완성도를 높임.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 차트 시각화의 정확성과 시각적 완성도를 확인하기 위해, 기존 판매 데이터에 **추가 모의 판매 데이터(더큰참치마요 A 1건, 숯불갈비버거 2건, 아이돌유닛샌드위치 1건)**를 주입하여 볼륨을 키운 후 테스트 진행.
• 시스템 피드백 및 검증:
  • 판매량과 폐기량이 혼재된 데이터 환경에서도 막대 차트가 X축 상품명 정중앙에 올바르게 위치함을 확인함.
  • 할인가(700원, 1800원 등)가 적용된 결제 금액들이 도넛 차트 비중에 정확하게 백분율로 반영되며, 당일 총 매출액 카드에도 누락 없이 합산 표기됨을 검증 완료.

3. 향후계획

• 완성된 대시보드와 기능들을 바탕으로 실제 모바일 기기(스마트폰) 연동 테스트를 진행하고, 현장 작업자의 시각에서 발생할 수 있는 UI/UX 불편 사항이나 프론트엔드 버그를 발굴하여 시스템을 더욱 고도화할 예정

1. 금주 진행 사항

임박 상품 자동 마감할인(Time Sale) 시스템 도입

• 기능 정의: 지난 10주차에 고도화된 폐기 골든타임 알림과 연계하여, 유통기한이 임박한 상품을 바코드로 스캔하여 판매 처리할 시 시스템에서 남은 시간에 따라 자동으로 차등 할인된 결제 가격을 적용. 무조건적인 폐기 대신 즉각적인 할인 판매를 유도하여 매장의 폐기 손실(Loss)을 최소화하고 수익 방어를 극대화하는 지능형 결제 시스템 구축.
• 핵심 기술 적용:
  • 데이터베이스 스키마 확장 (inventory 테이블): 판매 시점의 최종 결제 금액을 기록하기 위해 sale_price 컬럼을 신규 추가. 추후 매출 분석 대시보드에서 정가가 아닌 ‘실제 판매가’ 기반의 정확한 통계를 도출할 수 있도록 기반 마련.
  • 실시간 유통기한 추적 및 동적 할인 로직 (server.js): 판매 API(/api/sale) 호출 시, 현재 시각과 expiration_date를 비교(TIMESTAMPDIFF 활용)하여 분 단위로 남은 시간을 계산하는 알고리즘 구현.
    • 폐기 2시간 전 (120분 이하): 원가의 30% 자동 할인 적용
    • 폐기 1시간 전 (60분 이하): 원가의 50% 자동 할인 적용
  • 사용자 친화적 피드백 제공 (UI 고도화): 할인이 적용되었을 경우 “🎉 마감할인 50% 자동 적용!”과 함께 원가와 최종 결제가를 명확하게 팝업으로 표출하여 작업자의 인지 오류를 방지함.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 바코드 체계(HH+DD 포맷)를 완벽하게 준수한 테스트용 상품 데이터 8건을 유통기한이 다양하게 남은 상태(45분, 1시간 30분, 2시간 30분 등)로 데이터베이스에 주입하여 외부(스마트폰 기기) 환경에서 스캔 모의 테스트 진행.
• 시스템 피드백 및 검증:
  • 유통기한이 2시간 30분 남은 상품 스캔 시: 할인 로직 미발동, 정상가 결제 안내 팝업 확인.
  • 유통기한이 1시간 30분 남은 상품 스캔 시: 2시간 조건에 부합하여 정확하게 30%가 할인된 금액으로 팝업 노출 및 DB 저장 확인.
  • 유통기한이 45분 남은 상품 스캔 시: 1시간 조건에 부합하여 가장 높은 할인율인 50%가 할인된 금액으로 팝업 노출 및 DB 저장 확인.
  • 모든 트랜잭션이 데이터베이스의 sale_price 컬럼에 오류 없이 실시간으로 기록됨을 검증 완료.

3. 향후 계획

 관리자 종합 대시보드 및 차트 시각화

• 기능 정의: 현재 ‘분석’ 탭에서 단순 텍스트와 숫자로만 나열되어 제공되는 판매 실적 및 폐기 데이터를 Chart.js 라이브러리를 활용하여 막대그래프, 원형 차트 등으로 시각화.
• 기대 효과: 일일 판매량 흐름, 요일별 폐기율, 마감할인을 통한 손실 방어 금액 등을 점주가 한눈에 직관적으로 파악할 수 있도록 제공하여, 데이터 기반의 효율적인 발주 및 매장 관리를 돕는 완성도 높은 Admin 페이지 고도화 작업 수행 예정.

1. 금주 진행사항

폐기 골든타임(Golden Time) 알림 시스템 고도화

• 기능 정의: 기존 단일하게 발송되던 폐기 알림을 유통기한 남은 시간에 따라 3단계(관심, 주의, 골든타임)로 세분화하여, 매장 작업자의 업무 우선순위 판단을 돕고 관리 효율성을 극대화하는 지능형 모니터링 시스템 구축.
• 핵심 기술 적용:
  • 남은 시간에 따른 동적 렌더링: 클라이언트 단에서 유통기한 남은 시간을 계산하여 60분 미만(노란색/관심), 30분 미만(주황색/주의), 10분 미만(빨간색/골든타임)으로 UI 테두리 및 상태 뱃지를 다르게 표출.
  • Map 객체를 활용한 알림 단계(Stage) 추적: 단순 중복 방지를 위한 Set 객체 사용을 넘어, notifiedItems Map을 통해 각 상품별로 ‘발송된 최고 알림 단계’를 저장하고 추적.
  • 조건부 푸시(Push) 알림 로직 구현: 상품이 시간이 경과함에 따라 다음 단계(예: 관심 ➔ 주의 ➔ 골든타임)로 격상될 경우 이를 감지하여, 각 단계에 맞는 새로운 제목과 내용으로 브라우저 팝업과 사운드를 재발생시키도록 고도화.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 데이터베이스 내 기존 데이터를 초기화한 후, 유통기한이 각각 50분(관심 단계), 20분(주의 단계), 5분(골든타임 단계) 남은 3개의 독립적인 테스트 상품 데이터를 주입하여 단계별 시각화 및 백그라운드 푸시 알림 로직을 검증함.
• 시스템 피드백 및 검증:
  • 화면 확인 결과, 알림 탭 진입 시 3개의 테스트 상품이 각각 노란색, 주황색, 빨간색 카드 테두리와 직관적인 뱃지(🟡, 🟠, 🚨)로 정확하게 분류되어 렌더링 됨을 확인함.
  • ‘알림 켜기’ 버튼 활성화 즉시, 단계별 맞춤형 제목(“🟡 폐기 관심 (60분 미만)”, “🟠 폐기 주의 (30분 미만)”, “🚨 골든타임! (10분 미만)”)을 가진 팝업 알림 3개가 시스템 사운드와 함께 순차적으로 정상 표출됨.
  • 이를 통해 유통기한 임박 상품이 시간이 지남에 따라 더 강력한 경고를 제공하여, 실무 현장에서 폐기 처리를 절대 누락하지 않도록 돕는 3단계 촘촘한 방어망이 검증 완료됨.

3. 향후계획

임박 상품 자동 마감할인(Time Sale) 시스템 도입

• 기능 정의: 이번에 고도화한 폐기 골든타임 알림과 연계하여, 유통기한이 임박한(‘주의’ 또는 ‘골든타임’ 단계 진입) 상품이 바코드로 스캔되어 판매 처리될 시 시스템에서 자동으로 20~30% 할인된 가격을 적용. 무조건적인 폐기 대신 즉각적인 할인 판매를 유도하여 매장의 폐기 손실(Loss)을 최소화하고 수익 방어를 극대화하는 자동화 할인 시스템 구축.

1. 금주 진행 사항

• 모바일 접근성 및 실시간 푸시(Push)/사운드 알림 기능 구현
  • 기능 정의: 매장 점주가 바쁜 업무 중이거나 창을 내려놓은 상태(백그라운드)에서도 중대한 알림(폐기 임박 등)을 놓치지 않도록, 즉각적인 사운드와 바탕화면 팝업을 통해 인지율을 높이는 스마트 알림 시스템 구축.
  • 핵심 기술 적용:
    • 브라우저 기본 Notification API를 활용한 데스크톱/모바일 푸시 팝업 연동.
    • Web Audio API(Audio 객체)를 활용하여 외부 파일 의존 없이 즉시 재생 가능한 경고 사운드 탑재.
  • 알림 제어 UI (Toggle) 구현: 헤더 우측에 “🔔 알림 켜기 / 🔕 알림 꺼짐” 버튼을 신설하여 점주가 알림 수신 여부를 자유롭게 통제할 수 있도록 사용자 경험(UX) 개선.
  • 지능형 알림 필터링 및 오작동 제어:
    • 너무 오래된 과거 데이터가 무분별하게 울리는 것을 방지하기 위해, 알림 대상을 ‘유통기한 만료 전후 1시간(-60분 ~ +60분)’ 이내로 엄격하게 제한함.
    • Set 객체를 활용하여 한 번 팝업이 전송된 상품은 중복으로 알림이 울리지 않도록 예외 처리 완료.
    • 폐기 등록이 완료된(상태 변경된) 상품은 API 단에서 원천 차단하여 불필요한 알람 발생 제거.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 백그라운드 모니터링 스크립트(1분 주기 Polling)가 작동하는 상태에서, 유통기한이 각각 30분, 45분 남은 가상의 상품 데이터를 데이터베이스에 삽입하여 실시간 감지 능력을 테스트함.
• 시스템 피드백 및 검증:
  • 알림 버튼을 켠 후 1분 이내에 시스템이 임박 상품을 감지하였고, 정확히 타겟팅된 상품에 대해 경고음(띠링!)과 함께 **”🚨 폐기 임박 경고! [상품명] 유통기한이 OO분 남았습니다!”**라는 브라우저 팝업 알림이 모니터 화면에 성공적으로 표출됨을 확인.
  • 이를 통해 매장 내 다른 작업을 하면서도 유통기한 관리에 공백이 발생하지 않는 능동형 스마트 점포 환경 검증 완료.

3. 향후 계획

• 폐기 골든타임(Golden Time) 알림 시스템 고도화
  • 기능 정의: 현재 단일하게 발송되는 폐기 알림을 시간에 따라 3단계로 세분화하여, 관리 효율성을 극대화하는 지능형 모니터링 시스템 구축.