📝변경사항
→ 키오스크 학습을 위한 소프트웨어를 제작하는 것이 목표였고 이를 더 재밌게 배울 수 있도록 하고자 게임의 형태로 제작하는 것을 초기 목표로 설정했다. 그러나 제작을 하면서 이것이 굳이 게임일 필요는 없다는 것을 깨닫게 되었다. 이 프로젝트의 목표는 ‘키오스크를 학습’할 수 있는 플랫폼을 만드는 것이며 그 플랫폼이 ‘언제, 어디서, 누구든지, 쉽게’ 접근이 가능한 것이었다. 사실 이 부분이 굳이 게임과 같이 구현되지 않아도 표현이 가능했다. 또한 주 사용계층을 디지털 약자로 설정하였는데 오히려 게임과 같은 요소들이 학습을 더 어렵게 할지도 모른다고 판단했다. 따라서 게임과 같은 요소들을 제외하고 최대한 간단한 UI 로 제작을 하기로 방향을 변경하였다.
📝 개발 내용
📌개발 언어: HTML, CSS, JS
📌개발 중 지키고자 했던 것
① 별도의 어플리케이션 설치 없이 돌아가야 한다. → 웹페이지로 제작
② 모바일 기기와 PC 에서 모두 이용 가능해야 한다. → 반응형 웹으로 제작 : 크롬의 개발자 도구에서 toggle device toolbar 을 이용하여 모바일 기기와 PC 에서 화면이 어떻게 보이는지 확인을 하며 제작을 하였다
( 스마트폰의 픽셀을 직접 지정해 확인도 가능하고 대표기기들은 이미 설정되어 있어서 바로 확인이 가능했다. )
③ 직관적인 UI, 큰 글씨, 그리고 되도록이면 모든 정보들이 한글로 표현이 되어야 한다.
( 첫 홈화면에 보이는 버튼을 최소화하였다. 글씨를 화면에 따라 크기를 조정하여 각 화면에서볼 수 있는 크기 중 큰 글자 크기로 설정하였다. )
📌개발 내용
A. 키오스크 학습모드
① 키오스크가 처음이라면? - 총 6단계로 키오스크의 핵심적인 UI를 학습할 수 있다.
: 키오스크 사용에 어려움을 느끼는 노년층을 대상으로 간단한 Q&A를 진행했다. 키오스크를 잘 사용하지 못하는 이유로 대부분이 ‘익숙하지 않음’이라고 언급했다. 한 번, 두 번 사용하면 익숙해져서 처음 할 때만큼 당황스럽지 않다고 이야기했다.
프랜차이즈 매장의 키오스크를 둘러보며 살펴본 결과 조금씩은 다른 부분들이 있었지만 대부분 키오스크의 UI는 비슷했다. 상단에는 메뉴바가 있어서 여러 카테고리의 메뉴를 볼 수 있고, 스크린 가운데에는 구매가능한 상품이 있다. 상품을 터치하면 좌측 하단에 메뉴가 담아지고 우측 하단의 결제하기 버튼을 눌러 결제가 가능하다. 키오스크의 스크린의 하단에는 카드를 꼽고 영수증이 출력이 되는 부분이 있다. 이렇게 대대수의 키오스크는 비슷한 UI를 가지고 있고 단지 그 매장에서 판매하는 상품에 따라 커피나 햄버거, 아이스크림 등 품목이 달라지는 것뿐이었다. 따라서 이런 키오스크의 기본적인 UI를 익히면 어떤 매장을 가더라도 키오스크를 사용하는 데에 도움이 될 것이라고 판단했다. 이 모드는 총 6 단계로 키오스크의 기본적인 UI에 대해 학습할 수 있도록 제작했다.
화면을 터치하면 다음 화면으로 넘어간다. 스크린의 전체 크기에 div를 만들어 해당 스크린 전체 중에 어느 곳이든 터치가 되면 다음 설명으로 넘어가도록 만들었다. 새로운 html을 하이퍼링크로 연결한 것이 아니라 한 html에서 모두 동작이 되도록 하기 위해서 JS로 화면전체 onclick에 해당하는 함수를 작성하여 이용하였다.
6단계를 모두 보면 학습을 완료했다는 알림이 팝업으로 뜨게 된다.
② [도전 - 초급] 모드 – 아메리카노 주문하기
: 키오스크를 직접 터치하여 조작하는 도전 모드이다. 첫 화면에는 음료를 주문하기 위해 거쳐야 하는 과정들이 나오고 화면 어떤 곳이든 터치하면 시작이 된다. 초급 모드는 키오스크 첫 화면에 바로 아메리카노에 해당하는 음료가 나온다. 아이스나 핫 아메리카노 중 하나를 택하여 (혹은 둘 다) 결제하기를 선택하여 결제를 완료하면 성공했다는 팝업이 뜨며 종료된다.
<키오스크가 처음이라면?> 모드와 마찬가지로 하나의 html에서 동작을 구현하기 위해서 JS로 각 버튼의 클릭에 대한 함수를 작성했다. 아무것도 선택하지 않고 결제도 가능하다. 이 경우에는 아메리카노를 주문에 실패했다는 알림이 뜨게 된다. 아메리카노 음료를 선택했을 때를 확인하기 위해 해당 버튼이 클릭 되면 int형 변수 index를 +1시켰다. 결제하기가 완료되었을 때 해당 index가 0이 아니고 증가되어 있다면 성공 메시지를 아니면 실패 메시지를 띄우도록 코드를 작성했다.
③ [도전 – 중급] 모드 – 카페라떼 주문하기
: 키오스크를 직접 터치하여 조작한다. 초급과 동일한 방식으로 진행되지만 첫 키오스크 스크린에 카페라떼에 해당하는 메뉴가 없다. 상단의 메뉴바를 넘겨보며 카페라떼 메뉴를 찾아서 주문을 해야 한다.
키오스크를 사용하기 어려웠다는 디지털 소외계층 중에는 원하는 메뉴가 어디 있는지 모르겠다고 의견이 다수 있었다. 이 중급 모드에서는 상단의 메뉴바를 넘겨가며 원하는 메뉴를 찾는 과정을 학습하고 연습할 수 있도록 했다.
B. 키오스크 시뮬레이터
◼실제 프랜차이즈 매장의 키오스크와 동일한 UI로 제작했다.
<메가커피>
◼ 상단의 메뉴바를 통해 카테고리를 변경할 수 있으며 메뉴를 선택하면 왼쪽 하단에 메뉴가 추가된다. 또한 오른쪽 하단에는 담은 상품에 맞는 금액과 개수가 뜨도록 제작했다.
◼ 결제 버튼을 누르면 결제 창이 뜨고, 결제가 완료되면 팝업으로 알려준다.
: 키오스크 시뮬레이터는 실제 키오스크 매장과 동일 한 화면을 직접 경험해 봄으로써 키오스크에 대한 두려움을 줄이기 위해 고안되었다. 학습모드에서는 키오스크를 처음 배우는 단계이기 때문에 2x2로 총 4개의 상품을 표시했지만 실제 키오스크는 보통 한 화면에 더 많은 상품이 보인다. 이 시뮬레이터에서는 현실에서 한 번에 여러 상품이 떠서 당황하는 일이 발생하지 않도록 미리 체험해 볼 수 있는 경험을 제공한다.
📌프로젝트를 마치며
: 이 프로젝트는 손쉽게 집에서도 키오스크를 학습할 수 있는 웹페이지를 제작함으로써 키오스크 매장이 많아지는 현실에 턱없이 부족한 키오스크 학습 플랫폼의 부재를 채워 디지털 소외 계층의 키오스크포비아를 감소시키고 디지털 격차를 줄이는 것을 목표로 삼았다.
초기 계획했던 것들을 제작했지만 이 페이지가 널리 알려진 것은 아니기에 실제로 디지털 소외 계층에게 도움이 되는지 확실히 알 수 없었다. 주변의 키오스크 사용에 어려움을 겪고 계시는 디지털 취약 계층 몇 분에게 해당 페이지를 소개해 드린 결과 “집에서 미리 키오스크를 눌러보고 매장에 갈 수 있어서 좋았다. 뒤에서 사람이 기다려서 항상 쫓기듯 주문을 해야 하는 것이 두려웠는데 여유롭게 키오스크를 살펴볼 수 있어서 좋았다” 등의 의견을 받을 수 있었다. 인터뷰를 진행한 소수의 사람들로부터 얻은 의견이지만 이를 통해 프로젝트의 목표를 달성했다는 것을 확인할 수 있었다.
웹파이썬프로그래밍 수업을 들으며 HTML의 기초적인 문법에 대해 학습을 하였지만 HTML과 CSS를 주로 사용하여 웹페이지를 제작했었다. 다른 페이지로 넘어갈 때는 새로운 HTML을 작성해 클릭을 하면 하이퍼링크로 연결이 되는 방식이었다. 그러나 이번에는 한 개의 HTML 안에서 동작이 이루어지도록 제작하기 위해서 JS에서 HTML의 특정 ID나 CLASS에 해당하는 부분의 CSS를 수정하는 작업을 거쳐야 했다. JS를 통해 CSS를 제어하는 부분이 익숙하지 않아 구현하는 것에 시간이 오래 걸렸던 것 같다.
또한, 한 개의 HTML에 작성을 하여 코드가 길어지다 보니 내가 작성한 코드임에도 이해하기 어려운 부분들이 있었다. 태그에 사용되는 id가 많아지다 보니 어떤 id가 사용되었는지 잊어버리고 이미 사용된 id를 또 사용하는 문제가 발생하기도 하였다. 당장의 편리함을 위해 짧은 id명을 짓곤 했는데 나중에는 이 id가 무엇인지 이해하지 못했다. 그 후로 추가로 작성하는 코드에서는 조금 길더라도 나중에 보았을 때 명확하게 이해할 수 있는 id로 작성했다. 또한 html에서 버튼을 클릭하여 JS의 함수를 사용하는 경우에도 함수의 이름을 나중에 다시 보아도 이해할 수 있도록 작성하기 위해 노력했고, JS 상에도 함수의 적절한 주석을 작성하였다.
이번 프로젝트를 진행하면서 코드를 이해하기 쉽게 작성할 필요성을 깨달을 수 있었다. 혼자서 진행했던 프로젝트임에도 코드가 길어지니 이전에 작성을 했던 부분에 명확하지 못한 변수명이나 함수가 등장하면 이를 이해하기 위해 다시 읽는 과정을 겪어야 했다. 여러 명에서 함께 프로젝트를 진행하게 될 때, 팀원들은 물론 나 자신에게도 시간을 단축해주고 이해도를 높이기 위해 코드를 이해하기 쉽게 작성하는 것은 필수적인 것을 느꼈다.
📌추가적으로..
데모 사이트에서 피드백을 받은 결과, 학습모드에서 글씨가 많은 페이지에서는 글이 잘 눈에 들어오지 않는 다는 의견이 있었다. 이에 TTS기능을 통해 음성으로도 설명이 출력되도록 수정할 계획이다. 디지털에 익숙하지 않은 소외계층에게는 글씨만 보는 것보다는 음성을 함께 출력해 설명을 하는 것이 더 이해도를 높여 줄 수 있을 것이다. 또한, 도전모드에 기프티콘을 사용하는 방법이나 삼성페이와 같은 결제 방법을 학습할 수 있는 모드를 추가할 예정이다.