in 웹 디자인, 추천/리뷰

Xhtml과 CSS 관련 편집기의 성능 비교-2

Xin editor의 편리한 기능인 구조 보기 워드프레스가 1.5에서 1.5.1을 거쳐 1.5.1.1로 업데이트 되면서 꽤 많은 변화가 있었던 것 같다. 글을 쓸때, 빠른 태그(Quick Tag) 버튼 중에서 page 버튼이 사라져버렸다. 원래 이 글은 page 기능을 이용해서 3 페이지로 분리시킬 예정이었는데, 어쩔 수 없이 글을 나눠 쓰게 된다. 아무래도 나처럼 긴글을 읽지 않는 사람들을 위한 배려랄까? ㅠ.ㅠ

좌측의 이미지는 Xin-editor의 스크린 샷으로 마치 테터툴의 카테고리 기능처럼 +, – 버튼을 이용해서 웹페이지의 구조를 파악할 수 있다. (이미지를 클릭하면 Xin-editor 공식 홈페이지로 이동) 앞 글에 이어서 내 컴퓨터에 설치되어 있는 Xhtml과 CSS 관련 프로그램들의 기능들을 좀 더 세부적으로 비교해 본다.

  • 로딩속도 :
    드림위버나 고라이브와 같은 수백Mb의 무거운 프로그램에 비하면, 위에 열거된 5개의 프로그램의 로딩속도는 무척 가볍다. 현재 사용하고 있는 팬티엄4 3.0에서는 로딩속도의 차이를 거의 느끼지 못할 정도다. 하지만, 파이어폭스의 플러그인인 view source with를 사용해서 웹페이지를 분석할 경우 Xin-editor가 가장 빠름을 알 수 있다.
  • Xhtml 코드 편집 :
    웹편집기에서 Html 코드 편집 기능은 당연하다. 그럼에도 불구하고 굳이 Html이 아닌 Xhtml 코드 편집 기능에 대해서 비교한 이유는 얼마전에 일몰님이 작성한 내홈피는 웹표준. 5가지부터 시작하기. 라는 글의 영향일 것이다.
  • Xhtml 이지윅(WYSIWYG) 편집 :
    대표적인 이지윅 웹편집기인 드림위버와 고라이브를 제외하고(나모는.. 미안하다)도 굳이 이지윅 편집 기능을 거론한 이유는 핸드코딩만으로 웹페이지를 제작해야 한다는 일부 생각에 나는 반대의 입장이기 때문이다. 또한 모질라 Gecko엔진을 기반으로 한 무료 웹에디터인 Nvu를 소개하고 싶어서이다.
  • CSS 코드 편집 :
    이미 대세는 CSS다라는 여러 관련 글들을 블로그에 써왔기에 Xhtml 코드 편집과 별도로 분리했다. php, asp 전문 코드 편집기가 존재하는 것처럼 css 전문 코드 편집기의 필요성을 제기하고 싶었다.
  • CSS 이지윅 편집 :
    아직까진 필요성을 거의 못느끼지만, CSS를 더욱 구조화하기 위해서는 반드시 필요한 부분이라고 생각한다. 참고로 내 wp 블로그의 index.php 파일의 크기는 1.6kb이지만 style.css 파일의 크기는 무려 10배가 넘는 18.2kb이다. 이 점을 생각할때 css를 분리시키기 위해서 필요한 기능일 것이다.
  • 구문강조 :
    텍스트에디터에서 구문강조는 필수 기능일 것이다. 이지윅 에디터인 Nvu에서는 코드 보기를 가급적 피하는 게 좋을 듯 싶고, Xhtml 전문 에디터인 Xin editor는 유일하게 XML 구문강조 기능을 지원하지만, 아쉽게도 PHP나 ASP는 지원하지 않는다.
  • 코드힌트 :
    텍스트 에디터가 이지윅 에디터만큼 편리할 수 있는 기능중에 하나가 바로 코드힌트 기능일 것이다. 내가 드림위버에서 헤어나오지 못하는 이유도 ”

  • 태그완성 :
    대부분의 웹용 텍스트 에디터에서 지원하는 기능이다. “>”만 입력하면 자동으로 태그가 닫힌다. 드림위버나 TopStly에서 지원하는 태그완성 기능보다 Xin-editor의 태그완성 기능이 좀 더 편리하다.
  • 구조보기 :
    웹페이지의 구조를 파악할 수 있는 기능으로, 프로그램마다 다양한 형식으로 지원된다. Nvu의 Html tag 보기 형식이 있는가 하면, Xin-edtor의 펼침메뉴 형식도 있다. 물론, Xin-editor가 훨씬 편리하다. 이 필수적인 기능을 드림위버가 지원하지 않는 이유를 모르겠다.
  • 미리보기 :
    모질라 Gecko엔진을 사용한 Nvu를 제외하고 대부분의 웹에디터가 IE 기반 엔진으로 미리보기 기능을 수행한다. 그러나 TopStyle은 플러그인을 통해서 Gecko 엔진으로 미리보기를 지원하고 있다. 특히 IE, FF에서 동시에 미리보기를 할 수 있는 강력한 기능이 있다.
  • 브라우저 미리보기 :
    컴퓨터에 다양한 브라우저가 미리 설치됐을 때 유용한 기능이다. 대부분 IE, FF 기반 엔진의 2개 브라우저에서 미리보기를 할 수 있지만, StyleMaster는 IE, Opera, NN, Mozila, FF의 5개 브라우저에서 미리보기를 할 수 있다.
  • FTP 지원 :
    별도의 Ftp 전용 프로그램을 필요로 하지 않고, 원격 Ftp에 접속하여 파일을 업로드 하거나 수정할 수 있는 기능이다. 무척 효율적인 기능임에 불구하고, 파일을 잘못 덮어씌는 실수를 유발할 수 있기에 팀작업을 할때는 지양되는 기능이다. 드림위버에서는 check in 기능으로, 고라이브에서는 version cue 기능으로 이런 문제들을 방지하고 있다.
  • 구문 검사(Validate) 기능 :
    Html, Xhtml, CSS 등의 문법을 검사해주는 기능이다. Html-trasitonal 문서의 경우 웬만한 문법 오류들은 IE가 자동으로 해석해주지만, FF나 다른 브라우저는 그렇지 않다. W3C와 같은 여러 웹사이트들에서 구문검사를 해결해주고 있지만, 프로그램 자체적으로 오류를 검사하고 대안을 제시해주는 기능은 향후 웹에디터의 필수 기능이 될 것이다.

