브런치, 그리고 브런치 에디터 (2)
기획 회고 - 그 문제를 어떻게 해결할 것인가?
2015년 6월 22일, 브런치가 베타 딱지를 붙이고 세상에 나왔다. 오픈 후 들뜬 마음에 나도 작가라는 심정으로 브런치 에디터의 기획 후기를 겁없이 발행했다. 곧 2회를 발행할 것 처럼 급하게 마무리를 짓고는 지금까지 버티기를 하다가 오픈 1주년인 오늘에서야 이 부담스러운 숙제를 끝내려고 한다.
'누구의 어떤 문제를 어떻게 해결할 것인가?'에서 <누구>와 <어떤 문제>에 대한 부분은 브런치 에디터 회고 1편에서 다루었다. 2편은 <어떻게 해결할 것인가?>에 대한 풀이 과정이다. 앞선 이야기를 요약하면.. 브런치는 '열과 성으로 글을 쓰는 작가'에게 글쓰기에 집중할 수 있는 환경을 제공하기로 했다. 타겟에 해당하는 작가님들의 글을 분석해보고, 직접 찾아가 인터뷰를 하면서 공감하는 시간을 갖기도 하였다. 그 과정에서 내 자식과 같은 글이 손님을 맞이할 때 예쁘고 잘 읽혔으면 좋겠다는 욕구가 오히려 글쓰기를 방해하는 요소라는 것을 발견하였고, 글쓰기보다 꾸미는 과정이 부담스러운데 이제는 모바일까지 신경을 써야 하니 스트레스가 늘어났다는 부분까지를 브런치 에디터의 해결 과제로 삼았다.
우리는 이 문제를 해결하기 위해 3가지 관점으로 접근했다.
1. 돋보이는 효과는 더하고
2. 불필요한 기능은 덜어내며
3. 모바일 호환성을 확보한다
1. 돋보이는 효과를 더한다
새로운 에디터를 만들어야 했지만, 에디터부터 설계하지는 않았다. 우선은 브런치가 추구하는 이상적인 게시글 화면에 대한 고민을 시작하였다. 기존 블로그들과 다르면서도 디자이너가 편집한 것 같은 아름다운 룩을 먼저 정의하고, 그것을 가장 쉽게 표현할 수 있는 에디터 화면과 에디팅 방법을 고민하는 방식으로 진행하였다.
#아이데이션
프로젝트 멤버들과 잡지를 활용하여 웹과 앱의 게시글 화면을 만들어 보았다. 호응을 얻었던 주요 요소로는 타이틀 커버, 그룹 이미지, 화면에 꽉 찬 이미지, 단분리, 각주 등이 있었다. 타이틀 커버는 글만 있는 컨텐츠라도 제목 영역에 한 장의 이미지와 가운데 정렬의 텍스트만 배치해도 기존 서비스들과 차별화될 것이라는 아이디어였다. 그룹 이미지는 유저 인터뷰에서도 많이 언급되었던 요소로 주로 외부 툴에서 편집하기 때문에 손이 많이 가는데, 이번 기회에 그룹 이미지를 쉽게 만드는 방법을 찾겠노라 다짐을 하기도 했다.
브런치 PC웹 게시글 화면 아이데이션 결과#벤치마킹
그 다음은 트렌드 분석 및 벤치마킹이다. 브런치라는 서비스의 방향성을 한참 고민하던 시기의 IT업계는 애플-미니멀리즘, 구글-머티리얼, MS-플랫 등으로 표현은 달랐으나 공통적으로 '미니멀'을 추구하는 시기였다. 이런 트렌드는 글로벌 블로그 시장에도 영향을 미쳤다. 전통적인 블로그의 사이드 메뉴(위젯, 플로그인, 배너)를 거부하고 컨텐츠에 집중하면서도 반응형 웹 지원 등 가벼우면서도 모바일 친화적인 미니멀리스트 블로그가 주목을 받기 시작한 것이다. 사실상 브런치도 이 흐름에 배를 띄웠다. 우리는 이런 트렌디한 블로그들을 분석하면서 위의 아이데이션 요소들과의 교집합을 찾아보았다.
타이틀 커버의 경우에는 국내 블로그형 서비스들에서는 도입된 사례가 없었으나, 해외 서비스에서는 어렵지 않게 찾을 수 있었다. 미디엄, 익스포저, 실버백 등을 통해 직접 구현을 하지 않아도 미리 사용성을 확인할 수 있었다. 실제로 블로거들을 인터뷰할 때, 미니멀리스트 블로그들을 보여주고 그에 대한 인상을 묻고 에디터의 사용성 테스트를 진행하였다. 유저들의 반응을 미리 체크한 덕분에 합리적인 의사결정과 함께 삽질(?)의 시간을 크게 단축할 수 있었다. 예를 들면 풀 스크린 커버가 시원시원한 느낌은 있으나 글 읽기를 방해할 것 같다는 우려가 많이 나왔다. 그래서 초기 단계부터 하프 스크린 커버를 기본값으로 하되 풀스크린으로 쉽게 변경하는 동선이 설계되었고 현재까지도 주요 피처로 손꼽히고 있다.
* 브런치 에디터 > 타이틀 스크린 커버 설정 방법벤치마킹 효과를 본 또 다른 하나는 그룹 이미지다. 우리가 찾던 느낌과 가장 유사한 형태를 보이던 서비스는 익스포저였다. 하지만 아이템별로 이동방식이 살짝 올드한 느낌이라 아쉬웠다. 그후 담당 디자이너에게 포착된 서비스가 스토어하우스다. 위에 언급된 에디터들은 오직 웹 에디터만 가지고 있던 것과는 반대로 오직 앱 에디터만 가지고 있었기 때문에 사진 이동과 그룹이미지 편집이 충격적일 정도로 자유도가 높았다. 우리에게 이미지 드래그 이동이라는 욕심을 불러일으킨 고마운 서비스이기도 하다. 신선한 자극 덕에 웹과 앱 모두에서 드래그로 이동하고 그룹이미지를 만드는 유저친화적인 에디터를 구현하게 되었다.
* 브런치 에디터 > 그룹 이미지 설정 방법.#프로토타입
브런치라는 서비스의 특징을 별다른 설명 없이도 단적으로 보여 줄 수 있는 무언가가 있었으면 했다. 그래서 기획안 리뷰부터 프로토타입 시연 때까지 언제나 실존하는 글의 before/after 화면을 준비했다. 예비 작가들에게 브런치에서는 글이 이렇게 표현될 수 있다는 것을 사실적으로 전달하고 싶었는데, 이런 비교는 내부 시연시에도 호응이 좋았다. 아래는 프로토타입 에디터로 작성한 글의 스크린샷이다. 우리가 정의한 <돋보이는 효과를 더한다>의 결과물이자, 서비스 오픈을 위한 최종 리뷰에서 활용한 화면이다.
(좌) before : 브런치로 꼭 모시고 오고 싶은 ivy알래스카님의 방송 촬영 후기글.
(우) after : ivy알래스카님에게 보여드리고 싶은 브런치 게시글 화면.
2. 불필요한 기능은 덜어낸다
국내의 대표적인 글쓰기 플랫폼으로 네이버블로그, 티스토리를 꼽을 수 있다. 이 서비스들의 에디터는 블로그뿐만 아니라 메일과 카페, 타 게시판형 서비스에서도 만날 수 있는 각 포털의 범용적인 에디터이다. 덕분에 매우 안정적이고 친숙하며 자주 업데이트된다는 장점이 있으나, 반대로 불필요한 기능을 포함하고 있다는 단점이 있다. 수년간 디벨롭 되면서 다양한 유저의 니즈와 각 서비스의 이해관계가 녹아 있기 때문이다. 문제는 그 불필요한 기능들이 작가의 신경을 분산시키고, 모바일 호환에 발목을 잡는다는 것이다.
#기능리스트
깨끗한 A4용지와 필기감이 좋은 볼펜 한 자루를 떠올렸던 것 같다. 산만하지 않고 오로지 텍스트 입력에 집중할 수 있는 간결한 에디터를 제공하고 싶었다. 이를 위해 이용 빈도가 낮은 기능을 과감하게 지우겠다고 굳게 다짐했다. 하지만.. 결코 쉽지 않는 작업이었다. 하나를 더 주는 건 쉬워도, 줬다가 뺏는 것은 기본적으로 욕먹을 각오부터 필요하다. 더하는 것보다 빼는 것을 고를 때가 의견 모으기가 더 어려웠다.
사람들의 글쓰기 패턴이 천차만별이다 보니 있으면 좋은데 또 없으면 아쉬운 기능들이 한두 가지가 아니었기 때문이다. 담당자들 사이에서도 의견이 갈리는 피처들이 있었고 결국은 지우기를 위한 질문을 바꿨다. '꼭 필요해? 없으면 안 되는 것만 남기자' 그 결과 마지막까지 붙들고 있다가 놓은 기능이 예약 발행이었다. 그래서인지 예약 발행이 필요하다는 CS가 들어올 때면 움찔움찔한다;;
*브런치 에디터 > 메인 화면 (2015년 오픈 버전) <돋보이는 효과를 더한다>가 우리의 차별화 포인트이고 무기인 것은 분명하나, 이마저도 글쓰기의 흐름을 방해하지 않는 선까지만 허용했다. 글쓰기의 본질인 글자의 입력은 차별화보다 상위인 '존재의 이유'이기 때문이다. 이런 이유로 스타일을 바꾸거나 효과를 주는 기능들은 필요한 시점에만 등장하도록 숨겨두었다.
*브런치 에디터 > 텍스트 스타일 메뉴.불필요한 기능 외에 또 덜어낸 것은 '무한 선택지'다. 선택지가 많을수록 고민은 늘고, 최고의 선택을 해야 한다는 부담이 커지기 마련이다. 브런치 에디터는 글자 크기는 단 4종뿐이다. 더는 9~13pt 사이에서 어떤 사이즈를 본문 크기로 사용해야 가독성이 좋을지를 고민하지 않아도 된다. 물론 줄간격 기능도 없다. 그레이 폰트를 사용하고 싶다면 딤그레이, 그레이, 다크그레이 중 어떤 것이 좋을지 생각할 필요가 없다. 브런치는 그레이 색상이 1개밖에 없으니까!
어떻게 보면 이 부분은 예약 발행 이상으로 브런치 에디터의 단점으로 지적될 수 있다. 디자인 능력이 출중하거나, 남들과 다른 자신만의 스타일을 선호하는 작가들의 개성을 빼앗는 일이기 때문이다. 그럼에도 이런 결정을 한 이유는 꾸미기에 대한 스트레스를 덜어 줌과 동시에 높은 가독성 확보하기 위함이었다. 경우의 수를 대폭 줄인 덕분에 가독성을 높이기 위한 디테일한 커스텀 작업이 가능했고, 담당자들은 PC웹/모바일웹/안드로이드 앱/아이폰 앱 별로 1pt, 1px을 조정하면서 읽기 편한 환경을 만들기 위해 최선을 다하였다.
혹시 브런치에서 긴 글도 쉽게 읽히는 경험을 해보았다면, 첫째는 작가님들의 문장력이 좋아서이고, 두 번째는 화면별로 최적화된 가독성 때문일 것이다.
3. 모바일 호환성을 확보한다
PC보다 모바일에서의 글 조회수가 높다는 것은 더 이상 놀라운 사실이 아니다. 키보드로 작성하고 있는 이 글도 마우스보다는 스크린 터치로 더 많이 소비될 것이다. 어디 소비뿐이랴. 길을 걷다가 좋은 아이디어가 떠올랐다거나 기록하고 싶은 무언가가 생각났을 때 자연스럽게 스마트폰을 꺼낸다. 초안을 작성하거나, 앉은 자리에서 한 편의 글을 완성하기도 한다. 이 시대에 살고있는 사람들은 더이상 웹 에디터와 앱 에디터를 구분하지 않는다. 웹 에디터에서 첨부한 사진이 그대로 앱 에디터에 나와야 하고, 앱 에디터에서 변경한 이미지의 배치가 그대로 웹 에디터에도 적용되는 것이 당연하다고 생각한다. 하지만 재미있는 것은 그 당연함이 당연하지 않은 서비스가 대부분이라는 사실이었다.
#스터디
에디터 기획 경험이 전혀 없는 기획자 1명과 처음으로 화면 설계를 시작하는 UX담당자 1명. '에알못' 2명의 조합이라 무식했지만 용감했던 것 같다. 브런치가 찾는 에디터를 발견할 때까지 무작정 사용해보자였다. 일단 많이 써보는 것도 우리에겐 도움이 될 것이라는 심정으로 시작한 에디터 스터디는 어느덧 10개가 20개가되고, 20개가 30개가 되었다. 에디터에 대한 감을 어느 정도 잡을 때 쯤 깨우쳤다. 다행인지 불행인지 모르겠지만 우리가 찾는 에디터는 아직 없구나.
2014.07 스터디 대상 에디터 리스트미디엄이나 익스포저의 웹 에디터는 너무나도 훌륭했으나 앱 에디터가 없었고, 앱에서 좋은 사용성을 가지고 있는 스토어하우스와 스텔라는 웹 에디터를 가지고 있지 않았다. 네이버 스마트 에디터와 다음 에디터는 둘 다 가지고 있었으나, 웹에서 작성한 글을 앱에서는 수정할 수 없는 상황이었다. 그나마 앱에서 게시글을 수정할 수 있는 서비스가 워드프레스인데 반응형 웹을 앱에서 그리는 수준이라 기대에 미치지는 못했다. 고스트, 포스타곤 등 이제 시작하는 단계의 미니멀리스트 블로그들은 N스크린을 반응형 웹으로 대응하고 있었다.
웹/앱이 호환되는 에디터가 없었기 때문에 브런치도 한동안 반응형 웹에 대해서 상당히 많은 논의를 하였다. 결과적으로 수차례가 논의 끝에 에디터는 만큼은 반응형보다는 네이티브로 구현을 하는 것을 목표한다는 것에 합의를 이루고, 아직 아무도 가지 않은 외로운 길을 걷기 시작하였다.
(브런치가 오픈하던 2015년에는 외롭지 않았다. 미디엄은 앱 에디터를 만들었고, 페이스북은 노트라는 유사한 기능을 오픈 했으며, 뒤이어 네이버도 웹-앱이 호환되는 스마트 에디터 3.0을 만들고 네이버 포스트와 네이버 블로그에 적용하였다.)
#와이어프레임
mobile first가 아니라 mobile only의 전략으로 에디터를 설계하였다. 앱에서 제공할 수 있는 기능을 먼저 나열하여 우선순위를 부여하고, 그다음에 웹 에디터에 있으면 좋을 요소를 고려하였다. 이때 모바일에서 표현하기 어렵거나 상호 간의 호환되는 규칙을 만들 수 없으면 철저하게 제거한다는 룰을 정하였다. 단적인 예로 브런치에는 이탤릭이 없다. IOS앱에서 한글 이탤릭을 지원하지 않기 때문이다. 그리고 이런 기준에 의해 아이데이션에서 나왔던 단분리나 각주, 추천 템플릿 등의 반짝이는 아이디어들도 드랍하였다.
기능이 한 개 추가될 때마다, 정책이 한 줄 늘어날 때마다 기획/UX, 디자이너, 서버, 웹 에디터, 안드로이드 앱, 아이폰 앱 담당자가 6자 회담(?)을 하면서 프로젝트를 진행하였다. 지금도 종종 이런 질문을 받는다
Q. 브런치 에디터는 시나리오(스토리보드)가 몇 페이지에요?
A. 음... 시나리오는 없고 회의록만 있어요
화이트보드에 와이어프레임을 그리고 담당자들이 동선과 정책을 합의하고는 바로 디자인/개발 프로토타입을 만드는 방식이다. 프로토타입을 만들다가 한쪽에서 문제가 발생하면, 그 문제를 우회하거나 다른 솔루션을 제안하면서 상호 호환 규칙을 만들어 갔다. 지금 생각해보면 상당히 팀웍이 좋았나보다ㅎㅎ
호환성과 사용성 사이에서 애먹은 부분은 타이틀 커버의 UX설계였다. 화면이 넓어서 우측에 버튼을 나열할 수 있는 웹에디터와 계층(depth)을 둘 수 밖에 없는 앱 에디터 사이에 호환 규칙을 잡는 것은 정답이 없는 퀴즈를 푸는 것 같았다. 게다가 가로화면을 사용하는 웹과 세로화면이 기본인 앱의 사용성도 너무 달랐다. 그럼에도 글만 있어도 돋보이는 효과를 위해서는 타이틀에서 차별화가 필요했기에 쉽게 포기할 수도 없었다. 꽤 오랜 시간 이 퀴즈를 풀기 위해 노력했고, 결국 아래와 같은 답을 적어 내려갔다. 정답이 아닐지라도 묘한 쾌감을 얻는 순간이다. 물론 채점은 유저들의 몫이지만 말이다.
여기까지가 오픈 시점의 브런치 에디터이다. 진작에 이 글을 발행 해야했는데 이런 저런 이유(라고 쓰고 핑계라고 읽는다)로 그러지 못했다. 그 후로 1년 동안 에디터에는 크고 작은 업데이트가 있었고, 그중에는 위에 룰을 깨는 것도 포함되어 있다. 특정 앱에서는 표현이 불가한 양쪽정렬 기능을 추가하였고, 많은 선택지를 주는 것을 피하려 했으나 이미지 필터 만큼은 23종을 제공하고 있다. 그리고 언젠가는 더 디테일한 옵션들이 브런치 에디터에 적용될 것이다. 그 과정에서 스스로 만든 규칙과 VOC들이 충돌할 것이고, 이걸 어떻게 풀어야 하나 머리를 싸매게 될지도 모른다. 그런 순간이 온다면 이 글을 보면서 다시 처음을 생각해야 겠다.
There is nothing to writing.
All you do is sit down at a typewriter and bleed.
- Ernest Hemingway
타자기에 글을 쓰는 것은 폰트 설정도 이미지 첨부나 레이아웃 선택도 없다. 그저 텍스트를 입력하는 것이 전부다. 하지만 그것만으로도 피를 토할 정도로 충분히 고된 작업이다. 브런치 에디터는 작가들이 생각과 경험을 글로 표현하는 것에 몰입할 수 있는 환경을 마련하고자 했다는 것. 그 초심을 기억하기를..!
