위지윅 에디터를 만들어 보았다 - 조사하기

안녕하세요 Lovefield입니다.
팀 블로그, Dico는 위지윅 에디터를 만들어서 사용하고 있습니다.

위지윅 에디터란?
위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")라는 줄임말을 한국식 발음으로 표현한 용어입니다. 문서를 편집하는 과정에서 화면에 보이는 문장이나 글 맵시 등을 출력물과 도일하게 화면에 그리는 방식을 말합니다.

개발과 관련된 글을 올리는 블로그 특성상 핵심이라 할 수 있는 에디터를 토이프로젝트로 개발하여 사용하고 있습니다. 디자인부터 개발까지 전 부 자체 제작입니다. Dico에서만 쓰고 있는 에디터라고 할지라도 팀 블로그 특성상 엄연히 유저층이 존재하기 때문에 사용자 편의성을 무시할 수 없습니다.

한 번쯤 글을 써본 분들이라면 에디터마다 고유한 특징을 가지고 있다는 사실을 아실 겁니다. 어쩌면 시간이 지남에 따라 에디터 형태가 변하고 있다는 걸 느꼈을지도 모릅니다.

저희는 기존 에디터에 대한 불만을 품고 있었습니다. 사소할 수 있는 버그부터 시작해서 사용성에 대하여 부족하다고 느낀 부분도 있었습니다. 트렌드에 걸맞으면서 원하는 기능을 제공하기 위해 블로그 에디터를 개선하고자 했습니다. 유려한 디자인을 가지면서 글을 쓰기 편했으면 하는 바람이 컸습니다. 아는 만큼 볼 수 있는 시야가 넓어지니, 개선하기에 앞서 다른 에디터는 어떤지 조사를 진행했습니다.

우선 네이버의 구버전 에디터인 스마트 에디터2.0입니다. 대중에게 가장 많이 알려진 에디터 입니다. 네이버에서 서비스하는 블로그, 카페 등에서 글을 쓸 때 사용할 수 있습니다. 공개된 에디터이기 때문에 일부 다른 사이트에서도 해당 에디터를 사용하고 있습니다. 많은 사람이 익숙하게 이용할 수 있는 에디터지만, 최근 트랜드를 알고 나서 이 에디터를 보면 답답한 느낌을 받습니다. 여러분이 잘 아는 워드나 한글 같은 문서 프로그램을 그대로 웹에서 사용할 수 있도록 옮겨놓은 형태거든요. 웹이라는 특수성을 무시한 채 오로지 많은 기능을 지원할 수 있다는 의지가 강하게 느껴집니다.

네이버의 스마트 에디터ONE.

구버전보다 상당히 깔끔해졌습니다. 전체 화면을 사용해 글 쓰는 영역에 몰입감을 주었고 구버전에 있던 설정은 발행 버튼으로 빼두었습니다.
기능은 전부 상단으로 이동했고, 자주 쓰는 기능은 왼쪽 버튼을 통해 이용할 수 있게 되어 있습니다.
구버전에서 받은 느낌은 "다양한 기능을 지원한다." 였지만, 지금은 "웹에 어울리는 글을 쓰고 있다."란 느낌을 받을 수 있습니다.

노션

지인이 추천하여 이용하게 된 노션입니다. 노션은 다른 에디터와는 다르게 문장, 이미지 등을 하나의 단위인 블럭(block)으로 이루어져 있습니다. 각 단위별로 위치를 바꾸거나 다른 포맷으로 변경이 가능하죠. 노션을 사용하다 보면 개발자 성향을 느낄 수 있습니다. 많은 부분을 단순화시켰지만, 친절하지는 않습니다. 노션을 처음 접하는 사람은 기본적인 가이드가 필요하다고 느낄 수 있습니다. 물론 기능성으로 지원하는 범위가 넓은 만큼 익숙해지기만 하다면 편리한 에디터가 됩니다.
디자인도 정말 심플합니다. 사용자가 찾으려고 노력만 한다면 생각보다 쉽게 원하는 기능을 사용할 수 있습니다. 지금 이미지는 노션 특유의 다크 모드입니다.

브런치

다음이 브런치를 런칭하면서 새로운 에디터를 선보였습니다. 다음에도 네이버 구버전 에디터인 스마트 에디터2.0처럼 티스토리에서 사용하던 구버전 에디터가 있었습니다. 구버전 에디터에 비해서 엄청나게 깔끔해진 것을 알 수 있습니다. 기능은 전부 오른쪽 버튼 그룹으로 넘어갔고, 중앙에 위치한 글 쓰는 영역은 실제 뷰 페이지와 유사하게 보일 수 있게 되어 있습니다.

조사하면서 다음과 같은 키워드 들을 뽑았습니다.

• 간결함
• 뷰 페이지를 추론할 수 있게
• 기능 접근이 간결, 작동 방식이 심플

결론은 "간결함"이었습니다. 에디터는 간결해야 합니다. 작성자가 글을 작성할 때 내용 외적으로 신경 쓸 부분이 많으면 안 됩니다. 오로지 글에 집중할 수 있어야 하죠. 신경이 분산될수록 글에 대한 퀄리티는 낮아집니다. 그렇기에 작성자가 에디터를 사용할 때 어려움을 느끼면 안 됩니다. 기능은 직관적이며, 간단해야 합니다. 물론 글을 위하여 필요한 수많은 기능을 줄여도 안 됩니다.

저희 블로그에서 사용하고 있던 에디터2.0의 모습입니다. 초기에 비해 간결하게 디자인했고, 나름 글을 쓰는 행위에 집중시키고 싶었습니다. 에디터를 통해 글을 작성할 때도 불편함을 느끼지 않았으면 했죠. 하지만 길지 않은 시간 동안 개발한 결과물이다 보니 일부 문제를 지니고 있었습니다. 무엇보다 추가적인 기능을 지원해달라는 내부의 목소리가 들리는 상황을 맞이했습니다. 결국 버전을 3.0으로 올리기로 다짐하고, 위와 같은 조사를 시작했지요.

우선 기능을 정리했습니다. 개발자이다 보니 UI/UX 적인 접근보다는 필요한 기능을 정리해놓는 편이 작업에 있어 조금 더 수월합니다. 필요한 기능으로 약 30가지가 정리되었습니다. 에디터에 필요한 기능을 떠오른 만큼 작성하였지만, 아마도 본격적인 개발을 시작하면 더 많은 기능이 들어가게 되겠죠. 기능을 정리하고 나서 레이아웃을 위한 화면 설계서를 작성해 보았습니다.

각 기능의 위치를 선정하고 화면을 구성해 보았습니다. 반응형으로 제작할 에디터지만, 화면 설계서는 PC만 제작했습니다. 모바일 버전을 미리 고려한 PC페이지 디자인입니다. 글에 대한 상세 설정은 별도 레이어로 기능을 분리하였고, 글을 쓸 때 필요한 기능은 에디터에서 접근하기 편하도록 수정해보았습니다. 부가적인 기능은 하단에 고정하여 언제든지 적용할 수 있는 위치로 선정했습니다.

다음은 디자인할 차례입니다. 이번 조사 글은 여기서 끝마치며 다음 글인 디자인 편에서 뵙겠습니다.