UX 개선사항,
페이퍼 프로토타입 그려보기
[코드스테이츠 PMB 8기] Daily project (3)
'Prototype(이하 프로토타입)'은 '시제품이 나오기 전의 제품의 원형'이라는 사전적 정의를 가지고 있다.
여기서 시제품은 MVP(Minimum Viable Product, 최소 기능 제품)를 의미하는 것으로 MVP가 제작되기 전에 만들어지는 것이 프로토타입이란 의미다. 얼핏 보면 MVP와 비슷한 개념인 것 같은 프로토타입이 그전에 굳이 만들어지는 이유는 개발보다 인적 리소스가 덜 들어가기 때문이다. 다른 말로 하면 '수정' 하기가 쉽기 때문이다. 그래서 개발 전에 다시 한번 유저 플로우를 고려해 개발 단계에서 생길 수 있는 리스크를 최대한 방지하는데 의의가 있다고 말할 수 있다.
실제 조직에서 프로토타입을 적용할 때는 3단계를 거치게 된다.
Lo-Fi 프로토타입 : 페이퍼 프로토타입, 와이어프레임 등 아이디어 회의에서 주로 이루어진다.
Mid-Fi 프로토타입 : Lo-Fi 단계를 거친 의견들을 반영하여 더 다듬어진 프로토타입이다.
Hi-Fi 프로토타입 : 높은 그래픽 수준을 요구하는 프로토타입으로 최종 산출물이라 볼 수 있다.
출처 : IBM Design3가지의 종류의 프로토타입은 PM, 개발자, 디자이너 등 이해관계자들이 서로 아이디어를 주고받는데 좋은 도구가 되며, 개발 전 사용성 테스트로 활용될 수 있다.
며칠 전 브런치에 작성했던 <이유있는 카카오웹툰의 변화, UX 분석> 에서는 카카오웹툰의 UX를 분석하며 아쉬웠던 UX/UI를 3가지로 정리했다. 이에 스스로를 카카오웹툰 PM이라 가정하며 UX/UI를 개선하기 위한 'Lo-Fi'인 페이퍼 프로토타입과 요구 사항 정의서를 한 번 작성해 보았다.
카카오웹툰의
아쉬운 UX 3가지와 개선 우선순위
· 1순위. 메인 화면으로 변경이 필요해 보이는 작품 설명 위치
· 2순위. 잦은 환불에 따른 불편함이 예상되는 이용권 구매 방식
· 3순위. 빠른 속도의 무한루프, 상하 스크롤 화면
이 중 2순위인 '이용권 구매 방식'은 UX/UI 개선보다 내부 정책이 먼저 논의되어야 하는 사항이라 생각한다. 또한 3순위의 위아래로 끝도 없이 빠르게 스크롤되는 화면은 <이유 있는 카카오웹툰의 변화, UX 분석>에서 언급한 것 처럼 카카오웹툰만의 비즈니스 전략이 숨겨져 있다고 보인다. 그렇기에 이는 조금 더 사용자들의 반응을 지켜볼 필요가 있다고 생각했다.
그래서 위 아쉬운 UX 3가지 중 가장 1순위인 '작품 설명 위치'를 개선하는데 중점을 두고
페이퍼 프로토타입을 제작해 보았다.
개선 사항을 시각적으로 그려낸
페이퍼 프로토타입
현재 웹툰을 선택하면 나오는 카카오웹툰의 '각 웹툰 메인 화면'에는 이미지(일러스트)가 큰 비중을 차지한다. 그리고 그 밑에는 웹툰 제목과 작가, 장르 등의 기본 정보가 적혀있다.
그러나 '작품 줄거리'는 회차별 콘텐츠가 있는 화면을 위로 스크롤해야 확인이 비로소 가능하다.
사용자 입장에서 웹툰을 선택하는 과정에서 주요하게 파악하는 것 중 하나가 '줄거리'이다.
줄거리를 통해 1차적으로 자신의 취향과 맞는 웹툰인지 선별하기 때문이다. 그렇다면 각 웹툰 메인 화면에 웹툰 줄거리 내용을 노출시키는 것이 사용자들의 편의성을 보다 높이는 길이 될 것이다.
가장 좌측에 있는 '(1) 웹툰 메인 화면'을 위로 스크롤할 때 나오는 화면이 '(2) 회차별 콘텐츠' 리스트와 그 옆에 '(3) 작품 정보 화면'이다.
이에 페이퍼 프로토타입을 만들면서
'(3) 작품 정보 화면'의 줄거리와 키워드를 '(1) 웹툰 메인 화면'으로 노출시키고자 했다.
개선 사항을 반영한 페이퍼 프로토타입페이퍼 프로토타입 내 변경된 점
A. 작품 키워드 위치 변경
위로 화면을 스크롤해야 볼 수 있었던 '(3) 작품 정보 화면'의 키워드를 우선 메인 화면 페이지에 노출시켰다.
출처 : 카카오웹툰
페이퍼 프로토타입 해당 부분 이미지키워드는 줄거리보다 더 직관적으로 정보를 파악하는데 도움을 주기 때문에 메인 화면 페이지 최상단 좌측에 배치해 두었다. 그 위치는 지금의 '남은 이용권의 수'와 '미리보기가 가능한 웹툰 수'가 표시된 곳이다.
현재 카카오웹툰의 키워드를 클릭하면 다른 추천 작품들을 보여주는 페이지로 자동 이동된다. 만약 그런 기능을 가진 '키워드'가 메인 화면에 노출되면, 키워드에 대한 사용자 접근성이 보다 좋아져 클릭률이 향상되고 UX의 흐름도 더 확장되는 효과를 기대할 수 있을 것이다.
B. 남은 이용권 개수 위치 변경
'작품 키워드' 위치가 변경되면서, 그 자리에 있던 '남은 이용권 개수'와 '미리보기가 가능한 웹툰 수'는 다른 위치로 이동시켜야 했다. 그런데 '미리보기가 가능한 웹툰 수'는 삭제하여도 회차별 리스트에서 충분히 확인 가능하기에 삭제가 가능할 것이라 보았다. 이에 '남은 이용권 개수'만 햄버거 메뉴 속으로 포함시켰다.
'남은 이용권 개수' 위치를 햄버거 메뉴 속으로 이동 시킨 이유는
이를 메인 페이지에 노출시키는 것이 비효율적인 화면 배치라 생각했기 때문이다.
실제 사용자가 아직 열람하지 않은 웹툰을 바로 클릭하면 현재 남은 이용권 개수와 함께 충전할 수 있는 페이지(위 우측 이미지 참고)가 바로 뜬다. 기존에 해당 웹툰을 꾸준히 보고 있는 독자라면 자신의 남은 이용권 수를 먼저 확인 하기 보다, 방금 업로드 된 새로운 이야기의 웹툰을 바로 '클릭'할 것이다. 그렇기에 굳이 '남은 이용권 개수'가 노출될 필요가 없다고 보았다.
C. 작품 줄거리 내용 위치 변경
'작품 줄거리'도 메인 페이지에 노출시켰다. 현재 일러스트 하단에 놓여있는 '직선' 위치(아래 이미지 : '불합격인간 작품 외 뼈때리는 극현실주의 작품' 위치)에 줄거리 내용을 삽입하고자 했다.
출처 : 카카오웹툰물론 줄거리 내용이 길 수 있기 때문에 메인 화면에 공간적으로 배치하는 것이 쉽지 않다.
이에 '토글 기능'을 활용하여 내용을 숨기고, 펼쳤을 때 전체 줄거리 주요 내용을 확인할 수 있도록 하였다.
페이퍼 프로토타입 해당 부분 이미지여기서 또하나 신경이 쓰였던 부분은 현재 화면 디자인과 어울리는가 였다.
이에 페이퍼 프로토타입에는 '네모 박스'로 표시해 두었지만, 실제 화면에는 네모 박스 경계선이 없고 그라데이션 효과로 전체 줄거리 내용을 숨기도록 설계하였다. 물론 내용이 숨겨져 있지만 그 위치에 줄거리가 있다는 것은 알 수 있도록 한 줄 정도의 텍스트만 선명하게 표시하면 좋을 것 같다. 또한 줄거리 전체를 보기 위해 창을 펼칠 때도 창의 배경화면은 그라데이션으로 디자인하는 것으로 설계하였다.
(참고 이미지 : (아래) 요구사항 정의서)
D. '유사 타 작품 페이지'로 이동할 수 있는 내비게이션 버튼 위치 및 모양 변경
위에서 확인한 것 처럼 현재 웹툰의 메인 화면에 있는 그림(일러스트) 하단에는 직선과 함께 양옆으로 '숫자'가 표시되어 있다. 이는 해당 웹툰과 유사한 다른 웹툰들로 이동할 수 있는 페이지 수의 숫자다.
출처 : 카카오웹툰
페이퍼 프로토타입 해당 부분 이미지이에 '추천하는 유사 타 작품'으로 이동할 수 있는 '내비게이션 버튼'은 일러스트 중앙 양끝에 위치하는 것으로 변경하고자 했다. 또한 현재의 직선 모양이 아닌 '<', '>' 모양으로 내비게이션 버튼을 변경해 최대한 일러스트 이미지를 가리지 않되, 좌우 스크롤을 통해 페이지 이동이 가능함을 알 수 있도록 설계했다.
개발 요구 사항을
구조화해 정리한
요구 사항 정의서
사실 페이퍼 프로토타입을 만들었다고 다 개발이 가능한 것이 아니다. 이 과정에서는 페이퍼 프로토타입과 같이 화면에 실제 구현이 가능한지를 확인해야 한다. 즉 개발팀과 논의 과정이 필요하다.
개발팀과의 논의 과정에서는 PM은 개발이 필요한 이유와 함께 어떻게 개발이 되어야 하는지 명확히 설명할 의무가 있다. '구두'로만 설명할 때는 전달력이 떨어지므로 위에서 작성한 페이퍼 프로토타입과 함께 '요구 사항 정의서'를 시각화해 설명하는 것이 효과적이다.
이에 실제 개발팀에 개발 관련 요구 사항을 전달한다는 상상으로 '요구 사항 정의서'를 함께 작성해 보았다.
위 '요구 사항 정의서'는 페이퍼 프로토타입에 있는 내용들로써, '노란색'으로 표시된 부분이 변경 또는 추가되는 기능들이다. 모든 기능 구현이 어렵다면 순차적으로 개발하거나 혹은 포기해야 할 기능들도 생길 수 있기에 개발되어야 할 기능들의 '우선순위'도 표시해 두었다.
그 우선순위를 고려하며 현재 우리가 가진 리소스 안에서 가장 효율적으로 개발하고 개선할 수 있는 최적의 방향을 이해관계자들과 함께 찾는 것이 위 과정의 결과가 될 것이다. 이후에는 정보계층구조도(Information Architecture), 기능정의서, 서비스정책서, 스토리보드 등을 설계하는 과정으로 넘어가게 된다.
