[코드스테이츠 PMB 18기 Wy_4]네이버NOW 개선 방안, 와이어프레임 만들기

 

드디어 와이어프레임과 스토리보드 작성을 해보는 주간이 되었다!

주차가 지날수록 내 생각이 빈약했다는 걸 절절하게 느끼면서도, 아이디어 전개가 되는 게 신기하기도 하다.

우수한 분들께서 머리를 싸매고 만든 앱을 내가 리뉴얼하는 건 아직도 어색하지만,

네이버NOW를 열심히 고쳐본 경험을 공유하는 시간을 가져보겠다!

 

 

[INDEX]

1. 프로덕트 UX, 핵심요소 3가지로 나누어 생각해보기
2. MVP의 핵심기능, 아이디어 소개
3. MVP의 PRD
4. MVP의 와이어프레임
5. 작성한 스토리보드

 

 

 

 

1. 프로덕트 UX, 핵심요소 3가지로 나누어 생각해보기

 

본 과제 해당 파트는 워밍업을 위해 선정한 프로덕트 이외의 서비스를 선정해 생각해보는 것이었다.

그렇지만 미처 문구를 확실히 확인하지 못한 나는 계속 NOW를 다루게 되었다. 양해 부탁드린다.

 

생각 정리한 과정은 다음과 같다.

 

• [설치 및 실행]
  설치 → 실행 → 스플래시 화면 → 홈 화면으로 진행됨.
  온보딩 화면의 부재, 로그인 유도 과정 역시 없음.
  
  
• [앱 사용 중]
  전반적으로 앱 사용하며 느낀 점 = ‘불친절함’
  
  
• [아쉬운 UX]
  • 프로그램 탐색 과정(능동적)
    홈 화면에 제시한 카테고리 내에서만 탐색 해야할 것 같은 느낌.
    모든 방송에 설명이 부족함.
    페이지를 뒤져가며 방송 설명을 찾아야 함.
    다른 영상 플랫폼들과 달리 검색 기능이 하단 내비게이션 바에 있어 낯섦.
    
    
  • 프로그램 탐색 과정(수동적)
    홈 화면에서 카테고리의 뚜렷한 구분이 필요해보임.(’생중계’와 ‘지금 방송 중’의 차이점을 모르겠음)
    상단 카테고리의 나열이 홈 화면의 추천 카테고리와 차이가 없어 분리한 이유를 모르겠음.
    24시간 라이브 채널, 현재 송출 중인 라디오가 홈 화면 ‘지금 방송 중’에 표시되지 않는다는 점.
    ’생중계’ 탭에 들어가면 프로그램 송출 일자와 프로그램 목록에서 괴리감이 느껴짐.
    (ex. 타이틀: ‘한국경제TV No.1 경제·증권 채널.’, 송출 일자: ‘1년 전’)
    
    
  • 채널 페이지 내에서
    라이브 방송 시청 버튼을 쉽게 찾기 어려움.(화면 중앙 상단 배너 형식)
    생방송 일정 or 방송 관련 공지에 대해 알기 어려움.(직접 찾아야한다는 점)
    제공되는 에피소드나 클립이 전혀 없는 채널이 많음.
    프로그램에 따라서(예능 프로그램 등) 채널 내 페이지 구성이 달라 당황함.
  + 생방송 시청 시
  ’알림’ 아이콘 모양을 탭할 시 ‘팔로우’가 되고, 버튼이 사라짐.
  → 재생 화면을 탭 해서 확인해야 함.
  라이브 기본 화면에서 ‘채팅창 가리기’, ‘전체화면’ 등의 기능이 없음.
  → 재생 화면을 탭 해야 전체화면/채팅창 가리기가 가능해짐.
  
  
• [좋은 UX]
  • 홈 화면 추천 프로그램들을 선택 시 바로 라이브 화면으로 넘어가는 것.
  • 로그인 없이도 콘텐츠를 감상하도록 만들었다는 점.
  • 예능 프로그램, 라디오, 플레이리스트 모두 한 플랫폼에서 감상이 가능하다는 점.

 

좋은 UX보다 아쉬운 UX가 압도적으로 많다는 점이 아쉬웠지만, 개선안을 구상하는 입장에서 생각한 것이기도 하기에
조금 더 비판적인 시선으로 프로덕트의 UX를 바라본 것 같다.

 

그렇다면 이제 워밍업을 끝냈으니, MVP 구축을 위한 아이데이션을 또 해보자.

 

 

 

2. MVP의 핵심기능, 아이디어 소개

 

아이디어 소개와 핵심 기능 정의를 간단히 하고, 어떤 기능들이 필요한 것들일지 리스트업을 해보는 과정을 통해

정리하는 시간을 가져보겠다.

 

먼저, 계속 언급했던 것처럼 NOW는 고객 유치를 위한 지향점이 네이버TV와 섞이면서 홈 화면 UI가 지저분해진 느낌을 받았다.

오디오도, 오리지널 프로그램도, 보이는 라디오도, 기존 방송국의 다양한 프로그램들도 제공하는 종합 미디어 플랫폼인 NOW는 대개 짜임새 있는 프로그램들을 제공하기에 개인 크리에이터들이 활약하는 여타 플랫폼들과 결이 다르다.

 

따라서 콘텐츠 탐색에 있어서, 카테고리 분류에 있어서도 타 플랫폼들과 분류를 다르게 해야할 것임이 느껴졌지만

실상은 제공하는 모든 프로그램의 카테고리를 나열해 홈 화면 상단 탭과 썸네일 목록에 우겨넣은 느낌이 들었다.

카테고리를 깔끔하게 정리해야 처음 이용하는 사용자의 혼란을 줄일 수 있을 것 같았고, 리텐션 역시 높일 수 있기에

오리지널 프로그램 제공과 라이브 프로그램 시청이라는 NOW의 특징을 살릴 수 있는 UI를 구상하고자 했다.

 

이를 위한 아이디어 전개 과정은 다음과 같다.

 

[큰 개념] - 모바일

1. 홈 화면 UI 개선
2. 채널 정보 및 세부 목록 개선

[세부 목록]

1. 홈 화면
   1. 온보딩 화면 추가 - 다양한 콘텐츠를 접하는 신규 유저의 앱 친밀도를 높이기 위해
   2. 상/하단 내비게이션 수정 - 하단에 위치한 검색 기능, 상단 카테고리의 무분별한 나열 등 어색함과 난잡함 정리
   3. 썸네일에서 오리지널 프로그램/타 프로그램 표시 추가 - 오리지널 프로그램만 노출되는 것이 아니라면 구분이 필요할 듯함
2. 채널 정보 및 세부 목록 개선
   1. 채널 페이지 내 공지 및 프로그램 설명란 추가 - 라이브 프로그램임에도 공지 확인이 앱 내에서 어려운 문제 해결
   2. 라이브 재생 화면 팔로우 버튼 변경 - 라이브 재생 화면에서 팔로우 버튼이 '알림'에 쓰이는 종 모양 아이콘임
   3. 라이브 재생 화면 채팅 가리기 기능 추가 - 전체화면을 선택해야만 채팅이 가려지고, 전체화면도 화면을 정확히 눌러야 하는 불편함 존재
   4. ‘타임피드’, ‘커뮤니티’ 탭의 통합 - 채널 페이지 내에서 커뮤니티 탭이 제 기능을 하지 못함. 통합을 통해 실시간 반응 수집 유도
   5. 에피소드 별 댓글 기능 추가 - 커뮤니티 기능 확장의 필요성. 라이브 방송 시 실시간 채팅은 사라지기 때문에 이후  에피소드 반응 수집 유도

[아이데이션]

핵심 기능 선정

선정한 항목 ⇒ <NOW앱 홈 화면 개선>

 

우선순위

• (1) 온보딩 화면 추가: 신규 사용자의 앱 친밀도를 높이고 플랫폼의 각 컴포넌트들에 익숙해지도록 만들 수 있음
• (2) 상/하단 내비게이션 수정: 너무 낯선 플랫폼의 느낌을 줄이고, 익숙하고 깔끔한 UI를 통해 유저 경험 개선 가능

 

다음과 같은 아이데이션 과정을 통해, 우선순위 (1)과 (2)로 두 가지 핵심 기능을 선정해보았다.

