[키오스크 개발 사례] 롯데마트 푸드코트 키오스크의 UI/UX 이야기 (1)

   블로그 첫 포스팅으로 롯데마트 푸드코트 키오스크 개발 사례를 올렸었습니다. 롯데마트에 구현했던 키오스크의 UI와 UX에 대해 좀 더 자세히 알아보겠습니다. 이번 포스트에서는 첫 화면의 디자인과 UI의 동작에 대해 얘기해 보겠습니다.

카테고리의 배치

   카테고리는 음식 코너를 선택하는 부분입니다. '전체메뉴'와 각각의 코너명이 이미지와 함께 보여집니다. 코너명을 선택하면 코너에 등록된 메뉴가 이미지, 가격, 메뉴명이 표시되고 '전체메뉴'를 선택하면 코너에 상관없이 전 메뉴가 모두 표시됩니다. 사실 '전체메뉴'를 표시하는 것에 대해서는 논란이 많았습니다. 코너를 일일이 선택한 다음 메뉴를 선택하는 것보다 전체메뉴를 모두 보여주고 화면 이동없이 바로 선택하는 것이 고객에게 편하다는 주장도 있었고 메뉴가 한꺼번에 보여지면 오히려 찾기에 더 힘들다는 의견이 팽팽히 맞섰습니다.

  개인적으로는 '전체메뉴' 표시에 부정적이었습니다. 고객이 이미 미라지 모형을 보고서 메뉴를 선택한 다음에 키오스크에서 주문하는데, 한꺼번에 다 보여지면 해당 메뉴로 이동하는데 너무 많은 페이지를 전환해야만 하고 결국 고객에게 불필요한 동작을 강요하는 듯 해서입니다. 하지만 고객사의 의견에 따라 '전체메뉴'를 넣는 걸로 결정이 났습니다.

   다음으로 논란이 되었던 게 카테고리의 표시 순서를 어떻게 하느냐였습니다. 처음 키오스크 프로그램이 구동되면 가장 첫번째 코너의 메뉴가 표시되는데 이게 업체 입장에서는 형평성에 어긋나지 않느냐 하는 점입니다. 그래서 각 코너를 일 단위로 로테이션시키기로 했습니다. 로테이션은 메뉴를 등록하는 프로그램에서(타사에서 개발) 순서를 변경하고 키오스크에서 매일 ftp로 내려받는 방식입니다.

메뉴의 표시와 이동 방식

   메뉴를 보여주는 데 있어서 가장 큰 이슈는 화면상에 몇개의 메뉴를 보여주느냐였습니다. 고려해야 할 사항이 여러가지 있었는데 우선 글자의 문제가 있었습니다. 폰트의 크기를 얼마로 할 것인가, 글자의 갯수는 몇개로 하고 몇줄로 보여줄 것인가 등입니다. 첫번쨰 시범 매장인 송파점은 전국에서 평균연령대가 가장 높은 곳인만큼 폰트 사이즈가 나이드신 분들이 보시기에 불편하지 않을 정도가 되어야 했습니다. 그리고 메뉴에 따라서 명칭이 긴 것들이 있어서 몇글자까지 보여주느냐 하는 점도 정해야 했습니다. 몇차례의 논의와 실제 구현된 결과물을 검토하면서 메뉴의 이미지 사이즈, 폰트 사이즈 등을 결정하고 메뉴 명칭도 입점업체와 협의해 글자 갯수를 조정했습니다.

   대부분의 키오스크처럼 롯데마트 키오스크도 OS로 윈도우를 사용합니다. 스마트폰이 대중화되면서 좌우로 스크롤링하는 화면의 전환 방식에 사용자들이 익숙해져 있는데 이걸 윈도우에서 구현하기는 좀 어렵습니다.(불가능한 건 아닙니다.) 시스템 리소스를 최대한 적게 쓰면서 스크롤될 때 부드러운 화면 전환이 이루어져야 합니다. 다행히 프로젝트 전 구현해 놓은 컴포넌트가 있어서 적용하는데 큰 문제는 없었습니다만 중간에 변수가 발생이 되었습니다. 바로 첫 페이지와 마지막 페이지에서의 이동 문제였습니다.

   무슨 얘기냐면, 예를 들어 우측으로 스크롤해 가다가 마지막 페이지에서 어떻게 처리하느냐 하는 문제입니다. 기존에 개발해 놓은 컴포넌트는 마지막 페이지에서는 우측 스크롤을 해도 더 이상 이동이 안됩니다.(첫 페이지일 경우에는 좌측 스크롤) 하지만 고객은 마지막 페이지에서 우측으로 스크롤하면 첫 페이지로 이동하도록 요청을 했습니다. 처리가 불가능하지는 않지만 문제는 시간이었습니다. 그렇지 않아도 이런 저런 이유로 계속 수정사항이 발생되면서 진척율이 답보상태였는데 이것까지 처리하기에는 무리라는 생각이 들어서 강력히 반대했지만 결국 논란 끝에 오픈 일정을 조정하고 요구사항대로 구현했습니다.(물론 이것 때문만은 아니고 여러가지 다른 변수가 있었습니다.)

장바구니

   장바구니에는 고객이 선택한 메뉴가 담김니다. 이때 선택을 잘못했거나 주문 수량을 바꿀 필요가 있을 때 어떻게 처리하느냐 하는 문제가 있습니다. 방법은 여러가지가 있을 수 있습니다. 메뉴에 직접 +/-를 넣어서 할 수도 있고 아니면 별도의 창을 띄워서 할 수도 있는데 롯데마트에서는 장바구니에서 직접 수량을 조정할 수 있도록 했습니다.

   그리고 장바구니에서는 총 4개의 메뉴가 보여지도록 했고 4개 이상이 되면 자동으로 다음 페이지가 생성이 됩니다. 페이지간 이동은 메뉴와 마찬가지로 좌우 스크롤로 할 수 있습니다.

결제

   결정이 어려웠던 부분 중의 하나가 결제 처리 방식이었습니다. 롯데마트에서 사용하는 결제수단은 현금, 신용카드, 교통카드, 모바일카드, 롯데멤버스 포인트 등이 있습니다. 애초에는 선택 단계를 하나라도 줄이기 위해 메인화면에서 결제수단을 모두 보여주고 바로 선택할 수 있도록 했는데, 결제수단의 종류가 많다 보니까 화면이 지저분해지기도 하고 버튼을 배치하기도 어렵고 버튼 사이즈가 너무 줄어드는 문제도 있어서 결국 결제 버튼 하나만 보여주고 버튼을 눌렀을 때 새로운 창을 띄워서 보여주기로 했습니다. (1차 개발에서는 현금, 카드, 포인트 결제만 포함했습니다.)

(계속 ...)