React로 스마트 카트 시스템 개발하기 (기획부터 개발까지)

스마트 카트 시스템이란?

앱 디자인 화면

# 쇼핑하기 전, 집에서 !

- 집에서 마트에서 사야 할 물품의 리스트를 작성한다.

- 사용자가 리스트에 상품을 추가하면, 추가한 상품을 토대로 비슷한 상품을 사용자에게 추천한다.

 

# 쇼핑 중, 마트에서 !

- 사용자가 작성한 물품 리스트의 위치를 토대로 최적의 경로를 추천해준다.

- 사용자가 해당 물품이 있는 장소로 이동하여, 바코드를 스캔하면, 해당 상품이 장바구니에 담긴다.

- 바코드 스캔이 완료된 상품들끼리의 가격을 합산하여 결제창으로 넘어간다.

 

 

시스템 구성도

시스템 구성도는 다음과 같이 구상하였으나, 구매한 바코드 스캐너의 버전이 라즈베리 파이와 맞지 않아 부득이하게 컴퓨터와 연결하여 진행하였다.

 

 

컨셉, UIUX 디자인 이미지

- 디자인은 팀 컨셉인 "우아한 자매들" 에 맞춰 배달의 민족 어플을 많이 참고하였다.

- 캐릭터와 마트 지도는 직접 그려서 디자인 했다.

- 앱 아이콘과 컬러는 Material - UI Design Components 를 사용하였다.

 

제작 기간, 역할

#. 3월 ~ 6월 중순까지 약 3개월 동안 기획과 개발까지 진행하였다.

#. 진행 인원 : 4인

#. 역할

- 서버 구축 및 데이터 베이스 설계/관리

- 장바구니, 리스트, 상품 상세 페이지 프론트엔드/백엔드 구현

- 실내 도면 제작

- 최적의 경로 알고리즘 고안/구현

- 물품 카테고리 분류

 

 

개발 환경

#. 사용언어

- JavaScript

- SQL

- JSON

 

#. 환경 도구

- Visual Studio Code

- AWS

- Heidi SQL, My SQL

- Node JS

 

---

상품 확인 & 상품 검색하기

 

- Heidi SQL에 총 24개의 상품 등록

- 등록된 상품들의 리스트를 확인할 수 있고, 원하는 상품을 검색할 수 있다.

 

리스트 확인 & 상품 세부 정보

 

- 아무것도 담기지 않은 채, 우측 상단의 리스트를 클릭하면 아무것도 담기지 않았음을 확인할 수 있다.

- 다시 메인 화면으로 이동하여 자세히 보고 싶은 물품을 클릭하면 물품의 이미지, 가격, 수량, 상품 정보를 확인할 수 있다.

 

 

추가된 리스트 확인 & 상품 추천

 

- 화면 하단의 추가하기 버튼 클릭시, 상품을 리스트 목록에 추가한다.

- 리스트 화면으로 이동하면 해당 상품이 추가된 걸 확인할 수 있다.

- 다시 메인 화면으로 나가면, 같은 카테고리의 "과일" 상품인 참외를 추천하는 것을 볼 수 있다.

 

 

리스트에 담긴 상품 삭제

 

- 리스트에 담긴 물품들의 위치를 기반으로 사용자가 장을 봐야하는 순서, 최적의 경로를 확인할 수 있다.

- 스캔하기 클릭시, 바코드를 스캔할 수 있는 창이 띄워지며 바코드를 스캔하면 리스트에서 해당 물품이 삭제되고, 장바구니에 추가된다.

- 만약,물품 리스트를 삭제하고 싶을 경우 오른쪽 X 아이콘을 클릭하여 리스트에서 곧바로 해당 물품을 뺄 수 있다.

 

 

리스트 기반 경로 안내

 

- 리스트에 담긴 물품의 위치를 토대로 입구에서부터 사용자가 카트에 담아야 할 물건의 순서와 경로를 추천해준다.

- 하단의 최단 우선을 선택 할 경우, 입구를 기준으로 사용자가 마트에서 최단 거리로 쇼핑할 수 있는 경로와 물건의 위치를 안내한다.

- 하단의 최적 우선을 선택할 경우, 깨지거나 상하기 쉬운 물품은 나중에 담을 수 있도록 최적의 경로로 안내한다.

- 여기서 사용자가 지도가 안내하는 곳으로 이동하여 리스트에 담긴 상품을 바코드로 스캔하면, 해당 상품은 리스트에서 삭제되고 장바구니에 담긴다.

- 장바구니에서는 담긴 물품의 총 합계 금액을 알려준다.

 

 

경로 알고리즘 원리 설명

- 다음과 같이 상품 카테고리 별 임의로 경도와 신선도 레벨을 정한 후, 데이터 베이스에 카테고리 별 "레벨"을 저장해둔다.

 

저장된 데이터 베이스

 

바코드 스캐너와 상호작용

우선 이런식으로 바코드 스캐너로 각 바코드를 스캔하면, 해당 110~150(영문)에 해당하는 문자로 인식한다.

해당 문자는 DB에서 PK로 지정하여, 해당 기본키를 기준으로 sql문을 작성하여 해당 상품을 생성, 삭제, 검색이 가능하게 구현하였다.

 

 

소스코드 주소

https://github.com/2un-light/SmartCartApp

GitHub - 2un-light/SmartCartApp

 

참고 강의

https://www.youtube.com/watch?v=_yEH9mczm3g&list=PLRx0vPvlEmdD1pSqKZiTihy5rplxecNpz

 

피드백

- localhost 로 서버를 구현했다는 점이 좀 아쉬웠다.

- 만약 발전시킬 기회가 있다면, 최적의 경로를 추천하는 알고리즘을 좀 더 체계적으로 구현해보고 싶다는 생각이 든다.

- 또한 마트 내부 지도를 그림으로만 보여지는 게 아니라 휴대폰 GPS 기능을 사용해서 사용자가 실시간으로 이동하는 모습을 확인할 수 있도록 구현하면 더 좋았겠다 라는 생각이 들었다.

 

 

수상

최적의 경로 추천 알고리즘과 스마트 카트 시스템 아이디어에 관한 내용을 논문으로 작성해, 채택되어

대한 전기 학회 추계 학술대회 논문지에 실리게 되었다.