HTML 에디터 전쟁: 당신은 어떤 에디터를 사용하는가?

Woorkup.com에서 지난 10월 16일 HTML 에디터 사용자 조사를 실시한 결과를 발표했습니다.

전체적으로 볼 때 Coda와 Dreamweaver, Notepad++ 가 약 20%씩 차지하고 있는 것을 알 수 있었구요. 맥 사용자들은 대체로 Coda를 사용하고, 윈도우 사용자들은 Notepad++를 이용하고 있었다고 합니다.  Dreamweaver는 맥과 윈도우 모두에서 두루 나타난것 같습니다.

HTML Editors Distribution

다재다능한 마크업 에디터 markItUp!

markItUp은 게시판 등에서 주로 활용하는 WYSIWYG 형태의 웹 에디터는 아닙니다. HTML을 비롯해, Markdown, Textile, Wiki Syntax, Markdown, BBcode 등 다양한 형태의 마크업으로 문서를 작성할 수 있도록 기능을 갖춘 솔루션입니다.

markItUp

markItUp은 jQuery를 사용하였고, 겸손한 자바스크립트(unobtrusive javascript)로 구현되어 있습니다. 자바스크립트를 사용할 수 없는 경우에도 기본 텍스트박스 영역이 제공되어 최소한의 기능을 이용할 수 있으며, 스타일스트가 제거된 경우에도 각각의 기능을 그대로 이용할 수 있습니다. 상단에 배치된 아이콘 메뉴들은 각각 접근키를 가지고 있어 단축키를 이용하여 쉽고, 편리하게 마크업을 할 수 있도록 배려되어 있는 것도 특징입니다.

markItUp의 장점은 뭐니뭐니해도 다양한 마크업 셋과 확장 기능에 있습니다. HTML 뿐만 아니라 여러 위키 엔진과 블로그 등 CMS에서 사용되고 있는 Markdown, Textile, Wiki Syntax, Markdown, BBcode 등을 얼마든지 추가하여 사용할 수 있습니다. 워드프레스와 드루팔과 같은 인기 CMS에 맞추어진 플러그인도 함께 제공중이며, MacOSX 스킨과 같은 여러 스킨도 지원하고 있습니다. 이 강력한 마크업 에디터가 오픈 소스라는 점 또한 매우 매력적인 사실입니다.

거의 모든 국내 웹사이트가 WYSIWYG형태의 웹에디터를 기본 에디터로 사용하고 있고, 사용성이 높기 때문에 WYSIWYG를 지원하지 않는 markItUp이 다소 아쉽기는 하지만, 웹에서의 HTML 마크업 에디터나 강력한 위키용 에디터 등을 원하시는 분들께는 아주 멋진 솔루션이지 않나 싶다.

가장 많이 사용하는 에디터 투표해주세요

클리어보스에서 UI개발자, 웹퍼블리셔분들이 가장 많이 사용하고 있는 에디터가 무엇인지 알아보는 투표를 진행하고 있습니다.

가장 많이 사용하는 에디터 투표

나를 즐겁게 하는 에디터! Espresso!!

바탕화면이 투명하게 비치는 Espresso

맥을 사용하면서 Editplus를 버리고 새로운 에디터들을 사용해 보기 시작했습니다. 처음에는 맥과 윈도우 모두 호환 가능한 Aptana를 주로 사용했다가 그 유명한 CODA와 TextMate를 사용해 보기도 했습니다. 최신의 에디터들은 그 어떤 제품을 사용하더라도 특별히 나무랄데 없이 훌륭했고 멋졌습니다. 특히 CODA는 명불허전이더군요. 기타 다른 에디터들에 비해서 상대적으로 높은 가격과 사용할 수록 굼뜨게 느껴지는 퍼포먼스를 제외하면 미려한 디자인과 충실한 에디팅 기능에 부가 기능들까지! 윈도우에 이런 에디터가 없다는게 참으로 안탑갑게 느껴질 정도였습니다. 한동안 저의 주력 에디터가 되기에 무리함이 없었죠. 하지만 작업량이 늘어남에 따라서 CODA는 다소 무겁다라는 느낌을 주기 시작하더군요. 코드양이 늘어날 수록 코드 하이라이팅을 처리하는데 애를 쓰는 것이 늑겨질 정도였습니다. 그러다가 일전에 친구가 알려준 Espresso라는 에디터를 다시 사용해 보게 되었는데 같은 파일을 열고, 작업하는데 훨씬 가볍게 작동하더군요.

Espresso는 CODA만큼 미려한 UI를 제공하고 있습니다. 오히려 테마 기능 쪽에서는 조금 더 예쁘게 느껴지더군요. 특히 에디터 바닥을 투명하게 처리할 수 있어 살짝 비춰지는 바탕하면이 인상적입니다. 전 개인적으로 결혼식 사진을 바탕화면으로 두었는데 웹딩드레스를 입고 있는 아내의 모습을 실루엣처럼 볼 수 있어서 좋았습니다.(투명하지 않은 CODA보다도 느리지 않았습니다.)

Theme를 직접 수정할 수

Espresso는 CSS문법으로 테마를 정의할 수 있습니다.

Espresso는 위 그림과 같이 CSS 문법을 이용해서 테마를 정의할 수 있습니다. 배경 속성의 마지막 값으로 '0.8'을 지정함으로서 투명도를 조절할 수도 있었습니다.

또 한가지 Espresso만의 독특한 코딩 방법이 있는데요. HTML 마크업시 태그를 구성하는 꺽쇠를 생략할 수 있다는 점입니다.

태그의 꺽쇠 표시를 생략했다.

Control + ,(콤마) 키를 누르면 꺽쇠를 자동으로 생성하면서 태그를 완성해 준다.

위 그림과 같이 Espresso는 태그를 구성하는 꺽쇠를 생략한채로 마크업을 할 수 있습니다. 태그명과클래스명, 그리고 ID값을 위와 같이 이어 붙인 후 Control + , (콤마)키를 눌러주면 자동으로 꺽쇠와 닫는 태그를 생성하여 요소를 완성시켜 줍니다. 이 때 클래스는 몇 개든 이어서 붙일 수 있으며 ID와의 순서는 상관이 없습니다. 처음에는 조금 낯선 방법이었지만 조금씩 손에 익으면서 확실히 평균보다 빠른 마크업시간을 가질 수 있었습니다.

이 외에도 문자열 목록에 <LI> 태그를 자동으로 생성해주거나, <A>, <P> 태그 등을 자동 완성 시켜주는 단축키들이 제공되고 있어 HTML을 마크업하는데 편리함을 주고 있습니다.

CODA나 Aptana에서 지원하는 버전관리시스템(SVN 등)은 지원하지 않고 있고, 다소 불편한 화면 분할(Split) 기능의 미지원은 아쉬운 부분으로 느껴지지만 반대로 CODA에서는 코드 접기 기능(Code Fold/Unfold)을 지원하지 않고 있어서 서로 아쉽기는 마찬가지였던것 같습니다.

개인적으로는 에디터 자체는 가볍고 빠른 것이 좋습니다. 거기에 예쁘기까지 하면 나쁠것이 없을 것 같았습니다. 딱 필요한 기능들만 갖추고 예쁘기까지 하면 지루하게 느껴질지 모를 이 작업이 조금은 유쾌해지지 않을까 하여 Espresso라는 에디터를 한 번 소개해 드렸습니다.