📲 2023년 3월, 업데이트 소식과 눈에 띄는 기능 살펴보기

오늘 소개할 내용

1️⃣ 네이버 나우가 상세화면 내 연관 콘텐츠를 세 가지로 구분한 이유

네이버 나우에서 영상 상세화면으로 들어가면 기존에는 ‘추천 영상’ 리스트를 살펴볼 수 있었어요. ‘추천’이라는 이름도, 상세화면 하단으로 쭉 이어지는 리스트도 익숙한 구성이라고 볼 수 있는데요. 이 구성이 얼마전 변경되었습니다.

가장 큰 변화는 리스트가 추가되었다는 점입니다. ‘추천 영상’ 하나로 제공된 내용이 ‘영상과 비슷한’, ‘인기 급상승’, ‘최근 시청’ 등 세 가지로 나뉜 모습이에요. 그중 기본은 ‘영상과 비슷한’ 리스트입니다. 추천 영상과 크게 다르지 않은데 표현 방식에 차이가 있는데요.

추천의 경우 리스트를 쭉 보다 이 영상이 왜 있지?라는 생각을 할 때가 있는데, 이는 추천 기준을 잘 모르는 상태에서 발생할 수 있어요. 그런데 ‘비슷한’이라는 표현을 활용하니 그 의미가 더 명확하게 다가옵니다. 추천은 서비스의 더 적극적인 ‘개입’의 의미가 포함되어 있기도 하고요.

지금 보고 있는 콘텐츠와 유사한 것과 이미 본 영상이 하나의 기준이고 또 하나 눈에 띄는 건 많은 사람들이 보고 있는 ‘인기 급상승’ 리스트입니다. 호기심으로 접근하기 좋고, 재생 후 영상이 마음에 들지 않을 경우에는 앞선 탐색을 다시 하기 귀찮거나, 비슷한 영상 역시 흥미를 느끼지 못할 가능성이 있기 때문입니다.

‘비슷한’이라는 표현을 사용하는 곳 중 ‘티빙’도 있는데요. 티빙은 상세화면에 세 가지 연관 콘텐츠 묶음을 제공하고 있는데, 첫 번째가 바로 ‘비슷한 콘텐츠’입니다. (티빙의 상세화면 변화는 아래에서 자세히 다룰 예정입니다)

유사 서비스 상세화면의 최근 변화 : 티빙은 왜 상세화면에 영화 에디션을 추가했을까?

티빙은 콘텐츠 상세화면에 지금까지 두 가지 리스트를 활용했어요. 영화를 기준으로 비슷한 콘텐츠와 월정액 영화 더 즐기기!입니다. 비슷한 콘텐츠는 애니 등 세부 카테고리와 관련 없이 연관성이 높은 작품을, 월정액 영화 더 즐기기! 는 월정액으로 티빙을 활용하는 사용자를 위한 영화를 제공했습니다.

그런데 얼마 전, 티빙이 상세화면에 에디션 띠를 하나 더 추가했는데 함께 즐겨보는 영화가 그 주인공입니다. 상세화면 속 영화를 본 사람들이 같이 본 영화를 리스트로 제공하는 방법인데요. 이로서 총 3개의 리스트를 상세화면에서 확인할 수 있게 되었습니다.

성격이 다른 리스트를 연관된 내용에 따라 리스트로 제공하는 방법은 우리에게 아주 익숙한 방법인데요. 재생이 끝난 뒤 연관 작품을 바로 이어볼 수 있는 상황도 좋지만 탐색의 과정에서 앞선 화면으로 돌아가지 않고 자연스럽게 다른 작품으로 연결될 수 있기 환경을 제공할 수 있기 때문입니다.

다만, 이 각각의 추천이 다음 행동으로 연결되기 위해서는 몇 가지 조건이 필요한데 먼저 어떤 내용이 담겨 있는지 빠르게 확인할 수 있어야 한다는 점입니다. 보통 이런 구분은 텍스트 중심의 타이틀로 하게 되는데, 티빙이 적용한 타이틀은 명확한 구분이 되고 있나?라는 질문을 계속 갖게 합니다.

또 하나는 여러 개의 리스트가 제공될 때의 순서인데요. 연관성을 기준으로 한다면 (타이틀을 그대로 활용한다는 가정하에) 함께 즐겨보는 영화 / 비슷한 콘텐츠 / 월정액 영화 더 즐기기!가 더 적합하지 않을까 싶네요. 넷플릭스나 디즈니플러스 등이 함께 시청된, 추천작 등의 이름으로 하나의 리스트만 제공하는 것과 비교했을 때 세 가지가 모두를 자세히 들여다볼 사용자가 많을까?라는 생각도 듭니다.

유사 서비스 상세화면의 최근 변화 : 웨이브가 상세화면을 개선한 이유는 무엇일까?

웨이브 상세화면 내, 크게 작품에 대한 정보와 시청하기 버튼에 변화가 있었는데요. 먼저, 작품에 대한 정보를 살펴보면 기존에는 작품명 아래 누적회차(59회 등)와 방송날짜, 카테고리와 시청시간, 연령 등을 텍스트로 적용한 모습입니다. 다만, 단순 텍스트로 나열되어 있어 각 정보를 구분하는데 어려움이 있었는데요.

변경 후에는 시즌 수, 연령 정보(아이콘 형태), 카테고리로 정보 제공 수는 물론 표현 방식에 변화가 생겼습니다. 이 정보는 작품 성격이나 카테고리에 따라 달라질 수 있지만, 최신 방송 날짜나 시청 시간에 비해 시청여부를 판단하는데 더 도움이 되는 정보라는 생각이 드네요. 또 작품 정보 아래의 주요 행동과 연결되는 버튼에도 변화가 있었는데요.

변경 전에는 다운로드, 공유, 구독, 상세정보 네 가지가 제공되었는데 변경 후에는 구독이 ‘관심’으로 변경되어 첫 번째 위치로 이동했고 상세정보는 제외된 것을 알 수 있습니다. 이미 구독을 하고 있는 상황에서 다시 ‘구독’을 작품마다 제공하는 것 자체의 의미가 명확하지 않기 때문에 더 익숙한 ‘관심’으로 변경하지 않았을까 싶습니다. 상세 정보는 상세 화면에 더 많은 내용을 적용하면서 필요가 없어진 것 같고요.

작품 시청으로 연결되는 버튼 활용방법에도 변화가 있었습니다. 기존에는 ‘시청하기’ 버튼으로 최신 에피소드를 볼 수 있었는데 이제는 최근 에피소드 번호를 적용해 ‘에피소드 59’보기와 같이 활용하는 모습입니다. (물론 이는 시청이력이 없는 경우이며 보고 있는 회차가 있다면 해당회차의 숫자가 적용됩니다) 바로 아래 상세 정보에도 에피소드 정보를 제공하고 있어 스크롤 등의 추가 행동 없이 정보를 확인한 뒤 시청하는 것이 더 자연스러워진 느낌도 드네요. 전반전으로 작품 탐색의 과정과 첫 회차 시청을 높이는 방법에 대한 고민이 많이 반영된 것 같다는 생각이 듭니다.

2️⃣ 더스택이 홈화면의 역할을 변경한 이유

더스택은 GS건설의 1호 사내벤처인 '인디드랩'에서 운영 중인 서비스로 아파트 세대별 조망권과 일조량, 소음, 시세 등의 데이터를 한눈에 볼 수 있습니다. 아파트 단지명과 동, 호수를 검색하면 해당 세대에서 보이는 조망권의 이미지가 제공돼 마치 현장 방문을 하듯 조망 범위를 한눈에 알 수 있다는 것이 가장 큰 장점인데요.

이번에 더스택의 홈화면이 변경되었는데, 인터페이스 구성은 물론 ‘역할’에도 변화가 생겨 간략하게 살펴보고자 합니다. 변경 전 더스택의 메인화면은 ‘검색(찾기)’에 초점이 맞춰져 있었어요. 지역, 단지명 검색과 지도로 보기를 가장 먼저 확인할 수 있고, 조건을 하나씩 설정해 원하는 단지를 찾는 기능을 함께 활용하고 있었습니다.

아쉬운 점은 앱을 처음 사용하는 사용자 입장에서 바로 지역과 단지를 찾아야 하는 이유를 쉽게 알기 어렵다는 점이었어요. 하단, 상세 검색에 ‘조망이 멋진’, ‘햇빛 잘 드는’ 등의 키워드나 설명이 일부 포함되어 있지만, 이를 어떻게 활용해야 하는지에 대한 충분한 안내는 제공되지 않았습니다. 물론, 앱을 설치하는 과정 등애서 ‘더스택’이 제공하는 가치나 얻을 수 있는 정보 등을 알 수 있지만, 앱을 실행한 후 이런 내용이 조금 더 구체적으로 제공되지 않아 검색 후에나 알 수 있다는 점은 분명 아쉬운 점이었어요.

