기획자의 모바일 앱 뜯어보기 - DIGITAL iNSIGHT 디지털 인사이트
Know-how, UX & Design

기획자의 모바일 앱 뜯어보기

제가 왜 업데이트를 해야 하죠?

업데이트는 모바일 앱 운영에 필수적인 요소입니다. 이때 우리가 신경써야 할 부분은 버전별 OS 사용 현황인데요. OS는 하드웨어의 발전과 더불어 계속 버전업돼 왔죠. 자연스레 ‘디바이스-OS버전’이라는 경우의 수를 만들었습니다.

오랫동안 모바일 앱 서비스를 운영했다면 하위 OS를 사용하는 사용자가 존재할 수 밖에 없습니다. 하지만 어느 단계에 이르면 하위 버전에 대한 지원을 종료해야 할 때도 있습니다. 새로운 버전이 배포될 때마다 팝업 등을 통해 업데이트를 하라고 안내하는 것이죠. 그런데 문제는 업데이트 안내가 그리 친절하지 않다는 것입니다.

좌측부터 현대카드, 솜씨당, 기가지니 업데이트 메시지

[현대카드] 최신 버전이 출시되었습니다. 지금 업데이트 하시겠습니까?
[솜씨당] 업데이트 알림, 보다 나은 솜씨당 이용을 위해 지금 바로 업데이트 해주세요!
[기가지니] 안정적인 서비스 제공을 위해 최신버전으로 업데이트가 필요합니다. 기가지니앱 업데이트 후 이용해 주세요!

최신이라고 꼭 업데이트를 해야 하나? ‘보다 나은 솜씨당’이 구체적으로 뭐지? ‘안정적인 서비스’라면, 지금까지는 불안정했다는 걸까? 작더라도 의문이 생기게 할 필요는 없죠.

좌측부터 우리카드, KKday, 정육각 업데이트 메시지

[우리카드] 최신버전 앱이 업데이트 되었습니다. 앱 업데이트를 진행하지 않으면 사용이 불가합니다. 앱을 업데이트 합니다.
[KKDay] 새로운 버전이 있습니다. 1.57.0 버전으로 업데이트 하세요.
[정육각] 안정적인 사용을 위해 업데이트를 진행해주세요.

우리카드와 KKday는 요청보다는 명령조에 가깝습니다. 게다가 버전명은 사용자에게 별 의미가 없죠. 운영자 관점의 설명일 뿐입니다. 정육각의 콘셉트를 살려 ‘더 신선한 정육점을 만나보실 수 있습니다’ 같은 문구를 활용하면 어떨까요?

좌측부터 모두의 주차장, 쿠팡이츠, SK엔카 업데이트 메시지

[모두의 주차장]
새로운 버전이 출시됐습니다. (현재 버전과 최신 버전 안내)
[쿠팡이츠]
업데이트를 하면 더 원활한 서비스를 이용하실 수 있습니다.
[SK엔카]
“검색 관련 기능이 개선 되었습니다” → 어떤 기능이 개선 되었는지 안내
“업데이트 버튼이 활성화 되지 않을 경우 스토어 재실행 후 메뉴 – 내 앱/게임에서 업데이트 리스트를 새로고침 해주세요.” → 업데이트가 원활하게 작동하지 않을 경우에 대한 안내

‘주변 주차 정보를 더 편리하게 확인할 수 있게 서비스를 개선 했어요’나 ‘더 많은 장소에서 쿠팡 이츠를 만나보실 수 있도록 앱을 업데이트했어요’ 같이 앱 사용자가 필요성을 구체적으로 느낄 수 있게 안내해주면 어떨까 하는 생각이 듭니다.

SK엔카는 굉장히 구체적으로 업데이트 내용을 안내합니다. 그냥 ‘업데이트 해주세요’ 라고 해도 된다고 생각할 수도 있지만 이처럼 상세한 안내 메시지는 또 다른 역할을 할 수도 있습니다. 예를 들어 제가 전 회사에서 ‘특정 기능’에 대한 업데이트 안내를 팝업 형태로 게시했을 때, 업데이트 버전의 사용자들이 해당 기능을 더 많이 사용한다는 게 데이터로 확인됐습니다. 이처럼 업데이트 된 기능을 사용자에게 알리고, 한 번 이상 경험할 수 있는 연결고리로도 활용할 수 있는 것입니다. 사용자에게 업데이트라는 ‘귀찮음’을 ‘긍정적’인 경험으로 바꿔주는 역할도 하고요.

주차 앱에 차량을 등록할 때

최근 차를 바꾸면서 기존에 쓰던 주차 앱에 차량을 새로 등록했습니다. 안드로이드 오토에서는 현재 카카오내비만 지원되고 있어 (곧 티맵도 지원 예정) 카카오T 주차를 자주 활용했는데요. 차량을 등록하며 문득 다른 주차앱들은 어떤 폼 디자인을 활용하고 있을까 궁금해졌습니다. 그래서 카카오T, 티맵 주차, 모두의 주차장, 한컴의 파킹프렌즈 등 4개의 서비스를 간략하게 살펴봤습니다.

좌측부터 모두의 주차, 티맵 주차 자동차 등록 화면

[모두의 주차장] 공유 경제 기반의 주차 서비스입니다. 물론 일반 주차장 정보도 확인할 수 있습니다. 모두의 주차장에 차량을 등록하려면 두 가지 정보만 입력하면 됩니다. 차량번호와 닉네임. 간단하죠?

입력해야 할 정보는 아이콘으로 안내하고 있습니다. 차량번호 입력창 왼쪽을 보면 자동차 아이콘이 있죠. 아쉬운 점이 있다면 차량번호를 한 번에 등록해야만 한다는 점입니다. 차량 번호는 숫자와 문자로 조합돼 있어 한 번에 입력하는게 생각보다 번거롭네요.

플레이스 홀더 텍스트는 가이드 역할을 해야 합니다. 별도로 라벨을 활용해야 사용자가 정보를 입력하는 와중에도 어떤 내용을 넣어야 하는지 수시로 확인할 수 있죠. 그런데 모두의 주차장에서는 문자 입력 시 라벨을 확인할 수 없습니다. 물론 아이콘을 라벨처럼 활용하는 듯하지만, 차량 아이콘이 차량 번호 입력이라는 정보를 명확하게 전달하기는 어려울 것 같습니다.

[티맵 주차] 티맵 데이터를 활용할 수 있는 앱입니다. 카카오가 카카오T와 카카오내비에 주차기능을 넣은 것과 같은 전략이지만 별도 앱으로 출시한 부분이 다르죠.
다른 앱들에 비해 최근에 출시된 만큼 UI가 전반적으로 깔끔합니다. 그런데 차량정보 등록 영역은 기존 서비스들과 크게 다르지 않네요.

모두의 주차장이 두 가지 입력 폼을 활용했다면 티맵 주차는 네 가지 입력 폼을 활용합니다. 필수정보는 차량번호이며 선택정보는 제조사명, 차량명, 연료타입입니다. 선택정보는 티맵의 주행정보와 함께 맞춤형 정보로 활용하기 위해 넣어뒀다고 보면 될 것 같네요.

티맵 주차는 플레이스 홀더 텍스트 외에도 왼쪽에 ‘차량번호’라는 고정 라벨을 활용하고 있습니다. 현재 자신이 입력하고 있는 정보가 무엇인지 확인할 수 있죠. 다만 입력 창이 직사각형이 아닌 밑줄로만 표현되어 있어 입력 폼처럼 인식되지 않는다는 점은 아쉬웠습니다.

파킹 프렌즈 자동차 등록 화면

[파킹프렌즈] 한컴이 운영하는 주차 서비스입니다. 폼 디자인도 라벨도 플레이스 홀더 텍스트도 모두 적절하게 적용됐습니다. 차량 색상을 선택한다는 점이 눈길을 끌었는데요, 이 부분은 바텀시트 형태로 구현돼 있습니다. 왼쪽에서 색상을 보여주고, 우측에서 선택을 할 수 있는 구성입니다. 텍스트만 보고 선택하면 헷갈릴 수도 있는데 시각적으로 색을 보여주니 훨씬 수월하네요.

카카오T 주차 자동차 등록 화면

[카카오T 주차] 주인공은 마지막에 등장하는 법이죠. 개인적으로 가장 사용성이 좋았던 앱입니다. 차량 번호는 앞2-3자리 숫자와 가운데 한글 한 글자, 그리고 숫자 4자리로 구성되어 있는데요. 앞선 세 서비스는 이걸 한 번에 입력하도록 돼 있습니다. 반면 카카오T 주차는 세 단위로 나눠 입력하도록 폼을 디자인했습니다.
또 숫자를 입력할 땐 숫자 키패드, 문자를 입력할 땐 문자 키패드를 제공합니다. 상하로 입력 폼을 구성하지 않고 좌우로 입력할 수 있어 가이드 문구가 사라지더라도 다음 내용을 확인할 수 있습니다. 한 번에 입력하는 것보다 심리적으로 덜 부담스러운 방법이죠.

오늘의집은 왜 리뷰 영역을 개선했을까?

리뷰는 ‘지금 써보러 갑니다’ 블로그와 그룹, 페이지 등을 운영하며 가장 많이 다뤘던 기능 중 하나입니다. 리뷰가 없다는 건 판단 기준이 부족하다는 것을 의미합니다. 사용자는 구매에 필요한 정보가 부족하다고 판단할 수 있기 때문에 고려해야 할 사항이 많죠.

가장 중요한 건 리뷰가 계속 쌓일 수 있는 구조를 만드는 일입니다. 기존에는 퍼널의 끝에 결제 단계가 자리 잡고 있었죠. 이제는 결제 후 실 구매자 또는 사용자들이 자연스레 리뷰를 남길 수 있는 구조가 필요하게 됐습니다.

모바일 커머스 앱 기획자인 지인이 최근 결제 전환율과 함께 리뷰 전환율을 주요 지표로 활용한다는 이야기를 했습니다. 사용자들이 리뷰를 남기게 하는 방법이 결제를 하게 만드는 방법보다 더 까다롭게 느껴진다고도 하더라고요.

리뷰는 실제 구매에 영향을 미칠 수 있는 실질적인 정보가 돼야 합니다. 오늘의집 사례를 보면서 조금 더 구체적으로 얘기해보겠습니다.

(좌)업데이트 전, (우)업데이트 후

오늘의집이 얼마 전 리뷰 영역을 개편했습니다. 달라진 점은 크게 두 가지입니다. 첫째, 5점 기준으로 평균치만 보여줬던 기존 방식과 달리 1점에서 5점까지의 분포가 어떻게 되는지 상세하게 확인할 수 있습니다. 앞서 말한 실질적인 정보 측면에서 살펴보면 같은 평균 점수라도 분포도를 통해 더 구체적인 정보를 얻는 것이죠. 1점과 5점을 받아 3점인 것과 3점 3점을 받아 3점인 것은 전혀 다른 결정의 근거가 되기 때문입니다.

둘째, 제품 옵션이 여러 개일 때, 어떤 옵션에 대한 리뷰인지 확인할 수 있습니다. 예를 들어 기존에는 피크닉 세트라는 제품에 대한 리뷰만 볼 수 있었지만 이젠 선택1, 선택2 등 실제 구매한 상세 제품에 따라 리뷰를 볼 수 있게 된 것이죠. 이 역시 여러 구성으로 이뤄진 제품을 구매할 때 꼭 필요한 판단 기준이 될 수 있습니다.

요기요는 왜 테이크아웃 랜딩 화면을 변경했을까?

벌써 1년 전이네요. 작년 7월 즈음 배달의민족 테이크아웃 UI 변경에 대한 글을 남겼습니다. 지도 위에 표기된 음식점들을 아이콘으로 표기하고 기본 형태를 지도로 설정하면서 주변의 매장을 쉽게 확인할 수 있게 됐었죠.

요기요의 테이크아웃 UI 변경은 지난해 배달의민족의 업데이트와 유사합니다. 첫 번째 이미지는 업데이트 전 요기요의 테이크아웃 화면입니다. 사용자가 설정한 주소를 기준으로 가장 가까운 매장 순서로 리스트를 구성합니다. 필터를 통해 별점, 리뷰 개수, 할인율, 사장님 댓글 개수 등에 따라 리스트를 다시 정렬 할 수 있지만 기본은 역시 ‘거리’입니다.

(업데이트 전) 메인 화면 – 테이크아웃 선택 시 랜딩 화면

해상도에 따라 조금씩 다르겠지만 이 리스트 뷰로 볼 수 있는 매장은 고작해야 2~3개입니다. 내가 원하는 메뉴는…? 그냥 뭐… 스크롤을 마구마구 내리며 확인하는 수밖에… 물론 지도보기가 제공되지만 지도를 봐도 모든 매장을 다 똑같은 모양의 핀으로 나타내고 있어 하나씩 확인하지 않는 이상 어떤 곳에 어떤 매장이 있는지 알 수 없습니다.

(업데이트 후) 메인 화면 – 테이크아웃 선택 시 랜딩 화면

다음 이미지를 볼까요? 배달의민족과 같이 지도를 먼저 확인할 수 있게 됐습니다. 음식점과 카페 등으로 지도 내에서 구분할 수 있게 됐고요. 어디에 위치하고 있는지에 따라 재검색도 가능해졌습니다. 목록은 이제 지도의 다음 뎁스에 자리 잡고 있네요.

저는 개인적으로 유선 노트보다 무지 노트를 좋아합니다. 선이 있으면 쓸 때부터 일정한 형식에 맞춰야 할 것 같은 느낌이 들기 때문입니다. 비캔버스 같은 툴이 나왔을 때 환호했던 것도 제 마음대로 정리하는 습관 때문이었고요. 리스트 뷰와 지도 뷰도 이런 차이를 가진다고 생각해요. 정해진 리스트에서 고르는 게 아니라 지도를 보고 ‘판단’하는 과정을 거치는 거죠. 그러고 보니 기존에 썸네일을 크게 가져갔던 리스트도 더 많은 음식점을 확인할 수 있도록 구성이 변했네요.

Comments
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts