🎶 바이브가 플레이어 내 주요 기능 위치를 변경한 이유는?

👀 오늘 소개할 서비스와 기능

1. 바이브 플레이어

지난 뉴스레터를 통해 스포티파이의 좋아요 버튼이 플러스 버튼으로 변경된 내용을 살펴봤어요. 함께 살펴볼 서비스와 기능으로 바이브가 포함되었는데, 오늘은 바이브의 플레이어 업데이트에 소식을 이야기해보려 합니다. 

플레이어는 재생 중인 콘텐츠에 대한 정보 확인은 물론, 함께 사용할 수 있는 편의 기능을 담게 되는데요. 업데이트 전 바이브 플레이어를 보면 (1)(3) 상단에는 음원에 대한 정보, 가사, 노래방, 파티룸 등 네 가지 메뉴와 재생 중 음원 제목과 아티스트, 좋아요와 더 보기 버튼이 자리 잡고 있어요. (2) 하단에는 음원 재생 설정, 기기 연결, 비슷한 노래 확인, 플레이 리스트 확인 버튼을 확인할 수 있어요. 하나의 음원으로 할 수 있는 행동이자 기능이 그만큼 많기에 상단과 하단을 모두 활용하는 모습이에요.

상단에 있는 메뉴들의 중요도가 더 높아 컬러는 물론이고 여백도 좁게 설정해 구분을 했지만, 개인적으로 상단에 있는 메뉴가 플레이어 하단에 있어야 하지 않을까?라는 생각이 들었는데요. (좋아요 포함) 한 손으로 조작할 때, 상단의 메뉴는 쉽게 닿지 않기 때문이에요. 이전 음원을 다시 재생해 좋아요를 선택하는 등의 행동 시에도 좋아요는 위에, 이전곡 재생 등의 컨트롤러는 하단에 있어 행동이 끊어지는 느낌도 강하고요. 아래에서 다시 확인해 볼 테지만, 다른 음원 서비스의 플레이어는 주요 기능이 모두 하단에 자리 잡고 있다는 점 또한 바이브의 기존 플레이어를 아쉽게 만드는 내용이었어요.

업데이트된 플레이어를 보면, 한번 설정하면 자주 쓰지 않을 기능을 제외하곤 (1) 앨범 커버 이미지 아래로 주요 기능이 이동한 것을 알 수 있어요. 음향 설정이나 기기 연결은 음원을 들으며 자주 쓰는 기능은 아니니 왼쪽 상단으로 모였고, 좋아요와 음원 추천, 플레이리스트와 가사보기 등은 모두 아래로 내려왔네요. 위치 이동과 더불어 눈에 띄는 건 통합이에요. 기존에는 모든 기능을 하나의 아이콘 형태로 다 보여줬지만 이제는 대표 성격을 띠는 아이콘만 활용하고 있어요. 대표적으로 가사와 노래방이 기존에는 따로 분리되어 있었지만 (3) 이제는 가사 버튼을 눌러 가사를 확인하는 화면에서 노래방 기능을 바로 활용할 수 있게 되었죠.

(2) 유사 음원을 추천하는 화면 또한 달라졌어요. 기존에는 버튼으로 이동할 수 있었고, 플레이리스트와 같은 UI로 음원을 보여줬는데, 이제는 ‘이 노래가 좋다면?’이라는 텍스트가 포함된 버튼을 활용해 ‘좋아할 것 같아서’, ‘이 느낌 이어가기' 등 유사함의 기준을 다양하게 보여주고 있어요. 기존 대비 더 다양한 음원을 확인할 수 있도록 하는데 초점을 맞춘 모습이에요. 무엇보다 현재 재생중인 음원을 상단에 고정된 상태로 보여주기 때문에 플레이어를 벗어나지 않는다는 느낌을 받을 수 있어요.

1-1. 플로, 지니, 멜론, 벅스뮤직의 플레이어

플로는 음향설정 버튼을 제외한 대부분의 주요 기능을 모두 음원 정보 아래에 배치하고 있어요. 지니 뮤직 역시 주요 기능을 모두 하단에 배치한 모습으로, 음원을 재생하는 과정에서 사용자들이 하게 되는 주요 행동을 빠르게 진행할 수 있도록 돕기 위한 방법이 아닐까 싶어요. 

