🏷 모바일 앱에 적합한 정렬과 필터는?

정렬과 필터 기능의 중요성

구독자님 오늘 살펴볼 기능은 정렬과 필터 기능이에요.

(에디터 🐳) 사용자가 원하는 리스트(결과)를 가장 빠르게 만나볼 수 있는 대표적인 방법은 필터와 정렬을 활용하는 것입니다. 대부분의 서비스가 리스트 내 필터와 정렬 기능을 활용하는 이유이기도 한데요. 오늘은 항공권 예약 서비스를 기준으로 각 기능이 어떻게 구현되어 있는지, 어떤 방법을 활용하는 것이 더 사용자에게 직관적인지 자세히 살펴보려고 합니다.

(에디터 🐥) 많은 서비스에서 필터와 정렬은 사용자들의 취향과 결과값에 쉽게 도달하기 위한 편의 기능으로 제공되고 있어요. 그 중 커머스는 구매까지 쉽게 도달할 수 있도록 유도하는 기능이 되기도 하죠. 오늘은 커머스 내 필터와 정렬을 살펴보고, 구매까지 어떻게 유도 하는지 살펴볼게요!

(에디터 🐱) 평소 자주 사용하지만 의식하며 사용하진 않았던 금융권 서비스! 같아 보이지만 정말 다른 금융 서비스와 필터를 제공하는 형태, 필터 선택 시 결과값이 어떻게 다른지 함께 살펴보도록 할게요! 은행은 카카오뱅크와 우리은행, 페이는 카카오페이와 페이코, 카드는 현대카드와 롯데카드로 나눠서 살펴보도록 할게요~

오늘 소개할 서비스

주요 서비스 사례

필터 및 정렬 기능

저는 플레이윙즈, 트립닷컴, 카약, 스카이스캐너 등 4개 항공권 예약 서비스에 적용된 정렬과 필터 기능을 살펴봤어요. 자세한 내용을 확인하기에 앞서, 필터와 정렬 기능을 어떻게 이해하고 바라봐야 하는지 정리해보고자 합니다. 아래 내용에 따라 분석 내용을 함께 보시면 더 많은 도움이 될 거에요!

두 기능의 개념부터 간단하게 살펴보면, 정렬은 보이는 리스트 즉 결과의 순서를 바꾸는데 초점이 맞춰져 있어요. 인기, 최신, 추천 등 서비스 정책에 따라 조건을 설정, 사용자들이 더 편리하게 리스트 순서를 변경해 볼 수 있도록 제공됩니다. 커머스에서는 가격이나 판매순, 리뷰 등록순 등 더 세부적인 조건이 제공 되기도 하고요.

필터도 리스트에 영향을 주지만 순서를 바꾼다기 보다, 원하지 않는 결과를 뺀다는 점에서 정렬과 조금 다릅니다. 우리가 여행을 위한 숙소를 예약할 때를 생각해보면, 원하는 숙박 유형이 있고, 가격 범위가 있고, 수영장, 스파 등 원하는 시설이 있는지 하나씩 따져보게 되는데요. 호텔, 10만원대, 스파 포함 이런식으로 원하는 조건에 맞는 리스트만 볼 수 있게 해주는 것이 필터의 역할이라고 할 수 있어요.

다만 이 둘을 각각 활용하는 경우는 거의 없어요. 정렬은 가격이 높거나 낮은순으로만, 한 가지 조건만 적용할 수 있기 때문인데요. 그래서 필터를 함께 제공해 사용자가 원하는 조건과 순서에 따라 빠르게 리스트를 볼 수 있도록 하는 경우가 많습니다.

플레이윙즈

플레이윙즈는 2009년 설립된 온라인 여행 예약대행사(OTA) 타이드스퀘어의 종속회사 중 하나입니다. 항공권 특가 알림을 제공해주는 서비스로 카카오가 2018년 347억원을 투자, 2대 주주로 있는 곳이기도 해요.

플레이윙즈를 통해 김포에서 제주로 가는 노선을 검색해봤습니다. 리스트 상단에는 제가 설정한 기간과 필터 정보 확인 및 선택이 가능하며, 하단으로 출발, 도착 항공편을 확인할 수 있어요. 정렬 기능이 리스트에 적용되어 있지 않아 어떤 조건에 따라 기본 리스트가 구성되는지 알 수 없기에 우선 필터 화면을 확인해봤어요.

(1)정렬 기능이 필터와 함께 선택할 수 있도록 구성되어 있습니다. 추천순 정렬이 기본이라는 사실을 이제서야 알게 되었네요. 정렬 조건 아래로 직항/경유,  항공사, 출발 및 도착 시간 등 다양한 필터를 확인할 수 있습니다. 정렬과 필터가 한 공간에 있어 조건에 따른 리스트를 다시 정렬하기 어려웠어요. 예를 들어 대한한공과 아시아나항공 두 항공사를 선택 후, 최저가순으로 먼저 본 뒤 추천순으로 리스트를 정렬하기 위해서는 필터 화면으로 다시 돌아와야 하기 때문입니다.

