📚 우리 서비스에 맞는 리스트 UI는?

리스트 UI의 중요성

(에디터 🐳) 매일의 재택도 벌써 2개월 째, 처음엔 배달 음식을 달고 살다가 이제는 밀키트와 요리에 관심을 갖게 되었어요. 그러다보니 자연스레 신선식품 배송 서비스를 자주 들락거리게 됩니다. 편스토랑에서 우승한 상품을 사기 위해 헬로네이처에 들르기도 하고, 어마무시한 배송 속도와 다양한 상품이 있는 쿠팡도, 가끔 색다른 메뉴가 당길 땐 오늘회 등을 마치 오프라인 마트 고르듯 활용하고 있어요. 한 번은 동일한 상품을 어떻게 판매하고 있을까 궁금한 마음에 각기 다른 서비스에서 검색했는데 재밌게도 강조하는 것과 보여주는 정보가 모두 달랐어요. 오늘은 그 경험을 살려 오늘회, 헬로네이처, SSG 새벽배송 앱이 각각 어떤 리스트 UI를 제공하는지 비교 분석해보려고 합니다.

(에디터 🐥) 연휴가 끝나고 우연히 스크린 타임을 살펴보게 되었어요. 일주일 간 일일 평균 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. 클럽하우스, 틱톡, 인스타그램

주요 서비스 사례

헬로네이처, 오늘회, SSG 새벽배송 : 기본 리스트 UI

세 서비스는 리스트 UI 구성을 위와 같이 가져가고 있어요. 서비스 별 리스트에서 눈에 띄는 점을 살펴보면 헬로네이처는 크게 3가지 방법으로 리스트 UI를 구성해요. 기본은 정방형 이미지로 구성하고 (1)인기 상품은 크기를 키워 강조하고 있습니다. (2)제철 식재료는 하나로 묶어 보여주기도 하고요. 이처럼 동일 화면 내 리스트를 다양하게 가져가는 이유는 지루함을 없애는 것과 동시에 다채로운 느낌을 주기 위해서에요. 경험해보셨겠지만 동일한 구성의 리스트를 여러개 확인하다 보면 어느순간 내가 원하는 조건에 따른 리스트라 하더라도 집중이 잘 되지 않는 순간이 오는데요. 이럴 때 한 번씩 구성을 변경하면 다시 한 번 집중해서 대상을 볼 수 있게 됩니다.

(3)오늘회는 리스트 중간 중간에 사용자가 작성한 사진 리뷰를 보여줘요. 실제 구매자가 남긴 리뷰고, 사진이 포함되어 있어 더 집중해서 볼 수 있는 구성이지만 이 리뷰 영역과 앞서 확인한 리스트가 전혀 다른 내용으로 다가오는 건 아쉬웠습니다. 리스트에 있는 상품의 사진 리뷰를 중간 중간 섞어 보여줬다면 어땠을까 하는 생각이 드네요.

(4)SSG 새벽배송은 ‘손이가요 손이가. 인기과자 할인’ ‘따끈따끈한 신상품’ ‘오늘의 파스타’ 등의 문구를 리스트가 시작되는 부분에 활용하고 있어요. 대표 이미지 또는 일러스트레이션과 함께 말이죠. 주목도를 높이는 효과가 있다고 생각해요. 리스트 UI구성을 달리하는 것과 같은 목적이지만 표현 방법이 다른 사례라고 볼 수 있습니다.

헬로네이처, 오늘회, SSG 새벽배송 : 기획전

카테고리에 따른 리스트와 별개로 기획전은 커머스에서 자주 활용되는 구성입니다. 크리스마스, 설날 등 특정 시기가 반영 되기도 하고, 제철 식재료를 다루기도 하며, 시간대에 따라 할인 상품을 묶어 내보내기도 합니다. 모두 그런 것은 아니지만, 기획전의 역할 중 하나는 예정에 없던 구매를 만들어 내는 것입니다. 그래서 일단 눈에 띄는 것이 중요해요. 눈에 띄는 방법은 크게 두 가지로 하나는 앱 실행 시 확인하게 하는 방법, 또 하나는 시각적 효과를 이용하는 방법입니다.

(1)헬로네이처는 홈 화면 진입과 동시에 기획전 리스트를 먼저 확인 할 수 있어요. 화면을 가득 채우는 대표 이미지와 타이틀을 함께 활용하고 있습니다. 기획전을 대표하는 상품을 활용해 촬영된 사진에 ‘설 선물’이라는 표현이 들어 있어 포함 내용을 미리 짐작할 수 있기도 합니다.

(2)오늘회는 홈 화면 상단 슬라이드 영역에 이벤트와 기획전 내용을 적절히 섞어 내보내고 있어요. 역시 앱 실행 후 처음 보게 되는 화면에 들어가 있는 모습이고요. 다만 22개의 내용이 서로 섞여 있어 하나씩 확인하기 어렵기도 하고, 전반적으로 텍스트가 많아 집중이 잘 되지 않아요.

(3)SSG 새벽배송 역시 홈 화면 진입과 동시에 기획전에 해당하는 내용들을 슬라이드로 확인 할 수 있어요. 왼쪽으로 기획전에 해당하는 텍스트를 확인하고, 오른쪽으로 직접 촬영, 편집한 대표 이미지를 볼 수 있는 구성인데요. (2)오늘회와 동일하지만, 텍스트 활용이 용이한 배경에서 촬영된 이미지 덕분에 상대적으로 집중이 잘 되는 구성입니다. (4)기획전 탭도 따로 운영중인데 이곳에서도 기획전을 대표하는 이미지를 적극적으로 활용하고 있어요.

헬로네이처, 오늘회, SSG 새벽배송 : 연관상품

상세화면에서 자주 볼 수 있는 ‘연관상품’은 크게 두 가지 성격을 지니게 됩니다. 하나는 추가 구매를 유도하기 위해 또 하나는 쇼핑을 계속 이어가게 하기 위해서 입니다. 상세 화면에 들어왔다는 건, 구매에 꽤 근접 했다는 것을 의미하는데요. 실제 구매로 이어지지 않을 경우 리스트로 다시 돌아가기 보다 관련 상품을 통해 상세 화면으로 다시 연결되는 것이 서비스 입장에서 사용자를 계속 구매하기와 가까운 곳에 둘 수 있다는 장점이 있습니다.

헬로네이처는 기획전에 포함된 상품일 경우 해당 기획전으로 보내는 경우가 있지만, 연관 상품을 리스트로 따로 보여주진 않습니다. (1)오늘회는 상세 화면 내 묶어서 주문하면 좋은 상품을 보여주고, 한 번에 담을 수 있는 기능을 제공합니다. (2)화면 하단에 ‘같이 구매해보실래요?’라는 이름으로 상세 화면 연관 상품 리스트도 제공하지만, 이는 다시 화면을 이동해야 하기에 최초 선택한 상품과 어울리며 바로 담을 수 있는 묶음 추천이 더 매력적으로 느껴집니다.

SSG 새벽배송은 연관상품 영역을 세분화 했는데요. (3)함께 많이 보는 상품, (4)연관된 상품입니다. 제가 본 건 디저트라 함께 많이 본 상품에서도 비슷한 상품이 많았는데 연관 상품에서는 칠리새우, 치킨텐더 등이 포함되어 있었어요. 일반 사용자 입장에서는 크게 와 닿지 않는 구성이었습니다.

헬로네이처, 오늘회, SSG 새벽배송 : 상태안내

작년 6월 ‘모바일 앱 뜯어보기 15번째’ 내용에서 커머스가 ‘품절 상태’를 대하는 법을 정리한 적 있어요. 당시 기준, 오늘의집은 품절 시 상태 안내와 더불어 비슷한 상품보기 버튼을 함께 배치해 사용자가 탐색 과정을 최소화 한 상태로 다른 상품을 볼 수 있게 유도하고 있었습니다. (3)SGG 새벽배송 역시 리스트 내 품절 상품이 있는 경우 대체상품을 확인 할 수 있도록 연결하고 있어요. 대체상품 버튼을 선택하면 동일 카테고리 인기 제품을 보여주는 방법입니다. 리스트 내 상품들의 상태를 명확하게 알려주는 것도 필요하지만, 품절로 인해 구매가 어려운 경우 차선을 제공하는 것 역시 중요하다는 사실을 보여주는 사례라고 할 수 있어요.

(1)헬로네이처는 구매 가능 - 품절 두 단계 사이에 ‘품절 임박’이라는 상태를 하나 더 활용하고 있어요. 구매 가능 개수가 일정 수 이하로 줄어들 경우 표기되는 것 같은데, ‘몇 개 안 남았어요’라는 내용을 리스트 내 썸네일에 보여주는 방법입니다. 처음 보는 방법은 아니에요. 홈쇼핑에서는 이제 곧 품절 된다는 메시지를 방송 막바지에 계속 내보내고, 숙소 예약 서비스에서는 몇 명이 함께 보고있다는 메시지를 띄워 사용자로 하여금 빨리 구매하지 않으면 놓칠수도 있겠다는 생각을 하게 만들기도 해요. 몇 개 남지 않은 상태에서 실제 품절이 되면 ‘재입고 신청’이 가능하고, 신청 시 앱 푸시와 카카오톡 알림을 통해 안내 받을 수 있네요.