멜론과 벅스뮤직도 크게 다르지 않은데요. 아이콘의 모습과 적용 순서 등은 조금 다르지만, 대부분 음원 정보 아래에 주요 기능을 적용했어요. 

1-2. 함께 읽어볼만한 글

2. 에이닷 대화

에이닷은 SKT에서 출시한 AI 비서 서비스예요. 21년 출시 당시에는 크게 눈에 띄는 기능이 없었지만, 작년 아이폰 통화 녹음 및 요약 기능을 선보이며 사용자들에게 좋은 반응을 얻고 있는데요. 이후에 실시간 통화 번역 기능(안드로이드는 아직 미적용)을 출시했고, 앞으로 거대언어모델 탑재도 고려 중이라고 해요. 얼마 전, 에이닷의 대화 기능과 위젯 기능이 업데이트 되어 오늘 자세히 살펴볼게요.

업데이트 전, AI(비서)와 대화할 수 있는 화면을 보면 ‘당신의 AI 비서 에이닷’이라는 역할에 대한 간략한 설명과 필요한 내용을 말해달라는 안내를 확인할 수 있어요. 퀵 버튼으로 게임하자!, 너랑 얘기할래!, 이번 주 날씨 알려줘 등을 넣어 대략적으로 어떤 대화나 행동을 할 수 있는지에 대한 내용을 전달하고 있어요.

다만, 에이닷과 서비스에서 계속 고려해야 하는 건 대화의 범위라고 생각하는데요. 명령어로 실행할 수 있는 기능도 정말 다양하고 정보를 찾을 수 있는 범위 역시 넓기 때문이에요. 처음 서비스를 사용하는 상황이라면, 먼저 뭘 해야 하는지 모를 가능성이 높다는 것을 의미하기도 하죠. 에이닷은 이런 고민과 문제를 (2) ‘에이닷과 이런 대화도 나눠보세요!’라는 기능을 추가해 해결하려 노력 중인데요. (1) 업데이트 후 메시지 또는 음성 입력을 위한 인풋박스 왼쪽으로 버튼을 하나 추가해 에이닷을 어떤 상황에서 사용하면 좋을지에 대한 내용을 제공하고 있어요.

(3) 상황에 따른 내용을 선택하면 정보를 바로 확인할 수 있는데, 여기서 중요한 건 연관 정보 또는 다른 정보를 이어서 확인할 수 있도록 정보 하단에도 퀵버튼을 제공한다는 점이에요. 예를 들어 (2)를 통해 ‘지하철 혼잡도 알려줘’를 선택하면 사용자의 위치를 바탕으로 가장 가까운 역의 지하철 혼잡도 정보를 확인할 수 있는데요. 바로 아래로 ‘주변 혼잡도 알려줘’, ‘주요 뉴스 틀어줘’, ‘지하철 한가한 시간 알려줘’ 등 관련된 정보를 이어서 볼 수 있는 구성을 활용하고 있어요.

2-1. 기가지니, 헤이카카오, 네이버 클로바

이렇게 쓸 수 있다는 것을 어떻게 알리지?라는 고민은 비단 에이닷만의 고민은 아니에요. 기가지니와 헤이카카오, 네이버 클로바 역시 각 서비스에서 명령어를 어떻게 입력할 수 있을지에 대한 안내를 각자의 방법으로 제공하고 있어요.

(1) 기가지니는 사용 가능한 범위를 한번에 안내하는 대신 ‘오늘의 기분’에 초점을 맞춰 사용을 시작할 수 있도록 안내하고 있어요. 기분은 다음 행동을 예측하기에 좋은 기준이 될 수 있는데, 지루했다면 지루함을 달랠 수 있는 영상, 음원 콘텐츠 등을 추천할 수 있기 때문이에요. 사용자 입장에서도 ‘기분’은 큰 저항이나 오랜 고민 없이 바로 선택할 수 있는 기준이 될 수 있고요.

(2) 헤이카카오는 랜덤으로 한 가지 특정 명령어를 제안하는데요. 제가 마지막으로 확인했을 땐, ‘콩순이 동화 틀어줘’라는 내용이 포함되어 있었어요. 앞서 살펴본 기가지니 보다는 당장 와닿지 않는 내용이라 멈칫했는데요. 사용 데이터가 없어서 그럴수도 있고, 자주 사용하는 기능이라는 가정하에 그때그때 실제 사용할 수 있는 내용을 하나씩 제공, 여러 개를 풀어놨을 때보다 확인을 쉽게 만들기 위한 목적도 포함된 것이 아닐까 싶어요.

