검색에서 탐색으로

by Musicow Design


투자자와 팬 모두에게 꼭 필요한 기능, 검색

검색 기능은 거의 모든 서비스에서 중요한 역할을 하죠. 특히 뮤직카우에서는 투자자들이 종목을 고를 때나, 팬들이 특정 곡이나 아티스트를 찾을 때 검색의 중요성이 더욱 강조되는데요, 전체 곡 수가 1,300곡에 달하다 보니, 원하는 곡을 쉽게 찾을 수 있는 검색이 거의 필수적인 기능이라고 할 수 있어요.

실제로 뮤직카우 유저의 41%가 검색 기능을 활발히 사용하고 있을 정도였는데요, 그럼에도 불구하고 기존 검색 서비스에는 개선이 필요한 부분이 있었어요.




문제1. 탐색과 발견까지 이어지지 않는 검색 기능

뮤직카우의 유저들은 검색 기능을 어떻게 활용하고 있었을까요?

신규 유저와 기존 유저의 활용도가 조금 달랐어요.


0.png


신규 유저

먼저, 신규 유저의 경우는 가입 당일 검색을 가장 많이 사용하는 것으로 나타났어요.

가입 당일 검색을 이용한 유저의 비율이 36.5%로 나타났고, 그중 50%가 가입 후 4분 이내에 검색을 활용하는 것으로 봤을 때 가입 후 거의 곧바로 검색을 활용하는 유저의 비율도 적지 않다는 것을 알 수 있었죠.

신규 유저의 검색 여정
1. 뮤직카우에 어떤 곡이 있는지 잘 모르는 상태이기 때문에, 막연히 내가 좋아하는 가수나 곡이 있는지 검색
2. 검색해 본 후 마음에 드는 결과가 없으면 평균 2회정도 검색을 더 이어감
3. 그 마저도 원하는 검색 결과가 없을 때는 더이상 취할 액션이 없다고 느낌


기존 유저

기존 유저는 요새 이슈가 되는 곡이나 아티스트를 조회하기 위한 진입점으로 검색을 활용하는 것으로 나타났어요.

가수명을 주로 검색하는 신규 유저와 달리, 뮤직카우에 어떤 곡이 있는지 대략적으로는 알고 있기 때문에 곡명을 바로 찍어서 검색하는 비율도 적지 않았고요.

기존 유저의 검색 여정
1. 기존 유저는 검색 후에 좀 더 심도 있는 탐색을 하고 싶은 니즈가 강함
2. 그러나 카테고리가 한정적으로 나눠져있어, 검색어에 걸린 검색 결과 외에는 추가적인 탐색을 이어가기 어려움


종합해본 기존 뮤직카우 검색의 문제점

신규 유저와 기존 유저의 상황을 전체적으로 살펴보면, 뮤직카우의 검색은 정말 ‘검색’에 대한 기본 기능만 제공할 뿐 순환이 되지 않는 상태였던 거예요.

검색을 통해 원하는 곡을 찾고, 탐색으로 연결되어 구매하고 싶은 곡을 발견하는 것까지 경험이 연결되어야 하는데 검색 화면에서 플로우가 끊겨버려 탐색으로까지 이어지지 못했어요. 연속적인 탐색이 어려운 상태였던 거죠.




문제2. 정리되지 않은 과다한 정보의 제공

1.png

위 이미지는 기존 뮤직카우에서 검색을 마치면 나오는 마켓 리스트 화면이에요.

유저가 검색한 결과가 어떤 기준으로 정렬되는 건지도 명확하게 보여주지 않았고, 한 곡에 대해 제공하는 정보가 무려 10개에 달했답니다. 20개의 곡이 노출되는 화면이라고 가정하면 유저는 200개의 정보를 봐야 하는 상황이었어요.


게다가 이 수많은 정보들은 정돈되지 않은 형태로 유저에게 보여지고 있었어요.

너무 많은 정보를 위계 없이 제공하다 보니 유저는 어떤 정보를 집중해서 봐야 하는지 파악하기가 어려웠어요. 신규 유저의 경우 이 숫자들이 대체 어떤 정보를 의미하는지도 한눈에 알기 어려울 수밖에 없었죠.

