디발자 4명이 뜯어보는 카카오 브런치!

씹고 뜯고 맛보고 즐기고

브런치에 도전장을 내민 포스트잇?

Post IT이 분석한 세 번째 서비스는 무려 저희가 이용 중인 플랫폼, '브런치'입니다. 컨텐츠 발행 플랫폼으로 브런치를 선택하여 사용한지도 벌써 2개월이 지났는데요. 그 시간 동안 팀원들이 브런치를 사용하며 느꼈던 불편한 점들에 대해 개발자와 디자이너의 관점에서 다양하게 분석해보았습니다.

---

브런치(카카오) 기업 소개

이 글의 목차

1. 로그인

2. 메인 페이지

3. 글 쓰기

4. 글 읽기

5. 대시보드(통계)

결론 한마디!

---

1. 로그인

브런치 웹 로그인 화면

Zoe : 나는 처음 브런치를 시작했을 때, 저 애매한 로그인 창의 위치는 뭘까 하고 당황했어. 일러스트를 우측으로 밀어버리고 로그인 버튼들을 상단 로고랑 정렬 맞춰서 좌측에 박스 없이 배치했으면 어땠을까? 그리고 기능적으로 불편했던 건, 한 번 카카오 계정으로 로그인하면 다른 카카오 계정으로 로그인을 할 수 없다는 거야. 그냥 자동으로 첫 등록 카카오 계정으로 연동이 되더라구. 그래서 나는 개인 계정과 스터디 계정을 각각 다른 브라우저로 로그인해뒀어. 그런데 또 어쩔 땐 갑자기 자동 로그인이 풀려있기도 하더라고? 내가 해제 버튼을 못 찾은 걸 수도 있지만, 그렇게 못 찾을 정도로 꽁꽁 숨겨둔 브런치 탓도 있다고 생각!

Bella : 로그인 페이지는 전체적으로 모든 글자가 <p>, <span>, <li> 등을 이용해서 텍스트로 코딩되었어. 그래서 어느 기기로 보던지 글자가 깨지지 않도록 잘한 것 같아. 다만 햄버거 메뉴를 눌렀을 때 나오는 [작가 - 지원 프로젝트 보러 가기] 버튼만 유독 이미지로 코딩이 되어있더라고. '브런치 시작하기' 버튼도 텍스트로 만들고 다른 글자 기반 버튼들도 다 텍스트로 코딩되어 있던데 유도 이 버튼만 이미지인 이유는 뭘까? 글자 오른쪽 상단에 저 아이콘을 배치하기 힘들어서?

2. 메인 페이지

브런치 웹 메인 화면 1/4

브런치 웹 메인 화면 2/4

브런치 웹 메인 화면 3/4

브런치 웹 메인 화면 4/4

Zoe : 메인 페이지.. 할 말이 정말 많은데!! 먼저 사진과 같이 이렇게 긴 화면임에도 불구하고, 스크롤을 끝까지 내려봐도 내가 구독한 피드는 나오지 않아. 심지어 추천 컨텐츠들도 사용자 맞춤형이 아니라 사실상 모든 사용자들이 똑같은 화면을 보고 있는 거지. 대체 무엇을 기반으로 추천하는 건지 생뚱맞다고 느껴질 뿐이야. 그렇다 보니 클릭을 잘 안 하게 되고 바로 검색이나 피드로 넘어가기 때문에 메인 페이지에서 머무는 시간이 아주 짧아. 추천 컨텐츠가 4블럭이나 있는데도 말이야! 차라리 피드를 메인으로 꺼냈다면 훨씬 편했을 것 같아. 아니면 최소한 추천 카테고리의 선호 선택이라도 가능하게 해 주던지! 그리고 브런치 키워드에서 new가 의미하는 것이 무엇인지 아직도 모르겠어. 캡쳐본이 3주 전 이미지임에도 불구하고 아직도 브런치에는 저 4개의 태그에만 new 표시가 붙어있더라고? 대체 뭘까.. 또, 마지막 추천 글에서는 레이아웃이 너무 뒤죽박죽인데 썸네일 이미지 규격을 맞춰서 잘라서 가져오면 안 되는 걸까?? 그리고 내용을 저만큼씩이나 작은 글씨로 보여줘 봤자 읽을 사람은 별로 없을 것 같아. 차라리 커서를 올렸을 때 미리보기가 뜨게 하면 어떨까.

브런치 앱 메인 화면

Sue : 나는 모바일 앱 화면을 살펴봤는데, 메인 페이지가 웹이랑 아예 다르게 생겼더라고! 먼저 장점은 다양한 인터랙션과 매거진 형태의 책으로 하여금 타사 블로그에서 느껴볼 수 없던 '한 권의 책을 읽는 느낌'을 간접적으로 체험할 수 있었다는 점이야. 책을 출간함으로써 오는 수익이 주 수입원인만큼 글의 컨텐츠를 신경 써서 디스플레이하는 모습을 엿볼 수 있어 좋았어. 하지만 단점으로는 홈 화면에서의 피드가 1개씩밖에 노출되지 않고, 피드가 각기 다른 방식으로 노출되는 탭이 '브런치 홈, 브런치 나우, 피드'와 같이 여러 개로 나뉘어 혼동을 준다는 점 이야. 처음 사용하는 사용자 입장에서는 내가 팔로우한 작가들의 글이 첫 앱 실행화면에서 나오지 않아 당황할 수도 있을 것 같아.

Bella : 메인 페이지에 접속했을 때 스크롤을 올리면 숨어있던 공간이 나오면서 배너가 등장하는데 이 부분이 신기했어. 자칫 배너가 커서 너무 화면을 많이 잡아먹을 수 있었는데, 아이디어가 좋은 것 같아. 신기해서 계속 눈길이 갔는데 이 배너는 변하지 않고 오직 2개만 있더라고. 그래서 좀 아쉬웠고 스크롤을 다시 내릴 때 스크롤을 내리기 전 상태로 자석처럼 쉽게 돌아갈 수 있으면 좋겠다고 생각했어.

Ajo : 메인 화면에서는 키워드를 별도 요청해서 렌더링하고 있어. 아마도 설계할 때는 키워드를 계속 동적으로 바꾸는 것까지 생각한 것 같아. 하지만 내가 쓰는 몇 년 간 키워드가 바뀐 적은 없는 것 같아. 그 외 데이터는 메인 화면을 렌더링 할 때 내부에서 처리하고 있어. 요청을 받아왔지만 사용하지 않는 데이터도 있어. "평론가 칼럼리스트", "경영 스타트업", "심리 분석", "자기 계발". 이 데이터들에 키워드라는 값이 있는데 요청으로 받아온 키워드 값과는 조금 다른 값인 것 같아. 예를 들어 "자기 계발 작가"라는 키워드가 39번인데 실제 받아온 키워드에서 39번은 "사진 촬영"이야. 이건 실제 사용을 하지 않거나 어딘가에서 사용하고 있는데 내가 모르는 건지도 몰라.

3. 글 쓰기

브런치 웹 글쓰기 화면

Zoe : 나는 브런치에서 글을 쓸 때마다 상단의 커버 배경색 아이콘이 직관적이지 못하다고 느꼈어. 달랑 A라고만 쓰여있어서 처음에는 저 버튼이 서체 디자인 기능인 줄 알고 헷갈렸거든. 색상 관련 이미지로 변경하면 훨씬 직관적일 것 같아.

브런치 웹 서체 편집

Zoe : 제목이나 본문을 작성할 때는 글을 쓴 다음 드래그를 해야 폰트 종류나 크기를 설정할 수 있는 설계가 매우 불편해. 대체 왜 이렇게까지 숨겨놓은 거지..??? 게다가 폰트의 종류도 적고, 크기도 한정적이야.. 그리고 문단 정렬 전체가 다 바뀌는 게 은근히 스트레스야. 나는 스티커는 가운데 정렬, 글은 왼쪽/양쪽 정렬하고 싶다고!!!! 아 또 있어. 썸네일 이미지를 따로 설정할 수가 없어서 항상 커버 이미지나 최상단 이미지가 자동으로 썸네일이 되는데, 그 두 개는 비율이 완전 다르단 말이야.. 편집할 때마다 아주 스트레스야. 그래서 요즘은 거의 커버 이미지 대신 배경색 기능만 사용하고 있어.

 

브런치 앱 글쓰기 화면

Sue : 모바에서는 몇몇 글자 효과(밑줄) 등을 글에 적용할 때, Zoe가 웹 부분에서 말했다시피 적용된 모습이 즉각적으로 보이지 않고 빈 공간을 한번 클릭해야만 확인할 수 있다는 게 번거로웠어. 보통 모바일이든 책이든 간에 글 중의 소제목(목차)은 가운데 정렬 혹은 왼쪽 정렬, 본문은 왼쪽 정렬로 하는 경우가 대부분인데 브런치에서는 소제목과 글줄 모두 같이 움직일 수밖에 없는 점이 디자이너로서 가장 이해되지 않더라고. 마지막으로 햄버거 버튼인데(두둥) 브런치는 앱임에도 불구하고 웹페이지가 그대로 축소된 형태의 햄버거 바가 왼쪽 상단에 위치하고 있더라고. 가장 자주 사용하는 탭들이 모여있음에도 불구하고 오른쪽 엄지와 가장 먼 부분에 주요 기능이 자리 잡고 있어 불편했어. 불필요하거나 중복되는 탭들은 합치고, 주요 기능은 하단 탭에 정렬해두면 훨씬 빠르고 편리하게 글을 탐색할 수 있을 것 같아.

Bella : 노트북으로 작업을 하다 보면 분할 화면으로 작업을 많이 하게 되는데, 이 글쓰기 화면은 분할 화면으로 해서 가로의 폭을 줄이면 사용성이 급격하게 떨어져. 왼쪽에 화면을 맞추면 아이콘들이 안 보이고, 글이 잘리고, 가운데에 화면을 맞추면 왼쪽 상단의 햄버거 버튼이 가려지거든. 가로의 폭에 상관없이 글쓰기 좋은 환경을 제공했으면 좋겠어.

Ajo : 글쓰기에서 임시저장을 할 때 사용자의 키보드 입력이 끝나면 몇 초 지나지 않아 글 내용 전체를 서버로 보내고 있어. 임시 저장하고 며칠 후에 다시 들어가면 임시 저장한 글이 사라져 있는 걸 봐서는 임시 저장 값은 데이터베이스에 저장하는 게 아니라 캐시 서버에 저장하고 지정한 만료일이 지나면 사라지는 것 같아.

4. 글 읽기

브런치 웹 라이킷

Zoe : 나중에 읽으려고 라이킷해둔 글을 다시 읽으려니 어디에 있는지 도저히 못 찾겠더라구. 이번 분석을 통해 모든 버튼을 싹 뒤지고 나서야 알게 되었는데, [글 읽는 서재]에서 [라이킷 한 글]까지 2개의 뎁스를 지나야 하는 구조였어. 이렇게 깊숙이 숨겨져 있으니 사용률이 낮고, 때문에 북마킹의 과업이 잘 이루어지지 않는 것 같아.

브런치 웹 추천 작가 페이지

Zoe : 그리고 추천 작가 페이지에서 스크롤을 내리면, 작가 타이틀과 함께 검색 버튼이 상단에 고정되길래 당연히 해당 작가 페이지 내에서 글 검색을 해주는 줄 알았는데 그냥 브런치 전체 검색으로 넘어가더라구.. 모든 UX가 예측 불가능한 브런치..

브런치 웹 댓글 / (상) 닫힘 (하) 열림

Zoe : 글을 다 읽고 좋아요를 누르려는데 하단에 안 보여서 헤매다가 상단에서 발견. 일반적으로는 글 아래에 댓글과 좋아요, 공유하기 버튼이 위치하기 때문에 이런 일관성의 원칙을 벗어나는 디자인은 사용자를 헷갈리게 할 수 있을 것 같아. 그리고 [댓글] 버튼을 눌러야 댓글창이 열리는데, 스크롤을 아래로 내리기 전까지는 어떤 상태인지 알 수가 없어. 버튼 옆에 열림/닫힘 상태를 구분할 수 있는 화살표 아이콘을 사용했다면 더 직관적이지 않았을까?

브런치 앱 글 읽기 화면

Sue : 일관된 타이포그래피와 깔끔한 레이아웃으로 쉬운 가독성을 제공하며 일관된 감성으로 글을 배포할 수 있다는 점이 브런치의 가장 큰 묘미이지 않을까? 작가가 되고 싶은 일반인은 제공된 템플릿만으로 감성적인 이미지의 글 한편을 손쉽게 완성할 수 있는 게 다른 블로그는 따라잡지 못한 가장 큰 장점인 것 같아. 

다만 읽기 모드에서 글을 읽고자 스크롤을 내릴 때 제목에 해당되는 레이아웃이 불필요하게 많은 부분을 차지하고 있어. PC에서는 비교적 큰 화면에서의 스크롤이라 자연스러운 UI처럼 보이지만, 모바일에서는 전체 화면을 넘길 때 글자가 잘리는 부분이 어색해 보이는 것 같아. 또한 웹상에서 올린 사진이 모바일에서는 굉장히 작아서, 맞추기 힘들다는 점은 웹과 앱 특성상 불가피한 단점이기도 해. 또한 공유, 댓글, 라이킷 수에 대해서도 조금 아쉬운 부분이 있어. 공유할 수 있는 범위가 URL도 있지만, 이는 공유 수에 카운팅 되지가 않으며 정작 글 썸네일에서는 조회수와 라이킷 수가 아닌 공유 수와 댓글 수만 나와있어 아무리 조회수가 높은 글이라도 공유와 댓글 수 0의 불명예를 안을 수 있다는 점이 좀 아쉬웠어. UI적 측면에서 공유를 유도하거나 다른 수치를 글 썸네일에 게시한다면 작가들에게 좀 더 좋은 자극제가 되지 않을까 싶어.

Bella : 브런치를 모바일 기기에서 보면 어떻게 보일까 궁금해서 여러 기기 들을 통해 확인했더니 아이폰과 아이패드에서는 브런치 앱과 웹에서 본 글은 개행이 동일했는데,  안드로이드 기기에서는 앱에서 글의 개행이 달라지더라고. 안드로이드 앱에서만 달라지는 것으로 봐서 안드로이드 기본 정책 때문인 것 같아. 그리고 앱 안의 웹뷰를 통해서 데이터를 읽어오는 방식을 사용했는데, 웹뷰를 지원하는 웹사이트를 만들려면 안드로이드는 버전별로, IOS는 웹뷰의 종류별로 이슈를 대응할 수 있도록 개발이 필요하다는 단점이 있어. 그러나 이러한 단점보다 웹브라우저 엔진의 유지 보수 비용이 많이 든다는 단점이 더 크기 때문에 브런치에서 시스템 웹뷰를 사용하고 있는 게 아닐까 싶어.

Ajo : 글을 읽는 화면에서는 댓글과 추천글을 별도로 요청해서 받아오고 있어. 추천 글을 요청할 때 로그인한 상태에서는 고유 아이디를, 비로그인 시에는 현재 세션에 할당한 임의의 아이디를 보내고 있어. 추가적으로 로그인했을 때 팔로우 한 사람의 글을 요청해오고 있어. 좋아요를 누르면 비로그인일 때는 요청을 보내고 응답 값으로 로그인 화면으로 redirect 되고 있어. 특이하게 로그인 시에는 현재 좋아요를 누른 유저에 대한 정보가 아닌 작가의 아이디와 글 번호를 보내고 있어. 아마 좋아요를 누른 유저의 정보는 세션을 통해 받아오는 것 같아. 좋아요의 매개 변수(작가의 아이디, 글 번호)들을 URL의 쿼리 스트링이 아닌 Path로 구분하는 방법도 있어.

 /like/{writerId}/{articleNumber} 

이런 식으로! 아마 브런치 개발자 분들이 이렇게 한 데는 이유가 있을 것 같아. 아마도 모니터링을 편하게 하기 위해서가 아닐까?

5. 대시보드(통계)

브런치 웹 통계 - 글 랭킹

Zoe : 개인적으로 브런치의 통계 부분은 각 유입 경로와 날짜별 통계 등을 직관적으로 잘 보여주고 있는 것 같아. 하지만 딱 하나 의문인 점이 있다면, 글의 인기도를 측정할 때 '라이킷'이 빠지는 이유가 궁금해. 조회, 공유, 댓글은 다 측정하면서 왜 '라이킷'만 쏙 빠지는 걸까? 외부 공유나 댓글보다 하트 버튼 하나 누르는 게 사용자 입장에서는 가장 접근하기 쉬운 기능일 텐데 말이지. '라이킷' 수는 높은데 공유 수가 낮아서 인기도가 낮게 측정되는 글들을 볼 때마다 괜히 안쓰럽다구,,