온보딩 화면 추가는 확실히 간단한 기능이기에 두 가지로 선정 항목을 늘린 점 참고 부탁드린다!

 

 

 

3. MVP의 PRD

 

그렇다면 이와 같은 핵심 기능을 넣은 MVP를 만들기 위해 작성해야하는 문서 중

PRD를 작성해보고 공유하는 시간을 가져보겠다.

 

PRD는 정해진 양식이 없기에 더더욱 작성하기 힘든 것 같다.

지원 문서와 배포 일정까지는 아직 러프하게만 생각하고, 그 이상으로 정리하지 못했다.

'아는 척 하면서 다 틀리게 작성하면 어떡하지?' 싶은 생각이 가장 컸던 것 같다. 우선 작성만 해봤어도 좋았을 텐데,,,

이후에 보완하는 과정에서 추가해보도록 하면서, 작성한 PRD를 공유해보겠다.

 

직접 작성해 본 네이버NOW 개선 MVP의 PRD

 

작성하면서 아쉬웠던 점은

네이버NOW가 쾌거를 이룬 서비스가 아니라서 그런 것인지 통계 데이터가 너무나도 적었다는 것과

주변에 이용하는 지인이 거의 없어 인터뷰를 통해 리서치 결과를 간단히 얻기도 힘들었다는 점이다.

더 적극적으로 찾아보고 다녔으면 가능했을거 같다는 생각도 들면서,, 아쉬움을 정리해야겠다.

 

 

 

4. MVP의 와이어프레임

 

대망의 와이어프레임 제작의 차례이다.

나는 figma를 이전에도 사용했기 때문에 figma를 이용해 작성해보았는데,

손이 굳어서 그런 것인지 만드는 데 많이 애를 먹었다,, 틈틈이 개인 작업을 해야겠다는 다짐을 또 한다.

figma 페이지를 캡처해서 공유하도록 하겠다.

 

구상한 MVP의 와이어프레임

간단한 홈 화면 개선안인데도 구색을 갖추려다보니 오래 걸린 느낌이 없지않아 있다.

padding, margin, 폰트 사이즈, 버튼 규격 등 정해진 법칙이 있을 텐데 아직 완벽하게 익히지 못해서 작성 중간부터는 남이 한 눈에 알아볼 수 있는 최소한의 깔끔함만 갖추려고 노력했다.

Mid-fi의 기준에 대해 조금 더 깊게 알아봐야 할 것 같다.

 

 

 

5. 작성한 스토리보드

 

이제 페이지마다 작성한 스토리보드도 함께 공유해보도록 하겠다.

처음 와이어프레임 작성을 구상할 때에는 14 페이지 정도를 예상했었는데 12 페이지를 만들게 되어서

총 12개의 스토리보드를 작성하게 되었다.

 

온보딩 화면의 경우 세 단계의 화면을 묶어서 작성해도 됐을 텐데, 아직 요령이 부족한 탓인지 페이지 하나하나 일일이 작성하는 불상사가 생겼다. 효율적인 문서 작성 요령도 좀 더 익혀보아야겠다.

 

 

그럼, 스토리보드 전반적인 이미지를 공유하고 각 페이지별 작성 내용도 공유해보겠다!

 

총 12개의 화면에 대한 스토리보드.

>> ※스크롤 압박 주의, 페이지 별 스토리보드

 

 

와이어프레임과 스토리보드를 작성하면서 들었던 생각은

내가 옳은 방향으로 개선안을 생각했는지보다, 디자이너나 개발자의 관점에서 설명하는 언어를 구사하는 능력이

아직 많이 부족하구나,,라는 점이었다.

 

아무리 좋은 아이디어일지라도 와이어프레임을 설명할 때 기능에 대한 구현 난이도나 디자인 단위 통일을 하지 않고 전달한다면 참사가 일어나겠다는 걱정도 들었다.

 

figma를 사용하면서 계속 연습해보는 것도 좋지만, 개발/디자인 관점에서 설명을 어떻게 해야할지도 책을 읽으면서 지식을 더 넓혀봐야겠다.

 

이번 과제는 이것으로 이야기를 마치도록 하겠다. 추후에 와이어프레임이나 아이디어가 수정된다면 보완해서 또 올려보도록 하겠다!!