유저가 구매 결정에 도움이 되었으면 하는 마음으로 넣은 정보들이 오히려 혼란을 야기하고 있는 것은 아닐까 생각했어요.





유저가 길을 잃지 않도록 도와주자


1. 검색 첫 화면에서의 가이드 제공

2.png

검색창을 눌러도 키패드 입력 외에 아무런 액션을 할 수 없던 기존과는 달리, 새 화면을 플로우에 추가하기로 했어요. 검색에 조금 더 집중하도록 주목도를 올림과 동시에 유저에게 가이드를 제공하기 위해서예요.

뮤직카우 내에서 현재 핫한 키워드나 꾸준히 인기가 많은 키워드를 노출해서 검색창을 누른 유저의 막연함을 조금은 해소하고자 했어요. 최소한 ‘뭘 검색해야 하지?’라는 의문은 갖지 않도록요. 그리고, 유저가 최근 검색한 키워드를 한눈에 볼 수 있도록 최근 검색어 영역을 추가했어요.


최근 검색어와 추천 키워드 영역은 키패드로 가려지는 부분이 없도록 설계했어요. 키패드가 활성화 되어 가려지게 되는 부분은 공들여 만들어도 주목도가 떨어지기 때문에 좀 더 키패드에 집중할 수 있도록 의도했고 그렇기에 유저에게 꼭 필요한 가이드만 남기는 방향으로 설계했어요.



2. 곡,가수와 태그를 분리하여 검색 결과를 한눈에

40.png

기존 검색 결과 화면은 입력한 ‘검색어’에 걸리는 것들 위주로만 보여주고 있었는데요.

이 검색 결과 화면에서 유저는 혼란을 겪고 있었어요.

1. ‘검색한 단어’로만 서치되기 때문에 ‘단어’만 일치한다면 모든 검색 결과가 섞여서 나온다.
2. 검색 결과 리스트의 카테고리 및 정렬 기준을 유저가 알 수 있는 방법이 없다.
(정렬 기준을 변경해서 볼 수 있는것도 아니고, 정렬이 직관적으로 되어있는 것도 아니다.)
3. 검색한 단어의 어느 부분이 일치해서 검색 결과에 떴는지 알 수 없다.



41.png


구별 없이 제공되던 기존의 검색 결과 화면에서 우선 곡, 가수, 태그 총 세개의 카테고리로 나누고 그 카테고리를 각각 묶어서 보여주기로 결정했어요. 검색 결과를 각 카테고리 별로 묶어서 보여주어 유저가 검색한 결과에 대해 직관적으로 알 수 있도록요.

그리고, 검색어에 하이라이트를 추가해 어떤 단어가 검색어에 걸려 노출되는지 명확하게 알 수 있도록 했답니다.


여기서 그치지 않고, 검색에서 탐색으로 연결시켜 주기 위해 단순히 검색 결과만 보여주던 기존의 화면에서 ‘더보기(>)’ 버튼을 통해 좀 더 상세한 탐색이 이어지도록 했어요.

더보기 버튼을 통해 마켓으로 진입시켜, 필터를 걸어 원하는 대로 상세하게 검색할 수 있도록 다양한 필터와 소팅 기능을 추가했답니다. 유저가 검색한 결과를 간결하게 파악하고, 관심이 가는 곡은 상세하게 확인해서 결국은 곡 구매까지 이어질 수 있도록요!



3. 원하던 결과가 없을 때에도 탐색이 끊기지 않도록

4.png


마음먹고 검색을 했는데, 내가 원하던 곡이나 가수가 없다면?

아직까지는 뮤직카우 내에 세상의 모든 곡이 다 있지는 않기 때문에, 검색 결과가 없을 때의 화면은 유저가 꽤 자주 마주칠 수도 있는 화면이었는데요.

기존에는 ‘검색 결과가 없습니다’라는 문구 외에 아무것도 보여주지 않았기 때문에, 검색 후에 원하던 곡이나 가수가 없으면 그대로 앱을 이탈하는 유저의 비율이 높을거라고 예상했어요. 원하던 곡이나 가수가 없는 화면에서 실망한 유저가 할 수 있는 행동이 아무것도 없었기 때문이에요.



제목-없음-1.gif


그래서 이번 개편에서는 꼭 원하던 가수의 곡이 없더라도 탐색을 이어갈 수 있도록

현재 인기 있는 가수들, 추천 키워드 조회 수가 많은 곡들로 플로우를 이어줬어요.

98%의 유저들이 가수 검색으로 진입하고 있었기 때문에, 인기 가수를 먼저 노출하여 유저의 관심을 끌고자 했어요. 그 밑으로는 현재 인기 있는 키워드, 그리고 조회수가 높은 곡들을 보여주어 유저의 추가 액션을 유도했답니다. 원하던 검색 결과가 없다는 문구는 제대로 인지시키되, 밑에 네가 관심 있어 할 만한 콘텐츠도 있는데 볼래? 하고 유도하는 방식을 통해 끊길 뻔한 유저의 탐색을 연결시켜 준거죠.





원하는 정보를 더 직관적으로


위의 솔루션들을 좀 더 효과적으로 인지시키기 위해서 정보 정리가 필수적으로 필요한 상황이라고 판단했어요. 더 간결하고 한눈에 들어오는 검색 결과를 위해 과하게 보여지던 정보들을 정리하기로 결정했답니다.


1. 모든 페이지에서 꼭 다 같은 정보를 보여줄 필요가 있을까?
2. 각 화면별로 중요한 정보에 집중할 수 있도록 꼭 필요한 정보만 노출하고 필요하지 않은 정보들은 과감하게 제외하자.


라고 먼저 기준을 정하고, 그렇다면 과연 유저의 구매 결정에 꼭 필요한 ‘핵심 정보’는 무엇일까?를 판단하기 위해 유저 인터뷰를 진행했어요. 유저 인터뷰를 통해 유저가 가장 많이 보는 정보와 구매할 때 꼭 확인하는 정보는 무엇인지 파악하는 시간을 가졌답니다.



1. 핵심 정보만 볼 수 있도록 간결하게

5.png

검색 화면에서는 곡의 기본적인 정보유저의 구매 결정에 가장 핵심적인 역할을 하는 정보만 남기고 전부 제외하기로 했어요.

유저 인터뷰를 통해 구매 결정에 가장 큰 역할을 하는 ‘핵심 정보’를 총 4가지로 간추릴 수 있었는데요, 곡의 기본 정보인 곡명과 가수명, 뮤직카우 구매의 필수 정보인 현재가와 저작권료 수익률만 남기기로 했어요. 그리고, 유저가 좀 더 정보를 직관적으로 볼 수 있도록 숫자만 있던 현재가 옆에 단위(원)을 추가해 이 숫자가 ‘가격’이라는 것을 바로 알 수 있도록 했어요.


유저의 입장에서 바라본 핵심 정보들을 골라 정리하면서, 어지럽게 나열되어 있던 텍스트들의 굵기와 크기, 색상 등을 통일하고 정보들의 시각적 위계를 다시 정했답니다.




2. ‘필수 정보’라는 고정관념을 버리자


이번 검색 개편에서 한 가지 더 추가된 페이지가 있는데요, 바로 ‘아티스트 페이지’예요.

뮤직카우는 곡 위주로 검색하기보다는 내가 좋아하는 가수를 검색하는 유저가 대부분이었는데요, 무려 검색어의 98%가 아티스트 위주로 치중되어 있을 정도였어요.

이런 뮤직카우의 검색 현황과 달리 기존 뮤직카우의 검색은 단순히 ‘검색어’ 위주로만 포커스 되어 있는 구조라, 아티스트에 대한 곡이나 정보만을 따로 볼 수 있는 창구 자체가 없었어요.

예를 들어 ‘아이유’를 검색한다면, ‘아이유’라는 단어가 들어가는 검색 결과를 쭉 나열해서 보여주기만 하는 방식이었죠.



6.png


그래서 해당 아티스트의 곡을 모아 보여줄 뿐 아니라 최근 이슈가 되는 관련 뉴스, 뮤직카우 내의 인지도 현황 등 아티스트의 정보를 보여주는 페이지를 만들면 어떨까? 하는 생각을 하게 됐어요.