(2)오늘회는 두 가지 방법으로 품절 상태를 안내해줍니다. 하나는 주문 가능한 일자를 표기해주는  것 또 하나는 곧 입고 될 예정이라는 안내를 해주는 것. 전자는 정육각에서도 활용하는 방법 중 하나로 하루 이틀 정도 기다리면 받을 수 있다는 메시지를 통해 실제 주문까지 고려할 수 있는 역할을 합니다. 다만, ‘Coming Soon’이라는 메시지로 품절 된 상품을 그대로 두는 것은 아쉬웠어요. 오늘회 서비스 특성 상 수급이 불안정한 상품이 충분히 존재할 수 있지만, 이런 경우 재입고 신청이나 유사 상품을 볼 수 있도록 연결 하는 방법을 고려할 수 있기 때문입니다.

헬로네이처, 오늘회, SSG 새벽배송 : 기타 구성

헬로네이처는 (1)레시피 영상 확인과 동시에 필요 재료를 구매할 수 있는 구성을 자주 활용하고 있어요. 레시피를 먼저 보게 될 경우 이렇게 만들어 봐야겠다는 생각을 갖게 될 수 있고, 자연스레 어떤 재료가 필요할까 떠올리게 되는데요. 이 둘을 한 공간에서 해결 할 수 있다는 점에서, 재료 전체 구매를 유도할 수 있다는 점에서 헬로네이처 뿐만아니라 아내의식탁 등에서도 자주 활용되는 구성입니다.

오늘회는 크게 2가지로 묶음 상품을 확인할 수 있도록 되어 있어요. (2)하나는 ‘꿀조합’이라는 탭을 메인으로 운영하며 ‘집에서 이태리 여행’ 등과 같은 테마로 구성하는 것 (3)또 하나는 함께 먹는 사람의 수에 따른 조합, 그리고 가격대에 따른 구성입니다.

이 내용만 듣고보면 단순 모음, 그러니까 기존 커머스에서도 볼 수 있는 상품 추천 정도가 아닐까 하는 생각을 하실 수 있는데요. 그 보다는 B마트에서 활용했던 것처럼 묶여 있는 상품 전체에 대한 가격 확인과 일괄 구매가 가능한 수준으로 구현되어 있습니다. 이 방법은 행동을 곧바로 유도할 수 있다는 장점이 있는데요. 장바구니에 하나의 아이템을 담는 순간에 추천 아이템을 보게 하는 방식이나, 상세 페이지 하단에 하나의 영역으로 포함된 추천 상품 등을 다시 보고 장바구니에 담는 수고를 덜 수 있습니다.

사실 이런 구성의 가장 큰 ‘고민’이자 ‘이슈’는 사용자가 과연 얼마나 ‘공감’할 수 있느냐에 달려있어요. 사용자가 실 구매하는 아이템(데이터)을 바탕으로 구성해주는게 아니라면 말이죠. 앞서 말씀드렸던 것처럼 범위가 좁혀져 있는 상태라면 연관도가 아예 없다고 느끼지 않는 선에서 출발 할 수는 있습니다. 특히 ‘해산물’은 우리가 식당에서 먹은 경험을 바탕으로 했을 때 한 가지 메뉴를 먹기 보다 여러가지를 곁들여 먹는 경우가 많기에 더더욱 그렇죠.

이런 구성에 따른 구매가 얼마나 발생하는지는 알 수 없지만, 제가 오늘회를 사용하면서 실제 구매로 이어진 경험과 더불어 묶음 상품으로 도움을 받는 건 이 조합으로도 먹을 수 있겠구나 – 라는 정보도 포함되어 있었습니다. 구성에 포함된 아이템들이 기본적으로 선택되어 있지만 탭으로 쉽게 해제할 수 있어 원하는 항목만 장바구니에 담을 수 있다는 점도 좋았고요.

오늘의집

이제는 8,000억 가치의 예비 유니콘 기업 버킷플레이스가 운영하는 ‘오늘의 집’입니다. 최근 추가 투자 유치를 추진중이기도 해요.(관련 기사). 사용자 리뷰를 통한 구매력 상승, 국내외 인테리어 시장이 확대되는 추세에 힘입어 1조원 가치도 금방 달성하지 않을까 싶어요. 사용자의 직접적인 리뷰와 상품 구성이 잘 전달되어야 하는만큼 리스트 뷰가 어떻게 구성되어 있는지 살펴볼게요!

오늘의 집은 홈에서 총 6개 종류의 리스트 뷰를 탭으로 구분해 제공하고 있어요. 서비스 성격상 이미지를 기반으로 태그, 글쓴이, 카테고리, 조회 수 등의 데이터를 고루 보여주고 있죠. 탭 별 특징을 먼저 정리해 볼게요.

이렇게 다양한 리스트를 가져가는 이유는 탭에서 보여져야 할 메인 콘텐츠의 포인트가 모두 달랐기 때문이라고 생각해요. 각각의 탭은 유사한 내용일지라도 이미지와 타이틀 중 다뤄져야할 비중이 다르기도 하고요. 대표적으로 유사한 듯 조금씩 다른 2가지 경우를 확인해볼게요.

집들이 vs 전문가 집들이

우선 썸네일 이미지-타이틀-게시자-스크랩수-조회수 등의 구성은 동일합니다. 그런데 집들이는 1열, 전문가 집들이는 2열로 전문가 집들이 탭이 좀더 촘촘하게 표현되고 있어요. 집들이는 일반 사용자들이 올린 콘텐츠고, 전문가 집들이는 리모델링 스튜디오에서 시공 컨셉을 올리는 영역이라는 점이 다른데요. 서비스 중반 인테리어 업체가 들어오며 사용자가 직접 올리는 글에 더 집중할 수 있는 환경을 만들기 위해 선택한 방법이 아닐까 싶어요.

(1)상세 화면까지는 모두 동일하게 유지되고, (2)게시자 프로필로 넘어 가서야 다른 뷰로 보여 집니다. 상세 화면은 그대로 활용하되 앞단의 리스트만 다르게 가져간 것을 알 수 있어요. 콘텐츠 타입의 명확한 분리를 위해 이런 선택을 할 수 있습니다. 저도 프로젝트 진행 과정에 개발자들과 결정하는 사항 중 타입별 뷰를 통일하고, 분리하는 부분 내용이 많은데요. 동일한 뷰를 여러 카테고리/타입에서 사용할 경우, 추후 개선과 업데이트할 때 모든 카테고리가 동시에 업데이트 되야하는 점을 감안하면 초기 기획할 때 내가 집중하고자 하는 컨셉을 명확하게 하고 뷰를 분리시키는 것도 방법인 것 같아요. (물론 너무 많이 나누면 번거롭고요)

노하우 vs 질문과 답변

노하우와 질문과 답변 탭 리스트 뷰가 다른 이유는 콘텐츠를 구성하는 필수 요소가 다르기 때문이에요. 공통적으로 (1)의 업로드 버튼을 누르면 작성이 가능한데, 노하우는 PC에서 작성하기를 권장해서 모바일 웹으로 살펴본 결과 커버 사진이 필수로 들어가고, 질문과 답변은 질문을 이해할 수 있는 참고 사진을 함께 올리기를 권장하지만 필수 사항은 아닙니다. 때문에 리스트 설계 시, 질문과 답변은 이미지가 우측으로 배치, 없을 경우 빈 영역으로 둬도 자연스럽게 구성된 것이죠.

노하우는 내 팁(?)을 전하는데 초점이 맞춰져 있어 작성자보다 글을 읽는 사람이 더 중요할 수 있어요. 글을 보는 사람의 이해를 위해 이미지가 많은 것이 좋고요. 반대로 질문과 답변은 사용자가 나의 질문을 빠르게 물어보고 누군가로부터 답을 얻고 싶어하는 작성자의 욕구가 더 깊게 반영되는 메뉴라 작성 시 불필요한 장치를 빼는 데 초점을 맞춘 것 같아요.

무신사

무신사는 전달하고자 하는 정보와 상품이 많아요. 무엇보다 리스트 뷰를 구성할 때 라벨과 뱃지를 많이 사용하는 서비스! (2), (3) 라벨은 상품 상태, 기간, 순위 등을 표현하는데 사용되고, 뱃지는 댓글을 포함한 참여 정보가 얼마나 있는지를 보여주는데 주로 사용되고 있어요. 댓글 개수가 리스트에 포함된 모습이 인상 깊었는데, 뱃지 컬러는 신규일 경우 파란색, 아닐 경우 회색으로 처리해서 구분하는 모습입니다. (모바일에서는 확인이 어렵지만, PC 웹에서 파란색 뱃지 콘텐츠는 모두 NEW 라벨이 붙어있는걸 발견했습니다.) 그 외에도 (1)처럼 360도 회전 착장 샷과 영상으로 상품 착장샷을 볼 수 있도록 다양한 시도를 하고 있는 점이 흥미로웠어요!

그리고 무신사와 우신사가 나눠져있어 리스트 뷰에서 쉽게 전환할 수 있도록 (1) 플로팅 버튼을 활용하고 있어요. 전체를 선택하면 남성-여성을 선택, 해제 할 수 있고 최근에 본 상품 썸네일을 배치해 직전 상품으로 돌아갈 수 있습니다.

네이버 쇼핑 라이브

정방향 썸네일은 이제 안녕👋. 라이브 커머스 시대가 오면서 리스트가 길어지고 썸네일이 세로로 길~어지는게 자연스러워지는 요즘이에요.(숏텀 서비스의 영향도 있고요) 2021년, 라이브 커머스 시장 규모가 3조원대로 추정 되면서 많은 기업들이 라이브 커머스를 시작하고 있는데요. 오늘은 네이버 쇼핑라이브의 리스트 UI를 살펴보도록 하겠습니다.

네이버 쇼핑라이브 홈 리스트는 심플하게 정의되어 있습니다. 지금 라이브 중인 콘텐츠 - 라이브 예정인 콘텐츠 - 최근 3일 이내 인기있던 콘텐츠 순서로 배치되어있고 그 뒤로는 상단 탭 메뉴처럼 패션, 푸드, 라이프 카테고리 순서대로 라이브 혹은 라이브가 끝난 콘텐츠를 보여줍니다.

구성이 심플하다고 생각되었던 부분은 먼저 라이브 중인 콘텐츠와 라이브 예정인 콘텐츠 리스트를 비교했을 때 세부 구성은 조금 다르지만. 전반적인 통일성을 유지하고 있어 오늘의 집/무신사처럼 여러 개 타입의 리스트가 보여진다는 느낌과 달랐어요. 라이브 예정인 콘텐츠는 썸네일 이미지에 딤처리 후 라이브 시작 시점이 표기되어 있어 쉽게 구분, 정보로 받아들일 수 있었습니다.

인기 콘텐츠는 라이브 중 콘텐츠와 예정 리스트와 달리 세로 카드 형태로 좌우 스크롤이 가능해요. 전체적인 홈 리스트에서 연달아 같은 타입의 카드가 나오다 처음으로 새로운 디자인 형태가 등장하는 셈인데, 라이브 쇼핑을 이용해보신 분은 이 ‘시청 수 Top 10’의 (1) 썸네일이 굉장히 익숙할거에요. 구성이 라이브 상세에 진입했을 때와 유사하기 때문입니다.

라이브 커머스는 홈 쇼핑처럼 라이브가 시작되는 시간대가 정해져있어 좌측 상단에 일정표 버튼이 있어요. 일정 리스트로 가면 쉽게 일정과 시간을 확인할 수 있는데, 홈과 마찬가지로 리스트에서 쉽게 라이브 시작 알림을 받을 수 있도록 설정 버튼이 나와있는 점이 좋았어요. 깨알같지만, (1) 보라색 폰트가 롤링이 되며 서로 다른 2개의 설명글이 나오는데 마치 라이브 배너를 보고 있는 것 같은 기분에 ‘아 맞다. 라이브 쇼핑이지?’ 했어요🤣.

마지막으로 쇼핑라이브 상세에 들어갔을 때, 확인할 수 있는 리스트들을 살펴볼게요! 예정된 라이브의 상세에 들어가면 텍스트와 이미지로 구성된 설명이 있고, 아래로 내려가 2번째 이미지처럼 라이브에서 소개 예정인 상품 리스트를 볼 수 있습니다. 상품 리스트는 기존 일반 상품 리스트와 동일하게 정방향 썸네일과 상품 가격 및 할인 비율, N포인트 할인 여부, 마지막으로 판매자 정보를 제공합니다. 3번째 이미지 ‘지난 라이브 다시보기’와 비교했을 때, 썸네일 크기와 비율만으로 다른 콘텐츠임을 강조할 수 있다는 걸 확인할 수 있어요.

클럽하우스

최근 수많은 SNS에 도배된 클럽하우스! 클럽하우스는 2020년 5월에 베타 서비스를 시작했으며 초대 방식 및 iOS 버전만 제공하며 폐쇄적인 확장을 해왔는데요. 그럼에도 2021년 1월 21일, 10억 달러의 가치를 지니게 된 오디오 SNS 서비스입니다. 다른 SNS와 달리 텍스트, 이미지 기반이 아닌 오디오 기반의 서비스인데요. 팟캐스트 같기도 하지만 원한다면 발언권을 얻어 소통할 수 있는 쌍방향 서비스입니다. (서비스에 대한 자세한 설명)

오디오 방을 만들고 음성으로 소통하는 SNS라 기능이 굉장히 심플하지만 프로세스마다 다양한 리스트 UI를 제공하고 있어요.

제가 확인한 리스트 형태만 12가지 정도가 되네요!(settings 제외)

[클럽하우스 리스트UI]

비슷한듯 하지만 하나하나 살펴보면 미세하게 다른 UI들이 제공되고 있었어요.

그럼 이중 제가 흥미롭다고 생각한 리스트 UI 를 살펴볼까요?

아는 사람 vs 모르는 사람

(1) 처음 나오는 리스트는 연락처 기반 클럽하우스 사용자의 프로필 사진+이름+기능을 알 수 없는 체크표시가 함께 출력됩니다. 체크 표시는 이 중 팔로우 할 사람을 선택할 수 있는 버튼입니다.

