[코드스테이츠 PMB 8기 - W4D3] '오디오 클립' UX/ UI 분석하기

 

 

와이어 프레임

‘실제 GUI디자인이 입혀지기 전, 페이지의 골격을 확인하기 위해 만드는 시각적 산출물’이며 기획서의 최종 산출물이라고 할 수 있다. 하여 요구사항 정의서, 기능 정의서, 플로우 차트는 완성도 높은 와이어 프레임을 만들기 위해 하는 작업이라고 할 수 있다. 와이어프레임을 만들면 앱의 전체 서비스를 명확하게 예측할 수 있도록 돕고 팀 구성원에게 개발하려는 앱이 어떻게 동작하고 어떻게 상호작용 하는지 예측하게 합니다. 개발할 서비스에 대한 구상을 구체화 할 수 있습니다. 

\

잘 만들어진 와이어프레임은 초기 피드백을 수집하기에 용이 하다. 와이어 프레임은 사용자가 디자인에 가려지는 기능, 정보구조, UX, 사용자 흐름, 사용자 상호 작용, 기능의 사용성 등에 집중 할 수 있도록 한다.또한 개발코드 및 디자인 툴 없이 필요한 수정을 빠르게 적용 할 수 있다. 서비스를 개발하기 전에 모든 팀원이 보다 명확하게 커뮤니케이션하고 실제 개발 전 서비스의 형태를 확인하고 문제를 미리 발견하기 위함이다.

 

 

 

프로토타입

개발자가 실제로 코딩하기 전, 각 이해관계자들이 함께 보며 정보들이 어디에 위치해야 하는지, 상호작용이 어떻게 진행되는지를 이해하고 합의하기 위한 것이다. 프로토 타이핑은 개발 전 기획 단계에서 생각지 못한 요소를 발견하고, 실제 유저의 플로우를 파악하여 개발 단계에서 가질 리스크를 미연에 방지하는 데 의의가 있다.

 

 

 

 

 

 

오늘의 과제 

해당 서비스가 가지고 있는 Flow에서 UX 개선이 필요한 부분을 서비스 이용자의 관점에서 정의 및 분석하고

어떻게 화면을 개선할 수 있는지에 대해 페이퍼 프로토 타입을 제작해 본다.

 

 

 

 

 

오디오 클립

오디오클립(audioclip)은 네이버의 오디오 드라마, 오디오북, 라디오 청취 및 스트리밍 서비스이다.

들을 수 있는 오디오 북은 물론 오디오로 다양한 강의와 다큐멘터리 라디오 틍 컨텐츠가 다양하다. 일반사용자들도 채널 개설 승인을 받으면 클립을 업로드 할 수 있고. 그 외에 라디오를 운영하는 방송사들도 오디오클립에 다시 듣기 형식을 업로드하고 있다. 대다수의 라디오의 다시듣기를 갖고 있으며  또한 사용자들은 다운로드 허가된 클립들을 받아 오프라인에서도 청취할 수 있다.

 

오디오클립을 알게 된 계기는 광고였을것이다. 예전부터 좋아하던 프랑스 작가 장 자크 쌍뻬의 일러스트 '꼬마 니콜라'와 네이버의 콜라보를 했다는 사실에 굉장히 흥미로웠다. 그의 일러스트를 통해 오디오클립 프로덕트의 이미지가 '호기심 많은' '동심의' '발랄한'느낌으로 다가왔다. 그래서 사용해볼까? 하는 구미를 당겼고 실행했을 때 좋았던 것은 모든 컨텐츠의 스트리밍이 무료라는 점이다. 네이버의 힘인가..?

 

 

 

 

 

 

홈 화면 구성

좌측 이미지는 2019년도 오디오 클립이라면 우측은 2020년도 오디오 클립 홈 화면이다.

 

인물형 템플릿

오디오는 낭독자의 목소리로 채우는 콘텐츠이다.

