brunch

You can make anything
by writing

C.S.Lewis

by 서점직원 Oct 11. 2024

실전 UI/UX -
맥도날드 키오스크는 왜 불편할까?

다들 UI의 편리함에 대해서만 얘기하지 불편함에 대해서는 잘 얘기하려 하지 않는다. 그래서 준비했다. 최근 2~3년 동안 사용자 원성이 가장 높았던 서비스, 남녀노소 가리지 않고 입을 모아 말하는 불편한 사용자 경험의 대명사. 바로 키오스크 서비스다. 그중에서도 특히 맥도날드 키오스크는 불편하기로 악명높다. 그냥 불편한 수준을 넘어 국정감사에 언급될 정도니 말이다.

수많은 언론 보도, 국정 감사, UI/UX를 다루는 아티클에서 키오스크의 불편함에 대해 언급하지만, 키오스크가 어떻게 불편한지, 왜 불편한지에 대해 언급하는 사람은 아무도 없다. 그래서 준비했다.

맥도날드 키오스크는 왜 불편한 것이고 어떻게 개선할 수 있을까?

맥도날드 키오스크는 왜 불편할까?

맥도날드 키오스크의 불편함에 대해 알아보기 전 이미 고령화가 시작된 초고령 국가, 시니어들도 오래전부터 익숙하게 키오스크를 이용해 온 키오스크 강국, 일본의 사례를 먼저 살펴보자.

이치란 라멘의 식권 자판기 이미지 (사진 출처: https://blog.naver.com/10hee26_/223179755310)

일본의 키오스크는 직관적이고 단순하다.

1) 돈을 넣는다.

2) 원하는 메뉴를 누르면 메뉴와 교환할 수 있는 식권이 나온다.

3) 메뉴 선택을 완료하면 반환 버튼을 눌러 잔돈을 반환한다.

4) 구매한 식권을 가지고 자리에 앉은 후 식권을 종업원에게 전달하면 주문 완료.

사실상 키오스크라기보다는 자판기에 가까운 형태다. 메뉴명과 사진을 함께 표시해서 메뉴를 이해하기 쉽고 물리적으로 버튼이 있어 주문하기도 편리하다. (메뉴가 많은 식당은 메뉴명만 표시한다) 복합 주문이나 옵션 추가도 쉬운 편인데, 라면+계란 추가+맥주라는 주문을 처리하려면 라면을 눌러 라면 식권을 받은 후 계란 버튼을 눌러 계란 식권을 받고 맥주 버튼을 눌러 맥주 식권을 받은 후 3개 식권을 종업원에게 전달하면 계란이 추가된 라면과 맥주를 받을 수 있다. 가게에 따라서 자판기에 메뉴별 사이즈 구분이나 세트 메뉴를 구성하는 곳도 있다(라면S, 라면M, 라면L이나 라면+교자만두 같은 식으로). 처음 보는 사람이라도 쉽게 주문할 수 있게끔 자판기에는 숫자를 붙여 순서를 친절하게 안내한다(관광객이 많은 곳은 한국어나 영어 안내도 있다). 모든 자판기의 주문 순서와 작동 방식이 동일하기 때문에 기본적인 사용 순서와 방법만 이해하면 어떤 식당, 어떤 자판기에서도 헤맬필요 없이 쉽게 사용할 수 있는 것도 장점이다.

물론 구조상의 한계도 존재한다. 돈을 먼저 넣고 메뉴를 선택할 때마다 돈이 차감되는 방식이기 때문에 현금 결제만 가능하고 키오스크처럼 주방과 주문이 연동되는 방식이 아니라 뽑은 식권을 종업원에게 전달해야 주문이 완료된다(그래서 자판기가 대부분 식당 입구쪽에 있다). 메뉴가 많거나(이자카야) 선택지가 다양한 음식(써브웨이)에는 사용할 수 없는 방식이다.

자, 이제 본격적으로 맥도날드 키오스크를 분석해 보자. 맥도날드 키오스크가 불편한 이유는 크게 5가지다.

1) 너무 많은 광고 노출로 인한 시선 분산

2) 불필요한 터치 요소와 선택 옵션이 너무 많음

3) 불필요한 추가 선택 메뉴 강요

4) 이미지 크기에 비해 작은 텍스트

5) 복잡한 결제 절차

문제점1) 너무 많은 광고 노출로 인한 시선 분산

이건 맥도날드에만 해당하는 문제는 아니고 모든 키오스크에 해당하는 문제다. 그런데 맥도날드 키오스크가 다른 키오스크에 비해 유독 불편한 이유는 광고를 잘못된 방식으로 노출하고 있기 때문이다. 키오스크에서 광고 영역은 보통 신제품 홍보를 위해 사용된다. 여기서 잠시 맥도날드 키오스크의 광고 노출 영역을 살펴보자.

맥도날드 키오스크의 광고노출 영역

맥도날드 키오스크는 대기화면(첫 화면), 메뉴 선택 화면 2가지 영역에서 광고를 노출한다. 이 광고의 문제점은 광고가 너무 크고 눈에 띈다는 데 있다. 광고 요소를 빼고 비교해보자.

맥도날드와 KFC의 메뉴 선택 화면 비교

한눈에 봐도 차이가 느껴지는가? 맥도날드 키오스크는 다른 키오스크에 비해 디자인이 심플하다. 컬러도 최소화했고 쓸데없는 오브젝트나 디자인 요소를 사용하지 않는다. 이렇게 심플한 디자인에 화려한 컬러가 들어간 광고를 넣는다고 생각해 보자. 고객이 보기엔 어떨까? 밋밋한 메뉴 버튼보다 화려한 컬러의 광고가 먼저 눈에 들어오지 않을까?

‘오늘은 빅맥을 먹어볼까’하는 목적을 가진 고객이 키오스크에 접근했더라도 화려한 광고에 눈을 빼앗길 수밖에 없는 디자인이다. 물론 다른 키오스크에도 광고는 있다. 하지만 맥도날드 키오스크는 다른 키오스크들에 비해 디자인이 심플해 광고에 더 눈이 갈 수밖에 없는 구조다. 심플한 디자인+화려한 광고, 두 가지 요소가 결합되면 고객은 본래 목적보다 광고를 먼저 볼 수밖에 없게 된다. 인지 측면에서 혼란을 줄 여지가 생기는 것이다.

그렇다면 광고를 제거하는 것이 사용성을 높이기 위해 옳은 것일까? PM이라면 사용성뿐만 아니라 비즈니스적인 부분도 함께 고려해야 한다. 광고가 사용성을 다소 해칠지라도 매출 증대에 도움을 줄 수 있다면 없는 것보다 있는 것이 더 낫다.

‘오늘은 빅맥을 먹어볼까’하는 목적을 가진 고객이 창녕불고기 버거의 광고를 보고 ‘오, 저게 더 맛있어 보여 저걸 먹자’하고 메뉴를 변경한다면 비즈니스 관점에서 볼 때 두 가지 효과가 발생한다. 광고가 아니었다면 주문하지 않았을 신제품 홍보 효과, 그리고 원래 주문하려고 했던 빅맥과 신제품의 가격 차이(빅맥이 5,000원, 창녕갈릭버거가 7,000원이라고 가정할 경우)로 인한 매출 증대 효과가 그것이다. 비즈니스적인 효과를 알아보는 방법은 간단하다. 키오스크에서 광고가 터치되는 비율(클릭률), 광고를 통해 상품을 주문한 비율(구매 전환율)을 확인해 보면 광고의 효용성을 알아볼 수 있다. 하지만 우리는 내부 수치를 확인할 수 없으니 대략 추정해 보는 방법밖에 없다.

광고로 인한 매출 증대 효과부터 살펴보자. 그런데 여기에는 함정이 하나 숨어있다. 광고로 인해 매출이 늘어날 수도 있지만 반대로 줄어들 가능성도 존재하는 것이다. 5,000원짜리 빅맥을 먹으려던 고객이 광고를 보고 7,000원짜리 창녕갈릭버거로 메뉴를 변경한다면 2,000원의 매출 증대 효과가 발생하지만, 반대로 8,000원짜리 더블쿼터파운더를 먹으려던 고객이 광고를 보고 7,000원짜리 창녕갈릭버거로 메뉴를 변경하면 1,000원의 매출 감소 효과가 발생한다. 한 가지 케이스가 더 있다. 햄버거를 먹으려고 키오스크 앞에 선 고객이 맥플러리 광고를 보고 ‘날씨도 덥고 입맛도 없는데 햄버거 말고 아이스크림이나 먹을까?’라고 메뉴를 변경하면 오히려 매출이 감소한다. 키오스크의 광고는 사용성을 해치면서까지 할 정도의 효과가 있는지 증명하기도 어렵고 반대로 역효과가 날 가능성도 존재한다.