업데이트 후에는 이런 점이 많이 개선되었는데요. 먼저, ‘FIND’라는 이름의 화면이 ‘메인’으로 변경되었고, 더스택이 제공하고자 하는 주요 가치를 여러 형태로 바로 확인할 수 있는 내용들이 적용되었습니다. ‘대단지 아파트 중 햇빛이 가장 잘 드는 단지는 어디?’등 검색 등의 행동을 하지 않고도 서비스의 주요 기능을 자연스레 살펴볼 수 있는 기회가 생겼어요.

또 우리 집을 등록하면 환경성능을 통해 일조시간, 조망, 개방감 등의 정보를 얻을 수 있다는 점을 기본 데이터를 통해 안내하는 모습도 눈에 띕니다. 이런 내용은 사용자의 행동에 따라 무엇을, 어떻게 얻을 수 있는지 빠르게 확인할 수 있다는 점에서 도움이 될 거라 생각해요.

기존 검색화면 상단에 적용되어 있던 검색 기능은 이제 하단 고정으로 변경되었어요. 더스택이 메인화면에서 제공하는 콘텐츠와 정보를 확인한 뒤 검색으로 이어지는 흐름을 만들 수 있는 구성이라고 생각합니다. 전반적으로 서비스에 대한 기본적인 이해와 경험을 먼저 할 수 있도록 신경 쓴 변화가 아닐까 싶네요.

3️⃣ 캐치테이블이 예약 가능한 시간을 여럿 보여주는 이유

캐치테이블에서 매장을 예약하기 위해서는 지역, 날짜, 시간, 인원 등을 미리 설정해야 하고, 그에 맞는 리스트를 확인할 수 있습니다. 예를 들어, 성수동에서 3월 30일 2명이 오후 6시 30분에 예약 가능한 곳을 리스트로 볼 수 있는데 눈에 띄는 건 조건으로 설정한 시간대 외 다른 시간대를 함께 보여준다는 점입니다. 6시 30분과 함께 7시, 7시 30분 등을 볼 수 있는 것으로 원하는 시간대에 예약이 꽉 찬 경우를 위해 활용하는 모습입니다.

예약이 불가능하다는 사실만 리스트에서 볼 수 있다면, 다시 시간대를 변경해 확인해야 하는 번거로움이 생길 수밖에 없는데요. 이런 추가적인 행동을 줄이고자 최초 리스트에서 사용자가 원하는 시간대와 연결되는 시간을 최대 3개까지 보여주는 방법을 활용하고 있습니다.

다만, 사용자가 원하는 시간대의 예약이 꽉 찬 경우 시간을 아예 비우는 방법을 활용 중인데 왜 비워있는지 등에 대한 안내는 필요하지 않을까 싶네요. 사용자가 설정한 시간대는 그대로 채워두고 예약이 꽉 찼다는 정도만 제공해도 다른 시간대가 함께 제공되는 이유 등을 빠르게 인지할 수 있지 않을까 싶습니다.

함께 살펴보면 좋은 사례 : 에어비앤비가 날짜 조정이 가능한 이유를 묻는 이유

에어비앤비는 사용자가 선택한 일정을 앞뒤로 조정했을 때 예약할 수 있는 숙소를 리스트에 섞어 함께 보여줍니다. 예를 들어 4박 일정을 살펴보고 있는데, 하루를 먼저 출발하거나 늦게 도착하면 조건에 맞는 추가 숙소를 살펴볼 수 있는 기회를 제공하는 셈입니다. 해당 리스트에서는 사용자가 앞서 선택한 일정이 아닌, 예약이 가능한 일정을 미리 보여주는데요. 상-하로 이어지는 기존 기준에 따른 리스트와 달리 좌-우로 확인이 가능해 조건이 조금 다른 내용이라는 점을 인지할 수 있습니다. (에어비앤비 사례 자세히보기)

4️⃣ 나이키가 상세화면에서 동일 모델 다른 컬러를 보여주는 방법

리스트와 상세화면은 커머스에서 우리가 가장 많이 오가는 화면입니다. 리스트를 통해 기본적인 탐색을 하다가 자세히 보고 싶은 제품이 있다면 선택 후 상세화면으로 이동하게 되고, 장바구니에 담거나 결제를 하는 등의 행동 아니면 다시 이전 리스트로 돌아오는 경우가 많기 때문입니다

이런 이동이 이제 많이 익숙해졌지만, 오가는 불편을 해결하기 위해 서비스들은 여러 노력을 기울이고 있는데요. 대표적인 방법이 동일한 제품일 경우 다른 옵션을 상세화면에서 바로 확인할 수 있도록 제공하는 것입니다. 나이키 역시 같은 맥락의 구성을 활용하는데요. 상세화면 진입 시, 선택한 제품(모델)의 이미지를 자세히 볼 수 있으며 바로 아래로 같은 모델 다른 컬러 제품의 썸네일을 제공합니다. 덕분에 탭 한 번으로 다른 컬러 제품은 어떤지 확인할 수 있어요.

패션 카테고리의 경우 무엇보다 제품의 이미지가 중요하고, 사이즈 등은 필터를 활용하거나 최초 입력된 정보를 바탕으로 리스트를 제공하는 경우가 많아 동일 모델의 여러 이미지를 빠르게 확인할 수 있도록 구성한 모습입니다.

또 하나 눈에 띄는 건, 캡처를 권한과 특정 기능으로 연결하는 방법입니다. 나이키 앱에서 캡처를 하면 사진 관련 권한을 요청하며, 수락 시 캡처와 동시에 갤러리 등으로 이동하지 않고도 바로 공유할 수 있는 기능을 활용할 수 있습니다. 권한 설정 시, 왜 필요한지에 대한 간략한 안내가 포함되고, 설정 시 바로 관련 기능(공유하기 및 찜하기)을 사용할 수 있도록 연결된 모습입니다.

나이키와 유사한 방법으로 상세화면을 활용하는 서비스 : 아디다스

아디다스의 상세화면은 옵션에 따른 제품 이미지에 집중되어 있어요. 보통 상품 이미지는 상세 화면 중간에 적용되어 있고, 이미지를 제품 컬러 별로 차례대로 보여주는 때가 많은데요. 아디다스는 상세화면 진입과 동시에 전체 상품 옵션을 보여주고, 각 상품을 선택하면 해당 상품의 상세 이미지를 화면 이동이나 스크롤 등과 상관없이 정해진 영역에서 바로 확인할 수 있도록 구성되어 있습니다.

상세 정보를 확인하기 위해 스크롤을 내려도, 상품 목록은 상단에 고정되어 있어 언제든 다시 볼 수 있습니다. 구매하기 전 원하는 컬러에 해당하는 이미지를 보기 위해 스크롤을 여러 번 활용했던 경험이 있는 사용자에겐 꽤 편리하게 느껴지는 구성이라고 생각합니다. 이미지는 구매에 중요한 영향을 미치는 정보이며 기준이라 옵션 별 이미지를 먼저 충분히 확인한 후 상세 내용을 볼 수 있고, 상세 내용을 보다가도 언제든 이미지를 볼 수 있다는 점이 눈에 띄는 사례입니다.

함께 살펴보면 좋은 사례 : 온더록이 상세화면 내 여러 상품을 함께 보여주는 방법

온더룩은 상세화면 진입과 동시에 크리에이터가 업로드한 이미지를 통해 상의, 하의 등의 아이템 정보를 확인할 수 있습니다. 태그 형태로 정보가 제공되기에 원하는 상품 정보로 빠르게 이동할 수 있는 구성이에요.

그리고 착용 제품을 하나씩 나눠 개별로 다시 볼 수 있습니다. 업로드된 이미지 아래로 착용 제품의 썸네일과 브랜드, 제품명, 가격, 착용 사이즈 등을 알 수 있어요. 크리에이터는 키와 몸무게를 공개하기에 착용한 사이즈를 바로 볼 수 있다는 점이 좋았습니다. 정확한 측정 기준은 아니지만, 나와 유사한 크리에이터라면 내가 입었을 때의 모습을 조금은 빠르게 이해할 수 있기 때문이에요.

착용한 상품과 함께 비슷한 상품을 제공하는 방식도 눈에 띕니다. 착용 제품 – 비슷한 상품이 나란히 있어 한눈에 볼 수 있고, 살짝 옆으로 넘겨 전체 정보를 확인하기 쉽게 구성되어 있는 모습이에요. 덕분에 크리에이터가 착용한 일부 상품과 비슷한 상품을 하나씩 맞춰볼 수 있는 환경도 누릴 수 있습니다.

