아웃스탠딩 PM이라면 UI/UX를 이렇게 개선하겠어요
[코드스테이츠 PMB 11기] UX/UI 분석 및 페이퍼 프로토타입
끝없는 텍스트 콘텐츠의 굴레... 에 빠진 사람 나야 나~나야 나~
pmb과정을 시작하면서 정말 이 세상에 이렇게 많은 분들이 글을 쓰시고 계셨구나를 새삼 깨닫게 되었다. 브런치, 요즘 it, 퍼블리, 아웃스탠딩 등 여러 플랫폼들을 통해 콘텐츠를 소비하게 되었다.
그중 쉽고 재미있는 IT 뉴스라는 슬로건을 가진 아웃스탠딩은 글의 퀄리티도 좋고, 원래는 뉴스레터로 만나보고 있었는데 뉴스레터에서 흥미가 MAX치에 다 달았는데, 프리미엄이 되어야 전체 글을 볼 수 있다는 멘트에 구독도 한 구독자였었다.(지금은 읽기 자료의 과다로 잠시 중지 중....) 사실 뉴스레터로만 매일 봐왔다가 이번에 처음으로 앱을 설치했고, 아웃스탠딩의 UI/UX 분석을 통해 개선안을 나의 허접한 페이퍼 프로토타이핑으로 보여주고자 한다!
1. 기존 아웃스탠딩 UX 분석하기
홈 화면
먼저 홈 화면에서 불편하게 느낀 점은 홈 화면에서 제시해주는 글이 오직 최신순 정렬 하나뿐이라는 점이다. 보통 어떤 콘텐츠 플랫폼이든 홈 화면에서 사용자들을 끌어들이기 위해 다양한 방법의 분류법으로 콘텐츠를 소개한다. 하지만 아웃스탠딩은 오로지 최신순으로 콘텐츠를 보여 줄 뿐이다.
좌측 이미지는 밀리의 서재 홈 화면으로 메인 배너의 추천과 함께 아래의 당신을 위한 추천을 시작으로 서점 베스트, 한 달 이내에 출간된 책 등을 추천해주고 있다. 우측은 퍼블리의 홈 화면으로 여기도 비슷하게 메인 배너의 추천으로 시작으로 나만 모르면 서운한 트렌드, ㅇㅇ님을 위한 오늘의 콘텐츠, 새로 나온 콘텐츠 등 홈 화면에 추천을 해주는 시스템을 가지고 있다. 이렇게 다양한 추천 방법을 통해 사용자로 하여금 계속 앱 내에서 콘텐츠를 소비하게 하는 것처럼 아웃스탠딩에서도 홈 화면에 추천 기능이 있으면 좋을 것 같다.
검색 화면
홈 화면보다 더 놀라웠던 화면은 검색 화면이다. 일단 놀랐던 첫 번째 이유는 태그가 왜 저렇게 많은 것인가? 두 번째 이유는 짧게 내용을 보여주는 부분의 마무리를 페이드 아웃처럼(?) 처리가 되어있는 부분(전문용어가 있을 것 같은데 잘 모르겠다...) 이 저런 식으로 되어있어서 마치 저 칸을 드래그하면 아래로 내려가 내용이 더 보일 것 같다고 느껴졌다. 내용과 태그가 모두 저렇게 처리가 되어있어서 전체적으로 깔끔한 느낌도 들지 않았다.
위에 있는 카테고리, 태그, 저자의 탭을 펼치니 더 총체적 난국이라는 생각이 들었다. 그리고 각각의 탭들의 내용의 기준 또한 지금 인기 있거나, 최근에 나온 태그가 아닌 단순히 가장 많은 태그 순서대로 보여주는 것 같아서 아쉬웠다.
이번에는 여러 종류의 플랫폼에서 예시를 가져왔다. 왼쪽부터 뉴닉, 지그재그, 밀리의 서재의 검색 화면이다. 보통 가장 위에 추천 검색어, 가장 인기 있는 태그들을 간략하게 보여주고, 아래에는 최신 콘텐츠, 최근 본 상품, 베스트 등 각자 추천해주고 싶은 것들을 추천해주는 페이지로 이용하고 있음을 볼 수 있다.
이를 통해서 아웃스탠딩 UX/UI의 아쉬운 것을 3가지로 정리할 수 있었다.
1. 포스팅의 너무 많은 태그
2. 단순한 최신 글 나열식인 홈 화면
3. 정돈되지 않은 검색 화면 창의 UI
각각의 아쉬운 점들을 내가 페이퍼 프로토타이핑을 통해 개선안들을 내보고자 한다.
2. 아웃스탠딩 UX/UI 개선안
포스팅의 너무 많은 태그
일단 UX적으로 개선해야 할 것은 먼저 '태그의 중요도 설정'이 제일 먼저 필요할 것 같다.
내가 아웃스탠딩에 기고를 할 수 없어서 어떤 시스템으로 태그가 운영되고 있는지 모르겠지만, 여러 게시글을 내가 돌아다녀본 결과 거의 무제한에 가깝게 태그를 만들 수 있는 시스템인 것 같았다. 이렇게 중구난방 식으로 만드는 구조라면 아웃스탠딩 내에서도 데이터를 분석하기 쉽지 않을 것 같다.
그래서 브런치처럼 '중요 태그는 이미 있는 태그들 중에서 선택해서 3개만 설정 가능', '서브 태그는 자유롭게 설정 가능' 이런 식으로 태그를 나누어 설정할 수 있도록 개선하면 좋을 것 같다. 그럼 이렇게 중요 태그 3가지를 선택한다고 가정하고 나머지 UI 프로토타이핑을 이어가겠다.
단순한 최신 글 나열식인 홈 화면
어디 가서 보여주기 쉽지 않은 페이퍼 프로토타입이다.ㅎㅎ
먼저 가장 위의 메인 배너는 그대로 유지했다. 그리고 아래를 각각 최신 인기 포스팅, 추천 포스팅, 지금 발굴된 인기 포스팅으로 구성했다. 마지막 지금 발굴된 인기 포스팅은 이름만 보여줌으로써 아래로 내려가도 더 콘텐츠가 있을 것임을 암시했다. 그리고 각각의 콘텐츠 테마는 옆으로 넘기면 더 볼 수 있는데, 옆으로 넘겨도 있다는 것을 표현하기 위해 가장 오른쪽 콘텐츠는 절반만 보여줌으로써 스와이핑을 할 수 있도록 유도했다. 각각의 포스팅의 동그라미는 저자 이름이고, 네모들은 중요 태그 3개를 보여주는 것을 나타냈다.
추가로 홈 화면의 추천 테마로 최신 인기 포스팅, 추천 포스팅, 지금 발굴된 인기 포스팅으로 설정한 이유는 아웃스탠딩 포스팅을 끝까지 읽으면 이미 저 3가지 카테고리로 콘텐츠를 추천해주는 것을 확인했기 때문이다. 그래서 이미 존재하고 있는 데이터 베이스이기 때문에 홈에서 추천해주는 것도 가능할 것이라고 생각하여 3가지 카테고리로 프로토타이핑을 진행했다.
정돈되지 않은 검색 화면 창의 UI
두 번째 검색 화면은 다른 앱들의 UI를 많이 참고해서 만들었다. 먼저 위에 검색창은 그대로 유지한다. 그리고 첫 번째 개선안에서 만든 중요 태그 3가지의 데이터를 이용하여 인기 태그들을 추출해 보여준다. 그리고 아래에는 어떤 글을 보여줄까 하다가 뉴스를 알려주는 뉴닉과 IT 기사를 쉽게 알려준다는 취지의 아웃스탠딩은 비슷한 맥락이라고 생각하여 최신 포스팅을 보여주는 것으로 배치했다. 그리고 포스팅을 보여주는 부분에는 좌측에는 대표 이미지, 우측에는 제목 2줄과 내용 2줄을 구성하여 프로토타입 이미지에 줄 두께를 다르게 했는데 여기서 보니까 별 차이가 안 난다.(...) 위에 2줄이 제목이고 아래 2줄이 시작 내용 2줄인데 마지막 부분에 … 을 배치하여 내용이 더 이어진다고 표현했다.
3. 사실 이러는 이유가 있는 거 아닐까
왜 이렇게 아웃스탠딩 앱은 전체적으로 아쉬울까?라는 생각을 하면서 돌아다니다가 프리미엄 결제하는 곳에 들어갔다. 그런데 인앱 결제조차도 안 되는 것이었다! 아니 프리미엄으로 수익 창출하는 회사가 왜?라고 생각하다가 프리미엄으로 수익을 창출하는 회사가 아닌가...? 하는 생각까지 이어졌다.
띠로리- 하는 귀여운 이미지와 함께 앱 내 결제가 되지 않는다는 안내문구가 나오고 있다.
이건 회사의 내부 사정일 테니 나도 잘 모르겠다... 아직 앱으로는 활성화가 덜 된 것일지, 아니면 프리미엄 구독보다 다른 경로로 수익을 창출하는 것이 더 많을 수도 있겠다.
아무튼 항상 봐왔던 페이퍼 프로토타이핑도 뭔가 직접 해보니까 생각보다 재미있었다!
컨디션이 난조여서 더 딥하고 정성 있는 포스팅이 되지 못한 것 같아 너무 아쉽다...ㅠㅠ 제발 다시 제 컨디션으로 얼른 회복하고 싶다...☆