유형의 매출 증대 효과가 없다면 무형의 광고 효과는 어떨까? 광고로 인해 신제품이 대중에게 노출되고 인지도가 높아지는 효과 말이다. 그런데 이건 맥도날드가 신제품을 어떤 용도로 활용하는지, 즉 맥도날드의 신제품 활용 유형을 살펴볼 필요가 있다. 맥도날드 신제품은 크게 두 가지 스타일이다. 반응을 살펴보기 위한 시범 메뉴와 기간 한정 판매가 그것이다. 맥도날드는 신제품을 출시하고 고객의 반응이 좋으면 정식 메뉴로 전환하는 식으로 신제품을 일종의 테스트베드처럼 활용한다. 신제품을 발매하고 홍보를 통해 시장에 안착시키기보다 야생에 던져놓고 살아남는 것만 살리는 방식이다. 이런 신제품 출시 방식은 광고의 영향보다 입소문의 영향을 많이 받는다. 광고로 인한 신제품 홍보 효과가 크지 않다는 얘기다.

이를 증명하는 연구 결과도 있다. 연구에 따르면 키오스크 이용 시 시선 이동을 아이트래커로 체크하여 분석한 결과 광고 영역은 안내 문구 다음으로 이용자의 시선 이동 빈도가 낮고 시선이 머무는 시간도 짧았다. 연구에서는 광고 영역을 축소하고 메뉴 주문을 위해필요한 정보만 노출하는 것이 효율적이라는 실무적 시사점을 제시했다. 광고가 마케팅이나 매출, 사용성 면에서 큰 도움이 되지 않는 것이다.

“키오스크 이용 시 나타나는 시니어의 시선 이동 분석 연구: 아이트래커를 활용하여” 홍익대학교 대학원 디자인학부 양여름 / 2020

대기화면의 광고 영역도 마찬가지다. 대부분의 키오스크가 대기화면에 화려한 광고를 노출하며 소비자를 유혹한다. 키오스크의 광고 효과가 낮다면 굳이 전면에 광고를 노출할 필요가 없다. 키오스크의 본래 목적인 주문을 돕기 위한 보조수단으로의 역할에 충실하기 위해 대기화면에서 광고를 제거하고 사용성을 개선해 보자.

맥도날드 키오스크의 대기화면과 식사 방법 선택 화면

맥도날드 키오스크 대기화면에는 치명적인 문제점이 두 개 있다. 대기화면에서 다음 페이지로 이동하는 주문하기 버튼이 너무 작아 사용자의 눈에 띄지 않고, 광고를 너무 크게 노출해 정작 주문 과정에서 꼭 필요한 식사 방법 선택을 다음 페이지로 쪼개 놓았다는 것이다. 이는 사용자에게 불필요한 터치를 유발하는 구조다.

맥도날드 키오스크 대기화면의 사용성을 개선하려면 다음을 수행해야 한다.

1) 불필요한 광고 영역을 제거하고

2) 다음 페이지로 넘어가지 않아도 식사 방법을 선택할 수 있도록 Step 1과 Step 2 페이지를 하나로 합치고

3) 버튼 영역을 눈에 잘 띄고 터치하기 편한 위치에 배치한다.

말로 길게 어렵게 써놔서 그렇지 사실 개선 방법은 쉽다. Step 1을 없애면 된다. Step 2 화면이 저 모든 요건을 충족하고 있으니 말이다.

서점직원의 대기화면 개선안

위 그림은 앞에서 설명한 내용을 바탕으로 변경한 개선안이다. 크게 바꾼 것은 없고 몇몇 문구와 디자인만 살짝 변경했다. 우선 사용자 입장에서 딱딱한 한자어 대신 사용자 친화적인 쉽고 편한 대화체로 문구를 변경했고 용어는 용례에 맞게 변경했다. AS-IS에서는 ‘식사’라는 단어를 타이틀의 ‘식사 방법을 선택해 주세요’와 ‘매장에서 식사’ 2개 영역에 사용하고 있는데, 이때 ‘식사’라는 용어의 성격이 각자 다르므로 직관적이고 이해하기 쉬운 용어로 변경했다(주문, 먹기). ‘테이크아웃’이라는 외래어는 시니어를 고려하여 ‘포장하기’라는 용어로 대체하고 버튼의 크기를 조금 키우고 아래에 있는 언어 선택을 위로 배치했다. ‘매장에서 먹기’와 ‘포장하기’ 버튼이 가운데보다 살짝 위에 있는 이유는 사용자의 눈높이와 터치 위치를 고려한 것이다. 사용자의 눈높이와 터치 위치를 고려했을 때 사용자가 보고 터치하기 쉬운 위치는 가운데보다 조금 높은 위치가 좋다(AS-IS도 버튼이 중앙보다 살짝 위에 위치해 있다). 버튼은 컬러를 넣지 않고 선택 시 테두리로 처리했는데, 버튼에 컬러를 넣으면 사용자의 눈에 띄고 터치해야 한다는 무언의 시그널을 주게 된다. 그래서 미리 선택되어 있는 언어는 선택되었다는 표시로 노란색 테두리를 넣었고, ‘매장에서 먹기’, ‘포장하기’ 버튼은 자유로운 선택을 위해 특별한 디자인 요소를 넣지 않았다.

문제점2) 불필요한 터치 요소와 선택 옵션이 너무 많음

맥도날드 키오스크로 햄버거를 주문하려면 총 몇 번의 터치를 해야 할까? 실제 키오스크화면을 보면서 몇 번의 터치가 필요한지 살펴보자.

맥도날드 키오스크에서 햄버거 세트를 주문할 때 주문 플로우

맥도날드 키오스크에서 햄버거를 주문하려면 총 8번의 Step, 7번의 터치가 필요하다. 과정 자체도 복잡하고 터치해야 할 것도 많아 고객 입장에서 맥도날드 키오스크는 이용하기에 불편하다고 느낄 수밖에 없다. 그런데 맥도날드 키오스크가 이런 UI가 된 데는 나름의 이유가 있다.

햄버거는 선택지가 많다. 단품, 세트 선택부터 세트라도 M 사이즈인지 L 사이즈인지, 사이드 메뉴는 감자튀김을 먹을 것인지 코울슬로를 먹을 것인지, 콜라는 일반 콜라인지 제로 콜라인지 등 어떤 것을 선택하느냐에 따라 조합이 무궁무진하다.

시니어들이 유독 패스트푸드 키오스크 이용을 어려워하는 이유도 이런 햄버거의 특성에 기인한다. 선택할 수 있는 옵션이 많기 때문이다. 맥도날드 키오스크가 유독 터치가 많고 복잡한 것은 사용자가 모든 옵션을 선택할 수 있게끔 펼쳐놓았기 때문이다. 좋게 말하면 다양성을 존중한 것이고 나쁘게 말하면 사용자에게 불필요한 터치를 유발하는 구조라고 할 수 있다. 맥도날드 햄버거 세트 주문 플로우를 살펴보면 철저히 한 페이지에서 하나의 기능만 선택할 수 있게 설계되어 있다. 앞 장에서 언급한 One Page, One Thing을 충실히 따른 디자인이다. 물론 이건 Bad Case다.

선택해야 하는 요소도 많고 그것을 하나하나 다 쪼개 놓았으니 당연히 페이지도 많고 복잡해질 수밖에 없다. 단적인 예로 Step 3의 단품/세트 선택과 Step 4의 미디움/라지 선택은 사실 한 페이지에 합쳐 놓아도 선택에 큰 무리가 없는 화면이다. 한 페이지에서 하나의 기능만 배치해야 한다는 강박이 이런 UI를 만든 것이다. 꼭 기억하자. 한 화면에 하나의 기능을 배치하는 것이 중요한 게 아니다. 유기적으로 이전 페이지와 다음 페이지가 연결되도록 설계하고 비슷한 요소는 묶어 사용자의 불필요한 터치를 최소화하는 것 ,그게 One Page, One Thing의 핵심이다.

이제부터 본격적으로 Step을 하나씩 살펴보며 문제점과 개선 방안을 도출해 보자. 일단 앞서 언급한 단품/세트 선택과 세트 선택 시 미디움, 라지 선택 화면, 이 두 개 화면 은 성격이 비슷하니 한 페이지로 통합하여 불필요한 터치를 줄이고 일부 문구를 사용자 친화적으로 수정하자.

맥도날드 키오스크의 세트 선택 여부 화면 개선안

우선 단품/세트 여부와 사이즈 선택으로 분리되어 있는 화면을 한 페이지로 통합했다. 데이터에 따라 단품보다 세트 선택 확률이 높으면 단품을 아래로 내리고 세트를 위로 올리는 식으로 순서를 조정할 수 있게 블록 형태로 UI를 구성했다. 사용자의 이해를 돕기 위해 단품 선택이라는 모호한 명칭을 ‘햄버거만’, ‘세트 M’, ‘세트 L’로 변경했고 각 요소는 명칭과 가격 위치를 이미지 위로 변경했다. 사람의 시선이 위에서 아래로 내려간다는 것을 고려한다면 햄버거 단품과 세트는 이미지보다 텍스트가 상품의 속성을 명확히 인지하기에 적합하다는 판단 때문이다. 단품과 세트만 있다면 이미지만으로 단품과 세트를 구분할 수 있지만, 세트 M과 세트 L은 상품 이미지는 동일하고 사이즈만 다르기 때문에 이미지로 명확하게 구분하기가 어렵다. 마지막으로 미디움과 라지 세트는 고객의 이해를 돕기 위해 아래에 용량을 기재했다.

다음으로 사이드 메뉴와 음료 선택 화면을 살펴보자.

맥도날드 키오스크 세트 메뉴의 사이드 메뉴 및 음료 선택 화면

맥도날드 키오스크는 사이드 메뉴를 선택할 때 한 번, 음료를 선택할 때 또 한 번, 마지막으로 선택한 메뉴를 최종 확인할 때 한 번, 총 3번의 Step을 거쳐야 주문할 메뉴를 장바구니에 추가할 수 있다. 앞서 말한 전형적인 One page, One Thing 구조인데, Step을 줄이자고 사이드와 음료 선택을 한 화면에 합쳐버리면 고객 인지 측면에서 과부하가 걸리기도 하고 스크롤이 생겨 한 화면에서 모든 메뉴를 표시할 수 없는 문제가 발생한다(지금도 음료 선택에서 스크롤이 생긴다). 이는 햄버거 세트 메뉴의 선택지가 많기 때문에 생기는 구성상 한계이기도 하다. 그렇다면 단계나 터치를 최대한 줄이면서 고객이 원하는 메뉴를 쉽게 선택할 수 있는 방법은 없을까?

메뉴 구성상 한계가 있다면 발상의 전환으로 문제를 해결해보자.

햄버거 세트 메뉴를 선택할 때 꼭 사이드와 음료를 모두 선택해야 할까? 우리가 햄버거 세트 메뉴를 주문할 때 어떤 사이드 메뉴와 음료를 고르는지 한번 생각해 보자. 필자는 주로 사이드는 감자튀김, 음료는 콜라를 선택한다. 정확한 데이터는 없지만, 아마도 많은 사람이 사이드는 감자튀김, 음료는 콜라를 선택할 것이다(세트 메뉴의 근본이 콜라와 감자튀김이니까). 다른 것을 선택한다고 해봐야 제로 콜라를 선택하거나 오늘은 배가 부르니 감자튀김 말고 코울슬로를 먹어볼까 하는 정도가 사람들이 선택할 수 있는 일반적인 선택지다.

햄버거 세트 메뉴를 주문하는 사람 중 콜라 말고 환타를 고르는 사람의 비율이 과연 얼마나 될까? 사이드 메뉴를 감자튀김이 아니라 코울슬로로 선택하는 사람의 비율은 몇 %일까? 아마 필자의 추정으로는 콜라나 제로 콜라, 감자튀김을 선택하는 사람들이 최소 50%는 될 거라고 생각된다. 맥도날드 매장에서 이 구성 말고 다른 구성을 선택하는 사람을 거의 보지 못했으니까.

데이터상 세트 메뉴를 주문하는 사람 중 60%가 감자튀김과 콜라를 주문한다고 가정해 보자. 전체의 60%가 감자튀김과 콜라를 주문하는데, 감자튀김과 콜라를 기본값으로 설정해놓고 사이드와 음료를 변경할 수 있는 변경 버튼을 넣으면 최소한 60%의 사용자는 불필요한 사이드와 음료 선택 없이 세트 메뉴를 주문할 수 있을 것이다.

맥도날드 키오스크 세트 메뉴 선택 화면 개선안

UI/UX를 설계할 때 많은 사람이 실수하는 것 중 하나가 모든 이용자를 고려하여 UI를 설계하는 것이다. 그게 연령이든 취향이든 말이다. 모든 사람을 만족시킬 수 있는 방법은 없다. UI/UX는 확률 게임이다. 모든 사람이 불편하더라도 모든 이용자를 만족시킬 수 있는 UI와 소수의 사람만 불편하고 나머지 대다수 사용자가 편리할 수 있는 UI 중 하나를 선택해야 한다면 소수를 포기하고 다수를 만족시킬 수 있는 방법이 정답일 수 있다. 맥도날드 키오스크는 환타와 코울슬로를 선택하는 소수 사용자를 위해 콜라와 감자튀김을 선택하는 다수 사용자에게 불필요한 터치를 강요하고 있는 것이다. 선택과 집중, 기획자가 꼭 잊지 말아야 할 원칙이다.

자세한 내용은 서점직원의 신간 <실전 예제로 알아보는 서점직원의 실전 UI/UX>에서 만나보실 수 있습니다.