(2) 내가 모르는 사람, 내 관심사를 선택하고 그에 맞는 사람을 추천해 줄 때 나오는 리스트입니다. 프로필 사진+이름+한 줄 소개와 추가 버튼이 있습니다.

(3) 내 주소록에 저장된 지인 리스트입니다. 이름+클럽하우스 지인 수+ 초대 버튼이 있습니다. 아직 클럽하우스 사용자가 아니라 사진 대신 연락처 이름 기반 아이콘이 뜹니다. 초대 시 android인지 ios 사용자인지는 구분할 수 없어 기억에 의존해 초대장을 배포해야 해요.(2021년2월 기준 iOS만 배포)

(4) 나를 팔로잉하고 내가 팔로우하는 사람들 리스트가 출력됩니다. 이때는 프로필 사진+이름+현재 참여 중인 방+Room 버튼이 나옵니다. 이때 리스트를 클릭하면 상대방 프로필이 뜹니다. 그리고 비밀 방을 개설할지, 참여 중인 방에 참여할지, 프로필을 볼지 선택하는 버튼이 나옵니다.

(5) 팔로워 리스트입니다. 날 팔로우하는 사람들이고 프로필 사진+이름과 팔로우 버튼만 뜹니다. 이때 내가 모르는 사람이 날 팔로우 할 수도 있는데 절 팔로우했다는 이유만으로 상세설명은 없어집니다.

Speaker vs Listener

방에 참여하는 적극성에 따라 이를 시각적으로 표현한 리스트 UI가 있어요. 방에서 나타나는 리스트 UI는 위에서 설명한 인물 설명보다 한층 간략하고 직관적인 UI를 제공하고 있어요.

(1) 방에 입장하게 되면 가장 상단에 Moderator(운영자)와 Speaker 들의 프로필+이름이 3단으로 출력되고 있어요. 이때 이야기를 하는 사람 프로필 외곽에 border가 생기면서 말하는 상황에 이 요소가 깜박입니다. 이와같이 말하는 사람을 시각화해줍니다.

(2) 스크롤을 내리면 위에 Speaker 들이 팔로우하는 사람들이 조금 더 작은 크기로 프로필+이름이 4단으로 나오고 있어요! 그리고 그 하단엔 Moderator(운영자), Speaker와 직접적인 관계가 없는 listener 들 정보가 프로필+이름이 4단으로 나오고 있어요.

Listener 들은 들을 수도 있지만 손 버튼을 눌러 Speaker로 올라갈 수도 있습니다. 그러면 내 프로필이 상단으로 옮겨집니다. 방 안에선 두가지 형태의 리스트 UI만 있다보니 한번이라도 경험을 해본다면 쉽게 사용할 수 있어요!

틱톡

2019년, 중국을 제외한 국가에서만 10억 회 이상의 다운로드를 기록하며 전 세계적 인기를 끌었습니다. 운영사 바이트 댄스는 2018년 기준 기업가치가 750억 달러(약 84조 8,000억 원)로 평가받으며 우버를 제치고 세계 최대의 유니콘 기업 자리에 올랐는데요, 무엇보다 이전까지 존재하지 않았던 15초짜리 짧은 동영상이라는 새로운 시장을 개척한 틱톡! (자세한 기사 읽기)

어떤 리스트 UI가 있는지 함께 살펴볼게요.

추천 계정 vs 제안 계정

틱톡에서 크리에이터 프로필을 누르면 볼 수 있는 (1) 화면입니다. 나타나는 요소는 다르지만, 많이 익숙한 UI인데요, 프로필 하단을 보면 크리에이터 게시물이 보입니다. 인스타그램과 같이 리스트 UI에선 정형화된 직사각형으로 콘텐츠가 보이고 있어요. 또 콘텐츠 안엔 재생 수가 나와 있어 사람들이 많이 본 게시물을 클릭하지 않아도 알 수 있습니다.

(2)를 보시면 [팔로우]버튼 옆에 인스타그램(연동한 타 SNS), 정체를 알 수 없는 화살표가 있는데요, 클릭해보면 추천 계정이 뜹니다. 이때 추천 계정 리스트엔 프로필 사진, 이름, 한 줄 설명 및 공인 인증마크, 팔로우 버튼이 뜹니다. 한눈에 꽤 많은 정보를 알 수 있는데 [모두 보기]가 궁금하죠?

누르면 (3) 리스트가 뜹니다. 보이는 콘텐츠는 (2)와 같은데 [인기 틱톡커]라는 설명이 추가로 나오네요! 서비스 운영기간이 어느 정도 있다 보니 이와 같은 레벨링이 가능해서 부담 없이 팔로우할 수 있게 해놨어요! 공인이고 유명하다고 하면 부담 없이 팔로우하는 사람들의 심리를 잘 이용했네요.

다른 사람이 많이 한 행동을 보여주기