아티스트 위주의 탐색을 가능하게 만들어서, 좀 더 많은 정보를 볼 수 있게 하면 유저들의 관심도가 올라가지 않을까? 그리고 그 조회와 관심이 구매 욕구로 이어질 수 있지 않을까? 하는 생각으로요.


이 아티스트 페이지에서는 앨범아트와 곡명만 보여주고, 가수명은 과감하게 삭제하기로 했어요.

곡명과 가수명은 노래의 기본 정보라고 생각했기 때문에 처음에는 가수명도 넣어서 UI 시안을 잡았었는데요,

아티스트 페이지에 있는 곡들은 어차피 동일 아티스트에 관련된 항목들만을 모아서 보여주는 곳이라 가수명은 제외해도 되겠다고 판단했어요. 중복되는 가수명은 삭제하고 다른 정보들에 조금 더 집중할 수 있도록요.


그리고 아티스트 페이지에서는 이 가수의 곡 중 어떤 곡이 가장 인기 있는지 궁금할 것이라고 가설을 세우고, 관심곡 아이콘을 우측에 가장 크게 배치했어요. 다른 유저들이 설정한 실 관심곡 수도 함께 보여주어 관심곡 설정을 유도했어요.




3. 화면별로 정보는 다르게 구성하되, 통일성은 해치지 않도록

42.png


이렇게 페이지별로 정보를 다르게 구성하다 보면, 컴포넌트 관리가 어렵다는 문제가 나타날 수 있는데요,

너무 많은 컴포넌트들이 나오지 않도록, 마켓의 다른 리스트들과 호환이 될 수 있게 UI를 구성했어요.

기존에 노출되던 전일비와 같은 정보를 추가했을 때에도 각 요소들만 추가되게끔 해서, 상태 값 변경으로 컴포넌트는 같이 쓸 수 있도록 통일했답니다. 그러면서도 마켓은 즉각적인 구매가 일어나는 공간이기에 저작권료 수익률을 좀 더 강조했어요.





결과는 어땠을까요?


8.png


유저의 길눈을 밝혀주고, 정보를 정리하여 보다 간결하게 보여줬더니 유저는 이제 곡을 검색하는 것에서 그치지 않고, 관심이 갈 만한 곡을 탐색하기 시작했어요.

그 결과, 곡 클릭은 10.9%, 관심곡 추가는 43.9%가 상승했어요. 검색에서 탐색으로 끊기지 않도록 흐름을 이어주니, 그 흐름이 곡 구매로까지 연결되어 곡 구매도 7%의 상승률을 보였어요.



9.png


또, 검색 결과가 없을 때의 화면에서 흐름을 이어줬더니, 원하는 검색 결과가 없으면 그대로 이탈하던 유저가 검색 화면에서 연속적으로 탐색을 이어나갔어요.

검색 결과가 없을 때에도 35.9%의 유저가 콘텐츠를 눌러 탐색을 이어 나갔고, 이탈률은 19.2% 감소했답니다!

검색 화면 내에서 새로운 검색을 연속적으로 이어 나가는 횟수도 평균 2회에서 5~6회로 늘어났어요.




마무리하며


검색의 기본적인 기능만 제공하던 기존에서, 기능의 정리는 물론이고 유저의 흐름 순환에 집중해서 진행했던 개편이었는데요.

관심 있는 곡을 찾고, 발견하고, 곡을 지속적으로 탐색하게 하며 결국에는 ‘구매하고 싶다!’라고 생각하게 만들 수 있는 지점들이 계속 순환될 수 있게끔 흐름을 이어주는 것이 매우 중요하다는 것을, 이번 개편의 데이터를 통해 다시 한 번 확인할 수 있었어요.

유저가 단 한순간도 막힘없이 물 흐르듯 구매를 이어갈 수 있도록, 지속적인 개편과 개선을 통해 발전해 나갈게요!




작성자: 박현지

프로덕트디자이너: 박현지, 김리현

UX라이터: 신은정



keyword
작가의 이전글새로운 시작을 위한 첫 걸음, 온보딩홈 개편