사용자의 정렬 경험, 어떻게 할까?
나 홀로 A/B 테스트
정렬 방식이 UX에 미치는 방식
오늘은 모바일 인터페이스에서 사용자가 직접 콘텐츠 정렬 방식을 변경할 수 있는 사례를 살펴보겠습니다. 이 기능은 주로 이커머스 쇼핑몰이나 SNS 피드에서 자주 볼 수 있는데요. 대부분의 플랫폼에서는 최신순과 인기순이 기본 정렬 방식이지만, 신상품순, 오래된순, 시간순 등 콘텐츠의 특성과 사용자 니즈에 따라 다양한 옵션이 제공되기도 합니다.
정렬 방식은 단순한 UI 요소가 아니라, 사용자가 원하는 방식으로 정보를 탐색할 수 있도록 돕는 IA(Information Architecture, 정보 구조) 상의 핵심 요소입니다. 적절한 정렬 옵션이 제공되지 않는다면, 사용자는 필요한 정보를 찾지 못해 이탈할 수도 있습니다. 오늘은 정렬 옵션을 모바일 환경에서 어떻게 구현할 수 있을지, 그리고 각 방식이 사용자 경험에 어떤 영향을 미치는지에 대해 이야기해 보겠습니다.
대표적인 정렬 옵션 UI
모바일 정렬 옵션 UI위 사례는 UI/UX 래퍼런스 사이트 '디자이너스'에 올라왔던 토픽이기도 합니다. 유튜브 댓글에서 제공하는 댓글 정렬의 설정 방안을 이야기하고 있습니다.
A안은 칩 형태로, 클릭(탭) 한 번으로 즉시 반영되는 UX입니다. 화면을 가리지 않으면서도 빠르게 선택할 수 있어, 사용자가 원하는 항목을 즉시 전환할 수 있다는 장점이 있습니다. 또한, 정렬 옵션을 변경하기 전에 모든 선택지를 한눈에 확인할 수 있다는 점도 강점입니다.
하지만 모바일의 작은 화면에서는 상단 공간을 차지하는 요소가 메인 콘텐츠의 집중도를 방해할 수 있습니다. 특히, 가로로 배치된 칩 형태는 3개 이상의 옵션이 늘어날 경우 가시성이 떨어질 위험이 있습니다. 옵션이 많아지면 가로 스크롤이 필요해지고, 사용자가 정렬 방식을 직관적으로 인식하는 데 어려움을 느낄 수도 있습니다.
따라서 칩 형태는 2~3개의 간단한 정렬 옵션을 제공할 때, 그리고 사용자가 적극적으로 필터를 적용하며 탐색해야 하는 상황에서 더욱 효과적으로 활용될 수 있습니다. 즉, 모든 옵션은 약간의 중요도 차이는 있지만, 기본적으로 IA에서 동일한 위계를 갖는 경우입니다. 사용자가 정렬 기준을 변경할 때 맥락을 완전히 이해해야 하는 경우에도 칩 형태가 유용할 수 있습니다. 빠르게 필터를 적용해야 하는 사례로는 배달 앱, 쇼핑몰, 뉴스 앱, 스트리밍 서비스의 콘텐츠 정렬을 들 수 있습니다.
A안. 칩 형태이처럼 사용자가 즉각적인 피드백을 원하고, 선택 과정이 단순한 경우에는 칩 형태의 정렬 방식이 효과적으로 작동할 수 있습니다
B안은 바텀 시트 형태로, 더 많은 정렬 옵션을 제공하는 모바일 친화적인 UX입니다. PC 웹 환경에서는 드롭다운 메뉴가 사용자의 시선이 머무는 위치 근처에 배치되었지만, 모바일 환경에서는 손가락 동선을 고려해 화면 하단으로 이동하여 접근성을 높였습니다. 이 방식은 정렬 옵션이 많을 경우, 칩 형태의 가로 스크롤이 불편해지기 때문에 바텀 시트를 필수적으로 사용하게 됩니다. 한눈에 많은 옵션을 제공해야 할 때 적합하며, 다음과 같은 경우에 효과적으로 작동합니다.
하지만 화면을 가리며 한 단계 더 클릭해야 하는 번거로움이 단점으로 작용할 수 있습니다. 따라서 정렬을 자주 변경하기보다는 기본 정렬 방식 그대로 보는 경우가 많다면, 바텀 시트 방식이 더 적합할 수 있습니다. 특정 정렬 옵션이 다른 옵션보다 압도적으로 많이 사용되는 경우, 또는 사용자에게 선택지를 숨김으로써 특정 옵션을 강조해야 하는 경우에 효과적입니다. 즉, 기본적으로 가장 많이 선택되는 옵션을 제공하되, 사용자가 원하는 소수의 경우에 다른 정렬 방식도 선택할 수 있도록 설계하는 방식입니다.
B안. 바텀 시트이처럼 정렬 옵션이 많거나, 정렬보다 더 중요한 역할을 하는 카테고리 필터가 이미 제공되는 경우에는 바텀 시트 기반의 정렬 방식이 더 효과적입니다. 웹툰의 연재 요일, 웹소설의 장르, 음식의 카테고리와 같이 콘텐츠가 특정 기준에 따라 분류되는 경우, 정렬 방식의 우선순위는 상대적으로 낮아집니다. 그 결과, 정렬 옵션은 바텀 시트 내의 하위 옵션으로 배치되는 경우가 많습니다.
나의 생각
둘 중 우열을 가릴 수는 없지만, 이번 글을 준비하며 스터디한 결과, 대부분의 서비스에서 정렬보다는 필터나 카테고리에 칩 형태의 UI를 적용하는 경우가 많았습니다. 카테고리에 사용되는 UI 컴포넌트로는 탭 형태가 칩보다 우선하지만, 탭으로 구성하기에 종류가 많은 경우에 칩을 사용하는 모습들이 종종 포착되었습니다.
칩 형태의 카테고리 케이스결국 정렬 옵션은 바텀 시트 형태로 제공되는 사례가 대부분이었습니다. 칩 형태의 정렬 옵션은 서비스 초기에는 종종 보이지만 서비스가 고도화되면서 정렬 옵션이 세분화되고, 점차 바텀 시트로 이동하는 경향이 있었습니다.
배달의 민족 변화 케이스개인적으로 칩 형태는 ON/OFF가 가능한 태그의 느낌이 강하기 때문인지, 목록에서 여러개를 동시에 선택할 수 있는 필터 기능과 더 자연스럽게 연결된다고 생각합니다. 정렬 방식의 중요도가 높은 경우는 커뮤니티와 뉴스를 제외하고 많지 않을 것 같네요. 그러나 뉴스는 대부분 분야 카테고리가 우선 순위이므로 케이스 스터디 당시에 해당 사항이 없었습니다.
정리하며
사용자가 콘텐츠를 소비하는 방식과 클라이언트가 유도하는 맥락에 따라 정렬 UI의 선택도 달라져야 합니다. 정렬 옵션을 단순히 나열하는 것이 아니라, 어떤 정렬 방식이 사용자의 경험을 더욱 직관적이고 편리하게 만들 수 있을지 고민하는 과정이 필요합니다.
사례를 살펴보면, 결국 기업들은 바텀 시트를 활용해 정렬 옵션이 차지하는 공간을 줄이고, 메인 콘텐츠에 시야를 집중시키는 방향을 선택하는 것 같습니다. 그럼에도 사용자의 탐색 방식과 서비스의 목적에 따라 달라질 수 있겠습니다. 여러분은 어떤 정렬 방식이 더 적절하다고 생각하시나요?