회원가입을 하면 원하는 문장을
저장할 수 있어요!
다음
동일한 키워드로 검색한 리스트
회원가입을 하면 원하는 문장을
저장할 수 있어요!
다음
(에디터, 동동) 연휴가 끝나고 우연히 스크린 타임을 살펴한 상품을 어떻게 판매하고 있을까 궁금한 마음에 각기 다른 서비스에서 검색했는데 재밌게도 강조보게 되었어요. 일주일 간 일일 평균 7시간 43분정도 되더라고요. 그 중 소셜미디어 카테고리에서 34시간 12분, 엔터테인먼트에서 8시간 48분이었는데. 두 카테고리에서 물론 다른 액션도 많이 했지만 오랜 시간 머무른 페이지는 리스트였어요. 어떤 콘텐츠를 볼지, 어떤 상품을 살지 등 사용자로 하여금 앞으로 내가 접할 콘텐츠를 직접 선택할 수 있도록 나열해두는 곳! 오늘 주제기도 한 리스트 UI입니다. 오프라인 매장을 가보면, 인테리어와 메뉴판 배치에 따라 매출이 크게 오르내린다고 해요. 그런 의미가 온라인에서는 리스트 UI가 아닐까 생각해요. 여러 사례를 통해 재밌는 인사이트 얻으시길 바랍니다!
(에디터, 조이) 저는 새로운 SNS도 거리낌없이 사용해보는 SNS중독자인데요, 최근 가장 핫한 서비스인 오디오 기반 소셜 네트워킹 서비스, 클럽하우스도 사용하고 있어요!처음 서비스 가입하고 이용하기까지 잘했다고 생각한 점이 오늘 분석할 내용과 맞닿았어요! 바로 처음 친구 추천 때, 실수로 추천받은 사람을 모두 팔로우하지 않았다는 점인데요, 그 이유를 생각해보니 SNS가 가진 정형화 된 리스트 학습 경험 때문이란 걸 느꼈어요. 처음 SNS를 시작할 때 ‘왜 이리 어려워?‘라고 한 번씩 생각하지만 하나의 SNS를 자주 사용하다 보면 다른 SNS도 어렵지 않게 사용하게 되어요. 그러면서 점차 SNS를 처음 사용할 때 했던 실수들도 피할 수 있는 스킬이 생기곤 해요. 그래서 SNS별로 누구와 친구를 맺을지, 어떤 콘텐츠를 탐색할지, 어떤 사람과 소통할지 등 기능별로 비슷한 리스트 UI를 제공하고 있어 그 요소들을 함께 살펴보려 해요! ‘한 서비스 내에 이렇게 다양한 리스트 UI가 사용되었어?’ 와 더불어 상황별로 어떤 리스트 UI를 사용하는지 함께 확인해봐요~!
오늘 에디터 세 명이 분석한 서비스는 총 9개로, 3개씩 한 세트로 구성됩니다. 각각 신선배송/커머스/SNS로 나뉘는데, 내용이 길 수 있으니 아래 순서를 확인하신 후 관심이 있는 내용을 먼저 보시면 더 쉽게 즐기실 수 있을거에요!
1. 헬로네이처, 오늘회, SSG 새벽배송
2. 오늘의집, 무신사, 네이버 쇼핑라이브
3. 클럽하우스, 틱톡, 인스타그램
세 서비스는 리스트 UI 구성을 위와 같이 가져가고 있어요. 서비스 별 리스트에서 눈에 띄는 점을 살펴보면 헬로네이처는 크게 3가지 방법으로 리스트 UI를 구성해요. 기본은 정방형 이미지로 구성하고 (1)인기 상품은 크기를 키워 강조하고 있습니다. (2)제철 식재료는 하나로 묶어 보여주기도 하고요. 이처럼 동일 화면 내 리스트를 다양하게 가져가는 이유는 지루함을 없애는 것과 동시에 다채로운 느낌을 주기 위해서에요. 경험해보셨겠지만 동일한 구성의 리스트를 여러개 확인하다 보면 어느순간 내가 원하는 조건에 따른 리스트라 하더라도 집중이 잘 되지 않는 순간이 오는데요. 이럴 때 한 번씩 구성을 변경하면 다시 한 번 집중해서 대상을 볼 수 있게 됩니다.
(3)오늘회는 리스트 중간 중간에 사용자가 작성한 사진 리뷰를 보여줘요. 실제 구매자가 남긴 리뷰고, 사진이 포함되어 있어 더 집중해서 볼 수 있는 구성이지만 이 리뷰 영역과 앞서 확인한 리스트가 전혀 다른 내용으로 다가오는 건 아쉬웠습니다. 리스트에 있는 상품의 사진 리뷰를 중간 중간 섞어 보여줬다면 어땠을까 하는 생각이 드네요.
(4)SSG 새벽배송은 ‘손이가요 손이가. 인기과자 할인’ ‘따끈따끈한 신상품’ ‘오늘의 파스타’ 등의 문구를 리스트가 시작되는 부분에 활용하고 있어요. 대표 이미지 또는 일러스트레이션과 함께 말이죠. 주목도를 높이는 효과가 있다고 생각해요. 리스트 UI구성을 달리하는 것과 같은 목적이지만 표현 방법이 다른 사례라고 볼 수 있습니다.
동일한 키워드로 검색한 리스트
(에디터, 재그마스터) 이미지 중심의 서비스를 담당했을 때, 인기 이미지 리스트를 20개씩 불러와 보여줬어요. 이미지 해상도가 높아 한 번에 불러올 수 없었기에 선택한 방법이었는데 20개 단위로 계속 로딩이 되니(물론 현재 리스트를 볼 때 다음 세트를 준비하고 있지만) 흐름이 자연스럽지 않다는 생각이 들었습니다. 사용자 당 평균 4-5개 세트를 불러오는 것을 알 수 있었는데요. 1분도 채 되지 않는 시간이었습니다. 더 중요한 건 상세화면으로 진입하지 않고 리스트에만 머물다가 떠나는 사용자들의 비율이 높다는 것. 그래서 20개 세트를 3번째 로딩할 때 구성을 달리했어요. 사용자가 지금까지 다운로드 한 이미지들의 태그를 추출, 연관도가 높은 태그에 해당하는 이미지 세트를 별도로 보여주는 방법이었습니다. 상세화면으로 이동할 수도 있고, 자연스레 태그에 해당하는 이미지를 모아볼 수도 있었는데 이 작업으로 인해 체류시간과 평균 이미지 다운로드 횟수 역시 높아졌다는 것을 확인 할 수 있었어요. 리스트에 어떤 정보를 포함시켜야 하는지도 중요하지만, 한 화면 내 리스트 구성 자체를 어떻게 가져갈 지 고민하는 것도 필요하다는 것을 알게된 경험이었습니다.
카테고리에 따른 리스트와 별개로 기획전은 커머스에서 자주 활용되는 구성입니다. 크리스마스, 설날 등 특정 시기가 반영 되기도 하고, 제철 식재료를 다루기도 하며, 시간대에 따라 할인 상품을 묶어 내보내기도 합니다. 모두 그런 것은 아니지만, 기획전의 역할 중 하나는 예정에 없던 구매를 만들어 내는 것입니다. 그래서 일단 눈에 띄는 것이 중요해요. 눈에 띄는 방법은 크게 두 가지로 하나는 앱 실행 시 확인하게 하는 방법, 또 하나는 시각적 효과를 이용하는 방법입니다.
(1)헬로네이처는 홈 화면 진입과 동시에 기획전 리스트를 먼저 확인 할 수 있어요. 화면을 가득 채우는 대표 이미지와 타이틀을 함께 활용하고 있습니다. 기획전을 대표하는 상품을 활용해 촬영된 사진에 ‘설 선물’이라는 표현이 들어 있어 포함 내용을 미리 짐작할 수 있기도 합니다.
(2)오늘회는 홈 화면 상단 슬라이드 영역에 이벤트와 기획전 내용을 적절히 섞어 내보내고 있어요. 역시 앱 실행 후 처음 보게 되는 화면에 들어가 있는 모습이고요. 다만 22개의 내용이 서로 섞여 있어 하나씩 확인하기 어렵기도 하고, 전반적으로 텍스트가 많아 집중이 잘 되지 않아요.
(3)SSG 새벽배송 역시 홈 화면 진입과 동시에 기획전에 해당하는 내용들을 슬라이드로 확인 할 수 있어요. 왼쪽으로 기획전에 해당하는 텍스트를 확인하고, 오른쪽으로 직접 촬영, 편집한 대표 이미지를 볼 수 있는 구성인데요. (2)오늘회와 동일하지만, 텍스트 활용이 용이한 배경에서 촬영된 이미지 덕분에 상대적으로 집중이 잘 되는 구성입니다. (4)기획전 탭도 따로 운영중인데 이곳에서도 기획전을 대표하는 이미지를 적극적으로 활용하고 있어요.
상세화면에서 자주 볼 수 있는 ‘연관상품’은 크게 두 가지 성격을 지니게 됩니다. 하나는 추가 구매를 유도하기 위해 또 하나는 쇼핑을 계속 이어가게 하기 위해서 입니다. 상세 화면에 들어왔다는 건, 구매에 꽤 근접 했다는 것을 의미하는데요. 실제 구매로 이어지지 않을 경우 리스트로 다시 돌아가기 보다 관련 상품을 통해 상세 화면으로 다시 연결되는 것이 서비스 입장에서 사용자를 계속 구매하기와 가까운 곳에 둘 수 있다는 장점이 있습니다.
헬로네이처는 기획전에 포함된 상품일 경우 해당 기획전으로 보내는 경우가 있지만, 연관 상품을 리스트로 따로 보여주진 않습니다. (1)오늘회는 상세 화면 내 묶어서 주문하면 좋은 상품을 보여주고, 한 번에 담을 수 있는 기능을 제공합니다. (2)화면 하단에 ‘같이 구매해보실래요?’라는 이름으로 상세 화면 연관 상품 리스트도 제공하지만, 이는 다시 화면을 이동해야 하기에 최초 선택한 상품과 어울리며 바로 담을 수 있는 묶음 추천이 더 매력적으로 느껴집니다.
SSG 새벽배송은 연관상품 영역을 세분화 했는데요. (3)함께 많이 보는 상품, (4)연관된 상품입니다. 제가 본 건 디저트라 함께 많이 본 상품에서도 비슷한 상품이 많았는데 연관 상품에서는 칠리새우, 치킨텐더 등이 포함되어 있었어요. 일반 사용자 입장에서는 크게 와 닿지 않는 구성이었습니다.
(에디터, 재그마스터) 상세화면에 진입한 이유를 알아야 해요. 해당 상품이 갖고 있는 공통 속성 (예를 들면 카테고리와 같은)을 연달아 보고 있는지, 아니면 처음 들어온 건지 등을 바탕으로 말이죠. 네이버 포스트는 동일 작가의 글을 세 개 이상 볼 때 해당 작가를 팔로우 하고 새글 알림을 확인하라는 팝업을 띄우는데요. 몇 개 이상의 글을 연달아 봤다는 건 일정 수준 이상의 ‘흥미’를 갖고 있다는 것으로 팔로우 할 가능성이 높다고 판단했기 때문입니다. 연관 상품에 대한 ‘만족도’를 높이기 위해서도 같은 맥락에서의 고민이 필요하다고 생각해요. 오늘회의 묶음이 좋았던 이유도 같습니다. 회를 보고 있을 땐, 탕과 같이 함께 즐기기 좋은 메뉴를 제안해주기 때문입니다. 위치도 절묘해요. 보통 연관 상품은 화면의 끝에 위치하는데, 구매를 결정한 경우 여기까지 닿지 못할 가능성이 높기 때문입니다. (그래서 장바구니에 담거나, 결제하기를 선택한 순간에 함께 구매하면 좋은 상품을 띄워주는 경우가 있어요)
작년 6월 ‘모바일 앱 뜯어보기 15번째’ 내용에서 커머스가 ‘품절 상태’를 대하는 법을 정리한 적 있어요. 당시 기준, 오늘의집은 품절 시 상태 안내와 더불어 비슷한 상품보기 버튼을 함께 배치해 사용자가 탐색 과정을 최소화 한 상태로 다른 상품을 볼 수 있게 유도하고 있었습니다. (3)SGG 새벽배송 역시 리스트 내 품절 상품이 있는 경우 대체상품을 확인 할 수 있도록 연결하고 있어요. 대체상품 버튼을 선택하면 동일 카테고리 인기 제품을 보여주는 방법입니다. 리스트 내 상품들의 상태를 명확하게 알려주는 것도 필요하지만, 품절로 인해 구매가 어려운 경우 차선을 제공하는 것 역시 중요하다는 사실을 보여주는 사례라고 할 수 있어요.
(1)헬로네이처는 구매 가능 - 품절 두 단계 사이에 ‘품절 임박’이라는 상태를 하나 더 활용하고 있어요. 구매 가능 개수가 일정 수 이하로 줄어들 경우 표기되는 것 같은데, ‘몇 개 안 남았어요’라는 내용을 리스트 내 썸네일에 보여주는 방법입니다. 처음 보는 방법은 아니에요. 홈쇼핑에서는 이제 곧 품절 된다는 메시지를 방송 막바지에 계속 내보내고, 숙소 예약 서비스에서는 몇 명이 함께 보고있다는 메시지를 띄워 사용자로 하여금 빨리 구매하지 않으면 놓칠수도 있겠다는 생각을 하게 만들기도 해요. 몇 개 남지 않은 상태에서 실제 품절이 되면 ‘재입고 신청’이 가능하고, 신청 시 앱 푸시와 카카오톡 알림을 통해 안내 받을 수 있네요.
(2)오늘회는 두 가지 방법으로 품절 상태를 안내해줍니다. 하나는 주문 가능한 일자를 표기해주는 것 또 하나는 곧 입고 될 예정이라는 안내를 해주는 것. 전자는 정육각에서도 활용하는 방법 중 하나로 하루 이틀 정도 기다리면 받을 수 있다는 메시지를 통해 실제 주문까지 고려할 수 있는 역할을 합니다. 다만, ‘Coming Soon’이라는 메시지로 품절 된 상품을 그대로 두는 것은 아쉬웠어요. 오늘회 서비스 특성 상 수급이 불안정한 상품이 충분히 존재할 수 있지만, 이런 경우 재입고 신청이나 유사 상품을 볼 수 있도록 연결 하는 방법을 고려할 수 있기 때문입니다.
(에디터, 재그마스터) 사용자가 조건에 따른 리스트에서 원하는 상품을 찾았는데 품절 상태를 확인하면 여러 생각을 할 수 밖에 없어요. 비슷한 다른 상품을 리스트에서 다시 확인하거나 함께 구매하려던 다른 상품을 보러 이동하는 등 말이죠. 그나마 스스로 재탐색으로 이어지는 경우라면 다행(?)이지만 그렇지 않은 경우에 서비스 입장에서는 ‘원래 대상’에 대한 특정 행동으로 이어질 수 있도록 하는 것이 중요해요. 펀딩이 마무리 되었을 때 앵콜 요청을 하거나, 품절 시 재입고 요청을 할 수 있도록 말이죠. 여기까지 행동이 이어지는 것과 이를 비껴 가는 건 이후 사용 패턴에도 많은 영향을 끼치기 때문입니다. (재입고 시 안내를 해줄 경우, 이미 구매를 했다 하더라도 서비스에 대한 인지를 다시 한 번 할 수 있는 등)
헬로네이처는 (1)레시피 영상 확인과 동시에 필요 재료를 구매할 수 있는 구성을 자주 활용하고 있어요. 레시피를 먼저 보게 될 경우 이렇게 만들어 봐야겠다는 생각을 갖게 될 수 있고, 자연스레 어떤 재료가 필요할까 떠올리게 되는데요. 이 둘을 한 공간에서 해결 할 수 있다는 점에서, 재료 전체 구매를 유도할 수 있다는 점에서 헬로네이처 뿐만아니라 아내의식탁 등에서도 자주 활용되는 구성입니다.
오늘회는 크게 2가지로 묶음 상품을 확인할 수 있도록 되어 있어요. (2)하나는 ‘꿀조합’이라는 탭을 메인으로 운영하며 ‘집에서 이태리 여행’ 등과 같은 테마로 구성하는 것 (3)또 하나는 함께 먹는 사람의 수에 따른 조합, 그리고 가격대에 따른 구성입니다.
이 내용만 듣고보면 단순 모음, 그러니까 기존 커머스에서도 볼 수 있는 상품 추천 정도가 아닐까 하는 생각을 하실 수 있는데요. 그 보다는 B마트에서 활용했던 것처럼 묶여 있는 상품 전체에 대한 가격 확인과 일괄 구매가 가능한 수준으로 구현되어 있습니다. 이 방법은 행동을 곧바로 유도할 수 있다는 장점이 있는데요. 장바구니에 하나의 아이템을 담는 순간에 추천 아이템을 보게 하는 방식이나, 상세 페이지 하단에 하나의 영역으로 포함된 추천 상품 등을 다시 보고 장바구니에 담는 수고를 덜 수 있습니다.
사실 이런 구성의 가장 큰 ‘고민’이자 ‘이슈’는 사용자가 과연 얼마나 ‘공감’할 수 있느냐에 달려있어요. 사용자가 실 구매하는 아이템(데이터)을 바탕으로 구성해주는게 아니라면 말이죠. 앞서 말씀드렸던 것처럼 범위가 좁혀져 있는 상태라면 연관도가 아예 없다고 느끼지 않는 선에서 출발 할 수는 있습니다. 특히 ‘해산물’은 우리가 식당에서 먹은 경험을 바탕으로 했을 때 한 가지 메뉴를 먹기 보다 여러가지를 곁들여 먹는 경우가 많기에 더더욱 그렇죠.
이런 구성에 따른 구매가 얼마나 발생하는지는 알 수 없지만, 제가 오늘회를 사용하면서 실제 구매로 이어진 경험과 더불어 묶음 상품으로 도움을 받는 건 이 조합으로도 먹을 수 있겠구나 – 라는 정보도 포함되어 있었습니다. 구성에 포함된 아이템들이 기본적으로 선택되어 있지만 탭으로 쉽게 해제할 수 있어 원하는 항목만 장바구니에 담을 수 있다는 점도 좋았고요.
오늘의 집은 홈에서 총 6개 종류의 리스트 뷰를 탭으로 구분해 제공하고 있어요. 서비스 성격상 이미지를 기반으로 태그, 글쓴이, 카테고리, 조회 수 등의 데이터를 고루 보여주고 있죠. 탭 별 특징을 먼저 정리해 볼게요.
인기 : 피처드 영역으로 정방향+타이틀+태그 형식의 리스트 외에도 다양한 종류가 배치
사진 : 사용자 업로드 이미지 기반의 커뮤니티. 게시글+댓글+포함 상품이 한 세트로, SNS와 유사하게 배치
집들이 : 하나의 게시글 기준으로 가로형 썸네일+타이틀+게시자 형태의 카드 리스트 뷰
노하우 : 집들이/전문가 집들이와 유사하되, 이미지의 비중을 줄이고 타이틀 비중을 높임
전문가 집들이 : 집들이와 동일한 항목을 기반으로 한 영역에 더 많은 콘텐츠가 보일 수 있도록 배치
질문과 답변 : 이미지보다 질문 타이틀과 태그가 선행 배치된 구조
이렇게 다양한 리스트를 가져가는 이유는 탭에서 보여져야 할 메인 콘텐츠의 포인트가 모두 달랐기 때문이라고 생각해요. 각각의 탭은 유사한 내용일지라도 이미지와 타이틀 중 다뤄져야할 비중이 다르기도 하고요. 대표적으로 유사한 듯 조금씩 다른 2가지 경우를 확인해볼게요.
집들이 vs 전문가 집들이
우선 썸네일 이미지-타이틀-게시자-스크랩수-조회수 등의 구성은 동일합니다. 그런데 집들이는 1열, 전문가 집들이는 2열로 전문가 집들이 탭이 좀더 촘촘하게 표현되고 있어요. 집들이는 일반 사용자들이 올린 콘텐츠고, 전문가 집들이는 리모델링 스튜디오에서 시공 컨셉을 올리는 영역이라는 점이 다른데요. 서비스 중반 인테리어 업체가 들어오며 사용자가 직접 올리는 글에 더 집중할 수 있는 환경을 만들기 위해 선택한 방법이 아닐까 싶어요.
(1)상세 화면까지는 모두 동일하게 유지되고, (2)게시자 프로필로 넘어 가서야 다른 뷰로 보여 집니다. 상세 화면은 그대로 활용하되 앞단의 리스트만 다르게 가져간 것을 알 수 있어요. 콘텐츠 타입의 명확한 분리를 위해 이런 선택을 할 수 있습니다. 저도 프로젝트 진행 과정에 개발자들과 결정하는 사항 중 타입별 뷰를 통일하고, 분리하는 부분 내용이 많은데요. 동일한 뷰를 여러 카테고리/타입에서 사용할 경우, 추후 개선과 업데이트할 때 모든 카테고리가 동시에 업데이트 되야하는 점을 감안하면 초기 기획할 때 내가 집중하고자 하는 컨셉을 명확하게 하고 뷰를 분리시키는 것도 방법인 것 같아요. (물론 너무 많이 나누면 번거롭고요)
(에디터, 동동의 덧붙임) 아, 여기서 함께 봐야할 포인트는! 버튼의 컬러에요! 사용자가 올린 집들이 게시글의 ‘상품 모아보기’는 오늘의집 포인트 컬러와 일치시켰고, 전문가 집들이 상세 화면에 있는 ‘이 컨셉 시공상담’은 톤 다운 시켜 다른 기능임을 표현하고 있어요.
노하우 vs 질문과 답변
노하우와 질문과 답변 탭 리스트 뷰가 다른 이유는 콘텐츠를 구성하는 필수 요소가 다르기 때문이에요. 공통적으로 (1)의 업로드 버튼을 누르면 작성이 가능한데, 노하우는 PC에서 작성하기를 권장해서 모바일 웹으로 살펴본 결과 커버 사진이 필수로 들어가고, 질문과 답변은 질문을 이해할 수 있는 참고 사진을 함께 올리기를 권장하지만 필수 사항은 아닙니다. 때문에 리스트 설계 시, 질문과 답변은 이미지가 우측으로 배치, 없을 경우 빈 영역으로 둬도 자연스럽게 구성된 것이죠.
노하우는 내 팁(?)을 전하는데 초점이 맞춰져 있어 작성자보다 글을 읽는 사람이 더 중요할 수 있어요. 글을 보는 사람의 이해를 위해 이미지가 많은 것이 좋고요. 반대로 질문과 답변은 사용자가 나의 질문을 빠르게 물어보고 누군가로부터 답을 얻고 싶어하는 작성자의 욕구가 더 깊게 반영되는 메뉴라 작성 시 불필요한 장치를 빼는 데 초점을 맞춘 것 같아요.
(에디터, 동동의 덧붙임) 오늘의 집 전반적인 리스트를 살펴보며 느낀 점은 다른 서비스들에 비해 리스트가 많은 편이지만, 다른 이유가 명확하다는 점이었어요. 사용자 입장에서 다른 콘텐츠라는 점이 확실히 전달된다면 나눠도 좋겠다는 생각이 들었어요. 다만, 하나의 콘텐츠에 지나치게 많은 정보가 전달되면 한 곳에도 집중이 안된다는 점은 꼭 확인해야해요! (사진 탭은 너무 집중력을 떨어트리는 투머치 인포메이션의 집합소였어요)
무신사는 전달하고자 하는 정보와 상품이 많아요. 무엇보다 리스트 뷰를 구성할 때 라벨과 뱃지를 많이 사용하는 서비스! (2), (3) 라벨은 상품 상태, 기간, 순위 등을 표현하는데 사용되고, 뱃지는 댓글을 포함한 참여 정보가 얼마나 있는지를 보여주는데 주로 사용되고 있어요. 댓글 개수가 리스트에 포함된 모습이 인상 깊었는데, 뱃지 컬러는 신규일 경우 파란색, 아닐 경우 회색으로 처리해서 구분하는 모습입니다. (모바일에서는 확인이 어렵지만, PC 웹에서 파란색 뱃지 콘텐츠는 모두 NEW 라벨이 붙어있는걸 발견했습니다.) 그 외에도 (1)처럼 360도 회전 착장 샷과 영상으로 상품 착장샷을 볼 수 있도록 다양한 시도를 하고 있는 점이 흥미로웠어요!
그리고 무신사와 우신사가 나눠져있어 리스트 뷰에서 쉽게 전환할 수 있도록 (1) 플로팅 버튼을 활용하고 있어요. 전체를 선택하면 남성-여성을 선택, 해제 할 수 있고 최근에 본 상품 썸네일을 배치해 직전 상품으로 돌아갈 수 있습니다.
네이버 쇼핑라이브 홈 리스트는 심플하게 정의되어 있습니다. 지금 라이브 중인 콘텐츠 - 라이브 예정인 콘텐츠 - 최근 3일 이내 인기있던 콘텐츠 순서로 배치되어있고 그 뒤로는 상단 탭 메뉴처럼 패션, 푸드, 라이프 카테고리 순서대로 라이브 혹은 라이브가 끝난 콘텐츠를 보여줍니다.
구성이 심플하다고 생각되었던 부분은 먼저 라이브 중인 콘텐츠와 라이브 예정인 콘텐츠 리스트를 비교했을 때 세부 구성은 조금 다르지만. 전반적인 통일성을 유지하고 있어 오늘의 집/무신사처럼 여러 개 타입의 리스트가 보여진다는 느낌과 달랐어요. 라이브 예정인 콘텐츠는 썸네일 이미지에 딤처리 후 라이브 시작 시점이 표기되어 있어 쉽게 구분, 정보로 받아들일 수 있었습니다.
인기 콘텐츠는 라이브 중 콘텐츠와 예정 리스트와 달리 세로 카드 형태로 좌우 스크롤이 가능해요. 전체적인 홈 리스트에서 연달아 같은 타입의 카드가 나오다 처음으로 새로운 디자인 형태가 등장하는 셈인데, 라이브 쇼핑을 이용해보신 분은 이 ‘시청 수 Top 10’의 (1) 썸네일이 굉장히 익숙할거에요. 구성이 라이브 상세에 진입했을 때와 유사하기 때문입니다.
(에디터, 동동의 덧붙임) 저는 UI를 설계할 때, 기능과 화면 구조가 다른 경우에도 최대한 맥락에 따라 배치를 통일하려해요. 사용자에게 안정감을 주는 것 뿐만 아니라, 특정 행동을 하기 위해 어디로 가야할지 혹은 무엇을 클릭해야할지 쉽게 유도할 수 있기 때문이에요.
라이브 커머스는 홈 쇼핑처럼 라이브가 시작되는 시간대가 정해져있어 좌측 상단에 일정표 버튼이 있어요. 일정 리스트로 가면 쉽게 일정과 시간을 확인할 수 있는데, 홈과 마찬가지로 리스트에서 쉽게 라이브 시작 알림을 받을 수 있도록 설정 버튼이 나와있는 점이 좋았어요. 깨알같지만, (1) 보라색 폰트가 롤링이 되며 서로 다른 2개의 설명글이 나오는데 마치 라이브 배너를 보고 있는 것 같은 기분에 ‘아 맞다. 라이브 쇼핑이지?’ 했어요.
마지막으로 쇼핑라이브 상세에 들어갔을 때, 확인할 수 있는 리스트들을 살펴볼게요! 예정된 라이브의 상세에 들어가면 텍스트와 이미지로 구성된 설명이 있고, 아래로 내려가 2번째 이미지처럼 라이브에서 소개 예정인 상품 리스트를 볼 수 있습니다. 상품 리스트는 기존 일반 상품 리스트와 동일하게 정방향 썸네일과 상품 가격 및 할인 비율, N포인트 할인 여부, 마지막으로 판매자 정보를 제공합니다. 3번째 이미지 ‘지난 라이브 다시보기’와 비교했을 때, 썸네일 크기와 비율만으로 다른 콘텐츠임을 강조할 수 있다는 걸 확인할 수 있어요.
(에디터, 동동의 덧붙임) 오늘의 집, 무신사, 네이버 쇼핑라이브 3가지 서비스 리스트를 집중적으로 분석해봤어요. 리스트 화면은 상세화면 진입 전, 최대한 매력적인 정보를 보여줘야 하기에 정보 구성과 카드 디자인이 굉장히 중요한 영역이에요. 포인트가 되어야 할 정보와 리스트에서 보여지는 정보가 다음 화면 진입 시 어떻게 연결되어야 할 지 많은 고민이 필요한 영역이기도 합니다.
오디오 방을 만들고 음성으로 소통하는 SNS라 기능이 굉장히 심플하지만 프로세스마다 다양한 리스트 UI를 제공하고 있어요.
제가 확인한 리스트 형태만 12가지 정도가 되네요!(settings 제외)
클럽하우스 리스트UI
- 처음 가입 시 지인 팔로우할 수 있는 리스트
- 관심사를 선택하는 리스트
- 관심사 기반 인물 추천 리스트
- 팔로잉하는 사람이 없을 때 메인 대화방 리스트
- 검색 시 리스트
- 팔로잉하는 사람이 있을 때 메인 대화방 리스트
- 대화 방 모더레이터+스피커+리스너 리스트
- 초대 시 리스트
- 일정 리스트
- 알림 리스트
- 팔로워 실시간 활동 리스트
- 팔로잉,팔로워 리스트
비슷한듯 하지만 하나하나 살펴보면 미세하게 다른 UI들이 제공되고 있었어요.
그럼 이중 제가 흥미롭다고 생각한 리스트 UI 를 살펴볼까요?
아는 사람 vs 모르는 사람
(1) 처음 나오는 리스트는 연락처 기반 클럽하우스 사용자의 프로필 사진+이름+기능을 알 수 없는 체크표시가 함께 출력됩니다. 체크 표시는 이 중 팔로우 할 사람을 선택할 수 있는 버튼입니다.
(2) 내가 모르는 사람, 내 관심사를 선택하고 그에 맞는 사람을 추천해 줄 때 나오는 리스트입니다. 프로필 사진+이름+한 줄 소개와 추가 버튼이 있습니다.
(3) 내 주소록에 저장된 지인 리스트입니다. 이름+클럽하우스 지인 수+ 초대 버튼이 있습니다. 아직 클럽하우스 사용자가 아니라 사진 대신 연락처 이름 기반 아이콘이 뜹니다. 초대 시 android인지 ios 사용자인지는 구분할 수 없어 기억에 의존해 초대장을 배포해야 해요.(2021년2월 기준 iOS만 배포)
(4) 나를 팔로잉하고 내가 팔로우하는 사람들 리스트가 출력됩니다. 이때는 프로필 사진+이름+현재 참여 중인 방+Room 버튼이 나옵니다. 이때 리스트를 클릭하면 상대방 프로필이 뜹니다. 그리고 비밀 방을 개설할지, 참여 중인 방에 참여할지, 프로필을 볼지 선택하는 버튼이 나옵니다.
(5) 팔로워 리스트입니다. 날 팔로우하는 사람들이고 프로필 사진+이름과 팔로우 버튼만 뜹니다. 이때 내가 모르는 사람이 날 팔로우 할 수도 있는데 절 팔로우했다는 이유만으로 상세설명은 없어집니다.
(에디터, 조이의 덧붙임) (1) 체크가 clickable한 느낌이 들지 않아 아주 조심스럽게 진행한 기억이 있네요. 만약 연락처 목록에 전 애인 번호가 있고 그 사람이 클럽하우스를 먼저 하고 있었다면… 의도치 않게 팔로우할 수도 있는 아찔한 상황..! 팔로우 버튼은 강조했지만 체크 표시는 clickable 하지 않아 긴장하며 이것저것 눌러봤답니다. 똑같이 알 수도 있고, 모를 수도 있는 상태이지만 클럽하우스에 가입 후 상대방과 어떤 교류를 하느냐에 따라 보이는 리스트 형태가 달라서 재밌었어요. 다만 영역마다 다른 리스트 UI가 나와 처음엔 하나하나 읽어보며 액션을 취하는 등 학습이 필요했습니다…! 앞으로 서비스를 개선해가면서 규칙이 생기지 않을까 조심스럽게 추측해보지만, 상대방과 나의 교류 상태에 따라 제공하는 정보량이 차이가 나는 디테일한 규칙이 생길수도 있겠다는 생각이 들어요. 설계자가 원하는 방향으로 사용자를 움직이게 하려면 꼭 일관된 UI를 제공하기 보단 상황에 맞게 정보를 조절하는 방법도 눈여겨볼 만합니다.
Speaker vs Listener
방에 참여하는 적극성에 따라 이를 시각적으로 표현한 리스트 UI가 있어요. 방에서 나타나는 리스트 UI는 위에서 설명한 인물 설명보다 한층 간략하고 직관적인 UI를 제공하고 있어요.
(1) 방에 입장하게 되면 가장 상단에 Moderator(운영자)와 Speaker 들의 프로필+이름이 3단으로 출력되고 있어요. 이때 이야기를 하는 사람 프로필 외곽에 border가 생기면서 말하는 상황에 이 요소가 깜박입니다. 이와같이 말하는 사람을 시각화해줍니다.
(2) 스크롤을 내리면 위에 Speaker 들이 팔로우하는 사람들이 조금 더 작은 크기로 프로필+이름이 4단으로 나오고 있어요! 그리고 그 하단엔 Moderator(운영자), Speaker와 직접적인 관계가 없는 listener 들 정보가 프로필+이름이 4단으로 나오고 있어요.
Listener 들은 들을 수도 있지만 손 버튼을 눌러 Speaker로 올라갈 수도 있습니다. 그러면 내 프로필이 상단으로 옮겨집니다. 방 안에선 두가지 형태의 리스트 UI만 있다보니 한번이라도 경험을 해본다면 쉽게 사용할 수 있어요!
(에디터, 조이의 덧붙임) 3단 구성, 4단 구성으로 방에 참여하는 적극성을 표현한 리스트 UI도 눈여겨볼 만 합니다. 이런 디테일 덕분에 처음 쓰는 서비스임에도 크게 헤매지 않고 사용했어요. 프로필 영역이 좀 더 큰 사람은 방을 이끄는 사람, 프로필 영역이 상대적으로 작은 사람은 방을 탐색하는 사람으로 볼 수 있어요. 눈치채셨겠지만 오디오 기반 SNS이지만 막상 사용해보면 누가 말하는지 시각적인 표현에도 상당히 집중하게 합니다. 그래서일까요, 클럽하우스를 시작하면 아무것도 못 하고 클럽하우스만 하게 된답니다. 이 외에도 매력적인 요소가 많아 사람들을 끄는 오디오 SNS, 앞으로 클럽하우스의 행보가 궁금해집니다!
어떤 리스트 UI가 있는지 함께 살펴볼게요.
추천 계정 vs 제안 계정
틱톡에서 크리에이터 프로필을 누르면 볼 수 있는 (1) 화면입니다. 나타나는 요소는 다르지만, 많이 익숙한 UI인데요, 프로필 하단을 보면 크리에이터 게시물이 보입니다. 인스타그램과 같이 리스트 UI에선 정형화된 직사각형으로 콘텐츠가 보이고 있어요. 또 콘텐츠 안엔 재생 수가 나와 있어 사람들이 많이 본 게시물을 클릭하지 않아도 알 수 있습니다.
(2)를 보시면 [팔로우]버튼 옆에 인스타그램(연동한 타 SNS), 정체를 알 수 없는 화살표가 있는데요, 클릭해보면 추천 계정이 뜹니다. 이때 추천 계정 리스트엔 프로필 사진, 이름, 한 줄 설명 및 공인 인증마크, 팔로우 버튼이 뜹니다. 한눈에 꽤 많은 정보를 알 수 있는데 [모두 보기]가 궁금하죠?
누르면 (3) 리스트가 뜹니다. 보이는 콘텐츠는 (2)와 같은데 [인기 틱톡커]라는 설명이 추가로 나오네요! 서비스 운영기간이 어느 정도 있다 보니 이와 같은 레벨링이 가능해서 부담 없이 팔로우할 수 있게 해놨어요! 공인이고 유명하다고 하면 부담 없이 팔로우하는 사람들의 심리를 잘 이용했네요.
(에디터, 조이의 덧붙임) SNS는 사회 관계망 서비스이니 만큼 서로 관계를 쌓아나가는 데 초점을 두는데요. 그렇기에 리스트 안에 집약적인 정보가 들어가 있는 걸 확인했어요! 정말 필요한 정보를 읽기 쉽게 배열해 사용자의 행동을 유도하는 리스트 UI, 이렇게 확인해보니 왜 제가 공인을 많이 팔로우 했는지도 알게 되었네요~
다른 사람이 많이 한 행동을 보여주기
틱톡의 재밌는 문화가 바로 밈입니다. 유명한 짤을 패러디하거나 직접 만들며 유행을 선도하는데 그래서일까요, (1)검색 탭을 누르면 최근 사람들이 많이 참여한 챌린지 해시태그와 관련 영상이 떠요! 이때 리스트 UI 에 나오는 콘텐츠가 움짤 미리 보기로 나와 흥미로운 영상이면 클릭을 유도합니다. 그리고 이 챌린지를 얼마나 많은 사람이 참여했는지 한눈에 볼 수 있기에 유행을 따라가고 싶다면 검색 탭을 자주 보시면 됩니다. 그리고 (2) 프로필을 보면 크리에이터 정보 하단에 탭이 하나가 더 추가되어 있어요. 바로 음악인데요, 크리에이터가 직접 만든 음악을 올리면 음악 탭에 추가가 됩니다. 그리고 이 음악을 몇 명이 사용했는지도 리스트 UI에서 볼 수 있어요.
음악을 클릭하면 (3)으로 이동하는데 이 음악을 이용해 영상을 만든 콘텐츠 리스트가 떠요.
(에디터, 조이의 덧붙임) 검색 탭이 이렇게 화려한 건 쇼핑 탭 이후 처음인 듯합니다. 수많은 움짤들 대부분이 춤추는 영상입니다. 현란한 움짤에 빠지면 한 시간은 그냥 지나갑니다. 틱톡은 전반적으로 챌린지를 독려하며 이를 하나의 문화로 만들었기에 최근 마케팅용으로도 많이 사용되고 있다 해요. 다양한 영상편집 툴과 음악을 제공해 계속 새로운 챌린지를 만들어 가고 있는데요, 처음엔 익숙한 콘텐츠가 아니라 낯설 수도 있지만 계속 보다 보면 중독성이 어마어마한 서비스입니다.
내 정보에서 보는 리스트 UI
알림에선 누가 내 계정을 팔로우했거나 영상에 반응한 경우 시간순으로 알림이 뜹니다. 이때 나오는 정보를 보면 프로필 사진+이름+행동+시간+행동한 영상 순 혹은 맞팔로우 버튼으로 리스트가 뜹니다. 사용자들의 행동에 대한 알림을 줄 땐 계정 제안을 할 때 보다 다양한 형태의 리스트 UI가 나오는 걸 확인했어요! 그리고 상단 위 종이비행기 모양을 클릭하면 (2) 다이렉트 메시지 함으로 옵니다. 여기서 나오는 리스트 UI는 프로필 사진+이름+공인딱지+메시지 한 줄 내용+시간. 그리고 나 탭으로 가면 앞서 크리에이터들 프로필 화면과 같이 제 계정 정보와 제가 만든 콘텐츠가 떠요! 다른 건 내가 좋아요 한 영상, 비공개 영상을 볼 수 있는 탭이 따로 나오고 있어요.
(에디터, 조이의 덧붙임) 틱톡이 많이 낯설게 느껴질 분들도 있겠지만 이미 MZ 세대를 점령한 서비스인만큼 한번 소개하면 좋겠다고 생각했어요. 어떤가요? 인스타그램과 미묘하게 비슷하지만 미묘하게 정리가 안 된 느낌의 UI, 이는 특히 알림 리스트 UI에서 확인할 수 있었는데요, 한눈에 정보가 안 들어와 틱톡을 사용할 때 알림 탭을 거의 확인하지 않고 있었어요. 왜 이렇게 집중하기 힘든지, 정리가 된 인스타그램 사례를 함께 확인해볼까요?
인스타그램은 왜 틱톡,클럽하우스보다 안정적인 리스트 UI를 제공하다고 이야기했는지 비교하며 살펴보겠습니다.
활동 리스트 UI 비교
차례대로 (1) 인스타그램, (2) 틱톡, (3) 클럽하우스 입니다.
가장 오래 사용하기도 했고 익숙한 UI가 (1) 인스타그램 리스트인데요, 그 이유는 어떤 사람이 제 게시물에 좋아요를 누르거나 댓글을 입력했을 때 같은 규칙인 사용자 프로필 사진+계정 이름+활동 및 반응한 게시물+팔로우 버튼이 뜹니다. 이때 중요한 건 이름과 행동을 같은 텍스트 규칙을 사용해 표현했다는 건데요, 빠르게 리스트를 훑을 때는 팔로우 버튼이 있는지, 활동 리스트 하단에 하트와 답글 달기가 있는지에 따라 어떤 반응인지 바로 캐치할 수 있다는 점입니다.
(2) 틱톡도 프로필 사진+ 계정 이름+같은 행동을 한 사람 수+활동+ 반응한 게시물+팔로우 버튼이 뜨는데 다른 점은 내가 쓴 댓글을 누군가 좋아요를 하면 규칙이 파괴된다는 점입니다. 다른 영역은 인스타그램과 거의 비슷해 익숙했지만, 댓글과 좋아요 표시가 깨버린 규칙 때문인지 리스트가 정리되지 않게 느껴집니다. 또 인스타그램보다 섬네일 이미지가 길어 리스트 높이 값이 긴 것도 어정쩡한 영역을 여백으로 만들고 있어 더 불안정하게 느껴집니다.
(3) 클럽하우스는 틱톡보다 정리는 되었지만, 반면 누가 날 팔로우한 경우 내가 할 수 있는 액션에 대한 버튼은 없습니다. 그래서 알림을 유심히 보지 않으면 누가 날 팔로우했는지 확인하기 어렵습니다. 클럽하우스가 틱톡보다 정리가 잘 되었다고 느끼는 건 아마 콘텐츠 영역이 따로 없어서인 것 같아요. 오디오 기반에 휘발성 콘텐츠이기에 어떤 행사가 열릴거라는 안내가 중요 콘텐츠이고 시각적으로 보여줄 건 모더레이터의 프로필 사진 정도네요.
여긴 프로필 사진+계정 이름+행동+행동을 한 시간이 보여 텍스트 규칙도 잘 유지가 되고 정리가 잘 되었지만, 반면 다음 행동을 취하기 위해선 리스트를 하나하나 읽어봐야 한다는 점이 아쉬웠습니다.
검색 UI 비교
이번엔 검색화면 비교입니다. (1) 인스타그램은 특유의 정방형 이미지를 바탕으로 오른쪽 위에 정방형 이미지 2개를 합친 동영상이 나오고 있어요. 검색창을 누르면 제가 이전에 검색했던 계정 중 인기 계정이 나옵니다. 이때 리스트는 프로필 사진+계정 이름+한 줄 설명+계정과 나의 관계+리스트 삭제 버튼이 뜨고 있어요. 좋은 건 굳이 계정을 클릭하지 않더라도 계정과 나의 관계를 보여준다는 점입니다. 클릭해서 확인할 필요 없으니까요!
그리고 (2)는 틱톡인데 검색 탭으로 가면 챌린지 탭이 뜨고 검색어를 입력하면 인기 동영상 탭이 가장 먼저 뜹니다. 영상이 재생되고 있고 날짜+제목+프로필 사진+계정 이름+조회 수가 차례대로 나옵니다.
마지막으로 (3)클럽하우스는 검색 탭으로 가면 내가 팔로우할 사람들을 추천해주고 아래 관심사 기반 사람을 더 찾으라고 관심사 리스트가 나옵니다. 그리고 검색어 입력 시 프로필 사진+계정 이름+한 줄 설명이 뜹니다.
재밌는 건 사람과의 소통에 가장 근접하게 설계한 사례가 인스타그램이라는 점입니다. 인스타그램은 검색하면 계정이 가장 먼저 검색되고 해당 계정과 나의 관계도 한 눈에 보여줍니다. 반면 틱톡은 게시물을 강조하고 있습니다. 인기 탭에서 사용자 탭을 눌러야 해당 검색어에 맞는 계정이 나옵니다. 클럽하우스도 인스타그램과 같이 계정 간 연결을 우선으로 보여주지만 아쉬운 건 검색한 계정과 나의 관계는 눌러봐야 알 수 있습니다. 이처럼 같은 검색 탭이라도 강조하고 싶은 결과 값을 먼저 보여주는 지 확인해봤어요!
(에디터, 조이의 덧붙임) 세 SNS를 나란히 비교해보니 유사한 기능이라도 인스타그램이 더 정교하게 설계된 걸 확인할 수 있었어요, 리스트 UI를 보면 한 눈에 많은 정보를 읽기 쉽게 습득할 수 있었어요. 역시 오랜 시간 다듬어온 결과일까요? 또 검색 결과를 통해 SNS에서 강조하고자 하는 내용을 엿볼 수 있었는데요, 인스타그램은 계정에 집중을, 틱톡은 콘텐츠에 집중한 것을 알 수 있었어요. 클럽하우스도 인스타그램과 같이 계정에 집중하고 있는데 이는 클럽하우스 특성상 휘발성 콘텐츠가 주되다 보니 검색에서도 사용자 혹은 사용자 그룹에 초점을 두고 있단 걸 확인할 수 있었어요. 가장 완성도 높고 다채롭지만 세 개를 봤을 때 인스타그램의 정체성이 모호해지고 있단 생각이 들었어요. 콘텐츠와 계정 그 사이 어딘가에서 갑자기 툭 튀어나온 쇼핑 탭..! 그래서일까요, 쇼핑 탭이 생긴 후 사용자 불만이 폭발했는데 함께 볼까요!
인스타그램의 새로운 시도
인스타그램이 다른 SNS에 비해 정리가 잘되어 있긴 하지만 최근 쇼핑 탭과 릴스 기능을 추가하며 상당한 반발도 샀어요, 그래서 추가로 탐색/쇼핑 탭을 함께 보려고 해요.
(1)은 하단 돋보기를 누르면 나오는 화면인데 정적인 이미지 기반의 콘텐츠만 제공하다가 언제부턴가 IGTV 영상 일부를 우측에 배열해서 보여주더라고요! 저는 주로 귀여운 동물 영상이 많이 떠서 종종 보곤 한답니다.
(2) 그리고 말 많은 쇼핑탭, 너무 익숙한 탭인데 기능이 완전히 바뀌었고 UI도 달라져서 많은 반발이 있었죠.
보면 기존 탐색 탭 대비 2단 그리드에 콘텐츠 간 여백을 많이 줘서 콘텐츠를 강조하고 있어요. 돈을 내고 광고하는 판매자들을 위해 신경을 쓴 것 같죠? 여기서 (3) 에디터 추천까지 가면 아예 1단 그리드로 변하면서 상품 이미지를 굉장히 강조하며 보여줍니다.
3->2->1단 그리드로 콘텐츠 몰입도를 높이는 리스트 UI를 사용하고 있네요! 몇 년 동안 일정한 규칙을 가지고 안정적으로 서비스를 제공한 인스타그램의 파격 행보!
과연 괄목할 만한 성과가 있었는지는 좀 더 지켜봐야겠어요.
(에디터, 조이의 덧붙임) 서비스 UI 변경 위주로 업데이트 했을 때 유저들이 반발하는 이유는 익숙한 UI가 아니다 보니 학습이 필요하고 기존 습관을 변경해야하기 때문입니다. 하지만 서비스를 일정한 규칙을 바탕으로 업데이트 한다면 사용자들의 좋은 반응을 기대해볼 수 있겠네요! 익숙해서 별다른 학습없이 사용하는 리스트 UI이지만 서비스별로 제공하는 정보가 꽤 다르죠? 서비스에서 사용자가 원하는 행동이 다르기 때문입니다!
좋아요
댓글
공유
공유
4.5K
