글쓰기 메뉴

Basecamp / Trix
리치 텍스트 에디터의 해답이 되길

브라우저 기반의 WYSIWYG 에디터들은 오늘도 전투를 치르고 있다. 최소한 20년은 진행된 전투다.


답답한건 이 전투가 시장에 대한 답을 갖고 있는 솔루션간의 전투가 아니라 Internet Explorer 5.5 시절에 Microsoft 에서 설계한 contenteditable 과 execCommand API 와의 전투라는 점이다.

여기에 더해 다른 브라우저들은 공개된 문서없이 contenteditable 속성과 execCommand 기능을 지원하며 애초에 명세없는 기능들이 각 브라우저별로 다른 방식으로 개발되어 버려 헬게이트가 열린 것이다.


물론, 충분한 수준의 브라우저 커버리지를 갖고 있는 양질의 제품이 많이 있다.


CKEditor, TinyMCE, wysihtml5Summernote, Froala, Redactor등의 제품들이 WYSIWYG 를 정리할때면 꼭 등장하는 제품들이고 아예 contenteditable 을 버리고 위키처럼 마크업 편집기를 발전시키는 진영도 있다.

하지만 마크업 편집기는 진입장벽이 분명해 관련된 경험이나 이해가 없는 일반 사용자를 대상으로 제공하기는 어렵다.


근래 모바일 환경이 빠르게 발전하면서 모바일 브라우저와 브라우저 엔진들이 빠른 속도로 업데이트되어 WYSIWYG 개발자들이 미친듯이 바빠진 것 같다. 내가 업데이트 내용을 피드로 받는 에디터는 2종에 불과하지만 근래 패치노트들을 살펴보면 iOS 브라우저 관련 버그 수정, Android, iOS webView 관련 버그 수정 등 모바일 관련 업데이트가 지속적으로 늘고 있다.


기능 추가가 아닌 버그픽스 업데이트가 잦아졌다는건 그만큼 최근 환경에 대한 버그가 증가했다는 말이다. 브라우저 기반의 에디터 제품들은 앞서 말한 것 처럼 contenteditable 과 execCommand 를 족쇄처럼 차고 있기 때문에 특정 환경에서 치명적인 문제는 대부분의 제품에 동시에 영향을 끼친다.


WYSIWYG 와 뗄 수 없는 관계에 있는 나는, 이런 상황이 발생할 때 마다 에디터들에 대한 정보를 모으고 테스트하고 HACK 이 가능한 부분이 있는지 살펴보며 좌절하고 그저 시간이 지나 관련된 문제들이 차근차근 정리되길 기다릴 뿐이다.


그러던 중 반가운 소식 하나.


Basecamp 팀에서 trix 라는 새로운 리치 텍스트 입력기를 공개했다.

contenteditable 과 execCommand 에 대한 종속성을 최소화 시켰다고 한다. 관련 내용을 정리해보면,


현재의 WYSIWYG 들은 contenteditable과 execCommand 를 둘러싼 엄청난 복잡도로 인해 일관성없는 개발을 이어갈 수 밖에 없다. Trix 는 이 문제를 피하기 위해 contenteditable 모드를 "입출력 장치"로만 사용한다.
무슨 말이냐면 contenteditable 을 통한 모든 입력을 캐치해 Trix의 Document 모델에 정리하고 이를 다시 contenteditable 에 출력하는 방식으로 동작되어 execCommand 를 전혀 사용하지 않는다는 말이다.


아! 개행복.

이론적으론 이제 IME 말고는 신경쓸게 없다는 얘기다.


Basecamp 에서 몇년전에 Wysihat 이라고 WYSIWYG 엔진을 오픈소스로 개발하던 적이 있었는데 생각보다 빠르게 개발이 중단되어 Wysihat 엔진으로 모든 에디터를 교체했던 나는 좀 많이 아팠지만 Basecamp 내부에선 더 큰 아픔을 겪고 Trix 가 나왔겠지라고 기대하고 있다.


씬디도 Trix 로 에디터를 교체하기 위해 개발을 진행하고 있으며 많은 개발자들이 Trix 에 관심을 갖고 참여해 WYSIWYG의 지리한 전투가 종식되길 기대해본다.


Trix : https://github.com/basecamp/trix

 

어디서 왔지?
다른 글들
1 1

Trix Editor 변경 작업 중단

누가 궁금할까 싶지만 에디터 변경을 예고한 적이 있고 작업을 중단했기 때문에 글을 남겨놔야지.
Trix 로 에디터 변경을 원했던 이유는 당연히 안정적인 입력을 위해서였지만 약 3일에 걸친 작업 끝에 다음과 같은 이유로 작업을 중단했다.
1. 2bytes 입력에서 몇가지 문제가 확인됨. 
- Trix 는 라인브레이커로 br 을 사용하고 div나 pre, figure 등의 블럭 엘리먼트가 들어오면 새로운 "블럭"을 만드는데 새로운 블럭의 첫 단락에서 확정적으로 자모음이 깨진다.
- Trix 는 contentEditable 을 사용해 IME 의 입력내용을 캐치하고 Trix::Document 를 생성하는데 2bytes 의 경우 한 글자를 위해 여러번의 키스트로크가 발생할 수 있기 때문에 글자의 순서가 변경되는 문제가 간혹 발생한다.
- 같은 이유로 입력된 글자를 contentEditable에 재출력할 때  다른 블럭으로 캐럿이 점프되는 경우가 있다.
2. 기존 사용하던 에디터의 안정성이 확보됐다.
- 사용 중이던 에디터가 갑자기 엄청난 숫자의 버그들을 쏟아냈으나 약 2달에 걸쳐 대부분의 버그가 수정됐다.
- 입력된 콘텐츠가 날아가는 치명적인 문제가 남았지만 원인을 찾을 수 있었고 소스 핵을 통해 해당 부분 스킵. 발생되는 사이드 이펙트는 서버단에서 저장 시 처리하도록 코드 수정.
Trix 의 개발은 계속 팔로우 하겠고 의미있는 버전업이 생기면 다시 개발을 고민해봐야겠다.
0 0

메모 - 블로거의 플랫폼 관련 아이디어

@lunamoth 님이 생각한/정리한 알찬 내용.
링크 다 확인하고 정독하려면 하루로는 힘들듯.
http://lunamoth.com/2252
0 1

영국/인도 세무관련 궁굼한 사항

영국(인도)인에게 서비스를 제공받고 지불할때 한국에서와 같이 부가세 10%와 비슷한 항목이 있는가?
0 2

seo , h1

h1태그랑 seo랑 관련이 있나여?
우리나라 사이트는 대체로  h1 > a> img 로고태그 이렇게 있는곳이 많은데
외국사이트는 걍 a 로만 잡길래여..ㅋ
1 0

파비콘 만들기

파비콘 관련해서는 소프트웨어도 많고 웹서비스도 엄청 많아서 대충 골라도 무난하게 작업되긴하더라.
그래도 근래에 몇번 유용하게 사용한 파비콘(및 아이콘) 제작 웹서비스라 Donate 는 힘들더라도 링크를 거는것으로 마음의 짐을 덜어보자.
"파비코메틱" - http://www.favicomatic.com/
0 1

와이프 펀드 대실패

아구아구! 국내 여행관련 펀드였다는데 메르스로 핵망! 6개월만 넣어놓고 뺄라고 했는데 수익이 -15%를 넘어서 해지 시 추가 수수료가 있다고.. ㅋㅋㅋ
원래 돈은 없을 때 한꺼번에 없는 경향이 있긴하지만 돈 없어 죽겄넼ㅋ ㅠ.ㅠ
1 0

수줍게 물든 참꽃이
노랗게 피어난 개나리가
흩날리는 민들레가


봄이 왔다고
세상에 봄이 왔다고 세상을 물들이기 시작했다
나풀나풀 흰나비가
오밀조밀 토끼가
지저귀는 새들이


봄이 왔다고
세상이 봄이 왔다고 세상을 노래하기 시작했다
0 0

기분 안좋으면

글쓰고 싶은듯...
공격적인 말투..
니네가 좀 잘하지.. 니네팀 진짜 문제 많어...
왜케 퇴사하는것같니... 팀원 3명 남은게 정상이냐.. 몇명이었는데.. 으이그..
정신차려 남얘기 옮기지 말고
0 0

안녕, 레이나.

친애하는 레이나.
가끔은 비가 와도 우산없이 뛰쳐나가고 싶어하는 날이있어. 그건 나에게 충동에 불과했지만 너에게는 현실가능한 것이였지. 차갑게 내리는 비에도 너는 우산도 없이 맨발로 뛰쳐 나갔어.
그래 너의 발끝이 붉게 물들었다가 이내 하얗게 되는 것, 밝은 갈색의 머리카락이 비에 젖어들며 검게 변하는 것, 하얀 원피스가 곧 너의 살결을 내비치도록 젖어가는 것.
그것들 중에서 나는 어느 하나 놓치지 않았어.
사랑하는 레이나.
너의 웃음소리가 빗속에 잦아드며 골목을 울릴때, 그때 내 마음을 너의 비가 톡톡 두드렸단다. 너는 멍하니 서있는 나를 향해 뛰어오며 젖은 머리를 귀뒤로 넘겼지. 그리고 입김을 뿜는 붉은 입술로 속삭였어.
나만의 레이나.
너의 붉은 입술에 따라 나도 우산 없이 너만의 골목에 접어들었고, 너는 나에게 잊을 수 없는 비오는 날을 안겨줬어.
나만의 레이나, 나만의 레이나.
비가 이세상을 잠식하고 홍수로 만들어 버릴지언정, 그 어느 한방울의 비도 미워하지 않으리, 사랑하며 기꺼이 온몸으로 세차게 맞으리.