✅ Goal & Motivation

손쉽게 배울 수 있는 키오스크 학습 플랫폼을 제작하여 디지털 소외계층의 키오스크에 대한거부감과 지디털 격차를 줄이고자 프로젝트를 시작하게 되었습니다.

코로나로 인해 가속화되는 키오스크 주문 시대에 디지털 소외 계층과 그렇지 않은 사람들 간의 격차는 점차 벌어지고 있습니다. 최근 키오스크를 사용하지 못해 곤란했던 경험에 대한 뉴스 기사들을 자주 접하게 되었습니다.

무인 매장이나 사람이 있어도 키오스크로만 주문을 받는 매장들이 점점 증가하고 있습니다. 그러나 키오스크를 연습할 수 있는 방법들이 부족하다고 생각했습니다. 정부나 지방 자치단체에서 진행하는 여러 프로그램들이 있지만 직접 어딘가 장소를 방문하거나 신청을 해야 참여할 수 있어 불편함이 있었습니다. 이에 집에서도 손쉽게 실제 키오스크와 동일한 UI 를 체험해 보고 학습할 수 있는 플랫폼을 제작하게 되었습니다.

키오스크를 미리 접해보면 실제 매장에서도 손쉽게 주문을 할 수 있으며 키오스크에 대한 거부감이나 두려움도 줄어들 것이라고 예상합니다. 이를 통해 디지털 격차를 줄이는 것이 프로젝트의 목표입니다.



✅ More About the Project

✔ 지키고자 했던 것

- 별도의 어플리케이션 설치 없이 돌아가야 한다. → 웹페이지로 제작
- 모바일 기기와 PC 에서 모두 이용 가능해야 한다. → 반응형 웹으로 제작

: 크롬의 개발자 도구에서 toggle device toolbar 을 이용하여 모바일 기기와 PC 에서 화면이 어떻게 보이는지 확인을 하며 제작을 하였다

- 직관적인 UI, 큰 글씨, 그리고 되도록이면 모든 정보들이 한글로 표현이 되어야 한다.

✔ 키오스크 학습모드

- 키오스크가 처음이라면? -  총 6단계로 키오스크의 핵심적인 UI를 학습할 수 있다.

키오스크 사용에 어려움을 느끼는 노년층을 대상으로 간단한 Q&A를 진행했습니다. 키오스크를 잘 사용하지 못하는 이유로 대부분이 ‘익숙하지 않음’이라고 언급했습니다. 한 번, 두 번 사용하면 익숙해져서 처음 할 때만큼 당황스럽지 않다고 이야기했습니다.

프랜차이즈 매장의 키오스크를 둘러보며 살펴본 결과 조금씩은 다른 부분들이 있었지만 대부분 키오스크의 UI는 비슷했습니다. 상단에는 메뉴바가 있어서 여러 카테고리의 메뉴를 볼 수 있고, 스크린 가운데에는 구매가능한 상품이 있습니다. 상품을 터치하면 좌측 하단에 메뉴가 담아지고 우측 하단의 결제하기 버튼을 눌러 결제가 가능합니다. 키오스크의 스크린의 하단에는 카드를 꼽고 영수증이 출력이 되는 부분이 있습니다.

이렇게 대대수의 키오스크는 비슷한 UI를 가지고 있고 단지 그 매장에서 판매하는 상품에 따라 커피나 햄버거, 아이스크림 등 품목이 달라지는 것뿐이었습니다. 따라서 이런 키오스크의 기본적인 UI를 익히면 어떤 매장을 가더라도 키오스크를 사용하는 데에 도움이 될 것이라고 판단하여 총 6 단계로 키오스크의 기본적인 UI에 대해 학습할 수 있도록 제작했습니다.

화면을 터치하면 다음 화면으로 넘어갑니다. 스크린의 전체 크기에 div를 만들어 해당 스크린 전체 중에 어느 곳이든 터치가 되면 다음 설명으로 넘어가도록 만들었습니다. 새로운 html을 하이퍼링크로 연결한 것이 아니라 한 html에서 모두 동작이 되도록 하기 위해서 JS로 화면전체 onclick에 해당하는 함수를 작성하여 이용하였습니다.

6단계를 모두 보면 학습을 완료했다는 알림이 팝업으로 뜨게 됩니다.


✔ [도전 - 초급] 모드 – 아메리카노 주문하기
키오스크를 직접 터치하여 조작하는 도전 모드입니다. 첫 화면에는 음료를 주문하기 위해 거쳐야 하는 과정들이 나오고 화면 어떤 곳이든 터치하면 시작이 됩니다. 초급 모드는 키오스크 첫 화면에 바로 아메리카노에 해당하는 음료가 나옵니다. 아이스나 핫 아메리카노 중 하나를 택하여 (혹은 둘 다) 결제하기를 선택하여 결제를 완료하면 성공했다는 팝업이 뜨며 종료됩니다.


✔ [도전 – 중급] 모드 – 카페라떼 주문하기
키오스크를 직접 터치하여 조작이 가능합니다. 초급과 동일한 방식으로 진행되지만 첫 키오스크 스크린에 카페라떼에 해당하는 메뉴가 없습니다. 상단의 메뉴바를 넘겨보며 카페라떼 메뉴를 찾아서 주문을 합니다. 키오스크를 사용하기 어려웠다는 디지털 소외계층 중 에는 원하는 메뉴가 어디 있는지 모르겠다고 의견이 다수 있었습니다. 이 중급 모드에서는 상단의 메뉴바를 넘겨가며 원하는 메뉴를 찾는 과정을 학습하고 연습할 수 있도록 설정하였습니다.


✔ 키오스크 시뮬레이터
실제 프랜차이즈 매장의 키오스크와 동일한 UI로 제작했습니다.

상단의 메뉴바를 통해 카테고리를 변경할 수 있으며 메뉴를 선택하면 왼쪽 하단에 메뉴가 추가됩니다. 또한 오른쪽 하단에는 담은 상품에 맞는 금액과 개수가 뜨도록 제작했습니다.

결제 버튼을 누르면 결제 창이 뜨고, 결제가 완료되면 팝업으로 알려줍니다.

키오스크 시뮬레이터는 실제 키오스크 매장과 동일 한 화면을 직접 경험해 봄으로써 키오스크에 대한 두려움을 줄이기 위해 고안되었습니다. 학습모드에서는 키오스크를 처음 배우는 단계이기 때문에 2x2로 총 4개의 상품을 표시했지만 실제 키오스크는 보통 한 화면에 더 많은 상품이 보입니다. 이 시뮬레이터에서는 현실에서 한 번에 여러 상품이 떠서 당황하는 일이 발생하지 않도록 미리 체험해 볼 수 있는 경험을 제공합니다.


✅ Web Page
https://syiee.github.io/KIOSK/



✅ Skills & tools

✔ Web
- HTML, CSS, JS


✔ Pages
- GitHub