익숙한 키오스크의 앞글자를 따서 익키라는 이름을 사용하게 되었습니다.
기존의 키오스크 화면은 불필요한 화면전환이 많다고 생각되어 꼭 필요한 화면인 메뉴판만 넣어서 개발하게 되었습니다.
https://github.com/IKI-UMC/back-end
프론트 엔드 : React, Styled-Component
백엔드 : Java, SpringBoot, MySQL, AMAZONEC2
협업 툴 : Discord, Figma , Notion
만 55세 이상 고령층의 디지털 기술 이용 수준은 43.1점(100점 만점)으로 서울 시민 전체 평균 대비 32.7% 낮았으며, 75세 이상은 13.8%만이 키오스크를 사용한 경험이 있는 것으로 나타났다. (기사 발췌)*
→ 고령인구 비중이 확대됨에 따라, 키오스크 주문에서 어려움을 겪는 디지털 소외 현상이 지속적으로 발생하고 있다.
“주문을 못하고 매장을 나온 적도 있죠. 밖에서 보고 키오스크만 있으면 안 들어가요. 겁이 나서요. 정할 건 많은데 뒤에 줄이 서 있으니 마음은 급해지고…. 혼동되면 더 못해요. ‘미안한데 이 다음을 모르겠다’며 뒷사람의 도움을 받기도 했어요. 바쁠 땐 나 때문에 방해될까 미안해서 시도도 안 해요.” -김중현씨(80) (*기사 발췌)
→ 키오스크에 대한 두려움과 거부감으로 인해 사용을 꺼려는 현상 발생.
여러 기관에서 노인을 대상으로 키오스크 교육이 시행되고 있으며, 서울디지털재단은 고령층 친화 키오스크 적용 가이드를 만들어 배포하는 등 다양한 노력을 기울이고 있다.
→ 그러나 키오스크에 대한 두려움과 거부감을 없애고 근본적인 문제를 해결하는 데에는 한계가 있다.
이에 따라 기존 메뉴판을 그대로 옮긴 UI로 직관성을 높인 키오스크를 개발하게 되었습니다.
개발 기간 : 2023/07/07~ 2023/08/31
로그인&회원가입 페이지
아이디, 비밀번호를 입력해 로그인을 하고,
아이디, 비밀번호, 상호명을 입력 받아 회원가입을 진행합니다.
이후 진입페이지 에서는 주문 페이지와 관리자 페이지를 선택해 이동할 수 있습니다.
진입 후 로고를 여러번 눌러 페이지 간 이동이 가능합니다.
메뉴 이름 - 기본 가격으로 구성된 메뉴 리스트를 확인할 수 있습니다.
메뉴는 카테고리별로 나누어져 있으며 이름을 선택하면 상세 옵션 선택 창이 표시됩니다.
선택된 메뉴는 파란색으로 표시되고 하단에 총 금액이 나타납니다.
옵션의 이름과 가격이 표시됩니다.
상단에 현재 선택된 메뉴 이름이 나타납니다.
메뉴의 필수 옵션과 추가 옵션을 선택할 수 있습니다.
선택을 완료하면 메뉴가 장바구니에 추가됩니다.
하단 장바구니 열기를 누르면 현재 선택된 메뉴의 이름과 옵션, 가격, 수량이 리스트 형식으로 표시됩니다.
리스트 우측 삭제 버튼을 통해 장바구니 내 메뉴를 삭제할 수 있습니다.
결제 버튼을 누르면 포장/매장 선택 버튼이 표시됩니다.
포장하기 / 먹고가기 중 하나를 선택하면 결제 단계가 진행됩니다.
결제가 완료되면 주문 번호와 결제된 금액을 알려줍니다.
영수증을 받거나 포인트를 적립할 수 있습니다.
등록된 카테고리명은 리스트 형식으로 표시되며 수정하기 버튼을 통해 이름을 입력하고 수정할 수 있습니다.
화면 상단 카테고리 추가를 선택하면 리스트에 새 카테고리가 추가됩니다.
메뉴 조회를 통해 메뉴 관리 메이지로 이동할 수 있습니다.
상단에 있는 추가버튼에 연결되어 있는 팝업창을 이용하여, 카테고리를 추가 할 수 있습니다.
등록된 메뉴명과 가격이 리스트로 표시됩니다.
메뉴 추가를 통해 새 메뉴를 등록할 수 있습니다.
수정/품절관리 팝업창으로 이름과 가격을 입력할 수 있고, 품절 여부 체크 또한 가능합니다.
옵션 카테고리와 세부 내용이 표시됩니다.
카테고리 내 옵션 추가를 선택하면 해당 카테고리 리스트에 새 항목이 추가됩니다.
수정하기 팝업을 통해 옵션명과 가격을 입력 및 수정할 수 있습니다.
필수 카테고리에 체크하면 필수 옵션으로 등록됩니다.
로그인페이지 기능 구현, API 연동
결제진행 모든 페이지 기능 구현, API 연동,
관리자페이지 Update, Delete 기능 API 연동,
등 문서화, 코드 리팩토링 진행
https://www.notion.so/IKI-0b804dba91dc47d4aa32ebca97b9450dhttps://www.notion.so/makeus-challenge/efab7d0e700f4dbbad72b7b581abbf9f