🔑 탐색의 출발점, 카테고리 화면 뜯어보기!

👀 오늘 살펴볼 서비스 

찾고자 하는 대상이 명확한 경우 우린 ‘검색' 기능을 적극적으로 활용하지만, 일정 범위(신발, 블라우스 등)를 먼저 떠올리게 되는 경우도 있는데요. 이런 경우 주로 카테고리 기능을 먼저 떠올립니다. 검색 화면 내 카테고리를 제공하는 사례가 종종 보이는 것 역시 구체적인 대상을 탐색하기 어려운 경우, 카테고리를 통해 조금 더 편한 탐색(출발) 단계를 거칠 수 있도록 돕는 역할을 하기 때문입니다. 오늘은 주요 서비스가 카테고리 메뉴나 화면을 어떻게 구성하고 있는지, 각자가 바라는 역할은 무엇인지 자세히 살펴보고자 합니다. 

🐳 온/오프라인 클래스 제공 서비스 카테고리

코로나로 집에 있는 시간이 늘어나면서, 온라인 클래스 서비스 역시 많이 접할 수 있게 되었습니다. 최근에는 다시 오프라인으로 연결되고 있고요. 클래스를 제공하는 서비스에게 카테고리는 꼭 필요한 기능 중 하나로, 드로잉이나 베이킹 등 배우고 싶은 분야가 있거나 뭘 배울까?라는 생각을 갖고 있는 사용자에게 좋은 시작이 될 수 있기 때문입니다. 또 하나 주목할 만한 내용은 카테고리를 어떻게 제공할까?에 대한 답으로 검색 화면에 함께 제공하거나 별도 메뉴로 활용하는 방법도 있습니다.

