📮 광고 및 제휴 문의: https://tally.so/r/wa5WKE
👀 오늘 소개할 서비스와 기능
- 티빙의 영상 플레이어와 웨이브, 왓챠
- 스타벅스의 퀵오더와 투썸하트
- 잡코리아의 GNB, Tab bar
- 아몬즈의 구매 혜택 정보
1. 티빙 영상 플레이어
영상 플레이어는 우리가 거의 매일 접하는 기능이자 화면인데요. 저 역시 퇴근길이나 잠들기 전 영화나 드라마를 보고 있어요. 다만, 익숙해진 방법도 있지만 영상 재생 조건 등을 플레이어 상에서 변경할 때 아직 낯설고 불편하게 다가오는 경험도 있어요. 그래서 오늘은 ‘티빙’을 기준으로 영상 플레이어의 업데이트는 어떻게 이뤄지며 어떤 부분에 초점을 맞추고 있는지 살펴보고자 합니다.
업데이트 전 티빙의 영상 플레이어 모습이에요. 좌우 끝 영역을 통해 화면 밝기와 음량을 조절할 수 있고, 가운데에는 앞, 뒤 10초씩 영상을 이동하거나 정지할 수 있는 버튼이 보여요. 오른쪽 상단에는 영상에 집중할 수 있도록 다른 기능을 잠그거나 상세 설정이 가능한 버튼 등이 자리 잡고 있죠. 하단에는 회차 목록, 자막, 다음화 재생 등이 있네요. 여기까지 보면 크게 어색하지 않고, 자주 써왔던 구성이며, 다른 플레이어와 큰 차이는 없어 보여요. 화질, 비율, 재생 속도 등을 설정하기 위해서는 버튼을 한번 더 눌러야 하지만 개인적으로 이 설정값은 영상 재생 중에 자주 사용하지 않고 재생 초기나 중간에 한 번씩 활용하기에 불편하게 다가오진 않았습니다.
업데이트된 티빙의 영상 플레이어를 보면 오른쪽 상단의 ‘설정’ 메뉴가 없어진 것을 확인할 수 있어요. 설정에 포함되었던 주요 메뉴들이 모두 플레이어 하단에(화질, 속도) 적용된 것을 알 수 있죠. 비율이 없어져서 이것저것 시도해 봤는데 핀치아웃 제스처로 적용되어 별도 메뉴나 버튼으로는 제공하지 않고 있어요. 앞서 설정에 있는 기능들을 자주 사용하지는 않기에 숨겨져 있어도 문제가 없다는 생각을 적었는데요. 영상이 재생된 직후에 입맛에 맞는 설정을 빠르게, 한 곳에서 진행할 수 있다는 편의를 더하기 위해 이번 업데이트를 진행한 것이 아닐까 싶어요.
여기서 아쉬웠던 건, 릴리즈 노트에는 핀치아웃 제스처에 대한 설명이 쓰여있지만 실제 업데이트 후 영상 재생 시에는 관련 안내가 없어서 직접 떠올리기 어려웠다는 점이었어요. 이미 하나의 메뉴로 제공되었던 터라 관련 안내를 툴팁 정도로 제공해도 좋았겠다는 생각이에요.
업데이트가 되면서 기존의 회차 목록이 에피소드로 변경되었는데요. 목록까지 업데이트가 된 것은 아니지만 또 하나 눈에 띈 것은 에피소드 목록에 ‘줄거리’를 제공하지 않는다는 점이었어요. 이건 개인차가 있겠지만, 넷플릭스에서 영상 재생 중, 회차 목록을 보면 줄거리가 포함되어 있어 의도치 않게 ‘스포’를 당하게 되는 경우가 있는데요. 티빙은 공개날짜와 회차 정보만 제공해 그런 상황을 줄일 수 있다는 장점으로 다가왔어요.
1-1. 웨이브, 왓챠의 플레이어
웨이브는 음량, 밝기, 앞뒤 이동, 에피소드와 다음회차 이동을 제외하곤 티빙의 이전 플레이어과 같이 화질, 비율, 속도 등은 설정 버튼을 눌러 조작할 수 있어요. 연속재생이 기본인 시리즈의 경우 다음회차 이동을 영상 플레이어 전면에 배치할 만큼 중요도가 높을까?라는 생각도 들어요.
왓챠는 속도와 자막 설정을 바로 할 수 있는데요. 속도와 자막은 영상을 보며 바로 변경하고 싶은 조건 중 하나라는 판단이 있었던 것 같아요. 보기 전 설정한 자막 크기가 마음에 들지 않는데, 설정 버튼을 누르고 거기서 자막을 선택해 변경하는 건 꽤 번거롭게 느껴질 수 있지 않을까요?
1-2. 함께 읽어볼만한 글
- 2021년 11월 기준, 8개 서비스의 영상 재생 화면 UI를 자세히 확인할 수 있어요!
- 지금의 모습과 함께 비교하는 재미도 느낄 수 있어요!
2. 스타벅스 사이렌오더
사이렌 오더는 매장 방문 전 주문과 결제가 가능해 저도 자주 사용하는 기능 중 하나예요. 진행 상황도 알 수 있기에 더 유용하게 사용하고 있는데요. 스타벅스 코리아에서 처음 시작, 벌써 누적 주문 건수가 4억 건을 넘었다고 해요. 사이렌 오더는 계속 개선되고 있는데, 이번에는 주문 매장과 메뉴에 따라 홈 화면에서 빠른 주문이 가능한 ‘퀵 오더’ 기능이 업데이트되어 자세히 살펴보고자 합니다.
업데이트 전 스타벅스의 사이렌 오더는 하단 내비의 ‘오더(주문)’을 선택한 뒤 메뉴를 먼저 고를 수 있는 구성이었어요. 메뉴는 크게 전체와 나만의 메뉴로 구성되어 있고, 내비 바로 위에 고정으로 매장을 선택할 수 있는 기능이 포함되어 있는 모습인데요. 메뉴와 옵션을 선택해 장바구니에 담고, 주문할 매장을 선택한 뒤 포장 옵션 등을 확인한 후 결제가 가능한 흐름이기도 해요. 아쉬운 건, 나만의 메뉴를 따로 관리할 수 있다 하더라도 자주 주문하는 매장 등을 선택할 수 없어 결제를 위해서는 같은 과정을 반복해야 한다는 점이었죠.
이런 불편이 업데이트 후 많이 개선되었는데요. (1) 먼저 하단 내비를 통해 주문 화면으로 진입하지 않고도 홈 화면을 통해 최근 주문한 메뉴와 매장을 확인할 수 있어요. 카드 형태로 제공되는 내역에는 메뉴 이미지와 이름, 주문한 매장과 좋아요 버튼이 함께 포함되어 있어 바로 주문을 하거나 나중을 위해 즐겨 찾는 메뉴로 저장하는 행동을 할 수 있죠. 앱 실행과 동시에 볼 수 있어 기존보다 주문과 같은 목적이 강한 행동을 바로 진행할 수 있다는 점이 가장 큰 장점이라고 생각합니다.
(2) 바로 주문하기 버튼을 누르면 바텀 시트로 옵션과 결제 수단 등을 확인할 수 있으며 밀어서 결제하기를 통해 마무리 할 수 있어요. 홈 → 바텀 시트 만으로 주문이 가능하진 셈이죠. 기존에는 주문 화면 → 메뉴 선택 → 매장 선택 → 옵션 선택 → 결제 수단 선택 등의 단계가 필요했기에 이번 업데이트의 ‘퀵 오더’가 얼마나 간소화 되었는지 알 수 있어요.
(3) 주문을 완료해도 화면을 이동하지 않으며, 주문 상태와 내역을 바로 확인할 수 있어요. 이번에 포함된 또 하나의 기능 중 하나는 주문이 완료된 직후에 나만의 메뉴로 저장할 수 있다는 점이에요. 이렇게 저장한 메뉴는 주문 화면 - 나만의 메뉴에 저장되어 메뉴를 다시 고를 필요 없이 주문할 수 있죠. 다만 이번 업데이트에서 아쉬웠던 점은 여러 메뉴를 함께 바로 주문하긴 어렵다는 점인데요. 음료와 푸드를 함께 주문하고 싶을 경우에는 주문 화면에 들어가 원하는 메뉴를 장바구니에 담아 한 번에 결제해야 하기 때문입니다. 장바구니에 담을 수 있는 기능이 퀵 오더에도 포함된다면 함께 주문하는 과정이 더 편리해지지 않을까 싶어요.
2-1. 투썸하트 최근주문 메뉴
투썸플레이스의 투썸하트 역시 홈 화면을 통해 ‘최근주문 메뉴’를 보여줘요. 메뉴 이미지, 이름, 주문한 매장 정보와 함께 이번 스타벅스 퀵오더와 같은 ‘바로주문’ 버튼을 활용할 수 있죠. 바로 주문하기 버튼을 누르면 바텀시트에서 옵션을 확인하고 바로 결제가 가능한 스타벅스와 달리 투썸하트는 주문 매장 확인을 한번 더 거쳐야 해요. 이는 직접 주문하는 방식이 아니기에 매장을 잘못 선택하는 것을 방지하기 위한 하나의 장치가 아닐까 싶어요.
2-2. 함께 읽어볼만한 글
- 2020년 11월을 기준으로 스타벅스, 해피오더, 커피빈, 이디야, 빽다방, 투썸플레이스의 스마트 오더 서비스를 살펴볼 수 있어요!
3. 잡코리아의 GNB, Tab bar
최근 잡코리아 앱 내 크고 작은 개편이 있었는데요. 그중에서도 메인화면 내 GNB와 Tab bar 부분이 개선되어 한번 살펴보고자 해요.
(1) 업데이트 전후 GNB 영역 먼저 살펴보겠습니다. 업데이트 전에는 GNB 항목 중 ‘홈’을 디폴트로 노출하고 있었는데요. 홈의 경우 하단 Tab bar 내에서도 진입 가능하도록 구성했는데 사실 두 경우 모두 화면 좌측에서 노출되고 있었기 때문에 ‘홈’으로 이동할 수 있는 경로가 2개인 점을 명확히 이해하기는 어려웠습니다.
업데이트 후에는 GNB 내 ‘홈’이 빠지고 Tab bar를 통해서만 홈으로 이동할 수 있도록 구성해 기타 GNB 항목을 추가로 노출할 수 있도록 개선되었어요. GNB의 UI에도 변화가 있었습니다. 아이콘은 사용자의 집중도를 높이고 브랜드 아이덴티티를 표현할 수 있는 좋은 수단인데요. 기존에는 Tab을 활용해 텍스트만 간략하게 노출되는 방식이었다면 업데이트 후에는 캡슐 UI를 활용해 아이콘과 함께 보여주고 있는 점도 눈여겨볼 부분인 것 같아요.
(2) 업데이트 전 잡코리아의 Tab bar에는 최근 본 공고, 스크랩 공고 등 비슷한 기능들을 항목으로 배치해 둔 점이 다소 아쉽게 느껴졌어요. 또 더 보기 항목을 터치하면 이력서 관리, 이력서 열람 기업 등 기능 4가지가 추가로 노출되는데 한 번에 보이는 기능이 너무 많다 보니 앱이 다소 무겁게 느껴졌어요. 업데이트 후에는 잡코리아가 집중하려 하는 내용들인 채용과 리텐션에만 초점을 맞춰 사용자에게 보여줄 기능을 최소화해 부가 기능을 걷어낸 점이 눈에 띄어요.
3-1. 사람인/원티드/점핏 GNB, Tab bar
잡코리아 외 타 구인구직 플랫폼의 사례도 함께 살펴보겠습니다.
(1) 가장 먼저 사람인의 사례인데요. GNB 영역은 탭 형식으로 구분해 두어 개별 서비스별 항목을 확인할 수 있도록 구성되어 있어요. 눈여겨볼 부분은 Tab bar 영역인데요. 사람인 내에서 사용자에게 강조하고 싶은 기능을 아이콘과 컬러를 강조해 보여주고 있어요. ‘내 커리어 성장!’이라는 툴팁도 사용해 사용자가 인지하기 쉽도록 보여주고 있는 점도 눈에 띄어요.
(2) 다음은 원티드의 메인화면입니다. 타 플랫폼의 사례와 다르게 GNB 영역을 아이콘과 텍스트를 활용해 다소 크게 잡고 있는데요. 메인화면 내 노출되는 내용들이 콘텐츠 위주인 점을 고려해 메인화면 내에서 다양성을 주기 위함으로 보여요. Tab bar 영역에선 원티드 내 여러 서비스를 전반적으로 둘러볼 수 있도록 ‘전체’ 항목이 포함된 것도 인상 깊어요.
(3) 마지막으로 개발자 전문 구인구직 플랫폼 점핏입니다. 개발자 전문이라는 특성에 맞게 GNB 내에서 개발 언어들이 버튼 형식으로 노출되고 있는 점이 눈에 띄는데요. 또한 Tab bar 내 ‘개발자 채용’의 경우에도 서비스 특성을 살린 아이콘으로 표현해 주는 점도 눈여겨볼 부분인 것 같아요.
3-2. 함께 읽어볼만한 글
- 지난 9월, 채용 홈 화면을 개편한 원티드 사례를 자세히 살펴볼 수 있어요!
- Tab bar에 대한 기본적인 구조와 디자인 요소로서의 Tab bar에 대해 살펴볼 수 있어요!
4. 아몬즈의 구매 혜택 정보
아몬즈는 주얼리 전문 쇼핑앱인데요. ‘풀필먼트’ 플랫폼이라는 점을 내세워 소프트뱅크벤처스, 두나무앤파트너스, CJ온스타일 등으로부터 누적 170억원이 넘는 금액을 투자 받았어요. 또한 2021년, 강남에 풀필먼트 센터를 구축해 당일 배송 시스템을 완성했는데요. 빅데이터 기반의 주얼리 큐레이션 서비스, 오늘 출발 배송 서비스 등의 고객 만족 맞춤 서비스를 통해 오프라인의 전유물이었던 주얼리 쇼핑을 온라인으로 넓힌 일등 공신으로 평가받고 있어요. 최근 카테고리 화면이 개선되어 함께 살펴보고자 합니다.
*풀필먼트 서비스란? : 물류 전문업체가 물건을 판매하려는 업체들의 위탁을 받아 배송과 보관, 포장, 배송, 재고관리, 교환·환불 서비스 등의 모든 과정을 담당하는 ‘물류 일괄 대행 서비스’를 뜻해요. 국내에는 쿠팡이 대표적인 곳!
(1) 업데이트 전에는 구매 혜택 영역에서 사용자가 구매 가능한 최저가에 대한 결과를 노출해주고 있는데요. 바로 하단에서는 적용된 쿠폰 중 가장 할인 혜택이 큰 쿠폰에 대한 안내와 그에 따른 할인 금액을 함께 보여주고 있습니다. 이런 기존 구성에서 다소 아쉬웠던 점은 사용자가 사용 가능한 쿠폰 리스트를 별도로 확인할 수 없었던 점인데요.
사용 가능한 쿠폰 리스트를 확인할 수 있도록 선택지를 제공하는 방식으로도 제공되었으면 어땠을까 싶었어요. 상황에 따라 사용자가 바로 사용하고 싶지 않은 쿠폰이 있을 경우 다른 쿠폰을 사용하게 되면 최종 결제 금액은 다시 바뀔 수 있기 때문인데요. 결제 화면으로 넘어가지 않고 상세 화면 내에서도 쿠폰에 따른 최종 결제 금액을 확인할 수 있도록 하는 방식으로 표현되어도 좋았을 것 같아요.
(2) 업데이트 후에는 아코디언 UI가 적용된 점이 눈에 띄는데요. 기본적으로 펼쳐진 형태로 보이지만 업데이트 전에 비해 화면 내에서 차지하는 영역이 많은 점을 고려한 내용으로 보여요. 구매 혜택 정보 내에는 몇 가지 변경 사항이 있었는데요. 아몬즈 자체 할인과 쿠폰 할인으로 할인을 구분해 개별 금액을 보여주고 있는 점이에요. 또한 추가 혜택 영역을 통해 배송비 무료 등의 부가 혜택 정보도 함께 노출할 수 있도록 영역을 활용하고 있는 점이 인상 깊었어요.
4-1. 무신사/지그재그/하고
타 커머스 플랫폼에선 구매 혜택 정보를 어떻게 보여주고 있는지 살펴보겠습니다.
(1) 먼저 무신사의 사례인데요. 아몬즈의 사례처럼 아코디언 UI로 최저가 계산을 희망하는 사용자일 경우에만 상세 내용을 확인할 수 있도록 구성해 두었습니다. 눈에 띄는 점은 ‘계산기’ 문구에 맞게 정가와 할인가, 쿠폰 적용 유무에 이르기까지 디테일한 정보를 사용자가 확인해볼 수 있도록 제공하고 있는 점이에요. 계산기 하단에 추가 할인 형식으로 무신사 현대 카드에 대한 정보를 같이 확인하도록 유도하고 있는 부분도 인상적이에요.
(2) 다음은 지그재그입니다. 지그재그의 경우 인상적이었던 부분은 가격 할인에 대한 부분 뿐만 아니라 적립에 대한 부분까지 상품 상세화면에서 함께 보여주고 있는 점입니다. 사실 결제 후 적립에 대한 부분 또한 사용자가 결제 시 할인 만큼이나 궁금해 할만한 부분일 것 같은데요. 이런 사용자의 니즈와 적립금 또한 사용자가 결제한 금액에 따라 달라지는 점을 고려해 구매 혜택과 적립에 대한 내용을 한번에 보여주고 있는 것 같아요.
(3) 마지막으로 하고의 사례입니다. 하고의 경우 구매 혜택 정보 내에서 고객 혜택을 비회원가와 회원가로 구분해 각각의 할인 금액을 보여주는 점이 인상적이었어요. 이런 기능은 비회원으로 진입하는 사용자가 많은 점을 고려해 회원 가입을 유도하기 위한 부분으로서 반영된 화면이 아닐까 싶어요.
4-2. 함께 읽어볼만한 글
- 올 6월 업데이트 된 29CM의 구매 혜택(가격) 정보에 대한 사례를 자세히 볼 수 있어요!
💖 (광고) 소개할 수밖에 없었던 서비스 소식
주제별 정보 탐색 서비스 스닙팟
오늘 소개할 서비스는 관심주제 팔로우 서비스 스닙팟입니다. 해시태그를 중심으로 인기 있는 콘텐츠가 모이는 주제 탐색형 서비스로, 관심있는 해시태그 팟(주제)을 팔로우 하면 곳곳에 퍼져있는 정보를 한곳에서 빠르고 쉽게 모아볼 수 있다는 점이 가장 큰 장점이에요.
스닙팟은 레딧의 랭킹 알고리즘을 개선, 기존의 최신순과 인기순이 아닌 스닙팟만의 알고리즘으로 콘텐츠를 확인할 수 있는데요.
(1) 업보팅과 다운보팅, 팔로우, 댓글 등 반응과 최신성을 계산해 랭킹에 반영하고 있어요.
(2) ‘해시태그 트리구조’를 바탕으로 관심있는 주제 범위를 구체화하거나 넓혀가며 정보를 탐색할 수 있죠.
(3) 포스팅시에는 URL만 간단히 붙여넣으면 원 콘텐츠로 이동 가능한 스니펫이 생성되요.
스닙팟 이성규 대표님과의 대화를 통해 조금 더 자세히 알아볼게요.
Q1. 스닙팟에는 어떤 유형의 콘텐츠가 어떤 방식으로 올라오고 있나요?
- 봇을 통해 매일 뉴스, 블로그, 커뮤니티 및 뉴스레터 콘텐츠 4만여개와 유튜브 영상 2만여개 후보군 중 알고리즘이 선별, 태그 분류가 이뤄집니다. 최종적으로 하루에 1,000여개의 콘텐츠가 올라오고 있어요.
- 유저가 직접 추천할만한 콘텐츠를 공유할 수 있으며 유저가 공유한 콘텐츠는 끌올 되면서 더 오랫동안 상위에 노출되죠.
Q2. #해시태그를 제공하는 SNS, 커뮤니티 사이트들이 많습니다. 기존 서비스와 어떤 차이가 있나요?
- 커뮤니티, SNS 심지어 요즘에는 내 관심사 별 정보를 카카오톡 오픈채팅으로도 받아보는 사람들이 많아지고 있어요. 이러한 소셜, 커뮤니티는 기본적으로 '참여' 에 대한 부담감이 존재하구요. 스닙팟은 소셜적인 부담 없이 좋은 정보를 빠르게 '체리피킹'하고 싶은 유저들에게 적합하죠. 즉, 여기저기 둘러볼 필요 없이 그날 그날 내 관심 정보를 빠르게 확인 하는데 최적화 되어 있다고 볼 수 있어요.
Q3. 스닙팟 서비스를 이용하기에 적합한 사람은 누구인가요?
💬 이번 업데이트 소식은 어떠셨나요?
이번 업데이트 소식은 어땠나요? 뉴스레터에 대한 의견을 더해주세요!
📮 광고 및 제휴 문의: https://tally.so/r/wa5WKE
의견을 남겨주세요