티빙은 왜 상세화면에 영화 에디션을 추가했을까?
기획자의 모바일 앱 뜯어보기
1. Creme가 레시피 속 재료를 활용하는 방법
2. 티빙은 왜 상세화면에 영화 에디션을 추가했을까?
3. 와이아웃이 검색 화면을 변경한 이유
4. Savee가 컬러 검색을 활용하는 방법
1. Creme가 레시피 속 재료를 활용하는 방법
Creme는 다양한 종류의 레시피를 영상으로 제공하는 서비스입니다. 레시피 상세화면에서 가장 먼저 볼 수 있는 정보는 요리에 필요한 ‘재료’인데요. 이 재료는 별도 리스트로 확인할 수 있으며, 각 재료 오른쪽에는 + 버튼이 포함되어 있습니다. 처음에는 구매로 연결될까? 싶었는데, ‘Grocery’라는 공간에 담는 역할을 하고 있었어요.
굳이 왜 재료를 사용자별 공간에 담게할까? 라는 생각으로 버튼을 누른뒤 ‘Grocery’로 이동했는데요. 이곳은 사용자가 저장한 재료를 모아두는 공간으로 담은 재료로 활용할 수 있는 레시피를 별도로 확인할 수 있어요. 보유하거나, 관심있는 식재료를 바탕으로 레시피에 접근할 수 있는 방법으로 활용됩니다.
저도 요리는 못하지만 관심은 많아서 관련 서비스를 자주 들여다보는데, 레시피가 좋아도 재료가 없으면 시도를 못하거나 재료가 있는데 어떻게 활용하면 좋을지에 대한 답을 얻기 어려운 경우가 많았어요. 이런 상황에서 저장한 재료를 기준으로 레시피를 살펴볼 수 있다면 그 활용도는 더 높아질 수 있지 않을까 싶습니다.
게다가 재료 상세화면에서는 레시피 외 재료에 대한 정보를 확인할 수 있는 기능을 제공해요. 구글 검색결과로 연결되어 각 재료와 관련된 폭넓은 정보를 얻을 수 있습니다. 결국 재료를 중심으로 정보를 얻고, 레시피에 따라 요리를 할 수 있는 흐름을 가져갈 수 있으며 요리에 필요한 부가기능도 하나, 둘 추가할 수 있었던 것 같습니다.
1-1. 함께 읽어보세요! #레시피 제공
2. 티빙은 왜 상세화면에 영화 에디션을 추가했을까?
티빙은 콘텐츠 상세화면에 지금까지 두 가지 리스트를 활용했어요. 영화를 기준으로 비슷한 콘텐츠와 월정액 영화 더 즐기기!입니다. 비슷한 콘텐츠는 애니 등 세부 카테고리와 관련 없이 연관성이 높은 작품을, 월정액 영화 더 즐기기! 는 월정액으로 티빙을 활용하는 사용자를 위한 영화를 제공했습니다.
그런데 얼마 전, 티빙이 상세화면에 에디션 띠를 하나 더 추가했는데, 함께 즐겨보는 영화가 그 주인공입니다. 상세화면 속 영화를 본 사람들이 같이 본 영화를 리스트로 제공하는 방법인데요. 이로서 총 3개의 리스트를 상세화면에서 확인할 수 있게 되었습니다.
성격이 다른 리스트를 연관된 내용에 따라 리스트로 제공하는 방법은 우리에게 아주 익숙한 방법인데요. 재생이 끝난 뒤 연관 작품을 바로 이어볼 수 있는 상황도 좋지만 탐색의 과정에서 앞선 화면으로 돌아가지 않고 자연스럽게 다른 작품으로 연결될 수 있기 환경을 제공할 수 있기 때문입니다.
다만, 이 각각의 추천이 다음 행동으로 연결되기 위해서는 몇 가지 조건이 필요한데 먼저 어떤 내용이 담겨 있는지 빠르게 확인할 수 있어야 한다는 점입니다. 보통 이런 구분은 텍스트 중심의 타이틀로 하게 되는데, 티빙이 적용한 타이틀은 명확한 구분이 되고 있나?라는 질문을 계속 갖게 합니다.
또 하나는 여러 개의 리스트가 제공될 때의 순서인데요. 연관성을 기준으로 한다면 (타이틀을 그대로 활용한다는 가정하에) 함께 즐겨보는 영화 – 비슷한 콘텐츠 – 월정액 영화 더 즐기기!가 더 적합하지 않을까 싶네요. 넷플릭스나 디즈니플러스 등이 함께 시청된, 추천작 등의 이름으로 하나의 리스트만 제공하는 것과 비교했을 때 세 가지가 모두를 자세히 들여다볼 사용자가 많을까?라는 생각도 듭니다.
2-1. 함께 읽어보세요! #OTT
왓챠 검색 화면 개선 – 검색 화면 내 3가지 탭을 하나로 통합한 사례
넷플릭스는 왜 콘텐츠 선택 시 상세화면으로 바로 보내지 않을까?
3. 와이아웃이 검색 화면을 변경한 이유
와이아웃이 얼마 전 검색 화면과 검색 결고 화면을 업데이트했습니다. 몇 가지 변화를 하나씩 살펴보면, 먼저 검색 화면 내 타이틀이 영문에서 한글로 변경되었어요. 기존에는 ‘Popular’라는 공통 키워드를 바탕으로 제품, 영상, 장소 등의 추천 콘텐츠를 제공했는데 이제 인기 검색어, 장소, 피드 등 한글로 확인할 수 있는 모습입니다.
영문에서 한글로의 변화는 익숙한 언어로 화면 내 주요 콘텐츠를 구분할 수 있다는 점을 고려한 것 같아요. 더불어 기존에는 타이틀을 서비스 주요 컬러로 활용했는데 이제는 검색어 순위, 피드 순위 등을 구분하는 용도로 활용하고 있습니다. 타이틀의 변화와 타이틀에 포함된 콘텐츠를 서비스 주요 컬러로 구분할 수 있어 검색어 입력 전, 현재 화면의 역할이 ‘인기’를 기준으로 한다는 점을 더 분명히 확인할 수 있습니다.
검색 결과 화면에서도 변화가 있었는데요. (이 화면의 타이틀은 기존에도 한글로 제공되고 있었네요. 왜 연결되는 두 화면을 다른 언어로 사용했을까요?) 기존에는 한 화면으로 검색 결과를 모두 보여주는 방법을 활용했는데 이제는 전체를 기준으로 장소, 커뮤니티, 제품, TV, 매거진 등의 탭 구분이 생겼습니다. 최근에는 탭으로 나눈 결과를 통합하는 경우가 더 많기에 그 이유가 더 궁금했습니다.
다양한 아웃도어 활동을 주제로 하는 서비스지만, 제공하는 콘텐츠의 성격이 조금씩 달라 원하는 결과를 빠르게 볼 수 있도록 하기 위한 의도가 있지 않을까 싶네요. 검색 대상이 많고 성격이 조금씩 다르다면 한 화면에서 우선순위에 따라 내용을 배치할 경우 사용자별 원하는 결과를 보기까지 시간이 모두 다르게 소요될 수 있기 때문입니다.
전체 화면에서 볼 수 있는 순서도 변경되었는데, 기존에는 제품이 먼저였고 이제는 장소를 먼저 확인할 수 있습니다. 이는 기존의 검색 데이터를 바탕으로 변경했거나 서비스가 강조하고자 하는 대상으로 실험을 하고 있는 과정이 아닐까 싶네요.
4. Savee가 컬러 검색을 활용하는 방법
Savee는 핀터레스트와 유사한 서비스로, 이미지 중심의 다양한 디자인 관련 콘텐츠를 살펴보고 저장할 수 있습니다. 핀터레스트에 비해 탐색과 저장이라는 아주 단순하지만 핵심적인 기능만 담고 있다는 점이 가장 큰 특징인데요. 저는 2018년 6월 이 서비스를 알게 되어 별도로 소개한 적 있고, 지금까지도 잘 활용하고 있습니다.
안드로이드와 iOS 버전의 앱은 물론, 웹에서도 사용이 가능한데 오늘은 서비스 자체가 아니라 ‘검색 기능’에 대해 간략하게 정리해보려 합니다. ‘Savee’의 검색 화면은 인기 있는 사용자 리스트와 이미지로 구성되어 있는데요. 검색어를 입력하면 다른 서비스의 검색 기능과 마찬가지로 결과 화면으로 이동하게 됩니다.
검색어를 입력할 때 한 가지 눈에 띄는 기능이 있다면 바로 ‘컬러’ 버튼인데요. 영감을 얻을 수 있는 다양한 이미지 중심의 콘텐츠를 확인할 수 있는 공간답게 컬러에 따른 결과를 확인할 수 있도록 도와주는 역할을 하고 있습니다. 컬러 버튼을 누르면 검색 대상이 있는 전체 컬러를 화면 전환 없이 확인할 수 있으며, 특정 컬러를 선택하면 키워드에 컬러값이 입력되어 바로 해당 컬러가 포함된 이미지를 살펴볼 수 있습니다.
컬러에 따라 검색 결과를 볼 수 있는 필터는 지금까지 많이 봤고, 유용하게 사용했는데 검색의 출발점에 컬러를 선택할 수 있는 경우는 자주 접하지 못했던 것 같습니다. 아무래도 디자인과 관련된 ‘영감’을 얻을 수 있는 공간을 주제로 하고 있으며, 이와 가장 자연스레 연결되는 내용이 ‘색(컬러)’이기에 검색어만큼의 중요도로 적용된 것이 아닐까 싶네요.
또, 컬러를 선택하면 컬러값이 입력창에 자동으로 입력되는 것 역시 눈에 띕니다. 결과가 많지 않다 하더라도 원하는 컬러값을 입력해 검색이 가능하다는 사실을 자연스럽게 학습할 수 있기 때문입니다. 실제로 저도 이 기능을 접한 뒤 서비스에 필요한 컬러를 직접 입력해 검색을 여러 번 진행한 적 있어요.
4-1. 함께 읽어보세요! #검색
검색 결과가 없는 상황을 네 가지 유형에 따라 살펴보기!
검색 과정에서 사용자가 겪게 되는 문제과 해결 방법 정리!
한성규님의 ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한 번 더 소개합니다.
