로드맵

프로알라 위지윅 에디터를 활용한 앞으로의 개발방향(로드맵)에 대해 공유하고자 합니다.

저는 이번 로드맵을 크게 세가지로 구분하여 진행하려 합니다. 구현(Porting)에서는 프로알라 에디터를 최신 XE(Rhymix)에서 사용할 수 있도록 포팅하는 단계입니다. 저에게 포팅이라는 작업은 그냥 좋은 프로그램을 있는 그대로 XE에서 돌아가게 하는 것이 아닙니다. 좋은 프로그램의 장점을 그대로 가져오되 단점 또한 장점으로 만들어 구현해 내야하고 그것이 올바른 포팅이라고 생각합니다. 실제 포팅을 한 경우는 이번이 두번째 입니다. 첫번째는 Xpresseditor + AXISJ AXUpload5(HTML5) 에디터 스킨인데요. 그때 당시도 아쉬웠거나 부족했던 기능이 있으면 의견을 개진해서 기능 구현이 될 수 있도록 했으며 필요하다면 직접 커밋을 하기도 했습니다.

이번 프로알라 에디터의 경우 역시 Froala Wysiwyg Editor 2.0 릴리즈부터 참여하여 현재까지 많은 의견 개진을 했고 프로알라에 반영 되었습니다. 구현(Porting) 과정은 다음 단계로 넘어가더라도 꾸준히 진행하여 프로알라 에디터 자체를 보다 더 완벽하게 하기 위해 지속적으로 의견 개진을 통해 수정 보안하려고 합니다.

그 다음 과정으로 상상(Fork)이라는 이름으로 정의했습니다. 포팅을 하는 과정에서 XE에서는 필요없거나 또는 필요한 기능들이 있었습니다. 저는 되도록 이것들을 프로알라 에디터에서 구현되도록 노력하였으나 프로알라의 가치관이나 개발방향(로드맵)에 따라서는 프로알라 에디터 자체에 포함할 수 없는 것들이 많이 있었습니다. 이러한 경우 어쩔 수 없이 포크형태의 개발을 해야합니다. XE와 라이믹스의 관계를 생각해보시면 이 이야기의 이해가 어렵지 않을 것 입니다. 그리고 앞으로 나만의 가치를 만들어 가기 위해서는 시도 되어야할 것들이 많이 있고 저는 이것들을 제 상상의 범위에서 구현해 내려고 생각하고 있습니다.

마지막으로 구현과정과 상상과정을 거쳐 최종적으로 이것들을 잘 표현해서 나만의 가치를 만들려고 합니다. 프로알라 에디터를 기반으로 잘 설계된, 잘 디자인된 보다 발전된 형태의 위지윅 에디터를 만드는게 최종 목표입니다.

아래에 제가 구현하고자하는 내용을 나열합니다. 나열 순서는 구현순서와 일치하지 않습니다.

모바일 제스처(Gesture)

저의 숙원 기능입니다. Paper & Pencil by FiftyThree 의 텍스트 에디터 기능이 저의 목표입니다. 구냥 모바일에서 끝장을 볼 생각입니다.  현재도 어느 에디터보다도 모바일을 완벽 대응하고 있으나 모바일 기기에서 쉽고 편하게 글을 쓰게 하는것에는 한참 멀었습니다. 제스처를 도입하면 툴바, 퀵버튼의 편집 기능 외에 또 다른 차원의 편집 기능을 더할수 있습니다. 그리고 제스처는 버튼 터치보다도 한층 더 빠르고 쉬운 글 작성이 가능하도록 도와 줄 겁니다.

구체적인 제스처 동작으로는 Two Tap, Swipe, Pinch를 이용하여 단락 스타일 변경이라든가, 이미지 사이즈 조정, 실행 취소, 되돌리기 등을 구현할 생각입니다.

멀티 이미지

프로알라 에디터는 싱글 이미지 업로드를 동작 방식으로 택하고 있습니다. XE에서의 멀티 업로드를 위해서 부분 개선을 하긴 했지만 순차적인 업로드 처리를 하고 있기 때문에 순수하게 멀티 이미지 업로드가 아닙니다. 이를 완벽한 멀티 업로드가 되도록 하고 또 보다 직관적이고 플랫하게 디자인을 하려고 합니다.

검색 윈도우(아카이브)

프로알라 에디터의 모든 파일 업로드 관련 플러그인은 외부의 지정 URL로 파일을 업로드 할 수 있는 API 옵션이 있습니다. 그리고 보통 외부 업로드를 하려면 해당 장소에 별도의 언어로 제작된 파일 저장 프로그램이 있어야하는데 Amazon S3 플랫폼은 별도의 제작없이도 URL을 지정하는것만으로 사용할 수 있게 되어있습니다. 하지만 XE는 이러한 방법과 다르게 contentType을 'application/json'으로 정의해야하는 등 프로알라 에디터 기본에는 없는 기능을 삽입하지 않으면 동작하지 않기에 현재는 동시에 사용하기는 어렵습니다.

저는 외부 업로드가 가능하다는 것을 착안하여 http(s) 프로토콜을 지원하는 원하는 곳 어디든 저장소(Repository)로 사용할 수 있도록 새롭게 기능을 제작하려고 합니다. 또한 위의 이미지와 같이 에디터에서 노출 시키는 방법 외에도 슬랙 어플 처럼 모바일에서는 최대한 심플하게 표시되고 쉬운 조작으로 빠르게 이미지를 삽입할 수 있는 형태로 디자인 하려고 생각하고 있습니다.

임시 저장

프로알라 에디터는 XE의 자동 저장기능을 지원할 수 있도록 구현되어 있습니다. 그리고 이 기능은 현재 XE에 사용되는 여럿 에디터에서 동작하는 방식과는 차원이 다른 방법으로 만들어져있습니다. 구체적인 동작 원리는 따로 소개하도록 하고, 프로알라 에디터의 자동 저장 기능의 방식을 임시 저장에서도 사용할 수 있도록 확장합니다. 에디터 상에서 임시 저장 아이콘을 클릭하여 활성화하면 자동 저장 처리에서 임시 저장 처리로 전환되며 저장 방식은 자동 저장기능의 원리로 동작합니다.

Figure

위 사진부터 "이미지는 컨셉 입니다."는 Figure 태그로 만들어져 있습니다. 원래 탑재 되어있었는데 조금 더 세밀하게 만들고자 현재 기능에서는 제외 되어 있습니다. 플러그인으로 따로 제작하여 버튼 클릭으로 Figure 폼을 삽입하는 방법으로 개발하려고 합니다. 그리고 Figure 영역이라는걸 확인할 수 있도록 우측에 표시되도록 생각 중 입니다. 또 Figure 안에서는 이미지 삽입이나 드래그 삽입시 단락의 이미지 사이즈를 계산해서 자동 조정되도록 Figure의 세계에서만 지원될 수 있는 기능 등을 생각 중 입니다. 물론 설명 글도 에디팅으로 입력 됩니다.

Layout

Figure와 비슷한 동작을 하는 기능으로 제작합니다. 단락을 레이아웃 구조처럼 분할 하여 글을 정리할 수 있게 합니다. 이 기능은 atlassian의 confluence 에디터에서 착안했습니다. 저희 회사에서 사용 중인 프로젝트 관리 플랫폼인데 ckeditor, tinymce와는 비교 할 수 없을 정도로 많은 기능을 가지고 있습니다. 물론 프로알라도 비교 불가합니다. atlassian은 유료 플랫폼이라서 포팅이 불가합니다.

Code Editor

에디터 상에서 직접 코드를 입력 할 수 있도록 기능을 구현하려고 합니다. 코드 에디터는 ace를 사용하려고 합니다. 프로알라 에디터는 codemirror를 플러그인으로 연동해서 소스보기에서 사용하고 있는데요. codemirror보다는 ace가 기능이 알차고 멀티 구조에서도 이점이 높아보여서 ace로 구현해보려고 합니다. 이제까지 많은 에디터의 코드 작성은 별도로 팝업을 띄우고 코드 작성 후 삽입하는 형태인데 삽입 되었을시에 일체화 되지 않고 코드 하일라이트가 표기되지 않는다던가 아예 코드가 안보이는 방법이라서 직관적이지 못했습니다. Code Highlighter 너 말하는거다. 글 작성과 코드 작성이 에디터 안에서 조화롭게 일체화 되는것을 중요한 디자인 포인트로 생각하고 개발하려고 합니다.

Link Box

에디터 본문에 특정 URL 주소를 붙여넣기하면 자동으로 요약 박스로 대체하는 기능입니다. 페이스북과 트위터에서 많이 보셨을 겁니다. 프로알라 에디터는 글 타이핑이나 붙여넣기 시에 URL 형식을 판단해서 이벤트를 호출하는 기능이 들어가 있습니다. 또 얼마전에 올린 개선 이슈를 통해 URL 판단 기능이 더욱 강화되어 있으니 정확히 URL을 판별해서 SEO를 준수하는 페이지나 특정 플랫폼의 경우에 짜여진 포멧으로 대체할 수 있도록 하고자 합니다.

@Member

At.JS 라는 서드파티 플러그인이 있습니다. 프로알라 에디터에서 사용가능한데 저는 이 플러그인을 기반으로 회원 닉네임을 바로바로 검색하는 기능을 만들려고 합니다. 깃허브 마크다운 에디터에서 착안했으며 화면에 노출되어 있는 닉네임을 우선 선출하거나 회원 DB에서 바로 검색해 가져오는 등 다양한 API 옵션도 함께 만들어 사용자가 직접 설정 할 수 있도록 하려 합니다. 이 기능을 이용하면 알림센터 모듈이 더 쓰임새 있고 사용이 쉬워질거라고 기대하고 있습니다.

Map

gmaps.js 을 이용하여 맵 삽입 기능을 제작합니다. 맵 관련 라이브러리는 많이 있는데 일단 구글맵 기반으로 제작할 수 있어야 했고 그나마 gmaps.js가 다양한 API를 가지고 있는 것 같아서 택했습니다. 국내의 맵 관련 라이브러리는 이미 확장 컴포넌트로 지금도 적용해서 사용할 수 있다고 생각되기에 프로알라 에디터로 따로 제작은 생각하고 있지 않습니다.

Chart

프로알라 에디터에서 도형 차트를 삽입할 수 있는 기능을 제작합니다. 현재 검토 중인게 Chart.js 라는 라이브러리 입니다. 대부분의 차트 라이브러리는 전문 통계를 구현하기 위해 워낙 많은 기능들이 들어가 있으나 제가 제작하고자 하는 것은 일반 사용자가 사용할 수 있는 범위에서 간편하게 삽입할 수 있는 정도로 만들려고 생각하고 있습니다. 현재는 간단한 선 그래프, 파이 그래프, 막대 그래프 정도로 시작해볼까 합니다.

에디터 스킨

마지막으로 소개 된 기능들을 바탕으로 에디터 스킨을 제작 합니다. 저는 현재 프로알라 에디터의 디자인을 마음에 들어하지 않습니다. 디자인에 관해서는 미천한 몸이지만 위지윅 에디터는 웹 페이지 요소에 일부이기 때문에 에디터 자체가 디자인을 가지게 되면 전체 디자인을 해칠 수 있다고 생각하기 때문에 너무 튀는 디자인은 피해야한다고 생각합니다. 프로알라 위지윅 에디터는 그 자체만으로 웹 빌더가 가능한 툴이기에 디자인 요소를 가지는 것은 지극히 바람직하다고 여겨지지만 XE에서의 역할은 글 작성 도구 그 이상도 그 이하도 아니기 때문에 되도록 웹 페이지의 디자인을 해치지 않는 형태로 저만의 디자인을 하려고 합니다.

제가 바라는 향후 방향은 게시판/레이아웃 스킨 제작자들이 디자인할때 프로알라 에디터가 스킨에 잘 동화 될 수 있도록 하는 것이며, 이제까지 XE용 에디터에서는 감히 접근할 엄두도 못냈던 영역을 이젠 스킨 제작자도 직접 자신의 스킨 안에서 에디터를 디자인 할 수 있도록 하게하는 것 입니다. 이렇게만 된다면 페이지의 모든 요소가 스킨 제작자의 디자인 영역이 되므로 보다 더 일체화 된 스킨을 만들 수 있을 것 입니다.

앞으로 튜토리얼 등을 통해서 디자인에 필요한 다양한 적용 방법들을 소개 할테니 많은 관심 부탁드립니다.