brunch

You can make anything
by writing

C.S.Lewis

by 오은 Apr 04. 2022

블로그 10년 차가 분석하는 네이버 블로그의 UI/UX

[코드스테이츠 PMB 11기] UI/UX 분석


브런치에서 네이버 블로그에 대한 글을 쓰는 게 조금 웃기는 상황일까?라는 생각은 들었지만, 사실 나와 더 긴 역사를 함께한 것은 네이버 블로그이기 때문에 큰 망설임 없이 네이버 블로그를 선택하게 되었다.


내가 네이버 블로그를 시작한 건 중학교 2학년 때부터니까 거의 10년쯤(?)되어간다. 세상에나... 물론 중간에 학업으로 인해 이용하지 않았던 빈 시간이 있지만, 그래도 정말 오랜 기간 이용했구나 라는 생각이 들었다. 그때에 비하면 당연히 기능도 많아졌고, 편의성도 많이 좋아졌지만 인간의 욕심은 끝이 없지... 과연 얼마나 사용자 친화적인 UI와 UX를 제공하고 있는지 분석해보려 한다!



먼저 글을 시작하기 전에 UI와 UX 가 무엇인지부터 알아보고자 한다. 


이 이미지가 UI와 UX의 개념을 가장 잘 설명해주는 사진이라고 생각한다. 실제로 검색해도 많이 나오는 것이 이 케첩 예시이다. UI는 사용자가 좀 더 편리하게 사용할 수 있는, 상호작용 할 수 있는 환경을 제공하는 결과물이다. 위 케첩 예시에서는 케첩 그 자체의 이미지가 바로 UI라고 할 수 있다. UI는 디자인 요소가 들어가 있다. 위 예시에서도 왼쪽 케첩은 입구가 위로 향해있고, 오른쪽 케첩은 입구가 아래로 향한 디자인이다. 


그렇다면 UX는 무엇일까? 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 끼고 생각하는 총체적 경험이다. 왼쪽 케첩을 이용하는 사용자는 케첩이 얼마 남지 않았을 경우 이미지처럼 어렵게 케첩을 사용하는 경험을 할 것이다. 하지만 오른쪽 케첩을 이용하는 사용자는 케첩이 얼마 남지 않았을 경우에도 편하게 케첩을 이용하는 경험을 한다. 이렇게 다른 UI로 인해 UX 또한 크게 차이가 난다는 것을 알 수 있다. 그렇기 때문에 단순히 외관을 바꾸는 UI가 아닌 바뀐 UI로 인한 UX까지 고려하는 것이 중요하다는 것을 알 수 있다. 



(네이버 블로그는 앱과 웹 모두 서비스하고 있지만 보다 일관성 있는 비교를 위해 오늘 글에서는 '네이버 블로그 앱'의 UX와 UI를 다룬다는 점을 알리고 시작한다!)








1. 좋은 UX



원활한 모바일/PC 글쓰기 연동


네이버 블로그는 PC와 모바일 간의 사용자가 쓴 글의 저장 기능을 통해 연동이 잘 된다. 그냥 글만 옮겨질 뿐만 아니라 내가 웹에서 적용시킨 가운데 정렬 서식 또한 함께 그대로 옮겨지는 것을 볼 수 있다. 그래서 사용자가 PC와 모바일 두 개의 기기를 왔다 갔다 하면서 전환을 하는 사용자의 경험 흐름에 있어서 원활하게 전환할 수 있다.




다양한 글쓰기 툴


보통 PC보다는 모바일 앱에서는 부분적인 기능만 일단 옮겨져 있는 경우가 많다. 하지만 네이버 블로그 앱 같은 경우에는 PC가 없이 오로지 앱만으로도 퀄리티 있는 글을 작성할 수 있을 정도로 글쓰기의 기능이 PC와 거의 유사한 수준으로 구현되어있다. 글꼴, 정렬, 글자크기, 볼드 등의 기본적인 글의 형식을 위헤 자주 사용하는 것은 직관적인 아이콘을 이용하여 키보드 바로 위에 위치하도록 하였다. 더하여 글을 보다 풍부하게 만들기 위한 인용구, 구분선, 장소, 파일 등에 대한 것들은 직관적인 아이콘과 간단한 단어를 통해 안내하고 있다. 더하여 PC에만 있던 맞춤법 검사도 추가되면서 더욱 네이버 블로그 앱을 통한 글을 작성하는 사람들의 편의성을 높이고 있다.


 


동일 검색어 추천 기능


예시를 위해 '에뛰드하우스'를 검색해서 어떤 블로그에 방문했다. 내가 방문한 블로그의 게시글의 끝부분에 도달하게 되면 먼저 내가 본 게시물의 같은 카테고리에 있는 블로그 주인의 다른 글이 보여준다. 보통 카테고리에는 비슷한 주제의 게시글을 모아두기 때문에 예시 같은 경우에는 내가 검색한 '에뛰드하우스'에 관한 글은 아니지만 '화장품'이라는 비슷한 키워드에 대한 다른 글들을 볼 수 있다. 거기에 그치지 않고 더 내려가게 되면 블로그에서 '에뛰드하우스'를 검색했을 때 확인할 수 있는 다른 블로그들의 글들이 나온다. 이렇게 이어지는 추천 알고리즘은 사용자가 검색한 후 계속 연속해서 다른 글들을 보게 되는 흐름을 만들어 준다. 






2. 아쉬운 UX



빈약한 알고리즘의 추천 기능


앞에서는 알고리즘으로 인해서 좋은 방향으로 사용자의 흐름이 기능했던 반면에 이번에는 알고리즘으로 인해 사용자의 흐름이 좋지 않은 경우이다. 네이버 블로그 앱의 탭에 두 번째에 위치하고 있는 '블로그 추천'이라는 기능이다. 말 그래도 블로그의 글들을 추천해주는 기능인데, 사실 잘 사용하지 않는 기능이다. 그렇다면 왜 잘 사용하지 않을까? 먼저 첫 번째 이미지를 보면 내가 관심분야를 추가할 수 있다. 나는 저기에 관심분야를 추가하면 블로그 추천을 해주는 글이 모두 내가 원하는 카테고리의 글만 나올 줄 알았는데 그것이 아니었다! 두 번째 이미지처럼 내가 그 분야를 눌러야 원하는 분야의 글들을 볼 수 있다. 더하여 나에게 맞춘 블로그 게시글의 추천이 아닌 단순히 내가 선택한 '분야'로 카테고리징 된 게시글들이 무작위로 추천해 주는 것 같아서 광고 글도 필터링이 되지 않았고, 나에게 정말 유용한 글 또한 잘 보이지 않는다.




일관성 없는 이웃 새 글 UI


오늘 과제를 하면서 제일 의문이었던 UI이다. 어떤 글은 썸네일을 정사각형으로 보여주는 반면에 어떤 글은 직사각형으로 보여준다는 점이다. 글쓴이가 선택을 하는 것일까?라는 생각도 해봤다. 그런데 일단 내가 글을 쓰면서 한 번도 선택해본 적이 없고, 두 번째와 세 번째 이미지를 보면 같은 분이 쓴 글로 글쓴이 분은 항상 정사각형으로 썸네일을 만드는 분이신데 두 게시글은 각각 정사각형, 직사각형으로 다르게 보여주고 있다. 크게 볼 이유가 없는 썸네일이 크게 나오고, 더 크게 보면 좋았을 썸네일이 잘려서 나오기도 하면서 전체적인 일관성이 떨어지면서 사용자가 글을 보는 흐름에 방해를 받는 느낌을 받았다.




