키오스크 사용에 어려움을 겪는 중장년층과 노인층의 불편함을 해소하기 위해 현재 키오스크를 사용 중인 프렌차이즈 및 매장들의 키오스크 매뉴얼을 수집하여 연습할 수 있도록 도움을 주는 사이트 개발
① 로그인
로그인 버튼을 클릭할 경우 로그인 페이지로 이동합니다.
② 로그인 페이지 관리자의 아이디와 패스워드를 정확하게 입력한 경우 로그인 가능합니다.
③ 로그인 후 변경 사항 로그인에 성공할 경우 관리자 로그인 버튼이 관리자 페이지와 로그아웃 버튼으로 변경됩니다.
④ 연습할 키오스크 선택 연습할 키오스크를 선택하는 것으로 현재 구현된 KFC와 롯데리아 키오스크 연습이 가능합니다.
① 광고 페이지
- 롯데리아 키오스크에 처음 들어가면 보이는 화면으로 광고를 클릭하면 다음 페이지로 이동 가능합니다.
- 사용자가 다음에 어떤 행동을 해야 할지 모르는 경우를 대비하여 일정시간 동안 클릭 이벤트가 없으면 오른쪽 위에 툴팁을 통해 다음에 해야 할 행동에 관해 설명을 줍니다.
② 결제 방법 선택
- 사용자가 원하는 결제 방법을 클릭하면 다음 페이지로 이동합니다.
③ 메인 화면
- 카테고리를 클릭하여 원하는 카테고리로 이동 가능합니다.
- 메뉴를 클릭하여 주문 가능 만약 버거인 경우 ④으로 이동 합니다.
- 주문 목록, 전체 수량, 총금액을 확인할 수 있고 동일 제품의 개수를 늘릴 수 있습니다.
- 취소하기 버튼을 클릭할 경우 결제 방법을 선택하는 페이지로 이동합니다.
- 결제하기 버튼을 통해 결제 페이지로 이동 가능합니다.
④ 햄버거 단위 선택
- 버거만 버튼을 클릭할 경우 단품이 주문됩니다.
- 세트를 클릭할 경우 ⑤으로 이동합니다.
- 엑스 버튼을 클릭할 경우 주문 없이 ③으로 이동합니다.
⑤ 사이드 변경
- 카테고리를 클릭하여 원하는 카테고리로 이동 가능합니다.
- 디저트를 클릭한 경우 자동으로 음료로 이동합니다.
- 취소 버튼을 클릭할 경우 주문없이 ③으로 이동합니다.
- 선택 완료 버튼을 클릭한 경우 현재 클릭 된 정보를 토대로 주문합니다.
⑥ 결제 페이지
- 사용자가 주문한 내역과 총금액을 확인할 수 있습니다.
- 포장이나 매장 식사를 선택할 수 있습니다.
- 취소하기를 클릭할 경우 메인 화면으로 이동합니다.
- 모든 선택을 한 후 주문 완료 버튼을 클릭하면 주문이 완료되어 키오스크를 선택하는 페이지로 이동합니다.
① 메인 페이지
- 카테고리를 클릭하여 원하는 카테고리로 이동 가능합니다.
- 메뉴를 클릭하여 주문 가능합니다.
- 전체 삭제 버튼을 통해 모든 주문 내역을 지울 수 있습니다.
- 주문된 메뉴의 경우 수량 조절 가능합니다.
- 주문된 메뉴의 수와 총금액 확인 가능합니다.
- 메뉴 목록이 비어있는 경우 주문 버튼을 클릭하면 다음으로 못 넘어갑니다.
② 단위 선택
- 햄버거나 치킨을 클릭했을 경우 나옵니다.
- 사용자는 원하는 단위를 클릭 후 확인 버튼을 누르면 ③으로 이동합니다.
- 치킨의 경우 사이드의 변경이 없기 때문에 바로 주문되어 ①으로 이동합니다.
③ 변경 가능한 내용 확인
- 사용자가 선택한 단위에 따라 변경 가능한 내용이 다릅니다.
- 상단에 있는 플러스, 마이너스 버튼을 통해 수량 조절 가능합니다.
- 현재 선택된 메뉴의 금액을 확인할 수 있습니다
- 확인 버튼을 클릭할 경우 주문 목록에 내용이 추가되고 ①으로 이동합니다
④ 토핑 변경
- 조절하고 싶은 토핑의 플러스, 마이너스 버튼을 클릭하여 토핑 수를 조절할 수 있습니다.
⑤ 사이드 변경
- 원하는 사이드를 클릭하여 변경이 가능합니다.
- 선택된 사이드에 따라 추가 금액 적용됩니다.
⑥ 장소 선택
- 매장 또는 포장을 선택합니다.
⑦ 추천 메뉴
- 결제 전에 사용자에게 추가적로 메뉴 추천합니다.
- 중복 선택이 불가능합니다.
⑧ 주문 목록 확인
- 메인 페이지에서 주문한 내용과 추천 메뉴에서 선택한 내용이 모두 들어간 주문 목록을 확인할 수 있습니다.
- 최종 결제 금액 확인 가능합니다.
⑨ 결제 수단 선택
- KFC에서 제공하는 결제 수단을 확인 후 선택할 수 있습니다.
⑪ 결제 수단 및 결제 금액 확인
- 사용자가 선택한 결제 수단과 총 결제 금액을 확인할 수 있습니다.
⑫ 결제 확인
- 실제 키오스크에서는 결제가 이루어지는 화면이지만, 연습 사이트이기 때문에 확인 버튼을 통해 넘어갈 수 있습니다.
① 메인 화면
- 이미지 업로드할 때 드래그 앤드 드롭으로도 가능합니다.
- 카테고리 선택 후 메뉴에서 기존 메뉴를 선택한 경우 해당 메뉴의 수정이 가능합니다.
- 토핑 정보 부분에서 사용되는 토핑을 추가 및 변경이 가능합니다.
② 프로모션/할인 선택
- 여러 제품을 묶은 프로모션인지 가격 할인 행사인지 선택할 수 있습니다.
③ 프로모션 구성
- 묶음 상품을 만들 때 어떤 제품들을 묶을지 선택할 수 있습니다.
- 플러스 버튼을 통해 상품 목록을 늘릴 수 있습니다.
- 마이너스 버튼을 통해 선택했던 제품을 지울 수 있습니다.
④ 할인 적용
- 할인가 또는 할인율을 입력하여 적용 가능합니다.
⑤ 단위
- 햄버거의 세트에 감자튀김하고 콜라가 기본 구성품으로 있는 것처럼 공통으로 기본 구성품을 넣어주기 위해 사용합니다.
- 추가/삭제/수정 가능합니다.
⑥ 단위 추가/수정
- 이름 변경, 구성품 변경 가능합니다.
- 플러스 버튼을 통해 구성 품목을 늘릴 수 있습니다.
- 마이너스 버튼을 통해 구성 품목을 줄일 수 있습니다.
⑦ 관련 메뉴 설정
- 단위와 달리 기본 구성품이 없고, 같은 이름의 메뉴를 올릴 때 사용 합니다 . ex) 양념치킨 3조각, 양념치킨 5조각을 만들려고 할 경우 양념치킨을 관련 메뉴로 설정합니다.
① 메인 페이지
- 새로운 토핑을 추가 및 삭제가 가능합니다.
- 토핑 이름을 클릭한 경우 해당 토핑 수정 가능합니다.
- 토핑 이름을 통한 검색이 가능합니다.
- 토핑 다섯 개를 기준으로 페이지가 생성됩니다.
② 사용법 툴팁
- 물음표 부분에 마우스를 올릴 경우 사용법에 대한 툴팁을 제공합니다.
③ 이미지 미리 보기
- 사진 미리 보기란에 있는 아이콘에 마우스를 올릴 경우 해당 토핑에 적용되는 이미지 미리 볼 수 있습니다.
① 메인 페이지
- 새로운 카테고리 추가 및 삭제가 가능합니다.
- 카테고리에 이미지를 넣어야 하는 경우 이미지 넣기 체크 박스를 클릭 후 이미지 추가가 가능합니다.
- 카테고리 이름을 클릭한 경우 해당 카테고리 수정 가능합니다.
- 카테고리 이름을 통한 검색 가능합니다.
- 카테고리 다섯 개를 기준으로 페이지가 생성됩니다.
② 사용법 툴팁
- 물음표 부분에 마우스를 올릴 경우 사용법에 대한 툴팁을 제공합니다.
③ 이미지 미리 보기
- 사진 미리 보기란에 있는 아이콘에 마우스를 올릴 경우 해당 카테고리에 적용되는 이미지를 미리 볼 수 있습니다.
① 메인 페이지
- 해당 년도의 월별 키오스크 주문 성공률을 확인할 수 있습니다
- 모든 년도에 대한 키오스크 주문 성공률를 확인할 수 있습니다
- 사용자가 중간에 포기하고 나간 지점을 확인할 수 있습니다
- 주문에 성공한 사용자들 키오스크 난이도가 쉽다고 선택한 비율로 매장의 순위를 확인할 수 있습니다
다음 영상을 보면 사용자가 다음이나 완료 버튼을 클릭할 경우 다음 화면이 나타나고 취소 버튼을 클릭하면 이전 화면이 순서대로 보이는 것을 확인할 수 있습니다.
이벤트를 통해 해당 화면에 이전 버튼을 클릭할 경우 해당 화면을 하나하나 설정할 수 있지만 연결해야 하는 화면이 많고 다른 키오스크에 적용하려면 또 작업해야 하므로 선입후출인 스택 방식을 통해 관리했습니다/
해당 화면이 열릴 때마다 화면의 ID 값과 한글 이름을 리스트의 끝에 저장합니다. 그리고 툴팁 위치를 저장하고 타이머를 돌려주는 함수도 함께 사용합니다.
취소 버튼을 클릭한 경우 툴팁에 대한 타이머를 멈추고, 리스트의 가장 끝에 있는 값을 제거합니다. 제거한 값의 ID를 통해 화면을 안 보이게 설정하고, 다시 리스트의 가장 끝에 있는 값에 접근해서 화면에 보여줍니다. 마지막으로 툴팁도 가장 끝에 있는 값을 제거 후 위치를 저장하지 않고 타이머만 활성화합니다.
- 강제 종료
사용자가 종료한 시점을 알기 위해 종료에 대한 입력을 감지해야 합니다. 종료를 감지하는 코드를 추가한 후 정상적으로 작동하는지 확인했습니다.
다음으로 종료한 지점을 알아야 하기 때문에 리스트에 가장 마지막 값을 인자 값으로 넘겨주고, 종료 지점을 저장하는 코드 작성 후 종료 전에 ajax가 성공적으로 작동하는지 확인합니다.
실제로 새로 고침과 강제 종료를 시도했을 때 경고창의 확인 버튼을 누른 후 콘솔에 "확인"이 입력된 후에 새로 고침이나 종료가 이루어지는 것을 확인했습니다.
종료된 지점이 정확하게 저장됐는지 확인은 sqldeveloper를 통해 확인했습니다.
추가로 롯데리아에서 주문된 내용을 저장할 때 쿠키를 사용하기 때문에 쿠키에 관한 스크립트가 있으면 쿠키값을 제거하는 코드 추가했습니다.
- 주문 성공
주문에 성공할 경우 키오스크를 선택하는 페이지로 이동하는데 이동하기 전에 강제 종료에 대한 이벤트를 막아야 합니다. 그래서 마지막 설문을 클릭할 경우 강제종료를 막는 코드를 추가했습니다.
저장된 값도 종료 지점이 클리어고 설문한 내용도 정상적으로 저장된 것을 확인할 수 있습니다.
- 월별 성공률
해당 연도에 매달 성공률을 구하기 위해 각 연도에 따른 각 달의 종료 지점의 비율을 구한 후 거기서 사용자가 원하는 연도의 정보와 성공한 비율을 뽑아오는 방식으로 생각했습니다.
종료 지점들의 비율을 구하기 위해 PATIO_TO_REPORT를 사용했고, 소수점 둘째 자리에서 반올림하기 위해 ROUND를 함께 사용했습니다. 또한 해당 연도에 따른 달들의 비율이기 때문에 PARTITION을 통해 연도와 달을 한 번 더 묶었습니다.
그렇게 해서 나온 값 중 WHERE을 통해 사용자가 선택한 연도와 성공한 값만 뽑아오는 방식으로 필요한 값을 뽑아냈습니다.
- 전체 성공률
하나의 질의 문으로 성공률과 실패율을 동시에 얻기 힘들다고 생각해서 먼저 성공률을 질의 문을 통해 얻고 service 단에서 실수형 데이터 100에 성공률을 빼는 방식을 통해 실패율을 따로 구했습니다.
성공률을 구하기 위해서 해당 매장과 종료 지점으로 먼저 그룹으로 묶은 후 RATIO_TO_REPORT를 통해 종료지점들의 비율을 구했고 PARTITION을 통해 매장을 한 번 더 묶었기 때문에 각각의 매장들의 종료 지점 비율 값이 나오게 됩니다
이렇게 나온 데이터에 WHERE를 통해 해당 매장과 성공한 데이터 값을 뽑아 해당 매장의 성공률을 받을 수 있습니다.
- 사용자가 포기하는 구간
사용자들이 중간에 포기하는 구간과 그 수치를 알기 위해 종료 지점을 그룹으로 묶은 후 count를 통해 개수를 구했습니다.
마지막으로 WHERE을 통해 해당 매장과 성공하지 않은 데이터 값을 뽑아냈습니다.
- 사용자가 투표한 키오스크 난이도 순위
각각의 매장별로 사용자들이 선택한 난이도의 비율을 구한 후 쉽다고 생각한 유저들의 비율 값을 뽑아 매장들의 순위를 표시했습니다.
매장들의 난이도 비율을 뽑아내기 위해 난이도와 매장을 그룹으로 묶은 후 PATIO_TO_REPORT를 통해 난이도의 비율을 구했고 PARTITION으로 매장을 한 번 더 묶어 매장별 난이도 비율 값을 뽑았습니다.
마지막으로 쉽다고 투표한 비율을 뽑아내어 오름차순으로 정렬했습니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent