브런치에 쓰는 '브런치'의 좋은 UX, 아쉬운 UX
브런치 작가 승인 메일 캡처 브런치 작가 승인 메일을 받은 지도 벌써 보름이 넘었다. 본격적인 PM 연습생으로서 발을 내딛은 것도 보름이 넘었다는 말.... 진짜로 시간이 가는 속도는 나이와 비례한다더니 벌써 부트캠프 4주차다. 이러다 곧 죽는 거 아니냐고. 제발 죽기 전에 PM으로 취업은 하게 해 주세요. 엉엉.
아무튼 오늘은 어엿한 브런치의 병아리 작가로서 개인적인 브런치 UX 경험에 대해 말해보고자 한다. 사실 이건 좋은 UX, 저건 아쉬운 UX라고 단정지어 말하려 하니 조금 걱정이 되지만, 이건 정말 '개인적인' 경험일 뿐이니 가볍게 읽어 주시길 바란다.
브런치 사랑합니다.
#UX(User Experience)
: 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험
#UI(User Interface)
: 사용자가 컴퓨터나 모바일 기기 등을 좀 더 편리하게 사용할 수 있는 환경을 제공하는 설계 또는 그 결과물
#GUI(Graphical User Interface)
: 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
출처: http://uidesignguides.comUI(GUI)는 '표현'이며 UX는 '행동'이다.
브런치의 좋은 UX 3가지
1. 감성적이고 트렌디한 GUI
2. 통일감을 주는 UI
3. '글쓰기'라는 본질에 충실한 레이아웃
1. 감성적이고 트렌디한 GUI
브런치의 가장 큰 장점이자 특징은 바로 심플하고 트렌디한 디자인이라고 생각한다.
조잡하지 않고 깔끔한 GUI가 사용자의 심미적 욕구를 충족시켜 만족감을 준다. 또한 콘텐츠의 대표 사진 위로 보이는 하얀 제목이 굉장히 트렌디하다고 느껴진다. 많은 사용자들이 본인과 같은 생각일 것이라 감히 판단한다.
2. 통일감을 주는 UI
긍정적으로 느꼈던 브런치의 또다른 UX는 UI의 통일감이다.
통일감을 주는 가장 큰 요소는 바로 '폰트'라고 생각한다. 맨 왼쪽 하단에 이벤트 공지를 제외하고는 모두 동일한 폰트를 사용함으로써 전체적인 통일감을 주고 있다.
통일감을 주는 또다른 주요 요소는 바로 '색 구성'인데, 브런치는 자극적이지 않은 3가지 색(화이트, 그레이, 민트)으로 통일하여 UI를 제작하였다.
3. '글쓰기'라는 본질에 충실한 레이아웃
브런치는 사용자의 입에서 '웹에서는 되는데 앱에서는 왜 안 돼?' 라는 말이 나오지 않게, 최소한의 필요 기능만 제공하고 있다. 브런치는 '글쓰기 플랫폼'이고, 따라서 글쓰기 레이아웃이 본질이라고 할 수 있다.
브런치는 글을 작성하기 위한 최소한의 기능만 제공하지만, 절대 부족함은 없게 기능을 구성했고 이는 모바일 앱과 PC 웹, 두 곳에서 모두 동일하게 이용할 수 있다.
또한 글쓰기 레이아웃의 인터랙션도 사용자 경험에 최적화된 모습이다. 모바일 앱에서는 글쓰기를 누르면 바로 키보드가 올라오는 것, 그 위에 추가 기능이 붙어있는 것. PC 웹에서는 스크롤을 따라 아이콘 바가 움직이는 것이 이에 해당한다.
개인적으로 글을 쓰다보면 괜히 정렬이나 디자인 같은 부분에 신경을 많이 쓰곤 하는데 브런치의 경우 줄 정렬, 폰트 크기, 색 등과 같은 옵션에 제한을 두고 있기 때문에 글쓰기에만 집중할 수 있다는 점도 좋은 UX라고 말하고 싶다. (PPT 슬라이드 정렬 안 맞춘면 안 되는 병에 걸린 사람... 그게 나예요....)
브런치의 아쉬운 UX 3가지
1. 불친절한 UI와 기능 설명
2. 모호한 인터랙션
3. 어수선한 콘텐츠 정렬
1. 불친절한 UI와 기능 설명
브런치의 UI는 불친절하다.
학부 시절, 좋은 UI는 사용자에게 친절한 UI라고 배웠다. 여기서의 친절함은 문장 어투를 말하는 것이 아니다. 사용자가 직관적으로 이해할 수 있는 UI를 친절한 UI라고 한다.
왼쪽 메뉴에서 '브런치 나우'가 뭔지, '글 읽는 서재'가 뭔지 눌러보기 전까지는 알 길이 없으며 해당 화면에서도 그 섹션이 어떤 의도로 만들어진 건지에 대한 설명이 없다. (밑에서도 말하겠지만, 섹션을 구성한 글들 또한 어수선해서 정체성을 알기 어렵다.)
'작가의 서랍'이나 '글 읽는 서재'는 각각 임시저장글, 그리고 최근에 본 글과 좋아요 한 글을 볼 수 있는 기능이다. 직관적인 표현을 버리고 감성에 비중을 두어 본질을 흐린 UI라고 생각한다.
또한 설정 아이콘이 작고 흐리게 디자인된 것을 볼 수 있는데, 시력이 좋지 않거나 색 구별이 어려운 사용자들에게는 굉장히 불편한 UX가 될 수 있다.
이외 개인적으로는 브런치 북과 브런치 매거진의 차이를 몰라 헤맸었는데, 해당 기능에 대한 설명도 굉장히 부족했다. 다른 작가님이 쓰신 '브런치 사용법'을 읽고 그 기능과 사용 방법을 터득했다.... 브런치 사용법을 브런치에 쓰여진 글들 중에서 찾아야 한다니.
2. 모호한 인터랙션
(동영상 추후 추가)
브런치 홈 화면에서 모호한 인터랙션이 발견되었다.
해당 화면에서 위로 스크롤을 하면 화면이 전환되면서 추천 브런치북, 인기글 등 다양한 콘텐츠가 순차적으로 보인다. 따라서 아래로 스크롤을 하면 이전의 추천 콘텐츠들이 뜨는 건 당연한 인터랙션이다.
하지만 같은 화면에서 왼쪽으로 스크롤을 해도 이전의 추천 글들이 화면에 보여진다. 굳이 중복되는 결과를 주는 인터랙션을 구성한 이유도 의문이 생기지만, '오른쪽으로 스크롤을 하면 다음 글들이 보여지겠지?'라는 당연한 기대를 철저히 무시한다.... 오른쪽으로 스크롤 하면 그냥 좌측 메뉴 칸이 보여질 뿐이다.
3. 어수선한 콘텐츠 정렬
콘텐츠가 너어어어어무 심하게 쏟아진다!
추천 콘텐츠, 브런치 나우의 콘텐츠들의 정렬 기준이 없다.
홈 화면을 위로 스크롤하면 추천 콘텐츠와 인기 콘텐츠를 띄워 주는 기능은 만족한다. 하지만 그 수가 너무 많고, 화면에 뜨는 기준 또한 불분명하다. (아마도 알고리즘에 따라 사용자가 관심있어할만한 글을 추천해 주는 것으로 예상된다.) 맨 끝 화면까지 총 30번의 화면 전환 및 추천 콘텐츠들이 뜨는데, 명확한 기준 없이 와르르 쏟아지다 보니 사용자 입장에서 조금 당황스럽다.
'브런치 나우'도 추천 및 인기 콘텐츠들을 소개해 주는 섹션인데, 카테고리가 너무 많고 한 눈에 보기 어렵다는 문제가 있다. 심지어 브런치 나우 맨 위 상단에 뜨는 추천 글은 나의 관심사와 아무런 관련도 없는 글이다. 정제된 카테고리 내에서 깔끔한 콘텐츠 추천이 필요해 보인다.
아쉬운 UX의 개선 우선순위
1순위: 불친절한 UI와 기능 설명
고객은 서비스를 '사용'해야 하는데 각 기능에 대한 설명이 없으면 사용이 불가능할 것이다. 제대로 된 '사용'이 이루어지려면 기능과 그 기능을 어떻게 사용해야 하는지에 대한 설명이 필요할 것이다.
덧붙여 감성도 좋지만, UI의 본질을 잊지 말아야 한다. 눈에 잘 띄는 직관적인, 친절한 UI로 개선되었으면 더 완벽한 브런치가 될 수 있을 것이다.
2순위: 어수선한 콘텐츠 정렬
브런치는 수많은 콘텐츠를 제공하고 있다.
제공하는 콘텐츠가 많을 수록 기준과 정렬의 중요성이 높아진다고 생각한다. 적절한 기준을 세우고 그에 맞춰 콘텐츠들을 깔끔하게 정렬해 제공한다면 고객은 더 편리하게 콘텐츠를 즐길 수 있을 것이다.
개인적으로는 추천 콘텐츠의 갯수를 줄이고, 화면 전환의 수도 줄이면 더 좋을 것 같다는 생각이 들었다.
3순위: 모호한 인터랙션
사실 모호한 인터랙션 같은 경우, 홈 화면에만 해당되기 때문에 3순위로 미뤘다.
중복 결과를 나타내는 인터랙션은 과감히 삭제할 필요가 있어 보인다. 또한 고객이 '당연하게' 기대하는 결과를 가져다 주는 인터랙션 및 UX가 좋은 것이라고 생각한다.
UX 설계 시 기억해야 할 3요소 중 브런치에 주요하게 적용된 요소는 뭘까?
이미지
UX 설계 시 기억해야 할 3요소: 이미지, 텍스트, 흐름
브런치는 글쓰기 플랫폼이니까 당연히 텍스트에 중점을 두었을 것이라고 생각하는 사람들이 많겠지만, 개인적으로는 이미지라고 생각한다.
브런치 북과 브런치 매거진을 이미지화시켜 감성적인 GUI를 구성한 점이 가장 크게 다가왔다. 덧붙여 글에 커버 사진을 넣을 수 있는 것, 그리고 글을 추천할 때 모두 이 커버 사진을 활용하는 것도 근거로 들 수 있다.
위에서 살펴본 아쉬운 UX들을 페이퍼 프로토타입을 통해 개선한 글입니다. ↓
https://brunch.co.kr/@hyunn2/19
#PM #프로덕트 매니저 #IT #기획 #UX #UI #CX
