OKDK KIOSK

2023학년도 상명대학교 캡스톤 디자인

Final Presentation · Google Play Store

💁 프로젝트 소개

OKDK 프로젝트는 정보 격차를 해소하기 위한 안면인식 키오스크로, 매장에서 사용할 수 있는 키오스크 APP과 사용자가 키오스크와 연동하여 사용할 수 있는 MOBILE APP, 총 두 가지 서비스로 이루어져 있습니다.

디지털 취약 계층인 노년층에게도 OKDK 키오스크는 쉽게 다가갈 수 있습니다.

'쉬운 모드'를 두어 메뉴를 트리화하였고 사용자 친화적인 UI를 통해 메뉴 선택의 어려움을 덜었습니다. 안면인식 기술을 통해 주문-결제-적립 과정이 한 번에 쉽고 빠르게 이루어질 수 있도록 하였습니다.

다양한 매장에서 오키도키 서비스를 이용할 수 있습니다.

APP과 매장들이 api로 연결되어 각각의 모듈에 대한 코드 변경이 시스템 전체에 영향을 끼치지 않아 유지/보수가 쉽고 확장이 용이합니다.

🥤 프로젝트 기능

• KIOSK

1. 아두이노 센서 : 아두이노 센서가 적외선을 탐지하여 사용자가 가까이 다가갈 경우 대기 화면에서 얼굴 인식 화면으로 변화합니다.
2. 얼굴 인식 : 디바이스 전면 카메라에 얼굴을 비추면 사용자의 얼굴을 인식하여 가장 유사도가 높은 회원의 닉네임을 리턴합니다.
3. 키오스크 기본 기능 : 메뉴와 옵션, 수량을 선택하여 장바구니에 넣고 적립할 수 있는 기능이 있습니다.
4. 영수증 프린터 : 사용자가 주문을 마치면 디바이스와 연결된 영수증 프린터기에 주문 번호를 담은 영수증이 출력됩니다.

• MOBILE APP

1. 소셜 로그인 : oAuth2.0 프로토콜을 활용한 카카오 로그인, 네이버 로그인, 구글 로그인 3가지 종류의 소셜 로그인을 지원합니다.
2. 얼굴 등록 : 디바이스의 전면 카메라를 이용해 회원가입시 사용자의 얼굴을 등록합니다.
3. 모드 선택 : 키오스크에서 사용할 모드를 선택할 수 있습니다. (일반 모드 / 쉬운 모드)
4. 즐겨찾는 메뉴 등록 : 즐겨찾는 매장을 선택하고, 메뉴와 옵션 등을 선택하여 즐겨찾는 메뉴에 추가할 수 있습니다. 키오스크와 연동됩니다.
5. 카드 등록 : 결제에 사용할 카드 정보를 사진을 찍어서 혹은 수기로 입력할 수 있습니다.
6. 결제 내역 확인 : 키오스크에서 결제한 내역을 확인할 수 있고, 최근 3월 사용량과 평균을 시각화 하여 제공합니다.
7. 설정 : 이전에 등록한 얼굴 데이터를 수정하거나 로그아웃, 탈퇴를 할 수 있습니다.

🛠 기술 스택

Front-End

• JavaScript ES6, React, React Native
• styled-components
• navigation, chartjs-2, icons, async-storage, react-native-camera
• Aws EC2

🗺 아키텍쳐

없나요?

🎥 시연 영상

연결좀요

👨‍👩‍👧‍👦 팀원들

팀장 / 백엔드	백엔드	프론트엔드	프론트엔드	프론트엔드	디자인
jomulagy	walloonam	kimyeonchul	master1st	jeeeyoungkim	2oooo914
김지훈	임재훈	김연출	윤석현	김지영	조유진