[PMB W4D1] Brand NEWneek UX Flow

유예리·2023년 1월 2일

PMB PM부트캠프 UI gui ux 뉴닉 코드스테이츠 코드스테이츠 PMB 16기

PMB

목록 보기

16/35

Short Review⏰

Day16

[TIL]
오늘은 UI, UX, GUI를 통해 좋은 UX를 설계하는 방법에 대해 공부했다.
UX(User Experience)의 사전적 의미는 “사용자가 어떤 시스템, 제품, 서비스를 직•간접 이용하면서 느끼고 생각하는 총체적 경험” 이다. 쉽게 말해 사용자가 느끼는 경험 그 자체라고 할 수 있다.
UI, User Interface는 “컴퓨터나 모바일 등 기기를 사용자가 좀 더 편하게 쓰도록 상호작용하는 환경을 제공하는 설계 또는 그 결과물”을 뜻한다.
언뜻보면 UI, UX가 비슷해보일 수 있으나, 둘의 큰 차이는 '감정'에 있다.
UI는 사람들이 제품과 상호작용할 때 이용하는 기능, 즉 기술의 영역이다. UX는 이 기능에 사용자가 어떻게 반응하고 무슨 기분을 느끼며 그로 인해 어떤 행동을 하는지, 이를 모두 고려해야한다. 기술에 바탕을 둔 감정의 영역인 것이다. 따라서 보통 UX를 UI보다 더 포괄적인 개념으로 본다.
GUI, Graphical User Interface는 “사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경”을 말한다. GUI 디자인은 일반적으로 이러한 환경을 보기 좋게 만드는 작업이기 때문에 자연스레 심미적인 것에 집중한다.

좋은 UX는 우리 서비스의 진짜 “팬”을 만들 수 있다. 그러니 좋은 UX를 기획과 개선을 위한 다음 3가지 키워드를 잊지말자!

이미지! 텍스트! 흐름!

Lesson Insight🪄

UX 디자이너와 같이 팀으로 활동한 경험으로 미뤄봤을 때, UX는 생각보다 까다롭다.
아주 많이.
강의에서도 들을 수 있었듯이, UX는 기술에 바탕을 둔 감정의 영역이다.
굉장히 추상적인 개념이라고 생각한다.

떠올려보자. 우리는 우리의 감정을 단어로, 말로 모두 표현할 수 있는가?
나는 그렇지 못한다고 생각한다.
우리는 감정을 표현하는데 비언어적인 것, 음악과 같은 매개체를 사용하는 등 여러가지를 시도한다. 나는 이 시도들이 단어나 말로는 감정을 충분히 표현하지 못해 생겨난 방법이라고 생각한다.

UX도 마찬가지다. 고객의 경험, 감정을 이해하고 공감했다고해서 곧바로 UX를 수정할 수 있을까?
나는 없다고 생각한다.
그래서 도움을 주는 것들이 UI, GUI라고 생각한다. 위에서 말한 단어, 말, 비언어적, 매개체가 이들의 역할이라고 생각한다.
그래야만 비로소, 소프트웨어적인 경험, 감정들이 하드웨어적인 UI, GUI, 쉽게말해 보여지는 것으로 표현될 수 있다.

그렇기 때문에 좋은 UX를 만들어 내는 것은, 단어로 못다한 감정을 표현하는 것과 비슷한 수준으로 어렵다고 감히 생각해보겠다.

그래서 오늘은 내가 지금까지 사용해보지 않은 '뉴닉'을 통해 사용자에 입장에서 좋은 UX, 불편한 UX를 공감해보고, 내가 PM이라면 이를 어떻게 개선하고, 표현할지 고민해보는 시간을 가져보려고 한다.

왜 뉴닉을 선택했나?

선택한 이유는 크게 두가지로 설명할 수 있다.

1. 내가 처음 사용해보는 프로덕트

사실 뉴닉 서비스를 알게 된건 일주일이 채 되지 않았다. 지난 W3D4의 토론에서 동기분을 통해 알게 되었기 때문이다. 그래서 선택했다.
좋은 UX와 아쉬운 UX는 결국 경험에서 오는 인사이트기 때문에, 앱에서의 첫 경험이 중요하다고 생각했다. 아무래도 임팩트가 강할 것이다.

