키오스크 UI 디자인 노하우
테이크아웃 커피 키오스크 UI 디자인 경험을 기반으로,
저는 테이크아웃 커피 로봇을 연구하고 운영하는 스타트업에서 프로덕트 디자인 총괄을 담당하고 있습니다. 2017년 가을쯤 개발에 착수하여 현재까지 리테일 시장에 적합한 키오스크로 업데이트 중이며, 다양한 상황에 맞는 일반적인 시스템을 만들기 위한 디자인을 계속 개발해 가고 있습니다. 이번글에서 저는 리테일 분야에 활용되고 있는 키오스크에서 음식을 주문하는 사용자의 여정에 맞춘 유즈 플로우는 무엇인지, 식음료 매장의 특징을 어떻게 키오스크에 반영해야 하는지를 소개하고자 합니다.
우리가 일상속에서 개인적으로 사용하는 터치 디스플레이 제품인 모바일 기기(스마트폰, 태블릿)와 키오스크는 형태적으로는 비슷하나 그것을 사용하는 이용자의 심리적, 물리적 상황은 그와 많이 다릅니다. 제가 생각하는 키오스크의 특징은 다음과 같습니다.
커다란 화면 앞에 서서 한 손가락으로 조작해야 하는 상황 (물리적)
처음 보는 화면으로 주문을 하고 있는 상황(심리적)
주문 이후에 음식을 받기까지의 안내(여정)
키오스크는 매장 내에서 이용하게 되는 UI입니다. 그것도 대기하는 사람들이 줄을 서서 주문하고 있는 나를 바라보고 있는 상황에, 한 팔을 전체로 사용하여 커다란 터치 스크린을 조작해야 합니다. 더군다나 매일 보는 화면이 아니기에 조작과 동시에 학습을 하며 전체적인 사용 맥락에 대해서 유추해야 합니다. 주문 이후에 안내 및 수령까지도 UX에 포함되어야겠죠, 음식 주문 과정과 사용자 입장을 고려한 경험 설계가 필요합니다. 특히나 디지털 소외가 문제로 대두되는 요즘, 키오스크 디자인은 사회 문제로까지 이어지는 중요한 문제라고 할 수 있습니다.
1. 커다란 화면을 한 손가락으로 조작해야 하는 상황
키오스크는 보통 스탠드나 벽면에 커다랗게 붙어 있는 경우가 많습니다. 사용자는 키오스크 앞에서 서서 손끝에 집중하여 커다란 사진들이 즐비한 메뉴판을 이리저리 조작합니다. 이때 중요한 것은 사람의 시각 인지 반영과 키오스크 디스플레이 크기와의 상관관계입니다.
https://story.pxd.co.kr/1332 < 키오스크 시야각에 대한 자세한 내용 >
일반적으로 키오스크 앞에 선 사람의 눈과 디스플레이의 간격은 50~70cm 내외입니다. 이때 손 끝을 팔로 조정하고 있는 사람의 눈은 손가락 끝에 집중하고 있습니다. 이러한 집중 상태에서는 메뉴판 전체가 눈에 들어오지 않기 때문에, 시야 범위 내에서 (대략 25 ~30센티 미터 정도) 다음 행동을 유도할 수 있도록 버튼의 위치가 기획되어 있어야 합니다.
디스플레이 크기도 중요합니다. 50인치 디스플레이는 전체를 한 번에 보는 것이 불가능합니다. 유즈 플로우상 목적별로 24인치 디스플레이를 분할하여 사용하는 것이 좋습니다. 즉 주문, 안내, 픽업 등 3가지 단계가 일반적인 매장이라면 50인치 디스플레이 하나보다는 3개를 활용하는 방안을 생각해 볼 수 있습니다. (특히 DT에 이런 점을 도입한다면 효과적일 것 같습니다.)
2. 처음 보는 화면으로 주문을 하고 있는 상황(심리적)
줄이 길게 늘어선 맥도날드매일같이 가는 식당이 아니라면 그곳의 키오스크는 처음 보는 디자인이겠죠, 다행히 혼자서 주문을 하는 상황이라면 느긋하게 찬찬히 살펴보면서 주문이 가능하겠지만, 뒤에 줄이 길게 늘어서 있는 상황이라면 빠르게 디자인을 이해하고 주문을 완료해야 할 것입니다. 그렇기 때문에 음식 주문을 위한 키오스크는 쉽고 간단해야 하며, 유저가 최초로 맞닥 뜨리는 화면에서 주문 완료까지의 판단 혹은 선택의 수가 적으면 적을수록 좋습니다. 그러려면 한 단계에 많은 정보가 보일 수밖에 없는데 자칫 잘못하면 정보를 탐색하는데 시간이 오래 걸릴 수 있습니다. 덜어낼 부분은 덜어내고 주문 완수라는 목표를 최우선으로 두어야 합니다. 이벤트, 세트메뉴, 멤버십 등의 부가기능을 과감히 모바일로 옮기거나 단순화시키는 것이 필요합니다.
얼마 전 기차역에서 겪었던 일입니다. 한 노부부께서 키오스크 앞에서 한참을 헤매시기에 사정이 딱해보여 도움을 드린적이 있습니다. 사정을 들어보니, 서울에서 익산을 가는 기차를 예매하는 게 아니라 익산에서 서울을 오는 기차를 예매하셨다고 합니다. 해당 기차표는 이미 시간이 지나 환불도 불가능한 상황이었습니다. 이런 디지털 소외를 막기 위해서 키오스크에 대한 사회 전반적인 문제 인식이 필요합니다. 단순 불편함을 넘어 사회 비용으로 감당해야 할 숙제이기 때문입니다.
그래서 저는 일반적인 키오스크는 노약자도 사용할 수 있게끔 디자인하고, 보다 우선순위가 낮은 기능이나 서비스는 모바일 앱이나 웹에서 제공하는 쪽으로 점점 개선되어야 한다고 생각합니다.
3. 주문 이후 음식을 받기까지의 안내
음식을 주문한 뒤 번호표 혹은 영수증을 가지고 픽업대에서 하염없이 기다린 경험 누구나 해보셨을 겁니다. 테이크아웃 매장에서는 번호표를 들고 직원의 안내를 받지만, 고속도로 휴게소에서 띵똥하는 소리와 함께 내 번호가 화면에 나올 때까지 오매불망 기다리신 적 한 번쯤 있지 않으신가요? 수많은 소음 속에서 음식을 먹는 사람도 곤역이거니와, 음식을 제공하는 식당과 받는 이 입장에서도 여러 불편함이 존재합니다.
1) 자리에 비치된 태블릿 PC
최근 들어 많은 설루션들이 개발되고 있습니다. 자리에서 직접 주문을 하는 태블릿이 비치되어 있고, 음식 주문과 결제까지 완료하면 이후 음식 제공까지 자리에 앉아서 받는 방식입니다. 이런 경우 줄을 서지 않아도 되는 상황이라 좀 더 느긋하게 주문과 결제가 가능하기에 다양한 부가기능을 추가할 수 있다는 장점이 있습니다.
2) 웹으로 키오스크 제공
매장 안에 들어가면 WIFI 혹은 QR코드로 웹페이지에 접속하여 간단한 본인 인증 이후 메뉴를 주문할 수 있도록 하는 기술이 개발되고 있습니다. 페이먼트가 가능한 핸드폰으로 찬찬히 메뉴를 보면서 주문 가능하기에 매장 입장에서는 객단가도 오르고, 키오스크 기기 비용도 줄이는 일석 이조의 효과를 기대할 수 있습니다. 거기에 더불어 음식 제조 과정까지 안내해주니 진동벨도 필요가 없죠
3) 배달앱의 포장하기 서비스
마지막으로 배달앱의 포장하기 서비스입니다. 매장에서 배달 플랫폼에 제휴를 하면 매장 내외에서 편하게 주문이 가능합니다. 테이크아웃 매장의 경우 키오스크보다 배달앱을 더 많이 사용한다는 점주의 인터뷰가 있을 정도로 최근 들어 확산되고 있는 서비스입니다.
여러 외식업 프랜차이즈에서 점주들에게 인건비 절약을 내세우며 키오스크를 판매하고 있습니다. 점주 입장에서는 고정비가 감소하겠다는 기대로 키오스크를 도입하지만 서비스 품질 하락으로 인한 부작용은 곧 매출 하락과 고객 수 감소로 이어집니다. 외식업 본사는 점주들에게 가맹비에 더해 수익과 렌탈료, 구독료를 받는데만 급급하기보다는 브랜드 이미지와 매출 향상을 위해서 키오스크 환경에 대해 좀 더 진지한 고민이 필요한 시점이라고 생각합니다.
키오스크는 막을 수 없는 흐름이라고 생각합니다. 지금보다 훨씬 창의적인 방식으로 진화할 것도 자명하다고 생각합니다. 스타벅스 사이렌 오더처럼 이미 그만의 공고한 생태계를 구축하고 실제 사업에도 크게 이익을 준 분야이니 만큼 앞으로도 무궁무진한 UX 사례가 나올 것으로 기대됩니다.
참고문헌
한동균, (2021). 식음료 매장의 무인 주문 키오스크 인터페이스 디자인 가이드에 관한 연구. 커뮤니케이션디자인학연구, 75, 331-342. (국문 연속간행물)
김종희, 이화세. (2017). 반응형 웹 그리드의 시지각 원리에 따른 시각중심. 한국디자인포럼, 56, 161-172. (국문 연속간행물)
장유나, (2022)무인 결제 키오스크 인터페이스의 구성요소와 그리드 시스템에 대한 연구 (한국디자인학회)
양여름, (2020)키오스크 이용 시 나타나는 시니어의 시선 이동 분석 연구 : 아이트래커를 활용하여