사실 정사각형이든 직사각형이든 이미지를 볼 수만 있으면 되는 거 아닌가...?라는 생각이 들 수도 있다. 그런데 왜 나는 저 부분이 불편하다고 느꼈는지 생각하며 앱을 돌아다니다가 그 원인을 찾게 되었다. 바로 개별 블로그에서 글을 보는 방법인데 이미지에서 초록색으로 체크된 부분을 누르면 여러 가지 보기 방식을 변경할 수 있다. 같은 앱 내에서 이렇게 여러 방법으로 바꿀 수 있고, 실제로 내가 좋아하는 보기 방식으로 변경해서 봤던 경험이 있었기 때문에 이웃 새 글 화면에서 더 불편하다고 느낀 것이다. 특히 저 기능을 적용하면 이미지의 크기도, 전체적인 양식도 동일하게 나온다. 그래서 이웃 새 글 화면에서도 블로그 글 보기 방식처럼 변경할 수 있도록 하는 기능들을 추가하면 더 좋을 것 같다.




알람 기능의 모호한 텍스트


내 블로그 게시글에 댓글을 남기거나 공감을 눌렀을 경우 첫 번째 이미지처럼 알람이 온다. 알람을 누르면 팝업창이 뜨고, '닫기' 버튼과 '보기' 버튼이 나온다. 닫기 버튼을 누르는 것에 대해서는 아무런 문제가 없을 것이라고 생각된다. 하지만 '보기' 버튼을 누르면 어떤 화면이 나올 것이라고 기대되는가? 나는 새로운 댓글이 달린 게시글의 댓글 창이 열릴 것이라고 기대했다. 하지만 내 기대와 달리 내 블로그의 알림 목록이 열렸고, 다시 알림을 클릭해야 내가 원하는 화면이 나왔다. '보기'가 아닌 '알림 보기'와 같은 바로 알기 쉬운 말로 바뀌거나, 아니면 '보기'를 눌렀을 때 게시글의 댓글 창이 바로 열리도록 수정되면 좋을 것 같다. 






3. 아쉬운 UX의 개선 우선순위


내가 생각하는 개선 우선순위는


1. 빈약한 알고리즘의 추천 기능

2. 알람 기능의 모호한 텍스트

3. 일관성 없는 이웃 새 글의 UI


이렇게 될 것 같다. 왜냐하면 첫 번째인 빈약한 알고리즘의 추천 기능은 네이버 블로그 메인 페이지의 하단 바의 두 번째로 꽤 좋은 포지션에 위치하고 있다. 하지만 좋은 포지션에 비해 너무 기능이 빈약하다. 저 부분의 알고리즘을 사용자 데이터 중심으로 변화시키고 원래 있던 블로그 게시글 하단의 꼬리 물기식 추천이 이어지면 사용자가 오랜 시간 머무는 좋은 기능으로 발전시킬 수 있을 것 같다. 

두 번째는 알람 기능의 모호한 텍스트이다. 네이버 블로그 앱의 알람을 이용하시는 분이 얼마나 있을지는 모르겠지만, 버튼을 누르고 또 선택을 해야 한다는 과정이 꽤나 귀찮게 느껴졌기 때문이다. 

세 번째는 일관성 없는 이웃 새 글의 UI이다. 만약에 아예 이미지가 보이지 않았다면? 정말 최우선의 우선순위였겠지만 이미 이미지가 있긴 하지만 일관성이라는 어찌 보면 기능적인 요소보단 심미적인 요소가 더 강하기 때문에 마지막 우선순위로 설정하였다. 





네이버 블로그를 분석하다 보니 든 생각은 '나 생각보다 네이버 블로그를 애정 하나보다'였다. 뭔가 분석하면서도 더 잘 됐으면 좋겠고 이런 느낌? 지금 브런치에서 글 쓰면서 할 소리인가 싶지만(머쓱) 그래도 약간 마음의 고향 같은 느낌이랄까...ㅋㅋ 이번 주부터는 PM에게 필요한 디자인적 지식과 실무에 대해서 배운다. 예전부터 미술을 좋아했고, 디자인에도 정말 관심이 많아서 더욱이 기대되는 주이다! 좋아하는 분야인만큼 더 열심히 공부해야겠다!

매거진의 이전글 업비트의 KPI는 무엇일까?
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari