(x)HTML + CSS 에디터인 TopStyle의 개발이 재개됐네요.(via. Rob Cherny) TopStyle은 환상적인 CSS Sweeper 기능을 보유하고 있음에도 불구하고, 한글과 같은 2바이트 언어를 지원하지 않아서 사용하기 곤란했던 프로그램입니다. 또한 오랫동안 업그레이드 없이 정체되면서 많은 사용자를 잃어왔죠. 이와 달리 DreamWeaver와 Aptana는 꾸준히 업그레이드하면서 사용자의 호응을 얻었습니다.

TopStyle을 개발한 Nick Posts은 NewsGator Technologies의 대표입니다. 그는 Macromedia(현재는 Adobe)에 인수된 HomeSite의 개발자로 유명하죠. RSS 리더인 FeedDemon과 (x)HTML + CSS 에디터인 TopStyle를 연이어 개발하면서 최고의 찬사를 받아온 그였지만, 최근에 개발 활동이 주춤했었습니다.

저의 지난 글에서 밝혔듯이, 좋은 도구를 사용하면 업무 효율을 향상시킬 수 있습니다. TopStyle 3.5의 새로운 모습을 Flash로 확인해보세요. CSS 최강의 편집기가 갖춰야할 기능이 무엇인지 확인하실 수 있습니다. 무거운 DreamWeaver, Aptana와 달리 가벼우면서도 환상적인 (x)HTML + CSS 편집 기능을 갖춘 TopStyle3.5가 벌써부터 기대됩니다.

나는 문서 공유 표준으로써 HTML이 채택되는 날이 빨리 왔으면 좋겠다.

많은 사람들이 문서 교환의 표준 형식으로 PDF를, 문서 제작의 표준 형식으로써 DOC를(국내 관공서에선 HWP) 꼽곤 하는데, 이들 형식들에 비해서 HTML이 갖는 장점은 수만배에 이른다. HTML은 그 어떤 문서형식보다 제작하기도 쉽고, 볼 수 있는 방법도 다양하며, 궁극적으로 웹이라는 공간을 통해서 교환/재생산될 수 있는 장점이 있다.

아직도 몇몇 사람들이 ‘HTML은 하드코딩(hard-cording, hand-cording)으로 만들어야 한다’고 말을 한다. 정말 웃기지도 않은 소리다. 그들은 HTML을 문서로써, 정보로써, 콘텐츠로써 전혀 인식하지 않고 있다. 웹과 HTML의 가치에 대해서는 전혀 관심도, 고민도 없이 기계적으로 코드에만 집착하고 있다. 그렇게 해서 어떻게 정보의 생산과 분배와 재생산의 장인 웹을 보다 가치있게 만들어 갈 수 있을까?

PDF, DOC, HWP 문서를 텍스트 에디터로 작성하고, 수정해야 할까? 물론 그렇게 작성할 수도 있겠지만, 나는 절대 그렇게 안한다. 그 시간에 차라리 콘텐츠에 좀 더 집중해서 보다 가치있는 문서를 만드는 것이 바람직하다고 생각한다. HTML도 마찬가지다. 우리가 만드는 것은 코드가 아니라 콘텐츠라는 점을 잊지 말아야 한다.

(꼬릿말) 이런 논쟁이 사라지기 위해선, 현재의 HTML 저작도구도 많은 점이 개선돼야 한다. HTML을 만드는 사람들이 이를 요구하지 않으면 그 누구도 요구할수 없다. “우리 HTML 만드는 거 너무 힘들어요! 버튼 몇번 클릭해도, 구조적이면서 아름다운 문서를 만들 수 있도록 웹 콘텐츠 저작도구를 개선해주세요!”라고 데모 좀 하자.

오픈소스 웹에디터인 Aptana의 베타 버전이 나왔습니다. 10분 동안 웹 문서를 만든 소감으로는 “드림위버보다 좋으면 좋지, 나쁘진 않다”입니다.

여기저기서 드림위버를 대체할 정도로 멋진 넘이라고 칭찬이 자자합니다. 한 번 테스트해 보세요. 현재 드림위버 8에 없는 기능들도 대부분 사용할 수 있습니다. 물론 그동안 텍스트 에디터를 사용했던 분이라면 더욱 좋아하시겠죠.

일단 퇴근 후, 집에서 자세히 테스트하렵니다. 왠지.. 웹 저작 도구의 “괴물”이 나타난 느낌입니다. ㅎㅎ

zoundry의 Blog Writer를 이용해서 블로그에 포스팅하고 있다. 솔직히 워드프레스 2.0의 TinyMCE 이지웍에디터가 맘에 안들기 때문이다.

대체 포스팅 에디터를 고르고 있던 중에 루나님의 글을 확인하고, 테스트 중임.

워드프레스 메인 개발자 중 한명인 Matt가 자신의 블로그를 통해서 워드프레스 1.6에 이지웍 에디터(WYSIWYG Editor)가 추가된다고 공식적으로 발표했다. (관련 글 보기)

물론 현재의 워드프레스 1.5x 버전에서도 플러그인을 통해서 이지웍 에디터를 사용할 수는 있지만, 매번 다른 블로그 툴과의 비교 항목 중 하나이면서, 워드프레스의 약점으로 지적돼 온 이지윅 에디터를 워드프레스 자체에 추가한다고 한다. (사용 유무를 선택할 수 있는 체크박스가 함께 제공됨)

사실, 나는 이런 류의 이지웍 에디터가 불필요한 태그를 만들고, 외부 문서형 CSS가 아닌 인라인 CSS를 만들기 때문에 결과적으로 사이트 전체의 통일성을 해치는 점이 싫었다. 그보다는 JS를 통한 빠른태그(Quick Tag) 버튼을 추가/수정해서 사용하는 것을 권하는 편이었다.

하지만 이지웍 에디터에는 빠른태그 버튼 추가만으로 해결하기 어려운 기능들이 다수 포함되어 있다. 또한 단순히 블로그에 글을 작성하고 꾸미는 것을 좋아하는 사용자에게는 어쩌면 필수적인 아이템일 것이다.

이지웍 에디터용 CSS 파일를 별도로 제작한다면, 사이트 전체적인 통일성 향상을 기대할 수 있을 것이며, 일반(초보) 사용자들의 많은 사랑을 받을 수 있을 것 같다.

특히, TinyMCE라는 Javascrpit를 이용해서 만든 이지웍 에디터는 무척 맘에 든다. 워드프레스 1.6 버전에서는 AJAX를 이용해서 관리자 화면을 꾸민다고 하는데, 그 결과가 어떤 것일지 사뭇 기대된다.

워드프레스 1.6 버전에 추가되는 내용들 확인하기
TinyMCE 데모 테스트하기

워드프레스가 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가 나에게 아무런 흥미를 주지 못할 점도 염두해야 겠다.

나는 오랫동안 웹페이지를 제작할 때 이지윅(WYSIWYG)에디터인 드림위버를 주 편집기로, 텍스트에디터인 에디트플러스를 보조 편집기로 사용해 왔다. 올해 들어서야 XHTML과 CSS에 관심을 갖게 되면서 CSS 전용 에디터인 Top Style, Style Master와 XHTML 전용 에디터인 Xin editor 등을 사용하고 있다. 이러한 전용 에디터들의 경우 사용도 쉽고, 때때로 이지윅에디터보다 강력한 기능들을 보여주기도 한다.

현재 내가 사용중인 XHTML과 CSS 관련 편집기들의 각 성능들을 비교해봤다. 드림위버는 세계에서 가장 많은 사랑을 받는 웹에디터이기에 자칫 나의 주관적인 평가가 잘못된 인식을 심어 줄 수 있기에 비교 대상에서 제외했으며, 고라이브는 이번에 CS2로 버전업 전까지 악평을 너무 많이 받았고 나의 테스트 기간이 짧았기에 비교 대상에서 제외했다. 또한 쿠키님이 소개해준 CSSedit는 맥 전용이라 테스트할 수 없었다. ㅜ.ㅜ

좀 더 자세한 설명은 2편에서 이어집니다. ^o^

최근 Adobe CS2 제품군들이 발표됐습니다. 많은 뉴스나 블로거의 글들을 통해서 Photoshop CS2나 Illustrator CS2의 리뷰나 사용기가 올라왔지만, 역시나 Golive CS2는 찬밥이더군요. 아무래도 이전 버전인 Golive CS가 국내에서 이지윅에디터인 드림위버나 나모는 커녕 텍스트에디터인 에디트플러스보다 찬밥신세였기 때문일 겁니다.

저도 Golive CS에 실망이 컸던 관계로 사용을 미루다가 Adobe 공식 홈페이지에 소개된 Golive CS2의 기능을 보고, 이 무겁고 느린 프로그램이 과연 사용자들에게 호소력이 있을지 시험해 보고 싶어서 일단 설치해보았습니다.

Adobe 공식 홈페이지에 소개된 Golive CS2의 새로운 모습 :

• Enhanced live rendering
• Simple visual tools to build and edit CSS-based pages
• Visual CSS authoring for mobile devices
• Visual SVG-t inspection and authoring for mobile
• Total site management
• Complete development environment for OMA, W3C, and 3GPP standards
• Collaborative asset management
• Quick Start developer mode
• Automated favicon creation
• Enhanced InDesign Package for GoLive

Golive CS2의 새로운 점 첫째가 CSS 기반 XHTML 웹페이지 제작이고, 둘째가 모바일 전용 기능 강화입니다. 조만간 웹페이지가 CSS기반 XHTML 형식으로 변할 것이고, 모바일용 웹페이지 또한 중요해질 것이라고 Adobe는 확신하고 있기 때문입니다.

또한 Photoshop과 Illustrator를 통해 구축한 Adobe만의 레이어 노하우가 테이블로 꽉 막혀있던 웹디자인의 영역을 넓혀줄 것입니다. 더이상 테이블로 레이아웃을 만드는 바보짓을 할 필요가 없습니다. 포토샵의 이미지를 그리듯이 웹페이지를 코딩할 수 있기 때문입니다.

작년에 드림위버 MX 2004가 출시될 때, CSS 이지윅 기능 탑재가 많은 웹개발자들에게 호응을 받았었습니다. 이미 해외에서 웹사이트는 CSS+XHTML 기반과 플래시 기반으로 나눠졌습니다. 국내에서도 CSS Design Forum 등 작은 움직임이 보여지고 있습니다.

아직 테이블 레이아웃 기반에 HTML 코드로 복잡하게 얽힌 웹페이지를 만들고 계신다면, 지금 당장 Adobe Golive CS2를 테스트해보세요. 조만간 출시될 매크로미디어사의 드림위버 MX 2005가 나오기 전에 CSS의 매력에 빠져보시기 바랍니다. 단 CSS의 매력에서 헤어나지 못하게 된다면, 제 책임이 아닙니다.

Golive CS2보다 좀 더 가벼운 프로그램을 원하신다면, TopStyle이나 StyleMaster를 권해드립니다.

조만간 Golive CS2를 이용해서 웹페이지를 만들어 본 다음에 사용기를 올려보도록 하겠습니다.

CSS 코딩을 할때, Topstyle의 CSS Sweeper(청소?) 기능은 한마디로 마술과 같다.

오늘 심험삼아 워드프레스의 기본(큐브릭) 테마와 내가 사용하고 있는 블릭스 테마의 CSS를 청소해봤다. 무척 깔끔하게 정리되어있던 2 테마의 스타일쉿이 더욱 구조적으로 정리된 것을 알 수 있었다.

최근 CSS 기반으로 단장된, 비교적 덜 구조적인 네이버의 메인페이지의 스타일쉿도 청소해봤다. 입이 다물어지지 않았다. 두개의 스타일쉿을 프린터로 출력해서 밑줄 짝짝 치며 비교해 본 결과, CSS 전문 프로그램의 위력에 감탄하지 않을 수 없었다.

네이버 메인페이지의 원본 인라인 스타일쉿 파일은 여기에서 확인할 수 있으며, 톱스타일의 CSS sweeper 기능을 사용하여 정리한 스타일쉿 파일은 여기에서 확인할 수 있다.

워드프레스를 사용하면서, CSS + XHTML에 관심을 갖게 되면서 기존에 사용하던 드림위버에서 Topstyle pro로 main 에디터를 바꿨다.

드림위버는 나무랄 데 없는 최고의 웹에디터이지만, 엄청난 파일크기로 인해 프로그램 로딩속도가 느린 문제가 있다. 내 컴퓨터는 팬4 3.0G에 1024mb 램을 장착하고 있지만, 포토샵이나 일러스트레이터가 이미 상주하면서 잡아먹는 메모리가 있기 때문에 좀 더 단순한 웹에디터를 찾게 됐다.

Topstyle을 1주일 정도 사용해보면서 느낀 점은 워드프레스의 테마 수정이나 간단한 CSS + XHTML 예제 파일을 만드는데 최적화 된 프로그램이라는 것이다.

인터넷 익스플러와 파이어 폭스의 2대 브라우저를 한꺼번에 미리보기 할 수 있는 기능은 CSS 코딩을 할때 무척 유용하다. 사실 IE의 CSS를 제대로 랜더링하지 못하는 문제를 실시간으로 확인할 수 있는 이 기능이 main 웹에디터를 옮기게 한 주원인이다.
또한 CSS 코드를 자동 정렬 및 배치해주는 기능 역시 환상적이다. 이 기능에 중독되게 되면 드림위버를 동네 애물단지 취급하게 될지도 모른다.

단, 이 프로그램은 드림위버의 이지윅 기능이 없어서 일정부분 핸드코딩을 해야 한다. 때문에 기초적인 코딩 지식을 요구한다.

하지만, 기초적인 HTML, XHTML, CSS에 대한 공부는 웹개발이나 디자인에 있어서 더욱 필요한 부분이다. 이지윅 웹에디터에 익숙해지는 그 순간 웹페이지 제작을 머리가 아닌 눈으로 시작하게 되기 때문이다. 웹페이지를 구조적으로 접근하는 사고가 바로 올바른 XHTML + CSS 의 시작이기 때문이다.