[레퍼런스 분석] 01. 티스토리
1. 티스토리
티스토리는 'Tattertools + history'의 합성어로 '인터넷 계정에 따로 설치하여 운영하는 설치형 블로그 프로그램을 제공하는 사이트' 이다.
네이버 블로그의 경우 일정한 틀 안에서 개인이 자유롭게 편집하는 반면에, 티스토리는 HTML과 CSS로 틀에 구애받지 않고 블로그를 쓸 수 있다는 차이점이 있다. 이러한 점 때문에 티스토리라는 툴에 갇히지 않고, 개인 홈페이지처럼 구축하는 것이 가능하여 티스토리 유저들이 늘어나는 추세이다.
작자는 티스토리의 깔끔한 맛에 블로그 사이트로 픽했다. 네이버 블로그도 사용해보았던 유저로서 티스토리는 플랫폼 자체로도 글을 읽는 데에 방해요소들을 최소화하여 깔끔함이 유지되고, 글을 쓸 때도 필요한 것들만 노출되니 좀 더 선호하게 됐다.
2. Selling Point
블로그는 텍스트가 주 요소이기 때문에, 리스트 UI를 보고 복잡해보이면 유저 유입에 타격을 입을 수 있다. 따라서 상세 페이지가 아닌 페이지들은 최대한 간결하게 핵심을 전달해야 하는데 티스토리가 딱 그런 앱이다. 다른 사람의 블로그를 구경하다 보면 나도 한 번 관리해볼까 하는 생각이 들 정도로 전체적으로 깔끔한 UI를 가진 것 같다.
다음은 티스토리 시작화면이자, 홈 버튼을 클릭할 때 나오는 화면이다. 티스토리의 로고가 박힌 상단바에 블로그 검색 버튼, 프로필 아이콘이 있고, 본문에는 메인 배너와 베스트 피드, 각 주제 별 인기/추천 피드들이 잘 분류되어 배치되어있다. 그 덕분에 유저들은 관심사에 맞는 블로그를 찾기 유용하고, 구독 버튼이 함께 제공되기 때문에 최소한의 터치로 관심 있는 블로그들을 추가할 수 있다는 장점이 있다.
피드 메뉴를 클릭했을 때 나오는 화면에는 구독한 블로그의 글이 리스트로 보여지며, 제목과 글, 좋아요, 댓글수 등이 과하지 않은 폰트와 색상으로 배치되어있는 것을 볼 수 있다.
두번째와 세번째 사진은 검색창에 검색어를 입력한 후 보여지는 화면이다. 구글링을 통한 유저 유입이 많은 티스토리이기에 유입된 유저들은 보통 목적이 있다. 그렇기때문에 검색어 키워드가 중요하고, 관련 피드를 한 눈에 보여줌으로써 앱의 신뢰도를 높일 수 있다.
검색페이지에서는 피드를 보여주는 탭과 블로그를 보여주는 탭이 구분되어 있어 마치 정돈되어있는 느낌을 준다. 블로그의 경우에는 바로 옆에 + 버튼을 통해 쉽게 구독할 수 있도록 배치되어있고, 글의 경우에는 피드와 통일감을 준 디자인으로 피드제목, 내용 등을 리스트로 보여준다. 또한, 정렬기준을 선택할 수 있어 사용자의 입맛에 맞게 피드를 검색할 수 있다는 장점이 있다.
하단에 가장 오른쪽 프로필 아이콘을 선택하면 마이페이지로 이동하여 내 블로그의 정보와 유저들의 유입경로, 통계, 인기글 등을 한 눈에 볼 수 있다. 블로그 설정을 누르면 바로 블로그 이름과 설명을 수정할 수 있어 편리하다. 만약 파워블로거들이 이용 대상이라면 유저들의 유입 경로와 언제, 얼마나 유입이 되었는지 통계 지표를 바로 볼 수 있다는 것에 큰 매리트를 느낄 것이다. 파워블로거뿐만 아니라, 블로그를 꾸준히 운영하는 사용자들을 고려한 디자인이 마음에 든다.
그 외에 블로그 내 카테고리의 뎁스가 깊지 않아 복잡해보이지 않고, 신규 유저들도 금방 익힐 수 있을 정도의 UI가 이 앱이 선호되는 포인트라고 생각한다.
3. Pain Point
티스토리는 원래 웹 사이트 기반으로 만들어진 서비스인데, 최근 앱 서비스도 제공을 하기 시작하면서 훨씬 더 많은 유저가 유입되었다고 생각한다. 그러나 이런 다 갖춘듯한 앱에도 몇 가지 아쉬운 점이 있다. 블로그를 이제 막 시작한 작자가 사용자 입장에서 찾은 pain point들은 다음과 같다.
웹에서는 관리자 페이지가 있어 카테고리 생성/삭제가 자유로운 반면, 앱에서는 상대적으로 관리 페이지가 간결해 카테고리 관리를 할 수가 없고, 만들어진 카테고리 내에서 글쓰기/수정만 가능하다.
그렇기에 카테고리를 변경하려면 웹에서 수정해야하는 번거로움이 생겨 앱 활용도를 떨어트리는 요인이 될 것이라 생각했다. 카테고리를 선택하는 사이드 페이지 하단에 카테고리 수정 버튼을 만들어 카테고리 수정 페이지에 접근할 수 있게 한다면 사용자는 굳이 웹으로 티스토리를 들어갈 필요가 없어지고, 모바일 유저들이 좀 더 편하게 이용할 수 있는 앱이 될 것이라 생각한다.
두 번째, 티스토리 웹에서의 가장 상위의 메뉴를 보면, 홈-피드-스킨-포럼 이다. 반면, 앱은 홈-피드-글쓰기-알림-마이페이지 이다. 그럼 포럼은 어디서 볼 수 있는가? 작자는 찾기가 어려웠다. 모바일은 웹사이트보다 간결함을 추구하기때문에 스킨 메뉴를 과감히 없애고 앱의 통일감을 주는 것은 좋은 판단일 수 있다. 그러나 포럼은 블로그를 사용하는 유저들의 소통창구이기 때문에 모바일에서도 유용하게 사용될 필수 기능이라고 생각한다.
그럼 어디에 배치해야 좋을까? 작자가 생각했을 때 알림이라는 메뉴는 메뉴로 분리될만큼의 중요도를 갖지 않는다고 생각한다. 사용자 입장에서도 알림이 홈과 피드, 글쓰기만큼 중요한가? 에 대해 생각해본다면 아니라고 답할 것으로 예상된다.
사용자들에게는 상단 GNB 우측에 검색아이콘 옆 위치가 더 익숙하다는 사용성을 고려해 상단 GNB에 알림 버튼을 추가하게 되면, 사용자는 어떤 페이지에 머물러 있던 간에 알림 페이지로 쉽게 접근할 수 있기때문에 알림 버튼을 GNB에 배치하고 원래 알림이 있던 자리에 포럼 메뉴를 추가하면 좋을 것 같다.
또한, 피드와 포럼 등의 메뉴는 유저가 아이콘만으로 구분하는 것이 힘들 수 있다. 따라서 아이콘과 텍스트를 함께 사용한 버튼으로 메뉴를 디자인한다면, 사용자는 지금보다 적은 터치만으로 원하는 메뉴에 쉽게 도달할 수 있을 것이라 예상한다.
블로그를 탐방하다 보면 게시글을 보기 위해 스크롤을 하게 된다. 이 부분에서 진입 초반에 상단에 위치해 있던 GNB의 뒤로가기 버튼, 검색버튼 등이 스크롤 시에도 그대로 남아있어 버튼 영역이 겹치게 된다. 이는 유저가 스크롤 중간에 뒤로가기를 눌렀음에도 관심없는 피드에 들어가지는 현상이 발생할 수 있음을 의미한다.
두 번째 사진을 보면 아이콘과 피드, 텍스트들이 겹쳐서 보여진다. 심지어 색상이 구분되지 않아 아이콘이 잘 보이지 않는다. 블로그 정보를 알려주는 상단 영역의 컨텐츠가 모두 스크롤 되어 화면에서 사라지면 세번째 사진과 같이 상단바와 본문으로 나뉘어 중복 영역이 발생하지 않는데, 상단 컨텐츠가 모두 사라지기 이전에 좀 더 일찍 반응할 수 있도록 개선을 하거나, 상단 컨텐츠에 GNB를 포함시키고, 상단 컨텐츠가 모두 사라질 때 세번째 UI로 변경되도록 수정이 필요하다.
마지막으로, 프로필 아이콘의 변경이 필요해보여서 가져 와 봤다. 상단의 프로필 아이콘을 클릭하면 블로그 소유자의 다른 계정을 선택할 수 있게 리스트를 제공해주는 바텀팝업이 나타난다. 동일한 프로필 아이콘으로 보여지는 하단의 아이콘을 클릭하면 마이페이지로 이동하게 된다. 처음 이 앱을 사용하는 사용자가 보았을 때 상단과 하단의 프로필 아이콘을 각각 눌러보지 않으면, 정확히 무엇을 뜻하는지 알 수 없다. 이러한 부분을 개선하고자 상단의 프로필 아이콘을 햄버거 아이콘(메뉴)와 같이 좀 더 명확하게 기능을 전달해주는 아이콘으로 변경하여 구분하면 좋을 것 같다.
4. 과제를 마치며
'유저가 생각하도록 만드는 앱을 만들지 말라' 는 말을 어디선가 들은 적이 있다. 좋은 디자인을 갖춘 앱은 UI적인 측면에서 포인트 컬러나 타이포그라피들의 적절한 조화도 중요하지만, 처음 이용해보는 유저도 손 쉽게 이용할 수 있도록 레이아웃 배치나 메뉴를 고려한 디자인도 정말 많이 중요함을 느꼈다.
작자는 원래 웹으로만 티스토리를 이용하던 사용자이기에 웹에서의 기능이 앱에 없을 때 불편함을 느꼈다. 티스토리의 특성 상 작자처럼 웹을 사용해 본 뒤에 앱을 사용한 경우가 많을 수 있다. 따라서 앱에서는 찾을 수 없는 기능들에는 반드시 제거된 이유가 필요하며, 중요한 기능일 수록 웹과 앱의 통일성을 갖추어야 함을 알게 되었다.