글쓰기 메뉴
Blank

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

 

어디서 왔지?
[["www.google.co.kr", 124], ["synd.kr", 27], ["yandex.ru", 2], ["www.google.nl", 1], ["www.naver.com", 1], ["www.traackr.com", 1], ["www.google.co.jp", 1], ["unknown", 1139], ["www.google.com", 10], ["t.co", 4], ["lm.facebook.com", 2], ["www.bing.com", 1]]
다른 글들
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 5
Square

한글날 (569돌, 2015년) 기념 폰트 다운로드, 배포 관련 정보

http://www.asan.go.kr/font

아산시에서 제 569돌 한글날을 기념하며 무려 "성웅 이순신장군의 웅혼한 서체!" 를 배포하고 있다.
- 개인,학교,공공기관 등 누구나
- 영상, 인쇄물, 웹, 모바일 어느 곳이나
http://dnomade.com/web/m_page.php?ps_pname=print_datawork04

디노마드에서 3개월간 산돌구름을 사용할 수 있는 쿠폰코드를 제공하고 있다.
산돌구름의 신규회원만을 대상으로 진행되며 탈퇴 후 재가입해도 안된다고...
- 상업용도 사용가능
- 모바일 불가 (PC Only)
- 원본 폰트 사용 불가 (웹폰트 X, 어플리케이션 삽입 X)
- 자세한 라이센스는 산돌구름에 문의하거나 링크 참고
http://m.cast.yanolja.com/detail/2171

야놀자에서는 싸인펜으로 쓴 손글씨를 모티브로 제작한 야체를 무료 배포하고 있다. 
- 개인, 기업 사용자 모두
- 언급은 없으나 광고에 활용하라는 설명은 인쇄물에도 쓸 수 있는게 아닐까?
- 하지만 라이센스 확인은 필수
http://www.spoqa-han-sans.com

구글과 어도비가 합작으로 만든 Noto Sans 를 커스터마이징한 폰트로 한국어, 영어, 일본어 포함.
깃허브를 통해 웹폰트도 서빙하고 있고 서브셋 용량이 414KB 라고하니 여러모로 활용도가 높을 듯.
이건 링크타고 소개페이지 꼭 보셔야함.
폰트에 대한 호불호를 떠나 스포카가 얼마나 노력했는지 느껴짐.
- 라이센스에 대한 정확한 언급이 없으나 Noto Sans 의 라이센스인 Apache License 2.0 이 아닐까 짐작. 문의 필요.
- OFL 이라고 페이지 하단에 링크 있네요
http://goo.gl/tzQpJn
산돌구름 스튜던트 6개월.
산돌구름 자체 이벤트나 디노마드 이벤트는 3개월인데 비해 기간이 2배! (그런데 스튜던트!)
대학생 필수 앱 에브리타임을 설치하고 한글날 배너를 클릭하면 된다고 함.
http://www.busanbadattf.com/

부산대 학생 남승우씨(후.. 훈남이네)가 부산체를 수정 개발한 폰트
머니투데이의 기사에 따르면 하루 10~20자씩 27개월간 개발했다고. (짝짝짝!)
- 개인, 기업 사용가능
- OFL 1.1 (오픈 폰트 라이센스)
http://googledevkr.blogspot.kr/2015/10/noto.html

Noto Sans KR 의 웹폰트가 드디어 Early Access 에서 제공됩니다.
한글날은 조금 지났지만 "훈민정음 반포 569돌을 맞이해서 자그마한 선물을 마련했습니다." 라고 밝히고 있어 이 포스팅도 업데이트 합니다.
0 1

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

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

seo , h1

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

파비콘 만들기

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

와이프 펀드 대실패

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

장애공지 이렇게 대충도 쓰는구나

홈택스 전자 세금계산서 발급이 현재 중단되어 있다.
영업시간에 중단된 것도 불편해죽겠는데 장애 공지 메시지에 숨이 턱! 막힌다.
홈택스 공지사항에는 장애관련 공지도 없고, 원활하지 않다는건 무슨 말인지도 모르겠고 언제부터 안된건지, 언제쯤 될건지에 대한 얘기는 하나도 없고 그냥 안되니까 이따하라네...
아우 짜증나!
2 0