마지막으로, 각 상품은 정보로만 제공되는 것이 아니라 ‘찜(저장)하기’ 기능이 붙어있어 착용 제품, 비슷한 제품을 한 화면에서 보며 바로 사용할 수 있습니다. 크리에이터가 실제 입은 모습, 비슷한 상품 등을 차례로 보면서 마음에 드는 상품을 어려움 없이 저장까지 자연스레 이어갈 수 있는 구성이네요.

5️⃣ 배달의민족이 B마트 상품 리스트에 구매 횟수를 보여주는 이유

이사오기 전에는 B마트 사용이 어려웠는데, 이사 후 사용이 가능해져 자주 사용하고 있는데요. 얼마 전, 급하게 구매해야 하는 것들이 있어 구매 가능 상품을 둘러보던 중, 배민이 리스트에 몇 회 구매한 상품인지에 대한 정보를 제공하는 것을 보게 되었습니다

리스트는 상품 대표이미지와 상품명, 가격과 리뷰 등으로 구성되는데 구매 횟수는 상품명보다 먼저 제공되는 모습이에요. 예를 들어 농심 올리브짜파게티 멀티팩(5입)이라면, 바로 위에 '1회 구매한 상품'등과 같은 정보를 제공하는 방법입니다. 컬러 역시 배민의 주요 색상으로 강조하고 있어요.

이 정보가 제공된다는 사실을 모르는 상태에서 봤을 땐, 몰랐던 사실을 확인할 수 있다는 점에서 의미가 있었는데요. 일정 금액 이상을 구매해야 배송이 가능한 B마트 특성상, 이전에 구매한 상품을 하나씩 다 기억하긴 어렵기 때문입니다. 구매 내역 등으로 들어가지 않고도, 탐색 과정에서 자연스레 구매했던 상품을 확인할 수 있다는 점이 눈에 띄었어요.

B마트를 계속 사용한다면 1번 구매가 아니라 여러 번 구매한 상품의 정보도 알 수 있게 되는데요. 자주 구매하는 상품을 리스트 상에서 확인할 수 있다면 같은 종류의 상품을 기준으로 선택이 빨라질 수 있다는 장점도 있지 않을까 싶습니다. 구매 후 사용 경험을 떠올리게 되는 트리거가 될 수 있겠다는 생각도 드네요. 횟수가 많은 상품이라면 만족한 경험이라는 것을 알 수 있기도 하고요.

이미 B마트는 리스트에서 바로 장바구니에 상품을 담을 수 있는 기능을 제공하고 있어, 리스트를 통한 탐색 과정에서 구매횟수를 보고 바로 담을 수 있는 행동이 가능하다는 점도 눈여겨볼만 합니다.

구매횟수, 다른 화면에서는 어떻게 활용되고 있을까? : 팔도감

팔도감은 후기(리뷰)를 작성한 사람이 누적 몇 번 구매했는지에 대한 정보를 제공합니다. 2번 구매한 사람의 후기, 22번, 14번, 첫 구매까지 횟수를 쉽게 확인할 수 있어요. 이는 ‘직거래’라는 서비스에 대한 불안을 해소할 수 있는 하나의 방법으로 생각해볼 수 있지 않을까 싶습니다. 과일 등 제철먹거리는 생산자에 대한 믿음이 생기면 (맛이 있으면) 다른 곳에서 도전을 하기 보다 만족한 곳에서 구매하는 것이 더 만족스러운 경험으로 이어질 수 있는데요.

때문에 첫 구매를 하는 사람의 입장에서는 후기를 남긴 사람이 여러 번 구매한 것을 하나의 정보로 확인할 수 있다면 상품에 대한 정보보다 더 중요한 신뢰 기준으로 활용할 수 있습니다. 한 가지 추가되었으면 하는 점은 구매 횟수에 따라 리뷰를 볼 수 있는 조건입니다. 아니면 구매 횟수를 일정 구간에 따라 하나의 데이터로 확인할 수 있으면 어떨까 싶네요. (팔도감 구매 횟수 자세히 보기)

구매횟수, 다른 화면에서는 어떻게 활용되고 있을까? : 정육각

정육각 역시 리뷰 작성자 이름 왼쪽으로 31회 구매, 8회 구매, 123회 구매 등 누적 구매횟수를 강조해서 보여줍니다. (정육각 구매 횟수 자세히보기)

이번 뉴스레터는 어떠셨나요?

이번 뉴스레터는 여기까지입니다. 아래 링크를 통해 의견을 남겨주세요 😀 

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

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

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