brunch

You can make anything
by writing

C.S.Lewis

by 김선유 Jan 09. 2016

예쁘지만, 불편한 브런치 UX, UI

IOS앱, 웹을 중심으로

나는 브런치 헤비유저이다. 내 관심사인 UX, UI, IT에 대한 꽤 전문적인 글, 퀄리티 높은 글들이 많아 재밌게 구독 중이다. 1인 미디어 시대에 걸맞게 '잡지, 책'라는 컨셉 아래 특유의 감각적인 디자인이 돋보이는 브런치는 발전가능성이 매우 높아보인다. 그러나 아직 베타 버전이라 여러면에서 그런지 아쉬운 점도 많다. 개발 측면에서는 앱 로그인이 자주 튕겨 짜증 날 때가 많다. 이 글에서는 내가 평소에 브런치를 쓰면서 불편했던 점을 웹, IOS앱 UX, UI, 기획을 중심으로 분석해보려 한다. 




먼저 액션의 문제(1)로는

1. 위아래 스와이프  

앱을 처음에 실행시켰을 때 기본 화면은 브런치 홈이다. 브런치 앱 특성상 컨텐츠 중심이기 때문에 UX 디자이너는 햄버거 메뉴(사이드바)를 쓴 것 같다. 애플은 햄버거 메뉴를 싫어한다는데 그 이유는 내가 지금 어디있고 어디로 갈 수 있는지를 나타내지 못하기 때문이다. 기본 화면인 브런치 홈에서는 위아래로 스와이프하면 랜덤으로 추천글로 이동하게 된다.

위아래로 스와이프를 하다가 맘에 드는 글을 발견한 후 그 글을 읽고 싶으면 한번 더 탭을 해야 한다. Depth가 하나 더 추가되는 것이다. 브런치 홈에 나타나는 화면은 일종의 글의 cover일 뿐 그 글을 바로 볼 수 있는 것은 아니다. 나는 처음에 이 브런치를 실행시켰을 때 맘에 드는 글의 제목을 발견하면 아래로 스와이프를 하면 바로 그 글을 읽을 수 있을 거라 기대했다. 


하나씩 위아래로 스와이프하면서 헷갈렸던 점은 페이지마다 각기 디자인도 다르고 컨텐츠의 성격도 다 다르다는 점이었다. 왼쪽부터


1. Editor's Picks : 에디터 추천글이다.
2. 랜덤 글인지는 모르겠지만 어쨌든 낱개의 글이다. 1번과 다른 확연히 다른 디자인으로 글의 내용이 맛보기로 보이는 식이다. 
3. 매거진이다. 탭 하면 바로 글로 들어가는 것이 아니라 해당 매거진의 글의 목록이 나타난다.
4. 브런치 소설 핫이슈 : 많이 공유된 글을 목록으로 보여준다.
5. 비슷한 주제에 대한 글이 2개가 동시에 나타난다. 


위와 같이 스와이프를 할 때마다 전혀 다른 성격의 글들이 무작위로 추천되는 것은 좋은 사용자 경험을 줄까?라는 의문이 든다. 성격이 다르기 때문에 디자인도 전부 제각각이다. (감각적인 느낌이 있긴 한데 그게 유용한지는 모르겠다.) 사용자에게 더 많은 선택권을 주기 위한 의도로 보이지만 나는 이 점이 오히려 불편했다. 차라리 내가 관심 있는 특정 분야에 대한 '글'들을 랜덤으로 추천하는 것이 만족도도 높고 덜 헷갈리지 않을까? 관심 있는 글들만 보고 싶은 사용자에게 마구잡이로 추천되는 글들은 별로 쓸모가 없을 수도 있다. 한 페이지에 한 글만 나오는 것도 아니고, 퀄리티가 높은 글도 있고 아닌 것도 많다.  


또한 브런치는 카테고리화가 전혀 안 되어있어 원하는 글을 찾으려면 검색, 혹은 마음에 드는 작가의 관심작가를 통해 또 다른 작가를 찾아야 하는 매우 능동적인 노력을 요구한다. 이러한 이유때문에 사용자에게 딱 맞는 추천서비스가 필요하다고 생각한다. 




액션의 문제(2)


2. 좌우 스와이프

위아래 스와이프가 다른 글 간의 이동임을 깨닫자 좌우 스와이프는 어떻게 작동할지 궁금했다. 

해당 글을 읽다가 다른 글을 읽고 싶으면 back버튼을 누르지 않아도 옆으로 스와이프 하면 다른 작가의 글로 바로 넘어갈 수 있다. 그러나 상하 스와이프와 좌우 스와이프가 같은 기능을 하는 것은 좋은 유아이 일까? 이미 홈 화면에서 위아래 스와이프가 다른 글 간의 이동임을 유저는 알게 되었다. 그런데 양쪽 스와이프를 통해 다시 또 다른 글로 움직일 수 있게 되면 헷갈릴 것이다. 나라면 다른글을 보기위한 동작을 하나로 통일했을 것이다. 계속 옆으로 스와이프 하다가 내가 어디서부터 봤더라? 하고 back버튼을 눌렀을 때 상위계층인 홈 화면으로 돌아오면 길을 잃은 느낌이다. 이처럼 브런치 앱을 사용하다보면 유저가 통제력을 갖고 있기보다는 디자이너가 설계한 방향대로 흘러갔다가 자신이 어느 위치에 있는지 까먹는 상황이 발생한다. 




기획의 문제


3. 햄버거 메뉴

햄버거 메뉴에 숨겨져 있는 메뉴는 다음과 같다.

1. 브런치 홈

2. 브런치 나우

3. 피드

4. 매거진

각 메뉴의 성격을 이름만 봐서는 사실 잘 모르겠다.

브런치 홈은 기본 화면,

브런치 나우는 실시간 모든 글, 

피드는 내가 읽었던 글,

매거진은 내가 읽었던 매거진이다.


세세하게 나눠져있다. 브런치 나우 브런치 홈에도 올라오고 피드는 텍스트로만 봐서는 '내가 읽은 글'인지 잘 모르겠다. 더 친절하게 '구독한 글'로 바꾸는 편이 낫겠다. 매거진 또한 실제로 많이 사용하는 편은 아닌 것 같다. 








'브런치 나우'

브런치에 실시간으로 올라오는 모든 글 목록이다. 

큰 텍스트는 제목이고 작은 텍스트는 소제목이다. (소제목이 없을 경우 본문 내용이다.) 살펴보면 올라오는 글들의 제목과 소제목이 다 제각각이다. 제목에 넘버링을 하고 소제목에 글의 진짜 제목이 있기도 하고, 반대인 경우도 있다. 사용자들도 각기 자신만의 스타일대로 하는 것이다. 이런 점 때문에 실시간으로 올라오는 글들이 통일적으로 보이진 않는다. 

또 실시간으로 브런치에 올라오는 모든 글을 제공하기 보다는 사용자와 관련된 글들을 집중적으로 보여주는 식으로 필터링을 하면 브런치 나우를 더 눈여겨 볼만하지 않을까? (실제로 많은 유저들이 일기 쓰는 용도으로 발행하는 경우도 많아 다른 유저가 읽은 만한 글을 브런치나우에서 찾기 쉽지는 않다.) 











가독성의 문제(1)


4. 매거진


특히 처음에 헷갈렸던 것은 매거진에 대한 개념이었다. 해당 작가의 매거진에 들어가면 그에 해당하는 글이 카드 형식으로 나타난다. 매거진은 하나의 공통된 테마에 대한 글을 연재하는 식인데, 얼핏 보면 매거진과 글이 구별이 잘 안 간다. 카드 형식으로 된 GUI 때문인지 낱개의 글이 오히려 매거진처럼 보인다. 그 이유는 매거진은 이름만 있을 뿐 커버도 없고 제목도 크게 강조되지 않기 때문인 것 같다. 매거진에 대한 정보도 3개의 해시태그가 전부다. 매거진의 테마를 통해 글을 읽으려는 독자들은 해당 매거진의 정보를 충분히 얻을 수 없다. 한줄정도로 매거진에 대한 간략한 설명이 들어가면 좋을 것 같다. 

한 작가의 매거진에 들어가봤다. 카드 형식으로 된 글이 양옆으로 스와이프 하면 보인다. 밑에는 잘 보이지 않는 '모아보기'가 있다. 탭 하면 해당 매거진의 글들이 또다시 카드형식으로 나온다. 카드 형식이 이쁘긴 하지만  '글'이라는 특성상 중요한 제목의 가독성을 떨어뜨린다. 유저에게 가장 중요한 것은 글의 '제목'이지 사진이 아니다. 여기서는 굳이 카드형식을 쓰기보다는 글의 목록을 최신순으로 텍스트만 보여주는 편이 나을 것 같다. 




가독성의 문제(2)


5. 그 밖의 자잘한 UI

스마트폰 화면에서 보면 설정 아이콘이 다소... 작다.

사이드바의 깔끔한 디자인을 위해 여백의 미를 살린 것처럼 보이나... 나는 쉽게 찾을 수 없었다. 




가독성의 문제(3)


6. 과도한 이미지 사용으로 인한 문제 

처음에 브런치 웹버전을 쓰면서 불편했던 점은 글 안에서 해당 작가의 글목록(텍스트)을 찾기 힘들다는 점이었다. 이미지 때문에 브런치 글들은 소위 있어보이는 효과를 갖지만, 오히려 과도한 이미지의 사용때문에 사용성을 해치는 경우가 있다. 아래는 웹의 경우이다. 


글을 다 읽고 스크롤을 끝까지 내리면 해당 작가의 이전글과 다음글을 볼 수 있다. 그러나 이것이 해당 매거진의 이전 글과 다음 글인지 한눈에 파악하기는 어렵다. <, > 아이콘이 뚜렷하게 보이지 않아 처음에 알기 어려웠다. 또한 뒤에 배경 사진 때문에 글의 제목이 다소 묻히는 느낌이다. 글이 주요 컨텐츠라는 점을 감안하면 제목이 가장 눈에 띄어야 하는데 이점이 조금 아쉽다. 비슷한 서비스 네이버 포스트와 비교를 하자면, 네이버 포스트는 '누구'의 다른 포스트, 시리즈 이전 편, 시리즈 다음 편 이렇게 텍스트로 친절히 설명해주고 있다. 글의 제목도 배경사진을 검은색 opacity를 주어서 브런치에 비해 더 잘 읽힌다. 


포스트는 이전편 다음편 말고도 해당작가의 다른 4개의 글까지 목록처럼 더 보여준다. 브런치에 비해 깔끔한 느낌은 들지 않지만 해당작가의 다른 글에 대한 접근성은 더 높아질것 같다.


마지막까지 스크롤을 내리면 추천서비스인 '당신을 위한 브런치'가 뜬다. 이 역시 배경사진 때문에 몇몇 글의 제목은 잘 안보인다.

마지막 추천글의 제목은 '국가고시 9개를 수석 합격한 분의 생활 수준을  보니!'이다. 두 눈을 부릅뜨고 봐야 겨우 읽힌다.





브런치는 글쓰기 UI가 확실히 감각적인 느낌이 들어 다른 유사 서비스와 차별화가 되어있다. 마치 잡지를 웹으로 옮겨놓는 듯한 느낌이 들어 읽는 재미가 있다. 별것도 아닌 글인데 이미지 몇 개 넣으면 꽤 있어보여 내글이 진짜 작품이 된 것 같아 쓰는 재미도 있다. 그러나 전체적인 웹, 앱 UI 구조가 햄버거메뉴를 사용했다는 점에서 기인한 문제들이 많은 것 같다. 메뉴들이 가려져 있기 때문에 발생하는 문제를 탭바를 만들어 웹과 앱을 아예 다르게 구성해 해결할 수는 없을까? 나도 무엇이 정답인지는 모르겠지만... 전체적으로 구조를 아예 바꾸진 않더라도 가독성 측면에서 자잘하게 해결되어야 할 문제들, 띄어쓰기밖에 안 되는 맞춤법 검사(그마저도 틀린 경우가 많다), 앱에서 구독하기 버튼이 작가의 글 본문 하단에만 위치한 것 등... 그 밖의 개선할 점들을 빨리 해결해주었으면 하는 바람이다. 더더 바라는 건 내가 애착을 갖고 쓰는 컨텐츠가 그것에 관심가질만한 사람들에게 더 많이 보여지고 추천되면 얼마나 좋을까!




Portfolio

Facebook

Instagram

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari