[NHN FORWARD 2020] 12K만큼 사랑하는 오픈 소스 에디터 개발 이야기

2015년 첫 커밋으로 시작한 토스트 UI 에디터의 타임라인과 1만2천 스타 달성을 짚는다. 협업 도구 Dooray를 만들며 문서 편집기가 필요했고, 여러 에디터를 비교한 끝에 마크다운 에디터라는 컨셉으로 프로젝트를 시작하게 된 배경을 설명한다.

2004년 존 그루버가 만든 마크업 언어 마크다운의 쉬운 문법과 좋은 가독성을 HTML과 비교해 설명한다. 델리미터와 텍스트로 구성되는 구조, 커먼마크·GFM 스펙, 그리고 마크다운을 HTML로 변환하는 과정을 예시로 보여준다.

마크다운 에디터를 구성하는 세 컴포넌트를 하나씩 설명한다. 문서를 편집하는 에디터에는 구문 강조(신택스 하이라이팅)를, 결과를 바로 보는 프리뷰에는 파싱·렌더링 기반 실시간 미리보기를, 툴바에는 버튼 클릭 편집과 상태 동기화 기능을 넣는다.

마크다운을 알아야만 쓸 수 있는 한계를 넘기 위해 보는 대로 얻는 위지윅(WYSIWYG) 모드를 추가한다. 위지 에디터·확장 툴바·스위칭 버튼으로 구성하고, 커맨드 추상화 인터페이스와 컨버터로 두 모드의 데이터를 변환·연결해 누구나 쓰는 에디터로 완성한다.

1.0 출시 일주일 만에 3000스타를 얻으며 인기를 끌었지만, 사용자가 늘며 버그 요청이 몰린다. 구문 강조와 프리뷰 결과 불일치, 멀티라인 구문의 툴바 동기화 실패, 프리뷰 깜빡임과 스크롤 싱크 어긋남 등 대부분 마크다운 에디터 쪽 문제였다.

여러 문제의 원인이 컴포넌트마다 파편화된 파서 하나로 좁혀지자, 파서를 통합하기로 한다. 위치 정보를 담은 추상 구문 트리(AST)를 만들고 부분 파싱이 가능한 자체 파서 토스트마크를 CommonMark JS 개선으로 개발해, 구문 강조·성능 문제를 함께 해결한다.

2020년 3월 2.0 출시 시점에 1만 스타를 달성했음을 전하고, 현재 준비 중인 3.0을 소개한다. 마크다운에 한정됐던 정확성 개선을 위지윅까지 넓히고, 공통 에디터 라이브러리로 의존성을 줄이며 커스텀 문법·플러그인을 확장하는 것이 목표라고 밝힌다.