🎉 TOAST UI Editor 2.0 출시 🎉
TOAST UI Editor는 문서 편집을 위한 자바스크립트 라이브러리로, 마크다운(Markdown)과 위지윅(WYSIWYG) 2가지 모드의 에디터를 제공하여 사용자가 편의에 따라 자유롭게 에디터를 선택할 수 있도록 도와줍니다.
2018년 오픈 소스로 공개된 이후 지금까지 꾸준한 사랑을 받아왔고, GitHub 스타 ⭐️ 10k를 달성하기도 했습니다. 이 뜨거운 열기를 이어받아 드디어 2020년 3월, TOAST UI Editor 2.0을 출시합니다. (모두 소리 질러~~ 🎉)
우리는 작년 하반기 컨셉 회의와 프로토타입을 시작으로 석달여의 개발을 거쳐 바로 오늘, 정식 출시를 발표합니다. TOAST UI Editor 2.0 버전에서는 마크다운 파서, 스크롤 싱크 등 마크다운 에디터의 중심이 되는 기능들을 강화하고 번들 파일 용량을 개선하는 데 집중하였습니다.
TOAST UI Editor 2.0에서 어떤 변화들이 있었는지 지금부터 함께 살펴보겠습니다.
🛠 2.0 무엇이 변화했나요?
🔡 새로운 마크다운 파서 적용
TOAST UI Editor 2.0에서 가장 큰 변화는 새로 탑재된 마크다운 파서(Parser)입니다. 파서는 마크다운 에디터에서 입력된 마크다운 데이터를 HTML로 변환하는 에디터의 핵심 기술의 하나입니다. 이전 버전에서 사용된 파서(markdown-it)는 실제 편집 영역과 미리보기(Preview) 화면 사이에서 해결하기 어려운 몇 가지 문제점을 가지고 있었습니다.
이를 해결하기 위해, TOAST UI Editor 2.0에서 새로운 마크다운 파서인 ToastMark를 개발하게 되었습니다. ToastMark는 CommonMark 스펙을 완벽하게 준수하는 오픈 소스 CommonMark.js를 확장한 것으로, 마크다운 문서의 소스 맵핑 정보를 갖고 있는 추상 구문 트리(AST, Abstract Syntax Tree)를 직접 접근할 수 있는 API를 제공하기 때문에 이전에 발생하던 문제들을 처리할 수 있습니다. 2.0 버전에서는 기존에 사용하던 markdown-it을 제거하고 ToastMark로 대체하면서 기능별로 파편화된 구문 분석 작업을 통합했고, 그 결과 마크다운 에디터의 정확도와 안정성이 대폭 개선되었습니다.
ToastMark에 대한 더 자세한 이야기는 위클리에서 다루어질 예정이니 기대해주세요! 🤘
다음은 TOAST UI Editor 2.0에서 ToastMark를 사용해 개선된 사항을 소개합니다.
더 정확해진 구문 강조
TOAST UI Editor의 마크다운 에디터는 편집 영역의 구문 강조(Syntax Highlighting)와 미리보기 화면의 렌더링 결과가 다르게 보이는 문제가 있었습니다.
2.0 버전에서는 ToastMark를 통해 마크다운 에디터 편집 영역과 미리보기 화면에서 하나의 구문 분석 결과를 사용하는 구조로 변경되었고, 문서를 편집할 때 두 화면에서 동일한 결과를 확인할 수 있습니다.
v1.x
v2.0
실시간 미리보기 화면 성능과 스크롤 싱크 기능 개선
TOAST UI Editor 1.x 버전에서는 많은 양의 문서를 편집할 때 데이터를 한꺼번에 파싱하도록 처리되어 있어, 편집 속도가 느려지고 미리보기 화면에서 깜빡임 현상이 발생했습니다.
ToastMark은 마크다운 데이터를 점진적으로 파싱할 수 있는 기능을 제공합니다. 이를 통해 마크다운 에디터에서 편집하고 있는 부분만 파싱하여 미리보기 화면을 갱신하므로, TOAST UI Editor 2.0 버전에서는 렌더링 할 때 발생하는 불필요한 지연이나 끊김 현상이 없습니다.
또한 편집 영역과 미리보기 화면의 스크롤 위치 동기화가 더욱 정밀해졌습니다. 문서 길이에 상관없이 양쪽 영역의 스크롤 위치 동기화가 잘 되기 때문에 문서 편집 사용성이 좋습니다.
v1.x
v2.0
커서 위치에 따른 툴바 버튼 활성화 기능 개선
마지막으로 TOAST UI Editor 1.x 버전에서는 편집 영역에서 커서가 입력 텍스트의 특정 위치에 있을 때, 에디터 상단의 툴바 버튼 상태를 정상적으로 표시하지 못했습니다.
이 문제 또한 ToastMark에서 제공하는 마크다운 데이터를 파싱해 필요한 값으로 반환하는 API로 해결하였습나다. 마크다운 에디터 편집 영역에서 커서 위치로 구문 트리의 노드 정보를 가져오는 메서드를 사용하여, 현재 편집하는 텍스트에 대한 정보를 툴바 버튼에 정확하게 표시할 수 있습니다.
v1.x
v2.0
🐉 모노레포 도입
모노레포(Monorepo)는 여러 저장소(Repository)의 모듈들을 하나로 모아 관리하는 시스템을 말합니다. TOAST UI Editor는 2.0 버전부터 GitHub 저장소에서 모노레포를 사용하며, 에디터와 관련된 모든 패키지들은 다음과 같은 구조로 관리됩니다.
- tui.editor/
├─ apps/
│ ├─ editor
│ ├─ jquery-editor
│ ├─ react-editor
│ └─ vue-editor
├─ plugins/
│ ├─ chart
│ ├─ code-syntax-highlight
│ ├─ color-syntax
│ ├─ table-merged-cell
│ └─ uml
├─ libs/
│ ├─ toastmark
│ ├─ squire
│ └─ to-markTOAST UI Editor의 메인 앱과 랩퍼(Wrapper)는 apps 폴더, 에디터의 확장 기능은 plugins 폴더, 라이브러리 모듈은 libs 폴더에서 관리됩니다.
이제 TOAST UI Editor 사용자들은 TOAST UI Editor와 관련된 모듈 정보를 한곳에서 모아볼 수 있습니다. 저장소 이곳저곳을 찾아다닐 필요 없이 TOAST UI Editor 저장소에서 이슈와 배포 정보를 확인 할 수 있습니다.
또한 컨트리뷰팅 활동을 할 때도 TOAST UI Editor 리포지터리 하나만 클론 받고, 정적 분석 및 단위 테스트 등 통일된 환경에서 편리하게 TOAST UI Editor를 개발할 수 있습니다.
🧩 플러그인 패키지 분리
2.0 버전 이전에는 차트, 셀 병합 테이블 등 확장 기능이 익스텐션(Extension)으로 제공되었는데, 확장 기능과 관련된 코드들이 포함되어 번들 파일 용량이 커지는 문제가 있었습니다.
이를 해결하기 위해, TOAST UI Editor 2.0 버전에서는 확장 기능들을 개별 패키지로 npm에 등록하여 사용합니다. 이제 확장 기능들은 익스텐션 대신 플러그인이라는 명칭을 사용하며, npm으로 설치해 사용할 수 있습니다.
다음과 같이 TOAST UI Editor 2.0에서는 필요한 플러그인만 추가할 수 있고, 플러그인 커스터마이징도 가능합니다.
-
플러그인 설치
$ npm install @toast-ui/editor-plugin-chart # Chart 플러그인 $ npm install @toast-ui/editor-plugin-uml # UML 플러그인 - 플러그인 사용
import Editor from '@toast-ui/editor';
import chartPlugin from '@toast-ui/editor-plugin-chart'; // Chart 플러그인
import umlPlugin from '@toast-ui/editor-plugin-uml'; // UML 플러그인
import customPlugin from './customPlugins'; // 사용자 플러그인
const editor = new Editor({
// ...
plugins: [
chartPlugin,
umlPlugin,
customPlugin
]
});또한 각 플러그인들은 모노레포로 관리되기 때문에, 사용자들이 플러그인 관련 정보를 쉽게 찾을 수 있습니다.
2.0 버전부터 제공하는 기본 플러그인은 총 5가지이며, 추후에 다양한 플러그인을 제공할 예정입니다. 각 플러그인에 대한 자세한 설명 및 사용 방법은 아래 링크 페이지에서 확인할 수 있습니다.
🗑 번들 파일 용량을 줄이기 위한 작업들
TOAST UI Editor 2.0에서는 더 가벼운 에디터를 만들기 위해, jQuery 의존성 제거를 포함해 다음과 같은 작업을 진행하였습니다.
jQuery 의존성 제거
TOAST UI Editor 2.0 버전에서는 번들 파일 용량을 증가시키는 의존성 모듈들도 함께 정리하였습니다. 그 중 하나로, jQuery 의존성이 제거되었습니다.
TOAST UI Editor에서 jQuery는 DOM 조작을 쉽게 하기 위한 용도로 사용되었으나, 번들 파일에 jQuery의 불필요한 함수들이 포함되어 번들 파일 용량을 크게 만들었습니다. 또한 jQuery 의존성으로 인해 TOAST UI Editor 사용에 부담을 느끼는 사용자들도 있었습니다.
2.0 버전에서는 직접 구현한 DOM 유틸리티 함수와 TOAST UI CodeSnippet을 사용하여 jQuery를 대체하고, 번들 파일 용량을 줄일 수 있었습니다.
코드블럭 구문 강조 기능 분리
TOAST UI Editor는 코드블럭 영역에 작성된 코드를 파악하기 쉽게 만들어주는 구문 강조 기능을 제공합니다. 이 구문 강조 기능을 처리할 때 highlight.js 라이브러리를 사용하는데, 번들링 과정에서 highlight.js에서 지원하는 모든 언어(185개)가 포함되어 번들 파일 용량이 늘어나는 문제가 있었습니다.
이러한 문제를 해결하기 TOAST UI Editor 2.0에서는 구문 강조 기능을 플러그인으로 분리하였습니다. code-syntax-highlight 플러그인을 사용하면, 구문 강조 기능을 선택적으로 사용할 수 있고 원하는 언어만 강조 처리할 수 있습니다.
다국어 파일 분리
TOAST UI Editor가 오픈 소스로 공개될 당시 5개였던 다국어(I18N) 지원 언어는, 활발한 컨트리뷰팅 활동을 통해 현재 20개까지 지원하게 되었습니다. 다국어 파일들이 모두 내장되어 있어, 이 파일들 또한 에디터의 번들 파일 용량을 증가시키는 원인이 되었습니다.
2.0 버전에서는 다국어 언어 파일을 분리해 개별 언어 파일로 제공합니다. 사용자는 필요한 언어만 추가하여 사용할 수 있으며, 번들 파일도 조금 더 가벼워졌습니다.
그래서.. 2.0에서 번들 파일 용량은요? 🤔
jQuery 제거, 플러그인 및 다국어 파일 분리 작업을 통해, 불필요한 상황에서 사용하지 않는 코드들이 포함되어 번들 파일 용량이 늘어나는 문제점을 개선할 수 있었습니다.
다음은 에디터 기본 기능만 사용하는 경우에 대한 번들 파일 용량을 버전별로 비교한 결과입니다. 2.0 이전 버전과 비교했을 때, 번들 전체 용량이 1.42MB에서 582KB로 크게 준 것을 확인할 수 있습니다.
이제 TOAST UI Editor 2.0에서 최적화된 상태의 번들 파일들을 사용할 수 있습니다.
🏁 2.0 배포 이후의 계획은 어떻게 되나요?
에디터야, 너는 다 계획이 있구나! 👀
TOAST UI Editor가 큰 인기를 얻을 수 있었던 이유 중 하나는, 마크다운과 위지윅 에디터를 동시에 지원한다는 점입니다. 이는 TOAST UI Editor만의 강력한 기능이자 해결할 가장 큰 숙제이기도 합니다. 그래서 TOAST UI Editor는 앞으로 있을 버전 업데이트마다 마크다운과 위지윅, 두 가지 에디터 기능이 잘 통합된 에디터를 제공하는 것을 목표로 합니다.
우리는 새로운 파서(ToastMark)를 기반으로, 마크다운 에디터를 강화하면서 CodeMirror의 의존성을 걷어내는 마이너 업데이트를 준비하고 있습니다. 이외에도 툴바 상태 처리와 편집 영역의 구문 강조 기능이 고도화됩니다.
마크다운 에디터의 개선 작업이 끝나면, 위지윅 에디터에서도 ToastMark를 상태 관리자로 사용하여 마크다운과 비슷한 형태로 내부 구조를 하나씩 개선해 나갈 예정입니다. TOAST UI Editor는 Squire와 ToMark 등 위지윅 의존성 해결을 끝으로, 가벼우면서도 마크다운과 위지윅 문서의 통일성을 보장하는 에디터로 발전해 나갈 것입니다.
📝 마이그레이션 가이드
굉장히 많이 변화한 것 같은데, 바로 업데이트만 하면 되나요?
TOAST UI Editor 2.0에서는 대대적인 변화가 있었습니다. 그만큼 사용 방법에도 큰 변화가 생겼지만, 여기 친절한 마이그레이션 가이드가 준비되어 있습니다. 마이그레이션 가이드를 따라 하면 어렵지 않게 2.0으로 업데이트를 진행할 수 있으니 아래 링크를 꼭 확인하세요!