즉,'오디오 콘텐츠=낭독자'이다.낭독자가 유명인이거나 팬층이 두꺼운 성우라면 그 낭독자 이름과 얼굴 만으로 오디오 콘텐츠는 힘을 갖게 된다. 그렇기 때문에낭독자를 강조하는 템플릿을 만들어, 사용자가 낭독자를 보고 오디오 콘텐츠를 선택할 수 있도록 만들었다.

 

 

 

 

 

텍스트형 템플릿

텍스트는 눈으로 볼 수 있기에 오디오 콘텐츠를 표현할 수 있는 좋은 수단 중 하나이다. 사용자의 마음을 흔들 수 있는 문장, 동료 작가의 추천사, 평단의 평가등 오디오 콘텐츠에 힘을 실어줄 수 있는 텍스트가 잘 보이도록 텍스트를 고심해서 사용한 것이 보인다.

 

 

 

 

 

추천 서비스

오디오클립 홈에서 사용자가 가장 많이 선택하는 메뉴는 바로 '최근 들은 오디오'이다. 하여 오디오 클립은 사용자가 출근길에 듣던 오디오를 퇴근길에 이어 듣고, 어제 자기 전에 듣던 오디오북을 오늘 자기 전에 이어서 들을 수 있도록 '듣던 콘텐츠'를 잘 꺼내놓앗다. 그리고 2020년도 오디오 클립 홈은 이전 '듣던 콘텐츠'에서 ➡️'들을만한 콘텐츠'로 확장하여, 사용자가 새로운 오디오를 발견하고 재생할 수 있도록 했다.

 

 

 

 

 

 

 

 

 

 

사용하며 아쉬운 점

네이버의 AI기술력은 week1에 분석했던 네이버 클로바 이후로 오디오 클립에서도 만나게 되었는데, 사용자의 취향 분석 후 데이터 기반으로 추천하는 서비스를 잘 구축했다고는 했지만 아쉽게도 홈 화면에서 내가 원하는 컨텐츠를 만나기 어려웠다. 그래서 세번째 탭인 '오디오 북' 탭 안에서 열심히 내가 좋아할만한 컨텐츠를 찾곤 했다. 또한 깔끔한 UI 임에도 불구하고 좀 아쉬운 느낌이 들었는데,  중간 중간 네이버 검색 어플 UI가 보여서 통일성에서 아쉬운 느낌이 들었고 , 사용성 측면에서도 아쉬운 부분이 있었다. 아쉬운 UX부분은 아래에 풀고자 한다.

 

 

 

 

 

 

 

 

아쉬운 UX

 

 

 

1. 플레이 화면 속  - '댓글 창' UXUI 의 아쉬움

네이버 오디오 클립 플레이 화면에는 다양한 기능이 있는데 그 중 댓글 기능에 대해 얘기하려고 한다. 

오디오 클립을 듣는 사용자들은 플레이 속 댓글창으로 사용자들은 서로 의견을 주고 받을 수 있는데 댓글 UI가 네이버 모바일 UI디자인을 그대로 가져와서 통일성이 아쉬웠다. 아쉬운 UI가 시발점이 되어  댓글창의 활용을 생각해 보았다. 현재 댓글창이 조금 1차원적이라고 느꼈다.

이런 댓글창의 유형은 커뮤니티의 게시글이나 웹툰, 뉴스 댓글창에 활용이 된다. 공통점은 실시간으로 업데이트 되는 게시글이고 사람들의 의견이 실시간으로  순간적으로 폭발하는 게시글이다. 이 형식은 댓글 중 가장 공감이되는 댓글이 BEST댓글로 지정되는 형식이다. BEST가 아닌 베스트 이외의 댓글은 그저 지나가는 의견이다. 이 형식이 과연 네이버 오디오 클립과 어울리는 형식의 댓글일까?

오디오 클립의 댓글은 과연 누구를 위한 댓글일까? 댓글의 정보를 누가 필요할까? 생각을 했다.

 

만약 사람들이 이 클립을 추천하고 추천하지 않는 이유를 적을 수 있다면 사용자들끼리 피드백에 도움 될 것이다.

왓챠피디아의 별점 댓글을 도입한다면, (만얀 별5점이 과한 지표라면 추천해요👍와 추천하지 않아요👎 버튼이라도..) 있다면 

그저 쌓여만 가는 사용자들의 댓글이 유의미하게 사용될 것이라고 생각한다.

  

 

 

 

 

 

 

 

 

2. HOME 화면 속 정보 업데이트 원활하지 않음

네이버 오디오 클립은 처음에 사용자의 취향에 맞게끔 오디오를 제공하기 위해 취향 카테고리를 고르게 하여 사용자 데이터를 모은다. 이후  사용자가 재생한 데이터로 새로운 클립을 추천하는 알고리즘을 갖고 있다. 하지만 며칠 째 같은 HOME을 보고 있는 사용자가 여기있다✋.

홈 화면을 아래로 드레그 하여 내리면 보통 새로운 추천 컨텐츠가 뜨는데 , 드레그 기능은 있으나 정보는 바뀌지 않았다. 

또한 나의 데이터로 새로운 클립을 꾸준히 추천해주었으면 하지만 HOME 화면에서 바뀌는 영역은 '최근 들은 클립' 뿐이다. 아쉬웠다.

 

 

 

 

 

 

 

3. 일러스트의 소극적인 활용이 아쉬움

네이버 오디오 클립은 작가 장 자크 쌍뻬의 꼬마 니콜라 일러스트를 사용하고 있다. 아무 기업과 콜라보를 하지않는 장 자크 쌍뻬와의 협업으로 인해 오디오 클립이 큰 이득을 얻었으면 하지만 실상은 그래픽 사용에 적잖이 아쉬움이 남는다. 로고에도 사용된 꼬마 니콜라의 일러스트가 좀 소극적으로 느껴진다고 생각이 들었다. 또한 '듣고싶은 오디오를 찾아볼까요?'의 일러스트와 '오디오 드라마'의 일러스트 캐릭터가 같게 사용된 점을 찾을 수 있었다. 중복되는 일러스트의 아쉬움

 

 

 

 

 

 

 

 

 

 

페이퍼 프로토타입

오디오 클립 플레이 화면의 기능 중 하나인 댓글 창의 UX 개선을 위해 페이퍼 프로토 타입을 만들어 보았다.

'오디오 클립' 크리에이터는 댓글을 통해 유저들의 반응을 통해 더 오디오 클립의 개선에 도움이 될 것이고

유저는 댓글을 통해 자신의 생각을 공유하고 또 자신과 다른 의견을 보며 새로운 시각을 찾을 수도 있을 것이다.

두 사용자 다 댓글 데이터에서 '중요한 정보를 얻을 수 있기 때문에 댓글창의 UI를 바꿔보고자 한다.

 

 

좌측 페이퍼 프로토타입 / 우측 Lo-Fi 프로토타입

 

페이퍼 프로토 타입이 알아보기 어려워 다시 Lo-fi 프로타입으로 만들었다.

차근차근 프로토타입 화면을 설명하자면, 댓글을 장려하는 문구를 통해 댓글을 쓰게 유도하고,

댓글  좋아요 평균을 배치하여 댓글의 전체적인 흐름을 읽을 수 있다. 유저의 코멘트에는 좋아요와

대댓글을 달 수 있게 하여 더 소통의 장을 넓히며 유저의 코멘트가 부적절 하다고 느낄때는

'﹒﹒﹒' 더보기를 통해 신고와 리포트를 할 수 있다. 

또한 댓글창에 필터를 적용하여 공감순/ 신규순 등으로 볼 수 있게 한다.

 

 

 

 

 

 

 

 

화면 기획서 (기능정의서+ 화면 기획서)

 

 

 

 

느낀 점

 

댓글창에서 유의미한 데이터를 사용자(크리에이터,청취자)에게 제공해야겠다는 생각에 조금 갇혀

댓글창의 다른 기능을 잊고 페이퍼 프로토타입을 한 듯하다. 만약 IA를 하고 시작한다면 간과했던 사실을 찾을 수 있었을 것 같다.