Sue: 사실 대시보드를 보는 큰 목적은 단순히 인기 있는 글 파악을 위해서도 있지만, 해당 글을 어느 성별의 어떠한 연령대가 좋아했는지 파악해서 나중에 글을 발행할 때나 출판을 할 때 도움을 얻기 위한 도구로서 작용해야 한다고 생각해. 하지만 브런치의 대시보드에는 단순한 조회수와 (사실 조회수는 글의 기본적인 정보이지, 이걸 수치화해서 글들 간의 순위를 정하는 것도 큰 의미가 있는지는 잘 모르겠어.) 검색 유입 경로밖에 보여주지 않아. 사실 글 자체의 대한 정보보다 '어떠한 사람들'이 해당 글을 봤는지에 대한 사람들 자체의 정보가 글을 작성하고, 한 권의 책을 구성하는 데 있어서 훨씬 더 많은 피드백 힌트를 암시하거든. 다음 업데이트 때에는 이런 기능이 나왔으면 하고 간절히 바라는 마음이야 :) 

Bella : 나는 우연히 이 통계 부분에서 오류를 하나 발견했어. 통계 페이지의 html 구조가 '날짜별 통계 영역' 밑에 '글 랭킹 영역'이 있고, '날짜별 통계 탭'을 선택했을 때 '글 랭킹 영역'을 숨기고 반대로 '글 랭킹 탭'을 선택하면 '날짜별 통계 영역'을 숨기고 '글 랭킹 영역'을 보이게 하는 구조인데, 웹브라우저의 가로의 폭을 956px 이하로 줄일 경우, 날짜별 통계만 나와야 함에도 불구하고 글 랭킹의 영역이 제대로 숨겨지지 않는 오류가 나타나는 것을 발견했어. 뭔가 소스 코드가 꼬여서 제대로 숨겨지지 않은 것 같아. 단순 css 오류인 것 같은데 아직 브런치 팀에서 오류를 발견하지 못했는지 수정되어 있지 않더라고.

글을 마치며

Zoe : 감성 측면에서는 기존의 포스팅 서비스 중에 가장 우수하다고 생각하지만, 감성의 비율이 커지면서 상대적으로 사용성과 유용성 측면이 고려되지 않은 것 같아 아쉬움이 많아. 하지만 책 출간이나 작가 선별을 통한 양질의 정보 수집이라는 큰 장점이 있기 때문에, 위와 같은 단점들만 개선된다면 콘텐츠 발행 플랫폼 계의 대표 서비스가 될 거라고 생각해. 브런치 화이팅~!

Sue : 카카오는 브런치에서 수익활동이나 광고를 하는 글을 금지하고 있어. 문제는 브런치도 하나의 기업이기에, 수익이 생겨야 원활한 유지보수 및 개발을 할 수 있는데 아직까지 책 출간 중개 이외에는 마땅한 수입처를 모르겠더라고. https://brunch.co.kr/@ericbaek/14 이 분의 글처럼, 후원 기능을 만들거나 구독 서비스 기능을 만든다면 수익성을 높여 더 질 좋고 활발한 서비스를 만들 수 있지 않을까 싶어.

Bella : 브런치는 특유의 '감성적인' 느낌을 잘 살린 것 같아. 전반적으로 과하거나 튀지 않고 깔끔하고 잘 정리된 느낌이 들어서 좋았어. 그러나 사용성 측면에서 본다면 약간 아쉬운 점이 많더라고. 예를 들어 나는 내가 라이킷 한 글을 한 번에 모아볼 수 있는 기능이 있다는 것을 최근에 Zoe가 알려줘서 알았어! 그만큼 직관성이 아쉽더라. 브런치도 이러한 면에서 한번 '전면 리뉴얼'을 진행하면 더 좋은 플랫폼이 될 거라고 생각해.

Ajo : 브런치를 2017년부터 사용하고 있는데 국내에 이만한 플랫폼은 찾아보기 힘든 것 같아. 브런치에 있는 글들은 어느 정도 퀄리티가 보장돼서 기타 플랫폼에 비해 강점이 있다고 생각해. 익숙해진 탓인지 사용하면서 크게 불편한 점은 없었던 것 같아. 바라는 점이 있다면 키워드가 더 추가됐으면 좋을 것 같아. 앞으로도 브런치가 잘 됐으면 좋겠어.