브런치의 뼈대를 살펴보자
레이아웃과 주요기능에 대하여
# 1. 어떻게 구성되어져 있나?
브런치는 PC 웹브라우져와 모바일 네이티브 app으로 서비스를 제공한다. PC와 모바일 모두 상단에 기능을 넣고, 그 밑으로는 작가들과 독자들이 컨텐츠를 읽을 수 있도록 구성됐다.
상단은 메뉴(햄버거 메뉴 버튼), 로고(홈), 글쓰기, 검색 기능 배열로 구성되어 있다. 글을 찾거나, 쓰는 기능 외의 공지확인, 피드 확인, 이벤트 확인 등의 부가적인 기능은 모두 드로어(drawer)를 열어 이용하도록 배치했다. 이런 구성은 브런치 서비스 유저들의 사용성 분석을 통해 만들어진 UI인 것이다. 메인에 노출된 글을 보게 하려는 목적이 엿보인다.
브런치의 주요 기능은 많은 독자들에게 글을 읽게 하는 것이다. 독자와 작가의 입장을 고려하여 시스템을 만들었다. 첫째, 다수의 독자를 위해 빠른 검색과 가독성을 높여주는 서체와 레이아웃 그리고 인터렉션에 힘을 주었다. 둘째, 작가를 위해 자주 사용하는 기능 위주로 기능을 배치했다. PC의 경우 우측 상단 글쓰기 버튼을 배치하여 클릭 수를 줄일 수 있게 편의성을 높였다. 커버 이미지를 첨부하면 첨부 이미지의 width에 맞춰 발행 시 어떻게 보일지를 미리보기 형태로 보여주는 세심함과 스크롤 시 우측에 앵커로 따라다니는 글쓰기 툴 메뉴들 또한 작가들이 브런치 이용이 즐거운 이유일 것이다.
브런치 레이아웃 정의화면 상단에는 햄버거 메뉴 버튼와 로고, 글쓰기 버튼, 그리고 검색창만이 보인다. GNB에 있는 서비스 메뉴를 모두 좌측 드로어에 넣어버려 간소화하였다. 화면에서 보여지는 내용 외에 다른 기능을 원한다면 햄버거 메뉴 버튼을 클릭하여 원하는 정보를 찾으라는 것으로 이해할 수 있다.
최근에 작가 검색 기능이 업데이트 되면서 통합검색 기능도 달라졌다. PC의 경우 이전에는 검색 버튼 클릭 시, 텍스트 필드 창이 생성되어 키워드를 입력하였지만 업데이트 이후 검색어 입력 화면으로 바디를 덮어버렸다. 키워드 창 하단에는 브런치 대표 작가들을 보여주고 있다. 실력있는 작가들을 모집/양성하고, 독자들이 개인취향에 맞는 작가를 팔로우하여 꾸준히 브런치를 이용하게 하려는 전략이 돋보인다.
PC와 달리 모바일에서는 UI가 조금 다르게 구성되어져 있다. 글쓰기 버튼을 drawer에 넣어버렸고, 검색 버튼을 선택하면 검색어 입력 화면으로 화면이동을 하게 된다. 검색어를 입력하기 전 텍스트 필드 창에는 플레이스홀더(Placeholder Text)를 제공하고, 하단에 최근 검색어 리스트를 보여준다. 키워드를 key-in 하면 하단에 글/매거진/작가 탭이 생성되고, 입력한 키워드 내용에 맞춰 실시간 검색된 결과를 노출한다.
푸터는 PC의 경우 하단에 브런치의 슬로건인 C.S.Lewis의 'you can make anything writing' 카피와 서비스 정책, 개인정보처리방침, 고객센터 기능 등을 넣었다. 앱은 설정 > 브런치 앱 정보에 동일한 내용이 함께 담겨있다.
PC버전 브런치 푸터(왼쪽) / 모바일 APP에서는 앱정보 메뉴에 포함(오른쪽)드로어에서 브런치의 아이덴티티를 찾아볼 수 있다. 로그인 전에 시그니처인 C.S.Lewis의 카피가 있고, 로그인 후에는 라이킷, 알림, 내 브런치 등 기능과 메뉴가 등장한다. 메뉴도 복잡하지 않고, 간소화되어 이용에 불편함이 없다.
발행된 글은 브런치 내부에서는 '브런치 홈', '검색', '브런치 나우' 등을 통해서 확인할 수 있다. 내가 이용하는 기준으로 볼 때는 브런치 홈 > 검색 > 콘텐츠 하단 이런 브런치는 어때요 > 브런치나우 순으로 콘텐츠를 접할 것이다. 외부에서는 브런치가 공유 기본 공유 채널로 사용하는 페이스북, 트위터, 카카오톡, 카카오스토리 외에 다음 메인, 카카오톡 채널 탭 등을 통해서 사용자 유입이 주로 일어날 것이다.
# 2. 기능별로 좀 더 보면,
브런치의 화면은 크게 '전시/배치하는 화면', '게시글', '서비스 정책' 화면으로 구분된다.
전시/배치 화면은 모바일 기준, 13개 뷰타입으로 보여진다.
게시글은 브런치의 핵심 서비스이다. 전체 화면 기준으로 스크롤이 적용되며, 타이틀+이미지가 매쉬업 된 영역을 넘어 스크롤 다운하게 되면 화면 최상단에 기존 헤더에 해당 게시글을 작성한 작가 프로필 이미지와 작가 닉네임이 표시된 형태로 헤더가 노출된다. 서비스 정책 UI는 특이점이 없어 이 글에서는 언급하지 않겠다.
게시글 스크롤 다운 시, 헤더 영역 인터렉션게시글과 관련된 기능들은 우측 상단에 유틸리티 영역에 밀집시켰다. 상시 노출되는 기능은 '라이킷', '댓글', '공유' 그리고 '옵션 더보기' 아이콘이며, '옵션 더보기' 버튼 클릭 시 작성자 여부를 확인하여 '편집', '삭제' 등의 기능이 표시된 버전과 문제가 있는 글을 '신고'를 할 수 있는 버전으로 분류된다.
게시글 우측 상단의 유틸리티 기능# 통합검색의 구조는,
통합검색은 최근 업데이트 된 후 작가와 주제 단위 키워드 안내 기능이 강화되었지만 기본 구조는 글, 매거진, 작가, 키워드로 구성되어져 있다.
모바일에서 키워드 '영화'로 검색 시 화면구성탭으로 분류가 되어 있고, 글로 분류된 검색 결과 화면이 기본값으로 표시된다. 모바일에서는 검색결과 정렬기능을 제공(글 탭에 한정)하며, 정확도순, 최신순 옵션을 제공한다. 브런치 모바일 앱은 많은 기능을 제공하지 않지만, 편리하게 검색 기능을 사용할 수 있게 기능을 제공한다.
사용자의 주요 서비스 이용목적을 잘 파악하고, 선택과 집중된 기획으로 오래 사용하고 싶은 서비스로 잘 만들어졌다. 아쉬운 점은 작가의 재량껏 글을 꾸밀 수 있도록 기능이 제공되지 않는다는 점이다. 그리고 외부 영상 삽입하는 방법 등에 대한 안내가 없어(있다면 찾기 힘들다) 글작성 시 답답한 점이 있다는 것이다.
