헤이버니의 UX개선을 위한
페이퍼 프로토타입 제작
UI 슬쩍 고치보기 _코드스테이츠 PMB 10기
지난글에서 우리들의 깔끔한 메일함을 사수하기 위해 유용한 도구가 되어준 뉴스레터 구독 어플리케이션 헤이버니를 소개하며 직접 느낀 좋은 UX와 아쉬운 UX를 소개했다.
이후 본격적으로 헤이버니에서 관심 분야의 뉴스레터를 11개나 구독해버렸더니 오늘 꼭두새벽부터 아티클이 여기저기서 배달되기 시작했다. 설레는 마음으로 새로운 아티클을 읽고자 접속했는데 뭔가 어수선하다. 지난주에 탐구했던 헤이버니의 아쉬운 UX 중 1가지가 나를 괴롭혔다.
기껏 내 메일함을 정리하고 왔더니 헤이버니는 왜 정리가 안 되어 있는 것인가!
헤이버니에서 아티클을 읽으려면
구독한 아티클을 읽으려면 앱에 접속하고 하단 메뉴바에서 "아티클" 메뉴를 선택하여 아티클 목록에 진입할 수 있다. 목록에서 원하는 뉴스레터를 선택, 아티클을 읽는 것이 전체적인 흐름이다. 그런데 나는 아티클 목록을 탐색하다가 고민에 빠지게 되었고 이 부분에서 개선이 필요하다고 느꼈다.
무엇이 문제인고?
지난 글에서도 아쉬운 UX로 언급했던 것은 "구독리스트 버튼 & 아티클 리스트"이다.
1. 작은 구독리스트 버튼
일단 우측 상단에 +10이 적혀 있는 아주 작고 소중한 아이콘이 있어서 클릭했더니, 가장 우측 이미지와 같이 구독리스트로 이동하였다. 나처럼 이 앱을 뜯어보고자 마음을 먹었거나 호기심이 많은 사람이 아니면 이 작은 버튼을 누가 클릭해볼까 싶었다. 내가 구독을 신청한 뉴스레터의 리스트를 확인 할 수 있는 아주 중요한 버튼임에도 유저가 버튼의 존재여부를 알아차리기에 사이즈가 너무 작다.
2. 복잡한 아티클 리스트
11개나 되는 뉴스레터가 나에게 도착한 순서대로 뒤죽박죽 섞여있다. 보통 메일링을 하는 유저가 가장 불편하다고 생각하는 것이 분류가 안 되어 있는 메일함이다. 이 때문에 최근 네이버에서는 발송처 별로 메일을 분류하는 서비스로 개편하기도 했다.
현재의 헤이버니는 각기 다른 곳에서 뉴스레터를 전송하다 보니 제목 스타일이 통일되어 있지 않아서 어떤 것은 이모지가 들어가 있기도 하다. 제목과 약간의 미리보기 내용, 그 아래로 보이는 것은 또 각기 다른 로고와 뉴스레터 업체의 이름으로 인해 전체적으로 복잡하고 어수선하게 느껴졌다. 무엇을 먼저 읽어야 할지 고민을 불러일으킨다.
이와 같은 문제를 해결하고자 헤이버니가 깔끔하게 정리해 준 구독리스트를 활용하여 UI를 개선하기 위한 페이퍼 프로토타입을 제작하려고 한다. 그 전에 먼저 프로토타입에 대해 살펴 보자.
프로토타입이란?
1. 개념 (Prototype, Prototyping)
프로토타입은 개발에 착수하기 전에 각 이해관계자들이 함께 보며 정보를 어디에 위치시킬지 이해하고 합의하기 위한 것으로, UI를 빠르게 디자인하여 모의테스트를 할 수 있는 기법을 프로토타이핑이라고 한다. 적은 자원으로 빠른 평가와 테스트를 할 수 있다는 장점이 있으며 실제 유저의 플로우(사용흐름)를 계산하여 기획과 개발 단계에서 가지는 리스크를 미리 파악할 수 있다.
2. 프로토타이핑의 단계
1) Low Fidelity Prototype (Lo-Fi Prototype)
핸드스케치와 같이, 실제 출시될 서비스와 거리가 먼 초기 단계의 프로토타입으로 시간 및 리소스가 절약되고, 복잡한 수정 절차가 없기 때문에 새로운 의견을 바로 적용하는 것이 가능하다. 아이디어 회의와 같은 기획 단계에서 자주 작성하지만 팀 간 소통을 위한 정식 업무 산출물이 아닌 유용한 임시방편 정도이다.
2) Middle Fidelity Prototype (Mid-Fi Prototype)
PM이나 서비스 기획자가 가장 많이 만드는 산출물 중 하나로 피그마, PPT와 같은 디자인 툴을 이용해서 만들고 Mid-Fi Wireframe 이라고도 불린다. Lo-Fi 프로토타입에서 발전하여 레이아웃을 맞추고 기능 배치와 영역, 글자 포인트, 이미지 위치 등을 실제 산출물에 조금 더 가깝게 조정한다. 여기서 디스크립션이라는 설명을 추가해 스토리보드, 화면 설계서라는 최종 산출물을 만들기도 한다.
3) High Fidelity Prototype (Hi-Fi Prototype)
디자인과 인터랙션을 가미하여 실제 개발될 완성본에 가깝게 만드는 산출물로 높은 그래픽 수준을 요구하기 때문에 PM이 직접 만드는 경우는 드문 편이다.
나는 Lo-Fi에 속하는 핸드스케치 페이퍼 프로토타입으로 헤이버니의 아티클 목록 UI를 개선해보기로 했다.
UI개선(안)
1. 숨어 있던 구독리스트를 꺼내어 아티클 구독 목록으로 UI 개선
뒤죽박죽 섞인 기존 아티클 리스트를 없애고 어디에 있는지 찾기가 어려웠던 구독리스트를 가져와서 아티클 구독 목록으로 활용한다. 내가 몇개의 뉴스레터를 구독하는지는 구독 옆의 ( )안 숫자를 보고 알 수 있다. 카카오톡 신규 메세지 알림처럼 빨간 원형 아이콘 숫자를 각 뉴스레터의 우측에 표기하여 뉴스레터의 도착 순서대로 정렬한다. 각 뉴스레터를 선택하면 하위 메뉴로 배달 된 뉴스레터 제목과 내용 미리보기가 뜨며 원하는 것을 선택하여 볼 수 있다.
해당 UI를 적용한다면 뉴스레터별로 묶어서 분류하고 신규 뉴스레터의 도착을 안내하기 때문에 유저가 직관적으로 원하는 뉴스레터를 선택할 수 있다. 아티클의 제목이 하위 메뉴로 노출되기 때문에 뒤죽박죽 섞인 것 처럼 보이는 목록이 정리된다.
2. 카테고리별 아티클은 필터링으로 UI 개선
기존 UI는 "나의 아티클"이 "전체"와 "카테고리별" 두 메뉴로 나뉘어 있다. 카테고리별 메뉴도 기존 UI와 같은 목록을 카테고리별로 정렬해주기만 해서 뒤죽박죽 섞인 느낌은 여전했다. 따라서 1번에서 정리한 구독 목록 좌측 상단에 카테고리별 필터링 장치를 만들면 구독 리스트를 분야별로 정렬하여 볼 수 있다.
학부 때 패션디자인을 전공한 내가 아이러니하게도 가장 어려워 했던 것이 바로 패션 일러스트레이션 과목이었다. 옷 만드는 덴 소질이 있었으나 손 그림에는 영 서툴렀던 탓이다. 이번에는 갤럭시 노트를 활용하여 페이퍼 프로토타입을 그렸는데도 상당한 시간이 걸려서 차라리 피그마로 작업하고 싶었다. 이론상 가장 빠르게 할 수 있는 프로토타이핑이 페이퍼 스케치이지만 나 같은 사람은 디자인 툴로 만드는 프로토타입이 더 맞지 않았을까. 그래도 갤럭시 노트가 많이 도와줘서 나름 재밌었던 이번 작업! :)
문제를 기막히게 해결하는 유익한 기획자.
코드스테이츠 PM 부트캠프로 획기적인 프로덕트 매니저가 되어 가다.
기막힌 생각과 획기적인 방법론자, PM이야기 #5. 끝.
