블로터

국내에서 개발한 오픈소스 에디터에 전세계 개발자들의 호평이 이어진다. NHN엔터테인먼트가 개발한 ‘토스트 UI 에디터’ 얘기다.

‘토스트 UI’는 NHN엔터테인먼트가 선보인 오픈소스 프로젝트 브랜드다. 자체 개발한 다양한 오픈소스 소프트웨어(SW)나 컴포넌트를 전세계 개발자들과 공유하고자 출범했다. 토스트 UI 에디터는 마크다운 문법을 지원하는 텍스트 에디터다. 3년여 전인 2015년 3월, FE개발랩에서 첫걸음을 뗐다. FE개발랩은 자바스크립트 기반 개발을 이끄는 사내 기술 조직이다.

“협업 기반 프로젝트 관리 서비스(PMS) ‘두레이’를 막 준비하던 무렵이었어요. 프로젝트 관리의 시작은 ‘기록’입니다. 편리한 작성이 뒷받침되지 않으면 시작 단계부터 불편을 겪죠. 그런 점에서 기록의 도구인 에디터는 프로젝트 전체에 영향을 줄 수 있는 핵심 기능입니다. 원하는 기능을 직접 구현하기 위해선 자체 에디터를 개발하는 게 맞다고 판단했죠.”

FE개발랩 류진경 랩장과 최규우 선임에게 토스트 UI 에디터는 남다른 자식이다. 토스트 UI 에디터는 2017년 12월30일 소스코드 공개 웹사이트 깃허브에 처음 공개됐다. 반응은 기대 이상이었다. 공개한 지 10여일 만에 ‘스타’ 수가 1천건을 넘어선 데 이어, 두 달여가 지난 1월12일엔 깃허브 자바스크립트 & 모든 언어 부문 트렌딩 1위에 올랐다. 2월14일을 기준으로 스타 수는 5310건으로 치솟았다. 깃허브에서 인기 있는 마크다운 에디터 ‘딜린저’ 스타 수(5797)와 비교해도 모자람이 없다.

‘스타’는 깃허브에서 이용자가 특정 프로젝트에 호감을 표시하는 행위다. 지금까지 깃허브에서 가장 많은 스타를 받은 국내 프로젝트는 네이버가 공개한 자바스크립트 애플리케이션 성능 관리(APM) 도구 ‘핀포인트’다. 2015년 3월3일 처음 공개해 3년여 동안 5439개의 스타를 받았다. 국내 오픈소스 문화는 개발·공개보다는 소비가 주를 이룬다. 더구나 토스트 UI 에디터 같은 텍스트 에디터는 ‘자바스크립트의 꽃’으로 불릴 만큼 개발 단계에서도 가장 난이도가 높다는 평가를 받는다. 토스트 UI 에디터의 성과에 더욱 눈길이 가는 이유다.

토스트 UI 에디터의 진가를 알기 위해 편집기 관련 상식부터 간단히 짚어보자. 토스트 UI 에디터는 마크다운 에디터다. 마크다운은 텍스트 문서 양식을 편집하는 문법이다. 마크다운 문법은 구조화된 문서를 만들기에 좋다. 작성된 문서는 HTML 등 다른 문서 형태로 손쉽게 변환된다. 우리가 흔히 쓰는 편집기는 위지윅(WYSIWYG) 방식이다. 편집기 아이콘으로 글꼴이나 크기를 조절하고 표나 이미지, 동영상을 손쉽게 집어넣는 방식이다.

오픈소스 에디터가 새로운 건 아니다. ‘CK에디터’나 ‘타이니MCE’ 같은 에디터는 편리한 사용성과 높은 완성도 덕분에 오픈소스 HTML 에디터로 널리 입지를 굳히고 있다. ‘아톰’이나 ‘고스트라이터’처럼 마크다운 문법을 지원하는 오픈소스 에디터도 여럿이다. 그렇지만 토스트 UI 에디터는 이 가운데서도 ‘독특한’ 위치에 서 있다.

토스트 UI 에디터는 처음부터 마크다운과 위지윅 에디터의 상호호환성을 염두에 두고 개발됐다. 마크다운 문법의 간명함과 위지윅 에디터의 편리함을 모두 품으려 한 시도였다. “비개발자는 위지윅 환경에서 콘텐츠를 제어하는 데 익숙합니다. 마우스를 쓰지 않으면 입력 자체를 불편해하죠. 반면, 개발자는 에디터에 입력하는 내용 자체가 데이터입니다. 마크다운 문법에 맞춰 마우스도 잘 안 쓰고 키보드에서 주욱 작성하곤 하죠. 토스트 UI 에디터는 프로젝트 관리 도구인 ‘두레이’에서 출발했습니다. 개발자와 비개발자의 협업을 위해선 양쪽 니즈(욕구)를 다 맞춰주는 게 중요했죠.” (류진경 랩장)

위지윅 에디터는 자유도가 높은 편집도구다. 이용자는 마우스로 대상을 끌어다놓거나 블록을 설정해 손쉽게 편집 작업을 진행할 수 있다. 마크다운은 편집의 불편함은 따르지만, 문서가 정형화되는 장점을 지녔다. 지금까진 마크다운을 위지윅으로, 위지윅을 마크다운 형식으로 매끄럽게 변환하기엔 한계가 있었다. 토스트 UI 에디터는 웬만한 문법이라 해도 상대 형식으로 부드럽게 변환해주는 게 특징이다. 처음부터 두 방식의 호환성을 염두에 둔 덕분이다.

“개발자들이 호평한 대목도 이 지점이었어요. 우리는 3년 동안 마크다운-위지윅 에디터로 토스트 UI 에디터를 개발했습니다. 그러다보니 마크다운 문법에선 원래 구현이 안 되지만, 우리가 확장해서 제공해준 기능도 있어요. 차트 플러그인이 그 중 하나인데요. 코드를 나타내는 문법 안에 데이터를 넣으면 그게 그래프로 구현되는 방식입니다. 텍스트를 수정하면 차트 모양도 따라 바뀌죠. 이걸 공개하자 ‘마크다운이 이런 것도 할 수 있는지 몰랐다’는 반응이 뒤따르더군요.” (최규우 선임)

알차게 영근 프로젝트에 대한 칭찬은 회사를 거쳐 개발자에게 깃든다. 개발자라면 누구나 알 테다. 자기가 만든 SW나 웹서비스의 코드를 공개한다는 것의 의미를. 내가 만든 코드를 많은 사람들이 내려받고 활용하는 건 돈으로 치환하기 힘든 명예이자 보상이다. 그만큼 부담도 크다. 허술하고 빈약한 소스코드는 국제적 망신으로 이어질 수도 있기 때문이다. 그런 면에서 토스트 UI 에디터는 현재로선 NHN엔터테인먼트에도, 프로젝트를 주도한 개발팀에도 긍지가 될 만하다. 토스트 UI 에디터는 소스코드 공개 이후 전세계 개발자들의 기여와 협업을 자양분 삼아 꾸준히 성장 중이다.

“깃허브에 소스코드를 공개해두면, 다른 개발자가 거기에 대해 이슈를 달아주고 자기 코드를 우리 코드에 풀 리퀘스트(pull request·PR, 수정 제안)해줍니다. 토스트 UI 에디터는 공개 당시엔 5개 언어를 지원했는데요. 지금은 PR를 많이 날려서 10개 국어까지 지원하고 있습니다. 토스트 UI 에디터 소스코드를 리액트 환경에서 쉽게 쓰도록 수정해 NPM에 공개한 사례도 있었어요.” (류진경 랩장)

어려움도 적잖았다. 무엇보다 ‘앞서간 발자국’이 없다는 점이 고충이었다. “마크다운-위지윅 에디터란 것 자체가 독특하고 생소한 콘셉트잖아요. 그러다보니 모범으로 삼을 만한 사례도 없었고, 새로 부닥치는 버그도 적잖았어요. 또 이용자 입장에선 위지윅 에디터를 기준으로 생각하다보니, 굳이 이런 에디터를 왜 만들어야 하는지 이해하지 못하는 경우도 많았습니다. 프로젝트 초반엔 그걸 이해시키는 게 힘들었어요.” (최규우 선임)

NHN엔터테인먼트는 토스트 UI 에디터 외에도 ‘그리드’와 ‘차트’ 등 19종의 애플리케이션과 컴포넌트를 비롯해 유니티 3D용 Socket.io 클라이언트와 비동기 게임서버 프레임워크 등 모두 21종의 프로젝트를 ‘토스트 UI’ 브랜드로 공개했다. ‘캘린더’나 ‘이미지’ 에디터 같은 애플리케이션 5종과 ‘애니메이션’, ‘컬러 피커’ 등 컴포넌트 18종, ‘sdoc 템플릿’ 등 툴 3종도 곧 오픈소스로 배포할 예정이다.

토스트 UI 에디터는 NHN엔터테인먼트의 개발 철학과도 호응한다. “우리는 오픈소스 자체가 회사의 경쟁력이라 생각합니다. 그래서 ‘공개’도 좋지만, ‘지속가능성’을 더 중요시합니다. 공유할 가치가 있고 꾸준히 유지보수할 수 있는 프로젝트만 공개하고 있죠. 우리가 오픈소스로 공개하는 것들은 내부에서 실제로 사용하고 개선을 거치며 검증된 것들입니다. 2월에 브랜드 사이트를 오픈하고 나면 더 많은 기여물을 공개할 수 있으리라 생각합니다.” (류진경 랩장)