디지털오션은 사랑이지

"바나나가 왜 멸종위기 과일인가요?" 따위의 질문은 네이버 지식in 이 꽉 잡고 있고,
"OpenCV로 뒤집어진 얼굴이 인식이 안돼요" 따위의 질문은 Stackoverflow 형님이 꽉 잡고 계시지.
그리고 "우분투 14.04에 Elasticsearch, Logstash, Kibana 설치" 따위의 문서 영역은 디지털오션 커뮤니티가 조만간 다 잡수시지 않을까 싶네.
지난 1년동안 서버에 관련된 문제나 새로운 시도들 중 디지털오션 문서를 통해 해결한 비율이 60%는 넘는 것 같아. 그렇게 계속 보다보니까 엊그제는 뉴스레터도 가입하게 됐고.. 생각해보면 서버 운영 및 설정 관련 문서와 튜토리얼, 커뮤니티야 말로 클라우드 호스팅 업체가 가질 수 있는 가장 강력한 경쟁력인 것 같아. 
새삼스러운 생각도 아니지. 커머스가 커뮤니티를 갖는다는거 아주 이상적인 그림이자나. 단지 현실에서 그렇게 되기가 생각보다 드럽게 힘들다는 문제가 있는건데.. 디지털오션이 어찌 그리 잘 해내고 있는지 좀 공부하고 배워서 씬디에 써먹어야겠어!
1 1

자바스크립트 - 파일크기 bytes, MB, GB 등으로 표현하기 + 쉼표로 천 단위 끊어서 표시하기

숫자와 관련된 Helper 들 대부분 human readable 이라고 하는데 이거 한국말로 제목쓰려니까 도무지 뭐라고 해야하는지 모르겠네. 인간친화적? 사람이 읽을 수 있는? 사람을 위한? 모르겠음..
아무튼 파일사이즈
그리고 천단위로 쉼표 넣기
뭐, 여기저기 더 좋은 코드들도 널려있지만, 씬디에 사용된 코드들을 그때그때 정리하는 의미로 등록 중.
1 2

두려움

일어나지 않은 일을 미리 걱정하느라 잠못자고 있다
원래 겁많고 예민한 난 나의 보물들이 세상에 나온 후
더욱 강인해져야 함에도 불구하고 갈수록 나약함과
두려움이 커지고 있다
아이들과 관련된거면 더더욱

행여나 잘못될까 노심초사 안절부절
최악의 상황도 생각한다

이런게 날 더 미치게한다
꼬리에 꼬리를물고 밤이되면 왜 더 잡생각에 사로잡히는지 모르겠다
다 떨치고 잠을 청하다가도 생각. 생각생각. 생각생각생각생각생각...
이와중에 둘째도 한몫한다 
요새들어 자꾸깬다 운다 나도울고싶다 아니 자고싶다
그냥 누군가 다 괜찮다고 아무걱정하지말라고
예민해서 그런거라고 또 문제있음 어떠냐며 
해결할수있고 걱정할것없다고 내 탓이 아니라며
마음 푹놓고 자라고 토닥여준다면
잠이 올지도 모르겠다
1 1

Encoding
UndefinedConversionError

URL 에 한글 제목을 추가한 뒤로 페이스북 공유 시 500 Internal error 가 자꾸 발생하는거지. Facebook 디버거에서 해당 URL 복사해서 스크랩해보면 문제없이 긁어지고... 인코딩에러는 Ruby 1.9 때 지겹게 겪었고 이젠 관련 에러를 만나기 힘들정도로 두루두루 안정적인 상태인데 이렇게 불현듯 재회.
아무튼 고치긴 고쳐야지. 에러로그 첫 5줄을 보니 이렇더군.
구글에 대고 이렇게 검색 "active support json encode UndefinedConversionError"
검색결과 첫 글이 레일즈 이슈 티켓. 올커니 제대로군! 클릭하고 살펴보니 activesupport-json_encoder gem gem 을 설치하라더군
설치했더니 만사 OK!
이거 작년 Rails 4.1.0 부터 있었던 이슈인데 난 왜 오늘에야 만났을까...