(2)출발 및 도착, 소요시간 등을 쉽게 선택할 수 있는 건 좋지만, 하루 기준 시작과 끝 시간에 대한 정보가 잘 보이지 않는다는 점도 아쉬웠어요. 24시간 기준이라는 건 잘 알지만, 보통 자정이나 새벽 이른 시간에는 비행기가 출발하지 않기에 이를 바탕으로 기본값을 설정하거나, 시간에 해당하는 텍스트를 더 진하게 표현했다면 어땠을까 싶어요. ‘적용하기’ 버튼과 시간 조절에 적용된 컬러가 동일하다는 점도 비슷한 톤의 다른 컬러로 활용하면 더 구분하기 쉽지 않았을까요?

(1)플레이윙즈는 ‘텍스트’로 필터 적용 전,후 상태를 안내하고 있어요. (적용 전)필터 - (적용 후)필터 적용됨 으로 말이죠. 그리고 적용된 필터를 ‘X’버튼으로 한 번에 해제할 수 있습니다. 텍스트로 구분은 가능하지만, 적용되었다는 사실을 배경 컬러 등의 변화로 더 적극적으로 안내해주는 방법도 고려해볼 수 있지 않을까 싶어요.

트립닷컴

트립닷컴은 1999년 상하이에서 시작, 2003년에 나스닥에 상장한 온라인 여행사(OTA)입니다. 곧 홍콩증시에 상장한다는 소식도 있고, 중국에서는 50% 이상의 점유율을 갖고 있는 곳이에요. 아직 모르시는 분들도 많지만 스카이스캐너를 인수해 운영하고 있습니다.

트립닷컴에서도 저는 김포-제주 노선 항공권을 검색해봤어요. (플레이윙즈는 날짜가 4월로 되어 있지만, 트릿닷컴 이후에는 모두 동일하게 5월1일 - 5일 간으로 검색했습니다) (1)리스트에서 가장 먼저 눈에 띄었던 점은 제가 선택한 기간과 동일한 기간의 항공권 평균 가격을 보여준다는 점이었어요. 날짜 선택을 다시 하지 않고도 이전, 다음주 일정에 해당하는 가격을 볼 수 있어 좋았습니다. (에어비앤비는 왜 날짜 선택시 1,3,7일 단위로 추가 가능할까? : https://bit.ly/3tbue5D)

뒤에서 다시 살펴볼 예정이지만 필터와 정렬 기능이 각기 다르게 적용되어 있는 점도 확인할 수 있었어요. 먼저 필터를 살펴보면, (2)플레이윙즈에서 아쉬움으로 언급했던 시간 정보가 상대적으로 뚜렷하게 구분되는 점을 알 수 있었어요. (3)또 항공사 등 원하는 조건을 선택하는데 있어 가격 정보를 함께 제공해줘 선택이 훨씬 편리했습니다.

가격 정보가 필터 내 제공되어 동일 조건을 적용하는데 있어 필터 화면을 2번 이상 보지 않아도 되는 편리함을 사용자는 그대로 느낄 수 있게 됩니다.

(1)가격 정보가 선택한 조건에 따라 제공되는 점은 좋지만, 선택지가 많지 않은 필터를 적용하기 위해 화면을 한 번 더 이동해야 하는 건 불편했어요. 특히 항공기종은 2개 중 하나를 선택하는데 (국제선으로 눈을 돌려도 기종이 확 늘어나진 않아요) 이 정도면 앞 화면(리스트에서 필터 선택 시 처음 보게 되는 화면)에서 내용을 펼쳐 확인하는 것으로도 충분하지 않을까 하는 생각이 들었습니다.

(2)필터가 적용되었다는 점은 적용되지 않았을 때와 다른 배경 컬러를 적용해 쉽게 확인 할 수 있었어요. 게다가 몇 개의 필터가 적용되었는지 숫자로 확인할 수 있어 적용여부와 개수를 언제든 볼 수 있도록 구성되어 있습니다.

앞서 살짝 말씀드린 것처럼 (1)트립닷컴은 정렬과 필터를 리스트 내 각각 설정할 수 있어요. 필터를 설정한 후, 리스트로 돌아와 5가지 조건에 따라 정렬 할 수 있습니다. (2)선택한 값이 하나이기에 선택한 내용을 바로 확인할 수 있고요. (저는 출발시간을 선택했는데 이 정보가 바로 적용되어 있네요) 화면을 이동하지 않아도 되니, 원하는 리스트가 아닌 경우 정렬 기준만 바꿔 리스트를 빠르게 갱신할 수 있어요.

필터와 정렬기준에서 아쉬운 점도 있어요. 둘은 모두 드롭다운의 모습을 갖고 있는데요. 드롭다운에서 화살표는 다음 행동을 예측하게 하는 어포던스 역할을 하는데, 트립닷컴의 필터링은 탭 시 필터 선택 화면으로 연결이 되고 있어요. 필터 화면은 좌측 상단 X 버튼을 탭 해 닫을 수 있는 구조. 드롭다운은 사용자에게 꽤 익숙한 형태라, 화살표를 빼고 그냥 버튼으로 제공되었다면 어땠을까 하는 생각이 듭니다.

카약

카약은 부킹닷컴 소속이에요. 카약, 호텔스컴바인(카약이 인수), 오픈테이블 등도 한 가족으로 세계 최대규모의 OTA 입니다. (코로나로 국내 여행 플랫폼 시장도 상전벽해 : http://www.ttlnews.com/article/travel_report/9084) 국내에서 카약의 존재감은 그리 크지 않지만 항공권 등을 최저가로 검색 할 수 있는 ‘카약신공’ 등의 은어(?)를 탄생시킨 서비스에요.

(1)트립닷컴이 리스트 상단에 동일 범위 다른 기간에 대한 정보를 제공해줬던 것, 기억하시나요? 카약은 이 공간을 정렬 조건으로 활용하고 있어요. 가성비, 최저가, 최단시간,  출발시간 등이 제공되며 평균 가격을 함께 보여줍니다. 사용자는 탭 한 번으로 리스트를 원하는 정렬 조건에 따라 확인 할 수 있고요. 다만 (2)정렬 조건은 상단에, 필터는 하단에 위치하고 있어 필터와 정렬에서 각각의 조건을 선택해 리스트를 확인하는 경우 위에서 한 번, 아래에서 한 번씩 확인해야 하는 불편함이 존재해요. (마이리얼트립도 이와 같은 방법을 쓰다가 최근 상단으로 모두 이동하는 업데이트를 진행한 바 있어요 : https://bit.ly/3saMFGi)

(3)카약은 다른 서비스에서 쉽게 볼 수 없는 조건이 하나 더 있어요. 바로 ‘원하는 결제 수단에 따라 수수료가 가장 낮은 곳’을 적용해주는 기능인데요. 화면을 벗어나지 않고 선택할 수 있는 편리함은 있지만, 실제 어떻게 적용되었는지에 대한 안내가 없어 아쉬웠습니다.

플레이윙즈, 트립닷컴은 모두 시간대를 조절할 수 있지만, 시간을 기준으로 표현되어 있어 그 이상의 정보를 얻기는 어려웠어요. (1)하지만 카약은 시간대에 따른 가격을 평균 가격에 맞춰 확인할 수 있어요. 인기가 많은 시간은 그래프가 확 오르는 것을 알 수 있는데요. 이는 리스트로 돌아가지 않고도 시간대별 가격을 확인할 수 있는 정보가 되기에 꽤 편리하게 활용할 수 있었어요.

앞선 서비스들에서 볼 수 없었던 또 하나의 기능이 있어요. (1)선택한 필터를 적용했을 때 결과가 몇 개인지 보여 준다는 점이에요. 3,852개 항공권 보기 처럼 사용자가 선택한 필터에 따라 확인 가능한 항공권 수를 미리 안내합니다. 조건이 여러 개 붙을수록 확인 가능한 결과는 줄어들 수 밖에 없기에 이런 점을 확인하며 선택할 수 있다는 점은 정말 중요해요.

(2)또 모든 선택값에 해당하는 가격대를 미리 확인할 수 있어요. 트립닷컴에서 볼 수 있었던 기능이지만, 모든 필터에서 가격대를 확인할 수 있다는 점이 조금 달랐습니다. 필터에 따른 가격, 확인 가능한 항공권 수를 볼 수 있어 리스트 화면을 갔다가 다시 돌아올 확률이 줄어드는 역할을 해주고 있어요.

(3)다만 사용자가 쉽게 이해할 수 없는 언어로 표현된 항공기 구분은 아쉬웠어요. 트립닷컴에서는 대형, 중형 등 크기로 구분해 상대적으로 빠르게 알 수 있었다는 점과 비교할 수 있는 사례이기도 합니다.

카약이 제공하는 정보 중 눈에 띄는 것이 또 하나 있어요. (1)필터가 적용되어 가려진 리스트에 대한 정보인데요. 안내 메시지는 개수와 가격이 반대로..적용되어 있지만, 대략적인 개수 확인과 함께 필터를 해제 역할을 함께 하고 있어요. 필터 화면으로 돌아가지 않고도, 필터 해제를 할 수 있습니다. 재밌는 건, 필터 해제가 아니라 숨겨진 리스트를 다시 보는 것으로 표현했다는 점이에요. 더불어 (2)적용된 필터 개수를 확인할 수 있어요. 트립닷컴도 활용했던 방법입니다.

스카이스캐너

플레이윙즈, 트립닷컴, 카약에 이어 살펴볼 서비스는 스카이스캐너에요. 영국에서 시작된 스카이스캐너는 지난 2016년 2조 970억원에 인수 되었는데요. 당시 인수한 곳은 씨트립으로, 2019년 트립닷컴으로 이름을 바꿨습니다.

카약이 정렬 조건에 따라 평균 가격을 보여줬다면, (1)스카이스캐너는 추천, 최단 시간, 최저가, 직항 등의 조건 키워드로 제공해 바로 적용할 수 있습니다. 다만 최초 리스트는 전체가 아닌 일부로 (호텔, 렌터카 등 다른 서비스를 함께 확인하기 위해) 전체 항공편 보기를 통해 한 단계 더 들어가 모든 리스트 확인이 가능합니다.

카약이 필터 적용으로 숨겨진 리스트에 대한 정보를 별도 제공한 것처럼 (2)스카이스캐너는 날짜 변경이 가능한 항공권을 빠르게 확인 할 수 있는 기능을 제공하고 있어요. 호텔 예약시 환불 또는 취소 가능한 조건을 중요하게 생각하는 것처럼 항공권 역시 같은 수준의 중요도를 지니고 있다는 판단이 있었던 것 같아요.

(3)리스트와 별개로 최적, 최저가, 최단여행시간 등에 해당하는 가격대와 시간을 미리 살펴볼 수 있습니다. 국내선, 김포-제주 노선임에도 2시간 가량 걸리는 것이 최적으로 적용된 것을 보면 출발,도착 항공편을 함께 계산했기 때문이 아닐까 싶어요. 다만, 순간적으로 이렇게 오래 걸릴 노선인가? 라는 혼란이 생길 수 있다는 점, 계산 방법에 대한 안내가 제공되지 않는다는 점은 아쉬웠습니다.

(4)필터가 적용되었다는 사실은 정렬 및 필터(조건) 우측의 컬러를 통해 알 수 있었어요. 앞선 서비스들에 비해 쉽게 구분할 수 없었습니다. 배경컬러가 워낙 강해 컬러로만 구분하기가 더 어렵게 느껴졌어요.

리스트에서 일부 정렬 역할을 하는 기능들이 제공되지만 기본적으로 (1)스카이스캐너는 플레이윙즈와 마찬가지로 정렬과 필터가 같은 화면에 적용되어 있어요. (2)트립닷컴, 카약과 달리 적용 가능한 필터(조건) 별 가격 정보를 추가로 제공하지 않습니다. 선택 후, 사용자가 리스트에서 직접 확인해야 하는 불편함이 있습니다.

항공권 예약 서비스 내 필터와 정렬 기능을 분석하며 느낀 점

위 다섯가지 항목을 기능 기획 시 한 번씩 확인해보면 좋을 것 같다는 생각이 들었어요!

지그재그

다양한 연령대에게 큰 사랑을 받고있는 지그재그의 매력은 상품과 스토어를 맞춤 추천해주는 점이에요. (앱을 처음 실행하는 과정에 연령대를 입력합니다!) 검색결과에서도 입력한 연령대에 맞춰 자동 필터가 적용되고 있습니다.

큰 구성부터 살펴보면 리스트를 아이템과 스토어 탭으로 각각 제공, 탭 바로 아래 간단한 (1)필터를 제공해줍니다. 필터는 구매 비용에 영향을 끼칠 수 있는 배송비와 상품 가격을 제일 먼저 배치하고, 상품 형태를 고를 수 있는 색상, 카테고리, 기타 옵션을 제공하고 있습니다. (2)무료배송만 활성/비활성 상태고 가격부터 옵션까지 별도 팝업에서 세부 선택, 입력 할 수 있어요. 드롭다운으로 구성하면 더 직관적이지 않았을까라 하는 생각이 드는 부분이기도 해요. (전반적인 분위기가 태그 형태 텍스트를 누르는 것으로 디자인이 되어있어 일관성을 유지하기 위한 방법인 것 같아요)

(3)정렬은 인기-리뷰-신상품-가격순으로 선택 가능합니다. 디폴트는 인기순으로 툴팁으로 친절하게 기준도 설명해 주는 점이 좋았습니다. 기준이 없다면 광고 상품이 더 많이 섞이는 건 아닌지 등 헷갈릴 수 있는데 인기순 기준은 판매, 클릭, 찜 수로 계산한다는 등 안내가 명확했습니다.

뉴스레터 초반에 정리된 것처럼 필터는 ‘원치 않은 결과를 거르는 것’에 초점이 맞춰져있어요. (1)상품 가격 설정은 그래프로 더 많은 상품을 보기 위해 어떤 구간을 활성화 시켜야할지 알 수 있는 점이 흥미로웠어요.(카약이 시간대별 항공권 가격을 그래프로 보여주는 것과 같은 맥락이기도 해요) 저도 금액에 제한을 두는 편인데, 최대 금액을 모르는 상품군은 필터를 다 설정한 후에야 결과가 없다는 사실을 알게 되어 아쉬웠던 경험이 있어요. 게다가 지그재그는 사용자가 선택한 가격 범위 내 포함된 상품이 몇 개인지 실시간으로 확인할 수 있어 편리했습니다.

색상은 (2)'선택 색상만 보기' 체크박스를 통해 필요 상품만 볼 수 있도록 제공하고 있고요. (3)카테고리는 총 3depth 구조로 마지막 3번째 구분값은 다중 선택할 수 있어 내가 원하는 제품 구성에 더 근접한 결과를 볼 수 있었어요. (4)옵션은 상품 카테고리에 따라 조금씩 다르게 제공됩니다. 제가 선택한 원피스는 소재, 패턴, 디테일한 포인트와 소매 기장을 선택 할 수 있는데, 카테고리를 선택하지 않을 경우 버튼을 통해 카테고리를 먼저 선택할 수 있도록 자연스럽게 유도합니다.

와디즈 vs 텀블벅

와디즈와 텀블벅은 '리워드 펀딩'에 초점을 맞춰 함께 비교해볼게요! (텀블벅은 앱이 아닌 모바일 웹인 점 양해부탁드려요.) 펀딩 특성 상 성공했을 때 실제 상품을 수령할 수 있는 구조라 현재 상태가 굉장히 중요한 서비스에요! 

필터 공통 - 펀딩 상태

두 서비스 모두 진행중인 프로젝트와 종료/성사된 프로젝트를 필터를 통해 구분해서 볼 수 있었어요. 텀블벅은 추가적으로 공개예정 프로젝트를 운영하면서 사전예약에 관심을 갖는 사용자에게 알림신청할 수 있도록 유도하고 있어요.

정렬 공통 - 추천 / 인기 / 후원순

펀딩액/후원액 기준의 공통점이 보였어요. 후원금과 펀딩금액이 높은 상품은 화제성과 인기를 통한 일종의 보증이 되기 때문에 저도 자주 사용하는 기준이에요. 앞서 말씀드렸던 것처럼 펀딩이 실패하면 상품을 받지 못하는데, 펀딩금이 목표치에 얼마나 도달했는지도 중요한 기준점이 될 수 있어요.

동일한 정렬 기준을 모아보면! 펀딩액(와디즈)-최다금액(텀블벅), 응원참여자순(와디즈)-최다후원(텀블벅) 등 같은 기준이지만 명칭이 다른 경우가 있고. 마감임박, 인기, 최신처럼 같은 이름으로 사용되는 정렬 기준이 있는데요. 와디즈는 그 외 ‘추천’이라는 정렬 기준을 제공하고 있었습니다.

와디즈는 앞서 말씀드린 필터와 정렬만 제공하고 있어요. 검색 결과에서 좀 더 세부적으로 나눠 못보는게 아쉬웠어요. 반면, 텀블벅은 카테고리와 금액, 에디터 추천이라는 필터를 제공해주고 있습니다.

텀블벅은 검색결과와 리스트뷰에서 (1)카테고리, 프로젝트 상태, 달성률, 모인금액 필터를 제공하고 (2)에디터 추천과 문화누리카드 사용 여부도 제공하고 있어요. 옵션은 지그재그의 무료배송처럼 활성/비활성화 상태를 즉시 확인할 수 있습니다. 문화누리카드로 구매가능한 콘텐츠도 따로 모아볼 수 있어요. 주로 만화, 사진, 음악, 출판 등의 카테고리와 예술 프로젝트에서 사용 가능했어요.

텐바이텐

텐바이텐은 아기자기한 다이어리나 다꾸 용품을 살 때 자주 사용하는 것 같아요. 서비스 디자인과 UI 애니메이션도 잘 적용되어 있어 그런지 유사한 느낌의 상품을 찾을 때 텐바이텐을 한 번씩 생각하게 됩니다. 필터와 정렬도 텐바이텐스러워요!

정렬과 필터를 섬세한 명칭으로 버튼을 배치해놨어요. (1)상품 / 인기순으로 보기를 클릭하면 상품 구분과 정렬 기준이 나열되어 있는데요. 골라보기의 (2)상품 / 후기 / 기획전 / 이벤트 / 브랜드에 따라 정렬 할 수 있는 조건이 달라집니다. 정렬하기 조건이 바뀔 때 귀여운 애니메이션을 볼 수 있었어요 🥰.

꼼꼼하게 살펴보기에는 배송과 카테고리, 브랜드, 가격대 설정 필터가 들어있습니다. 브랜드에서는 다중 선택과 검색 기능이 제공되서 편하게 사용할 수 있었는데요. (1)가격대 입력은 은행 서비스에서 송금할때 쉽게 접하는 금액 버튼이 있었어요. 백원 단위는 과연 쓸까..? 싶었지만 스티커는 낮은 가격대고 충분히 존재하더라고요. 서비스에서 다루는 아이템에 따라 작은 단위 금액도 버튼화 할 수 있겠구나 싶었어요. 최저 금액을 입력하고나면 금액 버튼도 자연스럽게 최대 금액 입력란으로 이동해서 쉽게 입력할 수 있었어요. 지그재그와 동일하게 (2)꼼꼼히 찾아본 0,000개의 상품이라 버튼에 표기하며 내가 탐색할 수 있는 리스트 개수를 미리 파악할 수 있었어요. 마지막으로 필터를 모두 선택한 뒤 리스트로 돌아오면 (3)툴팁 형태로 ‘초기화할까요?’가 잠시 뜨면서 필터의 위치를 다시 한 번 강조하고 필터를 잘못 설정한 사용자들이 쉽게 초기화 할 수 있는 점이 좋았습니다.

금융권 서비스 필터

저는 이전에 많이 다뤄보지 않았던 금융권 서비스 필터를 살펴보려 해요.

금융권 필터는 언제, 어떤 유형의 금전거래가 일어났는지 등을 선택해 원하는 정보를 볼 수 있게 해줍니다. 비슷해 보이지만 다른 필터! 오늘 살펴볼 서비스는 은행 서비스(카카오뱅크, 우리은행), 간편결제 서비스(카카오페이, 페이코), 카드 서비스(현대카드와 롯데카드) 입니다.

카카오뱅크

먼저 은행 서비스인 카카오뱅크! 카카오뱅크는 대한민국의 두 번째 인터넷 전문은행이며 2017년 7월 27일 오전 7시에 정식으로 출범했습니다. 출범하자마자 많은 관심과 사랑을 받으며 주거래 은행으로도 자리 잡은 카카오뱅크.

카뱅 출현으로 많은 은행서비스 UX가 개선되기도 했을 정도로 업계에 큰 영향을 미친 서비스인데요. 카뱅의 필터는 어떤지 세 가지 내용을 자세히 살펴보겠습니다.

먼저 입/출금 내역입니다. 전체 입/출금 내역을 보니 색상으로 입/ 출금 내역을 표시해주고 있네요. 리스트 오른쪽 위 필터가 있어요. 클릭하면 (2)화면이 뜨고 입/ 출금에서 중요한 필터는 조회기간, 거래 유형, 거래내역 정렬과 같이 아주 단순한 기능이 있습니다.

카드나 페이 서비스처럼 거래 취소라는 개념보단 입/출금 거래이다 보니 다소 단순한 필터입니다. 여기서 기본값을 보면 조회기간은 [1개월], 거래 유형은 [전체], 거래내역정렬은 [최신순]으로 되어있어요. 확인을 위해 거래유형만 [임금만]으로 변경해보겠습니다. 그럼 (3)과 같이 입금된 내역만 뜹니다. 단순하지만 거래내역 조회 시 부족한 점이 느껴지지 않습니다.

메인에서 [이체]와 [카드이용내역]을 눌렀을 때 화면을 살펴보겠습니다.

(1)은 [이체]를 누르면 나오는 화면인데 여긴 따로 필터는 아니고 리스트 화면입니다. 여기선 자주 송금하는 친구를 선택할 수 있고 해지할 수 있어요.

(2)는 [카드이용내역]을 누르면 나오는 화면입니다. 여기도 필터가 있네요! 어떤 내용인지 살펴볼게요.

(3)은 (2)에 ‘전체(6건)’을 누르면 나오는 필터 리스트입니다. [전체/ 국내 정상/ 국내 취소/ 해외 정상/ 해외 취소]입니다. 현재 제가 가진 리스트는 [국내 정상]뿐이라 [국내 정상] 필터를 누르면 (2)리스트가 나오고 있어요.

그 다음은 카카오뱅크 자동이체 조회화면입니다. 자동이체 화면도 이체와 마찬가지로 필터 기능이 리스트 위에 있습니다. 왼쪽은 통장, 오른쪽은 신청내역입니다. 신청내역을 누르시면 (2) 필터 리스트가 나옵니다. [신청내역/ 해지내역/ 결과조회]입니다.

[결과조회]를 누르면 오른쪽 화면이 뜹니다. 여기선 자동이체 결과가 나오고 있어요. 처음 리스트는 제 적금 자동이체 실패 리스트, 아래는 적금 자동이체 처리 완료된 내역 등이 나옵니다.

처리 실패와 처리 완료를 시각적으로 잘 대비해 뭔가 잘못되었단 걸 시각적으로 잘 이해할 수 있게 해줍니다.

우리은행

두번째로 살펴볼 서비스는 우리은행 서비스입니다.

우리은행은 계좌정보를 누르면 거래내역과 해당하는 달이 기본으로 뜨고 오른쪽 위에 달력 모양이 있어요. 클릭해보니 (2) 검색 조건 설정 팝업이 뜨는데 카뱅과는 다르게 가운데 팝업으로 뜹니다. 보시면 달력 형태 아이콘과 다르게 날짜 설정, 조회내용 설정, 조회순서, 적요내용, 금액설정 등 리스트를 검색하기 위해 조건들이 매우 많아요. 전 여기서 [입금만]을 선택해보겠습니다.

그럼 (3)으로 이동하는데 (1)과 다르게 입금은 파란 글씨로 표현하고 있어요. 입금은 파란색, 출금은 빨간색으로 표시해 전체 리스트를 볼 때 돈의 흐름을 한눈에 볼 수 있어요.

그 다음은 간편 결제 서비스인 카카오페이와 페이코를 살펴볼게요.

카카오페이

카카오페이는 카카오톡 안에 설정에 가서 접근할 수 있어요. 접근하자마자 보이는 화면이 (1)입니다. 보면 결제-사용이 기본으로 되어있고 제가 최근에 사용한 내역이 뜹니다. 사용은 제가 페이로 송금받거나 송금한 내용인데 재밌는 건 입금, 출금 내역이 색상 뿐 아니라 출금일 경우 +, - 표시가 있다는 점인데요, 한눈에 봐도 내 돈이 차감 됐다는 걸 느낄 수 있어요. 또 금액 아래 작지만, 송금, 받기라고 되어있어 크게 혼동되지 않아요!

(2) 결제는 페이로 결제한 내역인데 살펴보면 카카오모빌리티에 많이 투자했네요. 4월 6일이 저에겐 힘든 날이었나 봅니다😭. 보면 여긴 결제는 평이하지만, 취소 건이 -로 되어있어요. 이는 제 돈이 차감되지 않았단 건데 앞에 사용에선 -가 돈이 차감되는 거였지만 결제에선 취소되는 내역이네요.

리스트 위에 날짜를 클릭하면 하단에 날짜를 선택할 수 있는 팝업이 뜹니다.

다음은 ‘사용’ 하단 중앙에 있는 [필터]를 살펴볼게요, 필터를 누르면 하단 팝업으로 [전체/ 송금/ 페이카드/ 결제/ 출금/ 충전/ 적립/ 이자/ 기타]가 있네요. 엄청 항목이 많네요!

저는 [페이카드]를 선택해볼게요. 그럼 (3)이 나옵니다. 보통 택시 사용 내역이네요. 그런데 좀 달라진 건 하단 중앙에 필터 역할을 하는 버튼에서 [페이카드]가 아닌 [카드]로 이름이 바뀌네요.

저 부분은 꼭 2글자로 맞춰야 하는 걸까요? 그럼 필터에서도 ‘카드’라고 맞춰주면 사용하기 더 쉬울 것 같아요!

카카오페이에서 살펴볼 마지막은 [대출비교]탭인데요, 여긴 앞부분과 결이 좀 다른 느낌이 강하게 듭니다. 하지만 필터가 굉장히 흥미로웠어요. 대출 금액이 미리 세팅되어있고 제가 원하는 조건을 선택할 수 있어요. 그 조건을 선택하면 아래 신용대출 리스트가 바뀝니다! 또 필터 모양을 누르면 선호 조건을 섬세하게 설정할 수 있어요. 대출이란 게 개인 경제 사정과 정말 밀접한 부분이라 이해하기 쉬운 필터를 제공하는 방안이 흥미로웠어요! 하지만 과도한 대출은 가계에 영향을 미칠 수 있으니 신중하게 받으시길 바랍니다~! (ㅎㅎ)

페이코

두번째 페이 서비스는 페이코인데요, 회사에서 명절 상품권을 페이코로 받다 보니 기간 한정으로 페이코를 종종 사용하고 있어요. 페이코 서비스에서 정말 재밌었던 부분이 있어 이 부분만 공유 드릴게요!

바로 결제내역에서 필터를 선택하는 화면인데요, 아쉽게도 제가 확인할 수 있는 리스트가 없어 필터만 설명해 드릴게요. [PAYCO 포인트/ 최근 6개월/ 전체 내역/ 온·오프라인] 중 하나만 선택하더라도 하단 팝업이 떠요. 그리고 이 팝업에서 이 모든 필터를 한 번에 설정할 수 있어요. 탭을 이동하면서 말이죠!

이제 금융권 서비스인 현대카드와 롯데카드를 살펴볼게요.

현대카드

먼저 제 최애 카드사인 현대카드! 참고로 현대카드도 엄청 열심히 쓰다가 12월에 카드를 잃어버린 이후 정지해놓고 재발급받는 걸 깜박하고 있어 내역은 많이 없어요. 참고해주세요 ㅠㅠ

(1)은 월 소비에서 3월 내 소비 현황입니다. 여기서 화살표를 누르면 월별 이동을 할 수 있어요.

(2)는 현대카드 앱에 진입하자마자 4월 25일 명세서를 클릭하면 진입할 수 있는 화면입니다. 여기서도 날짜 옆에 화살표를 클릭하면 이전 명세서를 확인할 수 있어요.

(2) 최근 이용내역을 확인해보면 최신순으로 이용내역이 뜹니다. 역시 오른쪽 위에 필터가 있어서 이를 누르면 하단 팝업으로 필터가 떠요. [전체카드/ 승인상태/ 이용기간/ 이용지역/ 이용구분] 등 다양한 필터가 있습니다.

여기서 [전체카드]를 클릭하면 (3)처럼 또 하단 팝업이 뜹니다. 제가 잃어버린 카드와 교체된 카드까지 목록에 있네요. 이중 하단 팝업이 좀 신기하기도 했지만 사용하면서 낯설진 않았고, 카드 모양을 함께 보여주는 점이 좋았어요.

현대카드에서 살펴볼 마지막 필터는 M 포인트 페이지의 필터입니다. 여기서 기간선택을 클릭하면 하단 팝업으로 기간을 선택할 수 있습니다.

롯데카드

이제 마지막! 롯데카드입니다. 롯데카드는 사용한 지 얼마 안 된 카드인데요, (1) 이용내역을 살펴보면 오른쪽 위에 상세검색 필터가 있습니다. 이를 누르면 (2)로 이동하는데 필터엔 [카드선택/ 사용처 구분/ 이용구분/ 정상/취소 구분/ 조회시간]이 있습니다.  그리고 (1)에서 리스트 위 최신순을 클릭하면 하다 팝업으로 리스트 정렬을 바꿔볼 수 있는 필터가 있습니다. [최신순/ 오래된 순/ 고액순/ 저액순]으로 있네요! 현대카드는 고액순만 제공했지만 롯데카드는 저액순도 함께 제공하고 있네요!

여기서 필터를 [오래된 순]으로 변경해봤어요. (1)을 보시면 변경된 필터인데 재밌는 게 취소된 내역을 나타내는 표시입니다. 취소건 금액 위에 취소 선을 그어 취소된 항목이란 걸 시각적으로 잘 부각해주고 있어요.

(2)는 특정 카드 선택 후 이번 달 이용내역을 보여주는 페이지인데 팝업으로 뜨고 있어요. 여기선 월별 선택을 해 다른 내역을 볼 수 있어요. 그런데 (3)을 보면 팝업 위에 팝업이 뜨는데 뒤에 배경 처리가 안 되어 있어 분리가 잘 되지 않네요! 

종합 의견

추가 사례는 페이스북 그룹을 통해 확인해주세요!

지금 써보러 갑니다 페이스북 그룹을 통해 더 많은 필터와 정렬에 대해 업데이트 할 예정이에요. 앞으로도 뉴스레터 발행 후, 발행 주제 별 사례를 계속 업로드 할 예정이니 많이 찾아주세요! 

구독자님, 멤버십 관련 궁금한 점이 있어요!

당장은 아니지만, 기본 뉴스레터 외 멤버십 진행을 고려하고 있어요. 어떤 이야기가 담겼으면 좋을지 잠시만 시간을 내주시면, 더 좋은 뉴스레터를 만드는데 꼭 참고하겠습니다! (위 링크를 통해 간단한 설문 참여를 부탁드려요)

다음 주제는?

다음 주제는 서비스 소개의 꽃 '스크린샷' 이에요. 눈에 띄는 사례는 물론, 스크린샷 제작에 도움이 되는 정보, 서비스 등을 함께 살펴볼 예정입니다. 다음 주제도 많은 기대 부탁드려요!

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

멤버십 콘텐츠 중 '캠핑'편은 무료로 체험하실 수 있어요!

팁스터 에디터와 함께 하는 클럽도 확인해보세요!