틱톡의 재밌는 문화가 바로 밈입니다. 유명한 짤을 패러디하거나 직접 만들며 유행을 선도하는데 그래서일까요, (1)검색 탭을 누르면 최근 사람들이 많이 참여한 챌린지 해시태그와 관련 영상이 떠요! 이때 리스트 UI 에 나오는 콘텐츠가 움짤 미리 보기로 나와 흥미로운 영상이면 클릭을 유도합니다. 그리고 이 챌린지를 얼마나 많은 사람이 참여했는지 한눈에 볼 수 있기에 유행을 따라가고 싶다면 검색 탭을 자주 보시면 됩니다. 그리고 (2) 프로필을 보면 크리에이터 정보 하단에 탭이 하나가 더 추가되어 있어요. 바로 음악인데요, 크리에이터가 직접 만든 음악을 올리면 음악 탭에 추가가 됩니다. 그리고 이 음악을 몇 명이 사용했는지도 리스트 UI에서 볼 수 있어요.

음악을 클릭하면 (3)으로 이동하는데 이 음악을 이용해 영상을 만든 콘텐츠 리스트가 떠요.

내 정보에서 보는 리스트 UI

알림에선 누가 내 계정을 팔로우했거나 영상에 반응한 경우 시간순으로 알림이 뜹니다. 이때 나오는 정보를 보면 프로필 사진+이름+행동+시간+행동한 영상 순 혹은 맞팔로우 버튼으로 리스트가 뜹니다. 사용자들의 행동에 대한 알림을 줄 땐 계정 제안을 할 때 보다 다양한 형태의 리스트 UI가 나오는 걸 확인했어요! 그리고 상단 위 종이비행기 모양을 클릭하면 (2) 다이렉트 메시지 함으로 옵니다. 여기서 나오는 리스트 UI는 프로필 사진+이름+공인딱지+메시지 한 줄 내용+시간. 그리고 나 탭으로 가면 앞서 크리에이터들 프로필 화면과 같이 제 계정 정보와 제가 만든 콘텐츠가 떠요! 다른 건 내가 좋아요 한 영상, 비공개 영상을 볼 수 있는 탭이 따로 나오고 있어요.

인스타그램 VS 틱톡 VS 클럽하우스

앞에 두 서비스는 위에서 살펴봤고 추가로 함께 볼 인스타그램(Instagram)은 페이스북에서 운영하고 있는 이미지 공유 중심의 미국 소셜 미디어입니다. 인스타그램은 워낙 유명한 서비스이다 보니 자세한 설명은 따로 하지 않을게요~

인스타그램은 왜 틱톡,클럽하우스보다 안정적인 리스트 UI를 제공하다고 이야기했는지 비교하며 살펴보겠습니다.

활동 리스트 UI 비교

차례대로 (1) 인스타그램, (2) 틱톡, (3) 클럽하우스 입니다.

가장 오래 사용하기도 했고 익숙한 UI가 (1) 인스타그램 리스트인데요, 그 이유는 어떤 사람이 제 게시물에 좋아요를 누르거나 댓글을 입력했을 때 같은 규칙인 사용자 프로필 사진+계정 이름+활동 및 반응한 게시물+팔로우 버튼이 뜹니다. 이때 중요한 건 이름과 행동을 같은 텍스트 규칙을 사용해 표현했다는 건데요, 빠르게 리스트를 훑을 때는 팔로우 버튼이 있는지, 활동 리스트 하단에 하트와 답글 달기가 있는지에 따라 어떤 반응인지 바로 캐치할 수 있다는 점입니다.

(2) 틱톡도 프로필 사진+ 계정 이름+같은 행동을 한 사람 수+활동+ 반응한 게시물+팔로우 버튼이 뜨는데 다른 점은 내가 쓴 댓글을 누군가 좋아요를 하면 규칙이 파괴된다는 점입니다. 다른 영역은 인스타그램과 거의 비슷해 익숙했지만, 댓글과 좋아요 표시가 깨버린 규칙 때문인지 리스트가 정리되지 않게 느껴집니다. 또 인스타그램보다 섬네일 이미지가 길어 리스트 높이 값이 긴 것도 어정쩡한 영역을 여백으로 만들고 있어 더 불안정하게 느껴집니다.

(3) 클럽하우스는 틱톡보다 정리는 되었지만, 반면 누가 날 팔로우한 경우 내가 할 수 있는 액션에 대한 버튼은 없습니다. 그래서 알림을 유심히 보지 않으면 누가 날 팔로우했는지 확인하기 어렵습니다. 클럽하우스가 틱톡보다 정리가 잘 되었다고 느끼는 건 아마 콘텐츠 영역이 따로 없어서인 것 같아요. 오디오 기반에 휘발성 콘텐츠이기에 어떤 행사가 열릴거라는 안내가 중요 콘텐츠이고 시각적으로 보여줄 건 모더레이터의 프로필 사진 정도네요.

여긴 프로필 사진+계정 이름+행동+행동을 한 시간이 보여 텍스트 규칙도 잘 유지가 되고 정리가 잘 되었지만, 반면 다음 행동을 취하기 위해선 리스트를 하나하나 읽어봐야 한다는 점이 아쉬웠습니다.

검색 UI 비교

이번엔 검색화면 비교입니다. (1) 인스타그램은 특유의 정방형 이미지를 바탕으로 오른쪽 위에 정방형 이미지 2개를 합친 동영상이 나오고 있어요. 검색창을 누르면 제가 이전에 검색했던 계정 중 인기 계정이 나옵니다. 이때 리스트는 프로필 사진+계정 이름+한 줄 설명+계정과 나의 관계+리스트 삭제 버튼이 뜨고 있어요. 좋은 건 굳이 계정을 클릭하지 않더라도 계정과 나의 관계를 보여준다는 점입니다. 클릭해서 확인할 필요 없으니까요!

그리고 (2)는 틱톡인데 검색 탭으로 가면 챌린지 탭이 뜨고 검색어를 입력하면 인기 동영상 탭이 가장 먼저 뜹니다. 영상이 재생되고 있고 날짜+제목+프로필 사진+계정 이름+조회 수가 차례대로 나옵니다.

마지막으로 (3)클럽하우스는 검색 탭으로 가면 내가 팔로우할 사람들을 추천해주고 아래 관심사 기반 사람을 더 찾으라고 관심사 리스트가 나옵니다. 그리고 검색어 입력 시 프로필 사진+계정 이름+한 줄 설명이 뜹니다.

재밌는 건 사람과의 소통에 가장 근접하게 설계한 사례가 인스타그램이라는 점입니다. 인스타그램은 검색하면 계정이 가장 먼저 검색되고 해당 계정과 나의 관계도 한 눈에 보여줍니다. 반면 틱톡은 게시물을 강조하고 있습니다. 인기 탭에서 사용자 탭을 눌러야 해당 검색어에 맞는 계정이 나옵니다. 클럽하우스도 인스타그램과 같이 계정 간 연결을 우선으로 보여주지만 아쉬운 건 검색한 계정과 나의 관계는 눌러봐야 알 수 있습니다. 이처럼 같은 검색 탭이라도 강조하고 싶은 결과 값을 먼저 보여주는 지 확인해봤어요!

인스타그램의 새로운 시도

인스타그램이 다른 SNS에 비해 정리가 잘되어 있긴 하지만 최근 쇼핑 탭과 릴스 기능을 추가하며 상당한 반발도 샀어요, 그래서 추가로 탐색/쇼핑 탭을 함께 보려고 해요.

(1)은 하단 돋보기를 누르면 나오는 화면인데 정적인 이미지 기반의 콘텐츠만 제공하다가 언제부턴가 IGTV 영상 일부를 우측에 배열해서 보여주더라고요! 저는 주로 귀여운 동물 영상이 많이 떠서 종종 보곤 한답니다.

(2) 그리고 말 많은 쇼핑탭, 너무 익숙한 탭인데 기능이 완전히 바뀌었고 UI도 달라져서 많은 반발이 있었죠.

보면 기존 탐색 탭 대비 2단 그리드에 콘텐츠 간 여백을 많이 줘서 콘텐츠를 강조하고 있어요. 돈을 내고 광고하는 판매자들을 위해 신경을 쓴 것 같죠? 여기서 (3) 에디터 추천까지 가면 아예 1단 그리드로 변하면서 상품 이미지를 굉장히 강조하며 보여줍니다.

3->2->1단 그리드로 콘텐츠 몰입도를 높이는 리스트 UI를 사용하고 있네요! 몇 년 동안 일정한 규칙을 가지고 안정적으로 서비스를 제공한 인스타그램의 파격 행보!

과연 괄목할 만한 성과가 있었는지는 좀 더 지켜봐야겠어요.

함께보면 좋은 에디터 추천 콘텐츠

그리고 생각하게 된 질문!

이 질문의 답은! 더 많은 분들과 함께 고민해보고, 지금 써보러 갑니다 페이스북 그룹에 공유해보도록 할게요! 

다음 주제는?

다음 주제는 '😰탈퇴 화면'이에요. 기획자 입장에서 가능한 사용자가 닿지 않길 바라는 화면이지만 그렇다고 피하거나 숨길 순 없으니! 어떻게 하면 사용자에게 끝까지 최상의 경험을 제공할 수 있을지, 반대로 마음을 돌릴 수 있을지에 대한 관점으로 여러 사례를 비교, 분석해보려고 해요. 다음 뉴스레터는 3월 4일 목요일 오전에 발행 될 예정입니다.

팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!

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

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