또 기존에 사용하고 있는 앱들은 불편한 점이 있었더라도, 사람으로서 적응의 과정을 거쳤기 때문에 집중탐구하지 않는 이상 빠르게 아쉬운 UX를 뽑을 수 없을 것이라고 생각했다. 그래서 어쩌면 PM은 본인이 만든 UX가 익숙해 사용자 경험 리서치를 많이 해야한다고까지 생각했다.

생각의 깊이가 깊었지만,
결론적으로는 내가 처음 사용하는 프로덕트의 첫 경험을 통해 지극히 사용자에 입장에서 생각한 '사용자 경험'을 뽑아 낼 수 있을 것 같아 선택했다.

2. 오늘의 키워드를 담고 있는 기능 구성

이미지! 텍스트! 흐름!
앞서 이야기한 좋은 UX를 위한 핵심 키워드였다.
나는 뉴닉이 사용자에게 '뉴스'를 텍스트와 이미지를 통해 보기 쉽게 전달해야하는 서비스로써 앞선 3개의 키워드를 분석해 볼 수 있는 가장 좋은 프로덕트라고 생각했다.

더불어 좋은 UX로 개선해보는 과정은 처음이라서, 비교적 단순하고 간단한 경험을 할 수 있는 프로덕트를 선택하고자 했다.

결론적으로 내 지식 수준에서 잘 이해할 수 있고, 오늘의 키워드가 잘 녹아있는 프로덕트라고 생각하여 선택했다.

뉴닉의 UX

그럼 이제 본격적으로 뉴닉을 접해보고, 개인적으로 좋았던 UX와 아쉬웠던 UX의 TOP 3를 뽑아보고자 한다. 이때 좋은 UX를 위한 세가지 키워드를 통해 분석하고자 했다.

Good UX TOP3

TOP🥇 뉴닉의 쉽고 재미있는 뉴스카드!

이미지 텍스트 흐름

왼쪽 부터 뉴닉 홈 온보딩 설명, 뉴닉 홈화면(12/30), 뉴닉 홈화면(1/2)

'매일 아침 세상 돌아가는 소식, 쉽고 재미있게 받아볼 수 있어요'

가입 할 때 온보딩 화면에서 볼 수 있는 뉴닉의 홈 화면 컨텐츠 소개다.
나는 온보딩에 이 문구를 정말 잘 썼다고 생각했다. 홈화면에서 문구의 모든 기능이 다 포함되어있기 때문이다.

우선 '매일 아침'이라는 단어는 사용자가 날짜 선택을 통해 가능하도록 구현했다고 생각했다. 날짜를 선택하면 그날의 이슈, 뉴스를 아래의 카드로 정렬해서 보여준다.

'쉽고 재미있게 받아볼 수 있어요'라는 단어는 뉴닉의 콘텐츠를 카드 뉴스의 형태를 활용하면서 구현했다. 카드뉴스 전면에 컨텐츠의 내용을 요약하는 이미지로 사용자가 쉽게 접근하도록 했고, 슬라이드 형식으로 볼 수 있는 컨텐츠의 텍스트는 간결하게 대화형식으로 쓰여 뉴스를 좀더 가볍고 재미있게 읽을 수 있도록 했다.

홈 화면의 흐름 또한 좋은 경험으로 다가왔다. 내가 본 컨텐츠는 카드 전면에 체크표시로 알려줬다. 또 공유와 저장을 쉽게 접근할 수 있어 정말 아침에 가볍게 세상 뉴스를 볼 수 있을 것만 같은 UX로 설계되어있었다.

결론적으로 뉴닉의 홈화면은 이미지, 텍스트를 적절히 활용해 서비스의 주 기능을 어필하면서도, 그 컨텐츠를 쉽게 이용할 수 있는 흐름까지 지닌 좋은 UX라고 볼 수 있다.

TOP🥈 뉴닉을 잊지않도록, 알림!

흐름

 왼쪽 부터 첫 가입시 알림 배너, 알림 설정 팝업, 알림 설정의 과정

처음 뉴닉을 가입하면 뉴닉 알림을 제안받는다.
뉴닉이 아니더라도, 여러 앱에서도 가입 시 이런 알림 권한 설정 과정을 경험해본 적이 있다. 그럴 때 마다 나는 알림을 설정하지 않는다.
이유는 타 앱의 알림은 마케팅, 홍보 알림이 많고, 내가 원하지 않는 시간에도 알림을 보내기 때문이다.