아이디어스는 카테고리를 크게 종류와 지역으로 구분하며, 별도 메뉴로 제공합니다. 어떤 카테고리의 클래스를 듣지? 또는 배우지? 만큼 중요한 건, 내가 자주 오가거나 머무는 지역 내 원하는 클래스가 있는지?라는 기준이기 때문입니다. (물론 온라인 클래스만 제공하는 경우 ‘지역'은 큰 의미가 없어요) (1) 아이디어스는 클래스 카테고리를 먼저 제공하며, 6가지 내용을 아이콘과 텍스트로 함께 보여줍니다. (2) 이어서 전국의 지역을 텍스트 단위로 확인할 수 있어요. 중요한 건, 가장 ‘상위'에 해당하는 카테고리를 사용자가 선택하는 것으로 이 화면을 활용하고 있다는 점입니다.

솜씨당은 오프라인에서 진행되는 클래스에 초점이 맞춰져 있어 ‘지역’이라는 조건을 훨씬 중요하게 생각합니다. (3) (4) 카테고리는 ‘검색 화면’에 제공하지만, ‘내 주변'이라는 메뉴를 별도로 제공하고 있어요. ‘내 주변'메뉴를 통해서는 근처에서 진행되는 다양한 클래스를 조건에 따라 확인할 수 있으며, 검색화면 내 제공되는 카테고리는 어떤 클래스가 있는지 전체 리스트를 확인할 수 있습니다. 카테고리는 총 12개로 검색 화면 안에서 스크롤 없이 한눈에 살펴볼 수 있다는 점도 눈에 띕니다.

클래스 101은 솜씨당과 달리 대부분의 클래스가 ‘온라인' 환경으로 제공되기에 지역이라는 조건을 상대적으로 덜 신경 써도 되는 곳입니다. 그리고 검색이나 하단 탭 등을 활용하지 않고, 왼쪽 상단의 ‘사이드 메뉴'를 통해 카테고리를 제공하고 있어요. 앞서 살펴본 두 서비스와 달리 (5) 텍스트로만 카테고리명이 제공되고, 유사 분야에 따라 묶어둔 모습을 확인할 수 있습니다. 전체 카테고리를 한 묶음으로 제공하면 사용자가 텍스트 단위에서 원하는 대상을 찾기 어려웠을 것 같다는 생각이 드네요. 스크롤이 적용되어 있어 일부 카테고리는 한눈에 볼 수 없다는 점은 아쉽습니다.

탈잉은 카테고리 화면을 별도로 제공하며, (1) 카테고리별 구분을 쉽게 하기 위해 ‘타이틀'을 제공합니다. 타이틀 덕분에 하나씩 확인하지 않아도 특정 카테고리만 빠르게 훑어볼 수 있습니다. 서비스에 따라 조금씩 다른 구성을 취할 수 있지만 (예를 들어 아이디어스는 장바구니를 배치하는 등) 카테고리 화면에서도 ‘검색 화면'으로 빠르게 이동할 수 있는 점이 좋습니다. 검색 화면에 카테고리를 제공하지 않을 경우 이와 같은 방법을 고려해볼 수 있다는 것을 잘 보여주는 사례라고 생각합니다.

(2) 클래스유는 검색 화면에 카테고리를 제공하고 있어요. 검색 과정에서 자연스레 카테고리를 접하고, 이동하거나 선택할 수 있는 구조입니다. (3) 텍스트와 아이콘을 함께 제공해 사용자가 빠른 확인과 선택이 가능하도록 돕고 있어요. 다만, 검색 화면에 카테고리를 넣을 경우 최근 검색어나, 인기 키워드 등을 어떻게 제공할 수 있을지에 대한 고민이 함께 진행되어야 합니다. 검색 자체에 집중하는 사용자에겐 검색의 보조 역할을 하는 기능 역시 중요할 수 있기 때문입니다.

(4) 유데미 역시 클래스유와 유사한 구조를 갖고 있는데, 클래스유 사례를 보며 언급했던 ‘검색 보조 기능'과 함께 배치된 모습을 살펴볼 수 있어요. 상단에는 상위(인기) 검색어가 있고, 그 아래 카테고리가 제공되기 때문입니다. 유데미 역시 카테고리를 텍스트로만 제공하지 않고, 시각적으로 더 쉽게 구분할 수 있는 아이콘과 함께 활용하는 모습입니다.

👻 여행 서비스 카테고리

엔데믹과 함께 자주 등장하는 키워드는 ‘여행’입니다. 게다가 요즘은 공연 관람을 위한 티켓부터 비행기, 숙소, 렌터카 등 여행에 관한 모든 정보를 앱을 통해 쉽게 확인할 수 있습니다. 재미있는 점은 서비스마다 제공하는 제품과 다루는 분야가 다양해 카테고리 역시 조금씩 다르게 구성한다는 것입니다. 이번에는 서비스별 특징에 따른 여행 서비스의 카테고리를 소개합니다!

트리플은 ‘여행에 관한 모든 것'을 제공하는 서비스답게 여행 가이드뿐만 아니라 적합한 상품을 쉽게 찾아볼 수 있는데요. 서비스 카테고리 역시 가장 큰 버튼, 눈에 띄는 배치로 해외여행과 국내여행을 나눠 적용한 모습이 눈에 띕니다. 아래로 이어지는 ‘방콕 여행', ‘제주 여행’과 같이 상황에 따라 사람들이 자주 가는 여행지(해외/국내)에 맞춰 카테고리를 제공하고 있어요. 이런 방법은 시기와 상황에 따라 유연하게 카테고리를 활용할 수 있다는 장점이 있습니다.

마이리얼트립은 항공권부터 숙소별 정보(룸스테이, 국내 숙소, 한인민박, 해외호텔), 물놀이 특가, 여행자 보험 등 여행자들이 필요한 것을 빠르게 찾을 수 있도록 카테고리를 세분화해 제공합니다. 시즌 성격에 잘 맞는 물놀이 특가 등을 별도로 제공하는 점도 눈에 띄네요. 이렇게 세분화된 카테고리는 사용자가 원하는 대상으로 빠르게 이동할 수 있는 역할을 할 수 있지만, 너무 많아질 경우 선택의 폭이 넓어져 특정 대상을 바로 선택하지 못하는 상황을 만들 수도 있습니다. 

취미 및 여가 플랫폼 프립은 여러 클래스(댄스, 베이킹, 미술, 모임)와 액티비티(제주 할인, 서핑)를 한눈에 확인할 수 있도록 카테고리를 활용합니다. 인기지역이나 특정 시기에만 할 수 있는 활동을 앞쪽에 배치한 점이 눈에 띄네요. 카테고리 하단에 ‘제주 할인', ‘등산', ‘서핑 강습'과 같은 태그가 있어 특별히 사람들이 자주 찾는 상품을 더 접근성 있게 찾아볼 수 있겠다는 생각이 들었어요.

트립닷컴은 호텔, 항공권, 액티비티, 항공+호텔을 상대적으로 큰 아이콘으로 보여주고 있어요. 하단에는 기차표, 트립 가이드, 렌터카, 공항픽업 정보를 제공해 (더도 말고 덜도 말고) 트립닷컴에서 유저들이 가장 많이 찾는 서비스가 무엇인지 깔끔하게 제공하는 모습입니다. 전체 카테고리 아래로는 추천 여행 정보를 통해 다양한 관련 상품을 만나볼 수도 있고요.

클룩 역시 트립닷컴의 카테고리와 굉장히 비슷한 모습이에요. 액티비티&체험, 차량 서비스, 교통수단, 숙소 예약을 큰 아이콘으로 제공합니다. 두 서비스 모두 같은 언어를 조금씩 다르게 변형한 느낌을 받았어요. 다만, 클룩은 해외여행, 티켓&입장권, 테마파크, 렌터카 서비스에서 더 나아가 ‘떠나자 제주로', ‘펫 프렌들리', ‘여행 성향 테스트' 등을 통해 더 다양한 상황을 원하는 사용자를 끌어들이는 모습입니다.

🍟 커머스 서비스 카테고리

커머스 서비스에서도 카테고리는 매우 중요한 요소일 텐데요. 실제로 많은 커머스 서비스가 GNB 메뉴로 카테고리를 제공하거나 메인에서 카테고리를 노출하는 등 카테고리 탐색이 용이하도록 하고 있어요. 다만 카테고리 화면에서의 경험은 조금씩 달랐는데요. 각 서비스가 어떻게 사용 편의성을 향상시키는지 같이 살펴보아요.

29cm와 무신사의 카테고리 화면은 구조가 굉장히 비슷해요. 최상단에는 검색 필드가 있고 좌측에는 대분류가, 우측에는 대분류에 따른 소분류가 노출되는 식이죠. 단, 서비스 특성에 따라 다른 부분이 있는데요. 바로 성별 구분이에요. 패션만 다루는 무신사는 모든 화면 우측 하단에 토글을 띄워 남성/여성을 선택하도록 하고 있어요. 반면 패션 외에 가구/인테리어, 가전 등 다른 카테고리도 다루는 29cm는 의류 등 필요 카테고리에 대해서만 세부 카테고리 영역 상단에 선택지를 제공해요. 디폴트는 WOMEN이고요.

카테고리 선택 이후 화면은 차이가 더 큰데요. 29cm는 카테고리 3단계 모두에 대해 화면 이동 없이 카테고리 변경이 가능하게 하는 등 유저의 탐색 편의성을 강조했지만, 무신사는 상단에 콘텐츠 영역을 배치하는 등 추천을 강조했어요. 전체적으로 무신사가 그래픽 요소를 훨씬 더 많이 사용하고 있는 것도 눈에 띄는 차이네요. ‘특정 카테고리에 어떤 상품이 있는지 둘러 보고 싶다’는 목적이 명확한 유저라면 이런 요소들이 방해로 느껴질 수도 있을 것 같아요.

무신사 외에 많은 커머스 서비스가 카테고리를 그래픽으로 표현하고 있어요. 이는 라쿠텐 등 해외 서비스도 마찬가지였는데요. 11번가처럼 실제와 가까운 그래픽을 사용하는 케이스부터 펫프렌즈처럼 이모티콘 느낌의 단순화한 그래픽을 사용하는 케이스, 라쿠텐처럼 서비스만의 개성 있는 그래픽을 사용하는 케이스까지 다양한 케이스가 있었어요.

11번가와 펫프렌즈는 타입 분류와 카테고리 간의 관계를 각기 다른 UI로 표현한 예시인데요. 11번가의 경우 카테고리 선택 후 상단 탭에서 여성/남성/유아동 타입 분류를 선택하게 하고, 펫프렌즈의 경우 최상단에서 강아지/고양이 타입 분류를 먼저 선택하게 해요. 전자는 한 카테고리 안에서 타입을 오가며 탐색을 할 수 있다는 장점이, 후자는 한 타입 내에서 카테고리를 오가며 탐색을 할 수 있다는 장점이 있죠.

마지막으로, 라쿠텐처럼 카테고리 화면 상단에 인기 카테고리를 따로 보여주는 방식은 국내보다는 해외 서비스에서 많이 찾을 수 있었어요. 뚜렷한 목적성 없이 커머스 서비스를 방문한 유저에게 탐색을 유도하기 위한 UI로, 최근 국내에서는 비슷한 UI를 사용할 경우 보통 카테고리가 아닌 검색 화면 상단에 인기 검색어를 배치하고 하단에 카테고리를 배치하는 모습이 많이 보여요.

🌷 배달 서비스 카테고리

배달 서비스에서도 카테고리는 중요한 요소입니다. 메뉴나 가게가 정해져 있는 날도 있지만 그저 '배달을 먹고 싶다'라는 생각으로 서비스에 진입하는 경우도 많기 때문이죠! 이렇게 무엇을 먹고 싶은지 명확하지 않은 경우, 카테고리는 빠른 탐색을 돕는 첫 번째 단계입니다. 이에 대부분 메인 페이지에서 카테고리를 제공하는 모습을 확인할 수 있었어요.

제공하는 형태마저 매우 흡사한데요. 이미지와 텍스트로 구성된 카테고리를 4-5줄로 나열해서 제공하고 있어요. 빠른 주문을 위해서는 카테고리를 쉽게 파악할 필요가 있기 때문에 이미지 위주의 카테고리를 통해 직관성을 높이고 있고요.

카테고리를 하나씩 살펴보니 한식, 일식처럼 큰 범주뿐만 아니라 족발·보쌈, 치킨 등 사람들이 자주 찾는 음식도 카테고리로 제공하는 모습이 눈에 띄었어요. 이외에도 배달의 민족은 브랜드관과 맛집랭킹, 요기요는 뷰티와 리빙/라이프처럼 음식 이외의 서비스도 함께 제공하고 있습니다. 배달특급은 공공 배달 앱인 만큼 ‘오늘, 뭐 드실래요?’라는 문구로 한끼 식사 메뉴를 고르는 느낌을 제공하며 음식에만 집중하는 모습입니다.

한 줄만 제공하는 경우도 찾아볼 수 있었는데요. 좌우 스와이프로만 탐색이 가능한 방식이에요. 이런 방식을 사용하는 쿠팡이츠가 제공하는 카테고리는 무려 26개인데요. 15~20개의 카테고리를 제공하는 다른 사례들보다 많은 편이죠? 그래서 그런지 오늘 살펴본 사례 중 유일하게 ‘검색 탭’을 선택했을 때 카테고리만을 제공하고 있었어요.

이런 방식은 좁은 영역에서 많은 양의 카테고리를 제공할 수 있지만, 모든 내용을 한 번에 파악하기 어렵다는 단점이 있습니다. 그런 점에서 땡겨요의 사례가 인상 깊었는데요. 좌우 스와이프와 더불어 확장 기능을 제공하고 있어요. 이를 통해 사용자는 두 가지 방식으로 탐색이 가능해 각자의 목적에 맞게 서비스 이용이 가능합니다.

흥미로웠던 점은 1줄을 제공하는 땡겨요와 쿠팡이츠 모두 배달 서비스의 후발주자라는 점이에요. 처음에는 ‘제공하는 카테고리의 수가 적어서 이런 방식을 사용하지 않았을까?’ 싶었지만 쿠팡이츠가 가장 많은 카테고리를 제공하고 있고 땡겨요도 그 수가 적지 않아요. 아마 앱에 진입한 사용자를 붙잡아 두기 위해, 카테고리 영역을 넓히기보다는 메인 페이지를 다양하게 활용하는 방안을 모색했고 땡겨요는 쿠폰을, 쿠팡이츠는 인증된 음식점을 강조하는 방향으로 구성하지 않았을까 합니다. 이런 구성 방식이 카테고리 영역이 줄어드는데 영향을 미쳤을 거고요.

🌼 영상 콘텐츠 서비스 카테고리

집에서 보내는 시간이 많아지면서 OTT 서비스 사용량이 크게 늘었는데요. OTT 서비스는 다양한 콘텐츠 중에서도 사용자가 원하는 콘텐츠를 큐레이팅 하여 홈 화면에 보여주는 것이 사용자들이 직접 탐색하는 수고를 줄여주고 해당 서비스에 오래 머물게 할 수 있는 전략인 듯합니다.

따라서, 영상(포스터)을 홈 화면 또는 상단에 크게 배치하고 있어 카테고리는 홈 화면 상단에 1줄 정도를 차지하고 있거나, 아예 다른 페이지로 보여주는 경우가 많아요. 즉, 카테고리를 홈 화면에 아이콘 또는 사진을 통해 직관적으로 배치하는 배달앱 또는 커머스 앱의 카테고리와는 다른 카테고리 구성을 갖고 있습니다.

쿠팡 플레이는 화면 상단에 카테고리 대분류를 보여주고 있어요. 홈 화면을 거의 꽉 채우는 케로셀이 끝나는 지점에 세분화된 카테고리를 보여주고 있으며, 좌우 스와이프하여 세부 카테고리를 살펴볼 수 있게 구성되어 있어요. 모든 카테고리를 선택 시, 화면 전체를 덮는 리스트 박스를 통해 TV, 영화, 키즈, 교육, 뉴스를 포괄하는 세부 카테고리를 제공합니다.

티빙도 쿠팡 플레이와 비슷하게 상단에 카테고리 대분류를 보여주며, 상단 배너가 끝나는 지점에 세분화된 카테고리를 보여주고 있어요. 동일하게 좌우 스와이프 하여 세부 카테고리를 볼 수 있고, 이를 통해 화면의 공간을 효율적으로 사용하여 다양한 콘텐츠를 상단에 더 배치할 수 있어요. 홈 카테고리 옆에 실시간 카테고리를 배치한 것으로 보아, 실시간 콘텐츠가 티빙의 차별적인 서비스임을 짐작할 수 있습니다.

웨이브는 다른 서비스와 다르게 홈 화면에서 카테고리를 제공하지 않고, 하단 카테고리 탭을 통해 제공합니다. 카테고리 탭을 눌렀을 땐, 대분류> 소분류 카테고리를 박스 버튼 형태로 볼 수 있어요. 모든 카테고리가 동일한 컬러의 텍스트로 구성된 점은 아쉽습니다. 전체 카테고리를 텍스트 기준으로 파악해야 하기 때문입니다.

쿠팡 플레이는 티빙, 웨이브에 비해 콘텐츠 수가 부족하여, ‘드라마 ’ 카테고리를 선택했을 때 리스트에서 세부 필터링 기능은 따로 제공해주지 않고 있어요. 티빙은 상세 장르 및 채널을 통해 한 번 더 필터링할 수 있습니다. 마지막으로 웨이브는 상세 장르는 # 형태로 리스트를 제공하고, 인기 드라마의 경우에만 채널을 통한 필터링이 가능합니다.

⏰ 다음 주제 안내

구독자님, 이번 뉴스레터는 어떠셨나요? 아래 링크를 통해 피드백을 남겨주세요!

2022년 9월 15일 발행될 다음 뉴스레터 주제는 '행동 유도 사례'입니다. 각 서비스가 특정 기능 사용이나 화면 진입을 유도하기 위해 어떤 방법을 활용하고 있는지 자세히 살펴볼 예정이에요. 다음 팁스터도 많은 기대 부탁드려요!

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

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

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