구독 서비스 UI를 필터로 채택한 이유
찜, 구독 서비스에서 찾아본 필터와 탭 UI
이 글은 구독 서비스를 론칭한 기획자의 못다 한 이야기입니다. 어떠한 마음으로 서비스를 만들었는지 회고하기 위해 한 자 한 자 적습니다.
이전글 : 커머스에서는 브랜드를 '구독'하기 시작했습니다. 구독 서비스 가설 세우기
앞서 소셜서비스에서 익숙했던 구독이 커머스까지 확장되는 배경과, 그 가설에 대해 이야기해 보았습니다.
커머스에서 구독은 고객과, 브랜드 간의 지속적인 관계를 형성해 준다고 말씀드렸는데요. 그렇다고 대놓고 [구독(브랜드의 소식을 받아보는 서비스)]을 드러내지는 않습니다. 각각 플랫폼의 결이 조금씩 다르기 때문이죠. 플랫폼의 특징과 톤 앤 매너에 따라 다양한 버튼과, 텍스트로 서비스에 노출되고 있습니다. (커머스에서는 브랜드를 '구독'하기 시작했습니다. 中에서)
아마도 이번 글이 구독 서비스의 마지막 글이 될 것 같은데요. GNB위치부터, 다양한 플랫폼들의 UI를 보며 이야기를 나눠보겠습니다. 어떠한 UI를 선택하게 되었는지에 대한 그 배경입니다.
1. GNB위치
GNB(Golbal Navigation Bar)의 계층구조를 보면, 주로 개인화된 지면들은 오른쪽에 위치하고 있습니다.
개인화된 지면이라고 하면, 주로 찜/장바구니와 마이페이지를 말하는데요. *시선 추적 연구에 따르면 사용자들은 자주 사용하고, 더 중요한 항목을 오른쪽에서 찾는 경향이 있습니다. (정해진 규칙은 아니며 플랫폼이나 디자인 성격에 따라 달라지기도 합니다.) 또, 모바일 기기에서는 엄지손가락에 대한 접근성을 고려하는 것이 중요하죠. 자주 액세스하는 지면을 화면 오른쪽에 배치하면 한 손으로 기기를 잡는 사용자가 더 쉽게 접근할 수 있기 때문입니다.
*시선 추적 패턴에 대한 연구에 따르면 사용자들은 콘텐츠를 "F" 패턴으로 검색하는 경향이 있는 것으로 나타났습니다. 이는 처음에는 왼쪽에 더 집중하다가 오른쪽으로 이동한다는 것을 의미하는데요. 중요하거나 자주 사용되는 요소를 오른쪽에 배치하면 사용자들이 더 편리하게 접근할 수 있습니다.
2. 필터 VS 탭 UI
주로 찜/구독 서비스에서 가장 많이 나타나는 UI는 필터와, 탭입니다. 플랫폼은 사용자가 다양한 섹션이나 유형의 콘텐츠들을 효율적으로 탐색할 수 있도록 필터나 탭 UI를 사용하는 경우가 많습니다. 어떠한 UI를 선택하는지는 콘텐츠의 성격, 사용자와의 상호작용, 기획 및 디자인 목표에 따라 달라지겠지요.
필터와 탭 UI의 공통점부터 알아볼까요?
필터 UI와 탭 UI는 모두 콘텐츠를 구조적으로 구성하고 표시합니다.
필터 UI와 탭 UI 모두 콘텐츠를 분할하여 사용자가 다양한 콘텐츠나 기능을 더 쉽게 찾고 탐색할 수 있도록 합니다.
결국 두 UI패턴 모두 탐색 제어 기능을 제공하여, 서로 다른 유형의 콘텐츠 간의 전환을 목표로 하는 것이죠.
필터 UI의 특징 (대표 예시 : 유튜브)
youtubeYouTube는 사용자 경험을 향상하고 콘텐츠 검색을 돕기 위해 주로 필터 UI를 활용하고 있습니다. YouTube가 필터 UI를 선택한 이유를 분석해 보았습니다.
첫 째, 콘텐츠 양이 방대합니다.
YouTube는 동영상, 채널, 재생목록 등을 포함하여 방대하고 다양한 콘텐츠를 제공합니다. 필터 UI를 사용하면 사용자는 관련성, 업로드 날짜, 조회수 등과 같은 기준에 따라 검색 결과를 세분화하여 자신의 선호도에 맞는 콘텐츠를 찾는 데 도움이 됩니다.
둘째, 개인 맞춤형 콘텐츠에 기반합니다.
YouTube의 추천 로직은, 개별 사용자 선호도에 맞는 동영상을 제안합니다. 필터를 사용하면 사용자는 시청 기록, 좋아요 표시한 동영상, 구독 등의 요소를 기반으로 추천을 맞춤화하여 더욱 개인화된 탐색 환경을 만들 수 있습니다.
셋째, 통합 콘텐츠처럼 보이고자 하는 의도가 숨겨져 있습니다.
YouTube의 시작은 동영상이었지만, 지금은 채널의 게시글과, 숏츠 콘텐츠까지 확장되었습니다.
채널에는 동영상, 재생목록, 커뮤니티 게시물 등 다양한 콘텐츠가 생긴 것이죠. 이들이 공평하게 콘텐츠 노출량을 확보하고, 탐색을 전환할 수 있도록 일종의 "통합 콘텐츠"처럼 노출하는 것입니다. 같은 식구들처럼 한 페이지 안에서 스크롤하며 탐색할 수 있도록 하는 것이죠. 언젠가부터 숏츠가 메인 홈에 나타난 걸 보셨나요?
[장점]
1. 동적 구현: 사용자는 필터를 적용하거나 제거할 때 표시된 콘텐츠에 대한 업데이트를 즉시 확인할 수 있습니다. 사용자는 자신의 선호도와 기준에 따라 표시되는 콘텐츠를 맞춤 설정할 수 있습니다.
2. 유연성 및 세분성: 사용자가 여러 기준에 따라 콘텐츠를 세분화할 수 있습니다. 유저는 본인이 원하는 만큼 콘텐츠 범위를 좁히고, 넓힐 수 있습니다. 특히 콘텐츠의 복잡도가 높거나, 많은 경우 유용한 UI입니다.
[단점]
1. 각각의 콘텐츠들의 매력도가 높아야 합니다. 아마도 플랫폼의 value나 콘텐츠의 매력도에 따라서 크게 좌우되겠지요.
2. 무엇보다도 필터형 UI에서는 성격이 다른 콘텐츠들이 섞여있는 경우, 사용자들이 어색하지 않도록 제공해야 합니다. (필터를 off 하였을 경우, 모든 콘텐츠들이 섞여 노출되기 때문입니다.)
탭 UI의 특징 (대표 예시 : 무신사, 29CM)
무신사
29CM쇼핑 플랫폼의 대표 주자 무신사와, 29CM입니다. 두 플랫폼은 모두 탭으로 UI를 구분하여 제공하고 있습니다. 앞서 YouTube와 동일하게 다양한 콘텐츠를 담고 있습니다. 상품을 찜하는 기능뿐만이 아니라, 브랜드를 팔로우하고 메거진을 구독하는 기능까지 제공하고 있네요.
첫 째, 서로 다른 콘텐츠의 특성을 이해하고, 사용자들에게 직관적으로 제공하기 위함입니다.
앞서 YouTube는 "통합 콘텐츠"라고 말씀드렸는데요. 무신사/29CM는 이를 통합으로 보지 않는 것입니다. 마치 한 식구가 아니라 다른 식구처럼 보이되, 한 화면에 깔끔하게 잘 정리해서 구분 짓는 모습입니다.
둘째, 사용자들에게 예측 가능한 정보를 주기 위함입니다.
탭 UI는 명확한 결과를 제공합니다. 실시간으로 내가 액션 할 때마다 변하는 동적이 아니라, 이미 예상된 결과가 나타나고, 예측 가능하게 제공하는 정적 화면입니다. (내가 탭 안에서 액션을 한다고 해서 콘텐츠 내용이 변하는 건 없죠)
셋째, 주요 KR은 상품 수익일 것입니다.
Like 지면에 랜딩 되면 바로 찜한 상품 탭이 보입니다. 주변 콘텐츠의 방해 없이, 사용자들은 자신이 좋아한 상품을 쉽게 찾아 구매로 전환할 수 있습니다. 이전에 좋아했던 항목을 쉽게 찾고 구매할 수 있는 사용자들이 타깃 유저일 것입니다. 서비스의 가장 우선순위는 찜한 상품을 한눈에 볼 수 있도록 제공하는 것이겠지요.
[장점]
1. 명확한 세분화: 콘텐츠 노출이 명확하고 탭으로 분류되어 사용자에게 고유한 유형이나 콘텍스트를 제공합니다.
2. 예측 가능한 탐색: 사용자는 특정 탭을 선택하여 어떤 콘텐츠가 노출될지 예측 가능합니다. 일관된 구조 덕에 사용자의 이해와 탐색의 용이성이 좋습니다.
[단점]
1. 제한된 콘텐츠 범위: 선택한 탭 내의 콘텐츠만 노출됩니다. 사용자는 다양한 콘텐츠에 접근하려면 탭 간에 전환해야 합니다.
2. 제한된 정보 노출: 탭 UI의 구조화된 특성으로 인해 여러 콘텐츠의 동시 노출이 불가합니다. 이로 인해 즉각적인 콘텐츠 노출 기대에 미치지 못할 수 있습니다.
3. 필터 VS 탭 UI 중 아직도 고민 중이시라면
ABLYABLY처럼 두 가지를 한 번에 제공하는 기능도 있습니다. 각 콘텐츠별로 직관적이게 예측가능한 정보를 제공한 다음, 마켓별 필터를 통해 사용자들이 원하는 범위의 콘텐츠를 조절할 수 있게 제공하는 것입니다.
정답은 없습니다. 탭과 필터를 모두 사용한다고 해서 슈퍼 울트라 짱이 되느냐도 아닙니다.
각 서비스의 목표에 따라 우선순위를 설정하고, 원하는 사용자 행동에 대한 고려가 필요하겠지요.
그래서 어떤 UI를 선택했냐면
저는 콘텐츠의 노출량 자체를 확보하며, 통합콘텐츠라는 학습효과를 주기 위해 필터형을 채택했습니다. 콘텐츠가 정적 섹션으로 분할되는 탭 UI에 비해 더 높은 수준의 콘텐츠 노출을 제공하고 싶기 때문이었죠.
10년 뒤, 이 글을 보았을 때 과연 구독 페이지가 어떠한 UI의 옷을 입을지 궁금합니다. 아마도 제가 초기에 만들었던 화면과는 달라지겠죠. 그 간의 사용자 경험이 또 달라질 테니까요.