그런 내가 뉴닉의 알림은 활성화했다.
이유는 2가지다.
첫번째는 뉴닉은 새로운 컨텐츠가 나왔을 때만 알림을 보낸다는 점이 마음에 들었기 때문이다.
둘째는 내 루틴에 맞는 알림을 받을 수 있기 때문이다.

사실 우리가 알림이라는 말을 앱이나 웹에서는 쉽게 보기 때문에, 알람과 혼동하는 경우가 많다고 생각한다. 알람은 일종의 자명종 같은 것으로, 시간을 알리거나, 일정을 알리는 것 같이 리마인드의 역할을 하는 것이다. 카톡 알림을 생각하면 쉬울 것이다. 채팅이 오면 알려주는 경보음이다.

하지만 사실 알림이라고 하면, 무언가를 알리는 일 자체를 뜻하는 순우리말이다. 이렇게 말하면 알람이랑 뭐가 다르냐고 하겠지만, 영어 단어를 보면 좀 명확해진다.

Notification은 notify에서 파생된 단어로, 무언가를 알려서(notify) 아는 상태로(ic) 만드는 것(tion)이다.

즉, 알림은 자명종 처럼 소리만 내서는 안되는 것이다. 알림을 통해 우리는 무언가에 대한 지식을 얻어야한다. 그래야 비로소 알림이 될 수 있다.

언어적인 이야기가 길었지만, 결국 뉴닉의 알림은 언어에 맞는 기능을 갖췄다고 생각한다. 뉴닉 알림을 통해 나는 뉴스 컨텐츠의 정보를 얻을 수 있기 때문이다.

뉴닉은 알림으로 신규 뉴스를 알려 사용자를 아는 상태로 만들고 있다.

더불어 이 알림을 내 시간에 맞춰준다니, 알림에서 느낄 수 있는 더할나위 없는 경험이라고 생각했다. 그래서 결국 뉴닉은 이 알림을 통해 뉴닉 컨텐츠를 더 궁금하게 만드는 흐름을 가졌다고 개인적으로 생각해봤다.

TOP🥉 뉴문뉴답은 이렇게!

텍스트

 왼쪽 부터 뉴문뮤답 온보딩 설명, 뉴문뉴답 메인 화면, 질문 화면

마지막은 강의에서도 볼 수 있었던 설명 텍스트 부분이다. 뉴닉은 뉴닉에서 활동하는 사용자 뉴니커끼리 질문하고 답하며 궁금증을 해결하는 일종의 커뮤니티가 형성되어있다. 이때 무엇을 질문해야하는지에 대한 예시가 적혀있다.

왜 고드름을 거꾸로 자라나요?
번아웃 다들 어떻게 이겨내세요?
기후위기를 위해 무엇을 할 수 있을까요?

나는 이 예시들이 굉장히 재밌다고 생각했다. 뉴닉(혹은 뉴스)에서 나올 수 있는 모든 종류의 질문을 아우르고 있다고 개인적으로 생각하기 때문이다.(아래는 질문들에 대한 분석은 개인적인 생각이다. 건너뛰기 가능)

일단 첫번째, '왜 고드름은 거꾸로 자라나요?' 이 질문은 뉴스에서 자세히 거론하지 않지만 통용적으로 알고 있는 사실에 대한 팩트체크/설명요구의 질문이라고 생각했다. 만약 기사에 _'올 겨울 영하 12도의 한파로 20센치 이상의 고드름이 지붕에 거꾸로 매달린 모습을 비일비재하게 볼 수 있었습니다.'_ 라는 문장이 있다면, 우리는 통용적으로 고드름의 형태를 알고 있기 때문에 그냥 지나칠 것이다. 하지만 같은 문장을 읽어 나가는 사용자 중에 왜 고드름이 거꾸로 자라는지 설명과 팩트를 알고자하는 사용자가 분명 존재한다고 생각한다. 그렇기 때문에 첫번째 질문예시를 저 문장으로 설정했다고 생각했다.
두번째, '번아웃 다들 어떻게 이겨내세요?' 이 질문은 뉴스에서 인사이트를 얻고자 할 때 나타난다고 생각한다. 가령 '청년들의 번아웃 발생 빈도수가 작년 대비 40% 증가했습니다.' 라는 뉴스가 있다고 가정하면, 번아웃을 느끼고 있는 사용자는 저렇게 많은 청년이 어떻게 번아웃을 이겨내고 있는지 이해하고, 본인에게 적용해볼 인사이트를 얻고자 한다고 생각했다. 이처럼 뉴스속에서 여러 사람의 인사이트를 할 때 저런 질문을 하는 사용자가 존재하고, 그렇기 때문에 예시로 설정했다고 생각했다.