이 외에도 다양한 기능들이 있지만, 주로 사용하거나 눈에 띄는 기능들 위주로 비교해 봤다. 생각보다 비교하는데 시간이 많이 걸렸지만, 꽤 재미있는 결과가 나왔다. 해석하기 나름이겠지만, 내 생각에 Xhtml 편집기로는 Xin-Editor가 가장 편리하고, CSS 편집기로는 TopStyle가 가장 편리한 것 같다.

나는 TopStyle 예찬론에 대한 몇몇 글들을 블로그에 작성했었다. 한글 입력 문제만 해결된다면(제작사 측에선 검토한 적 없다고 함), 드림위버나 고라이브에 비교해도 손색이 없는 걸작 프로그램이다. 또한, Xin-editor가 보여주는 구조보기의 기능은 동급대비 프로그램 중에서 최강의 기능인 것 같다. (고라이브에도 있는 기능이지만, 효율성이 떨어진다.)

여러개의 작은 프로그램을 동시에 구동시키는 것과 한개의 커다란 프로그램에서 한꺼번에 구동시키는 부분에 대해서는 좀 더 고민해 봐야 겠다. 인간의 사고가 하나에 일에 집중할 때와 여러개로 분산시키는 부분에 대해서 효율성이야 두말할 필요가 없겠지만, 나날이 발전해가는 컴퓨터의 성능을 생각해보면 쉽게 결론을 내리기 어렵다. 또한 웹페이지 개발을 전문가만이 아닌 많은 사람들이 쉽게 할 수 있어야 한다는 주관적인 생각이 있기에 이지윅 에디터의 필요성도 간과할 수 만은 없다.

1달 반이란 블로거 생활중에 가장 긴 글을 썼다. 사실, 이 글을 쓰게 된 motive는 얼마전에 일몰님과 msn 대화 중에 주로 사용하는 웹에디터에 대한 대화내용이었다. 일몰님은 주로 에디트 플러스를 이용해서 웹페이지를 제작한다고 하는데, 나의 경우는 텍스트에디터를 metadata 작성이나 javascript 삽입과 같은 극히 제한적인 범위에서만 사용하기 때문이다.

최근 xhtml과 css 전문 프로그램들을 사용하게 되면서 그동안 드림위버가 최고다라는 믿음에 조금씩 금이 가고 있다. Macromedia사의 Studio MX 2005 시리즈가 늦어도 올 가을에는 출시될거라는 소문이 무성하기에 일단은 기다려 보련다. 어도베에서 매크로미디어사를 인수한 점을 고려해서 드림위버 MX 2005가 나에게 아무런 흥미를 주지 못할 점도 염두해야 겠다.

댓글 남기기

11 Comments

  1. 앗. 제가 msn으로 답글 안남긴 거 따졌더니만 바로 남겨주셨군요. 저도 지윤님 블로그에 답글 남길께요~ ㅎㅎㅎ

    Rapid CSS Editor라.. 이녀석의 사용기도 조만간 올리겠습니다. 한가한 제가 이런 짓을 해야지 누가 하겠습니까? ㅠ.ㅠ

  2. 문서 작성기로 오픈소스 프로그램인 Notepad++도 추천합니다.
    여러가지 언어의 구문 강조가 지원되며 구조보기도 지원 합니다.

  3. 앗. Notepad++도 있었군요. 윈도우에서 제공하는 노트패드는 txt 파일을 확인할 때 유용하게 사용하곤했었는데, 한번 확인해봐야 겠습니다.

    좋은 정보주셔서 감사합니다. ^^

  4. 흠.. 후니님 글을 보니까 저도 맥용 XHTML/CSS 편집기에 대해 정리한 글을 올려야 할 것 같네요. 제 개인적인 생각으로는 세계적인 웹 디자이너들이 대부분 맥을 사용하기 때문에 (뭐, 이런 이유가 아닐 수도 있습니다 ㅡㅡ;) 맥용 텍스트 편집기의 종류도 다양하고 가격도 저렴한 것 같더군요.

    아무튼 좋은 윈도우용 편집기도 일반 사람들이 잘 모르는데, 좋은 맥용 편집기는 (물론 한국 맥 사용자가 극히 적기는 하지만) 알리가 만무할 것 같네요.

  5. 안녕하세요 ^^;
    블로그 둘러보다 우연하게 방문했습니다.
    xhtml과 css에 관한 글이 눈에 띄어서 읽어보고 글 댓글 달게 되네요 ^^

    음… 전 홈페이지를 utf-8로 운영하고 있습니다..
    그덕에 유니코드의 지원이 미비한 에디터는 피하게 되더군요 ;;
    혹시나 유니코드 웹문서를 다루게 되실분은 EdEditor를 써보시길 추천 합니다@_@
    ( 전 이걸로 html, css코딩 다하고 있죠 ;; )

  6. ☆~님 만나서 반갑습니다. 정말 홈페이지를 utf-8로 운영중이더군요. 대단합니다. 저는 utf-8을 사용하고 싶어서 홈페이지에서 워드프레스 블로그로 옮겼답니다. ^^;

    EdEditor라.. 한번 사용해볼께요~ ☆님 홈페이지도 종종 놀러가겠습니다. 🙂

  7. 아.. 홈페이지의 카운터 레퍼를 보다 다시 와서 제 글을 보니 오타가 있군요 ㅠ.ㅠ
    EdEditor이 아닌 EmEditor인데 말이죠 ;;
    늦었지만 이렇게 정정합니다 ㅠ.ㅠ