(3) 마지막으로 네이버 클로바는 3개의 상황을 제시하고 있어요. 이 역시 실행할때마다 랜덤하게 변경됩니다. 제가 세 번 정도 확인했는데, 대부분 ‘일상 생활’에 초점이 맞춰져 있었어요. 서비스를 떠올릴 수 있는 상황과 가장 밀접하고 빈도가 높은 상황을 가정한 것이 아닐까 싶어요.

3. 크림 KICKS

최근 크림 앱 내 숏폼 KICKS 서비스가 베타 오픈되었습니다. 아직 베타서비스이기 때문에 킥커(킥스 베타서비스 유저)를 대상으로 1차 오픈되었지만 추후 전체 회원 대상으로 확대될 예정이라고 해요. 그럼 어떤 주요 기능들이 제공되고 있는지 함께 살펴보겠습니다.

크림의 킥스(KICKS) 서비스는 하단 BNB 영역 스타일 상단 탭에서 진입할 수 있는데요. 눈에 띄는 부분은 발견 탭에서 사용자 피드와 함께 숏폼 콘텐츠를 접할 수 있도록 구성된 점이에요. 발견 탭 내에 숏폼이 재생되는 형태로 피드 형식으로 노출되고 있는 방식을 통해 사용자가 여러 앱 내 영역에서 숏폼 콘텐츠를 접할 수 있도록 제공하고 있습니다.

(1) 킥스(KICKS) 탭에서 진입하면 랜덤 피드가 보이는데요. 전체적인 구성은 다른 숏폼 플랫폼과 크게 다르지 않았어요. 다른 숏폼으로 넘어가는 위아래 스와이프 제스처도 마찬가지로 타 사용자들이 숏폼 콘텐츠를 접할 때 흔히 사용되는 방식으로 구성되어 있는데요. 이렇듯 사용자가 흔히 볼 수 있는 아이콘 우측 수직 정렬 배치나 스와이프 제스처는 피츠의 법칙(Fitts' Law)에 따른 부분으로 생각해 볼 수 있어요. 사용자가 대상을 사용하기까지 걸리는 시간이 대상의 크기와 대상까지의 거리와 연관 있다는 내용의 법칙인데요. 때문에 터치 대상은 인터페이스상에서 사용자가 쉽게 도달할 수 있는 영역에 배치해야 하기 때문에 이런 UX적 요소를 반영한 부분으로 보여요.

(2) 숏폼에선 짧은 영상을 확인하는 기능 외 크림 내에서 판매 중인 상품도 확인할 수 있는데요. 사용자가 숏폼 등록 시 태그 한 상품을 숏폼에서 바로 확인할 수 있도록 구성해 두었어요. 여러 커머스사에서 숏폼 기능을 추가하고 고도화하는 데에는 이렇듯 자사에서 판매하는 상품을 숏폼 내 함께 노출함에 따라 상품을 홍보하고 이를 통해 사용자 앱 체류시간을 늘리기 위한 점이 가장 클 것 같은데요. 고객 접근성을 높이기 위한 방법으로서 숏폼이 아주 다양하게 활용되고 있는 것 같아요.

(3) 다음은 상품 상세 화면입니다. 이번 크림의 킥스(KICKS) 서비스에서 눈에 띄었던 부분은 해당 기능을 여러 화면에서 보여주고 있는 점이에요. 상품 상세 화면에서도 킥스 서비스를 이용할 수 있도록 진입점을 제공하고 있는데요. 사실 킥스 서비스는 하단 BNB 영역 스타일 영역에 위치해 있기 때문에 활성 유저가 아닌 경우 해당 기능을 인지하기 어려울 수 있는데, 이런 점을 보완하기 위해 상품 상세 스타일 영역에서도 자연스럽게 숏폼 콘텐츠를 배치해 둔 점이 인상적이었어요.

3-1. 함께 읽어볼만한 글

🗞 서비스 소식 큐레이션

💬 이번 업데이트 소식은 어떠셨나요?

이번 업데이트 소식은 어땠나요? 뉴스레터에 대한 의견을 더해주세요!

의견 등록하기

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

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

팁스터 에디터와 함께 하는 클럽도 확인해보세요!