세번째, '기후위기를 위해 무엇을 할 수 있을까요?' 이 마지막 질문은 어떤 문제에 대한 팩트만을 전달하는 뉴스 속에서 답을 얻기 위한 질문이라고 생각했다. 예를 들어 기사에 '지구온난화가 가속되면서, 멸종 종이 100종이 달했습니다.'라는 문제가 있다고 가정해보자. 이때 특정 사용자는 그럼 내가 지구 온난화를 위해 뭘 할 수 있을 것인지 고민하게 될 것이다. 이때 위와 같은 질문을 한다고 생각했다. 결국 뉴스에서 이야기한 어떤 문제를 해결할 정확한 답을 찾고자 하는 사용자를 위해 마지막 질문을 저렇게 설정했다고 생각했다.

결론적으로 '언론'과 관련된 서비스에서 나올 수 있는 질문을 잘 꼽아 설명하고 있는 좋은 텍스트라고 생각했다.

BAD UX TOP3

그렇다면 이런 뉴닉을 사용할 때 아쉬운 점은 어떤 부분이었을까? 마친가지로 좋은 UX를 위한 세가지 키워드를 통해 분석했다.

TOP🥇 나..잘 저장한거지?

흐름

 왼쪽 부터 홈 화면에서 저장/저장 토스트 표시, 콘텐츠 화면에서 접근한 뉴닉 콘텐츠에서의 저장 표시

뉴닉의 컨텐츠 저장 과정에서 일관되지 못한 흐름, 확인 과정이 없는 흐름으로 조금 아쉬운 부분이 있었다.

사진에서 보면 우선 왼쪽은 좋은 흐름을 보여주는 저장 UX다. 홈화면에서 저장 아이콘을 누르면 볼 수 있는 하단 토스트를 통해 내가 저장을 했는지에 대한 정보와, 저장을 확인할 수 있는 흐름이 모두 연결된다.

하지만 2, 3째 사진의 저장에는 그런 흐름을 만들어 줄 수 있는 요소가 없다. 2, 3째 사진은 뉴닉의 하단바 '컨텐츠'를 통해 뉴스를 열람했을 때 볼 수 있는 화면이다. 홈 화면과 똑같은 저장 아이콘으로 저장 기능을 지원하지만, 홈 화면과 달리 토스트가 나오지 않는다. 대신 색만 바뀌는데, 나는 내가 잘 저장했는지 의심이 들었고, 결국 홈화면까지 나와 확인하는 절차를 거쳐야했다.

또 홈 화면에서는 토스트 알림이 있었기에, 이미 경험한 부분이 있어 토스트 알림이 나오지 않는 상황은 일관되지 못한 경험이었고, 거기에서 오는 의심이 더 커졌다.

결론적으로 이러한 저장 기능의 흐름은 앱 내에서 아쉬운 경험으로 다가왔다.

TOP🥈 프리미엄_다 유료인건가? & TOP🥉 베이직_다 유료는 아니구나!

텍스트 흐름

왼쪽부터 콘텐츠 온보딩 설명, 콘텐츠 메인 화면, 베이직 콘텐츠 선택 화면

TOP2와 3는 한꺼번에 이야기 해 볼까한다. 결론 부터 이야기하면 나는 뉴닉의 하단바 콘텐츠 버튼으로 접근한 모든 화면에서의 경험이 아쉬웠다.

이유는 두가지 키워드로 이야기 할 수 있다.
첫번째는 직관적이지 않은 텍스트 사용, 두번째는 정보에 흐름에 있다.

우선, '콘텐츠' 버튼 단어 선택, 온보딩 설명, 프리미엄/베이직 단어사용 모두 직관적이지 못한 텍스트다. 콘텐츠 화면에 대한 온보딩 설명 문구를 보자.
'베이직, 프리미엄 콘텐츠를 통해 다양한 지식을 내 것으로 만들 수 있어요'
처음 가입하는 사용자가 이 문구를 본다면 어떻게 이해할까?
내가 이해한 바로는, 콘텐츠가 뭔지도 모르겠는데 베이직/프리미엄 콘텐츠의 차이가 있는건가? 각각에서 얻을 수 있는게 다른가? 돈내야하나? 의문만 생기는 문구였다.

앱을 사용하고 콘텐츠 기능을 사용했을 때도 의문이 풀리기 까지도 오랜시간이 걸렸다. 콘텐츠 화면에서 처음 볼 수 있는 정렬이 '프리미엄/베이직'인데 거기서 부터 이해하기 어려웠던 것 같다.

처음 하단바 콘텐츠 버튼을 누르면 볼 수 있는 것은 프리미엄 콘텐츠이다. 프리미엄은 베이직 보다 심도 있는 내용을 담은 콘텐츠로 일정량의 구매가로 구매가 가능하다. 그에 비에 베이직은 위에 사진에서도 볼 수 있듯, 뉴닉을 가입한 모든 사용자가 열람 할 수 있는 콘텐츠를 말한다. 이걸 이해하려고, 베이직, 프리미엄 하단의 콘텐츠를 하나씩 들어가봤다.

또한 베이직에는 뉴닉 사용자가 무료로 볼 수 있는 콘텐츠 카테고리 설명이 되어있는데, 설명에 뎁스가 깊다보니 잘 안읽게 되었다. 뉴닉 콘텐츠 제작자도 나름의 카테고리 기준을 통해 콘텐츠를 제작할 것인데 이 점이 사용자에게 전달되기 어려운 흐름이었다.

결론적으로, 나는 콘텐츠 화면들을 살펴 보면서, 여기에 너무 많은걸 담고 싶었던건 아닌가 하고 생각했다. 그래서 직관적이지 못한 텍스트의 사용과, 이해까지의 복잡한 흐름으로 아쉬운 경험이 만들어졌다고 생각했다.

새로운 뉴닉 FLOW

그렇다면 뉴닉의 아쉬웠던 UX를 개선하기 위해선 어떤 키워드를 중점적으로 개선시키는게 좋을까?

답은 흐름에 있다.

BAD UX TOP3 모두 흐름에서 해결이 가능하다고 생각한다.

우선 TOP1이었던 저장 UX는 생각보다 쉽게 흐름을 개선할 수 있다. 바로 홈 화면과 동일한 토스트를 적용하는 것!
동일한 토스트 알림을 통해 UX를 개선한다면, 일관된 경험의 흐름과 저장의 확인을 통해 사용자에게 좀 더 편안한 저장 프로세스를 제공할 수 있다고 생각한다.

TOP2, TOP3도 마찬가지로 흐름으로 해결이 가능하다고 생각한다. 길게 설명할 수 없는 온보딩과 정렬 카테고리 단어의 특성상 텍스트를 바꾸기 어려울 수도 있다. 그래서 나는 프리미엄/베이직 콘텐츠 접근 흐름을 바꿔 개선하는 방법을 고안했다.

우선 지금의 콘텐츠 메인 화면에서 프리미엄/베이직의 구분을 없앤다.
홈화면에서는 베이직 콘텐츠에 관한 설명만 먼저 열람할 수 있도록해, 사용자에게 뉴닉이 어떤 콘텐츠를 기본적으로 제공하는지 인지 할 수 있도록 한다.
사용자가 베이직 콘텐츠에 관한 설명을 다 읽은 시점에서 베이직 콘텐츠에서 부족한 부분을 채워 줄 수 있는 알맞은 프리미엄 콘텐츠를 추천한다.
이때 부족한 부분을 느끼고 있는 사용자였다면 프리미엄 콘텐츠 까지의 접근이 가능하다. 또한 부족하다고 느꼈을 때 비로소, 프리미엄 서비스를 이용할 것이다.

이렇게 생각하게 된 이유는 뉴닉 웹서비스에 있다. 뉴닉은 앱서비스를 출시하기 이전에, 이메일, 웹서비스를 통해 콘텐츠를 제작/서비스 해왔다.