(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가 벌써부터 기대됩니다.

최근 UI 개발자라는 직군이 만들어지면서, 채용 필수 항목으로 하드 코딩(hard cording) 가능 여부를 체크하고 있는 경우가 종종 있다. 여기서 말하는 하드 코딩은 메모장과 같은 텍스트 에디터를 이용하여 HTML과 CSS, javascript를 작성하는 것을 말한다.

보통 하드 코딩의 가능 여부를 체크하는 이유는 아래와 같다.

1. HTML, CSS, javascript의 요소, 속성, 상태 등에 대한 명확한 이해
2. 보다 빠른 수행 능력
3. 영타 능력

하지만 실제 하드 코딩만으로 올바른 문법을 지켜서 HTML, CSS, javascript 등을 작성하는 것은 쉽지 않다. 오히려 코딩의 양을 줄이기 위해서 img를 입력하면서 alt를 넣지 않기도 하며, 효율적이지 못한 코드를 작성하기도 한다.

최근에 출시된 dreamweaver 8, golive cs2, aptana, Expression Web과 같은 웹 에디터 툴은 오히려 하드코딩보다 빠른 퍼포먼스를 가능하도록 한다. 특히 코드 힌트와 코드 유효성 검사, 구문 강조, 코드 정리 등의 기능은 코딩 퍼포먼스는 물론이고, 보다 효율적인 코드 작성을 가능하게 해준다.

나의 경우 드림위버8를 메인 에디터로 사용하면서, 위의 기능들 외에도 사용자 단축키 지정 기능을 최대한 활용하여 하드 코딩보다 훨씬 빠른 코드 작성을 하고 있다. 포토샵은 물론이며, 워드 작성 프로그램(워드, 한글)을 사용하는 것보다 더 빠르게 웹 문서를 만들 수 있다.

군대에서 삽질한다는 말이 있다. 수십 명의 일반 보병들이 몇시간에 걸쳐 삽으로 흙을 파고 있을때, 옆에서 공병대 포크레인이 단 몇분만에 훨씬 많은 양의 흙을 파내는 것을 표현하는 말이다. 전혀 효율적이지 못하고, 오히려 쓸데 없는 짓을 뜻하기도 한다.

삽이 없으면 손으로라도 파낼 수 있는 근성은 반드시 필요하다. 하지만 10시간 삽질할 동안에 포크레인 사용법을 익혀서 훨씬 더 많은 양을 파내는 게 좋지 않을까? 호모 사피언스… 인간은 도구를 만들어 사용한다는 점이 동물과 구별되는 가장 큰 이유라는 것을 다시 한번 상기해야 할 것이다.

드림위버 8.0.2 패치가 나왔습니다. 매일 드림위버를 실행시키는데, 패치가 나온지 이틀이 넘어서야 확인하게 돼네요.

드림위버 사용자라면, 프로그램을 실행시키면 볼 수 있는 인트로 화면(왠지 공식명칭이 있을듯..)에서 다운로드 센터로 접근할 수 있습니다.

일단, 참고할만한 신문(개인적으로 한겨레를 추천)을 하나 준비한 후에 드림위버를 실행시킨다.

파일을 새로 하나 만들고, 페이지 속성에서 제목/문서유형/인코딩을 변경한다.

디자인 보기 모드를 활성화 시키고, 워드프로세서 툴을 사용하던 것처럼, 편하게 글을 쓰기 시작한다. 글을 쓰다가 코드 보기 또는 분활 보기를 통해서 코드를 확인하면, 곳곳에 p 태그가 입력된 것을 확인할 수 있다.

제목글이나 목록형식, 또는 글자 강조 같은 꾸미기는 나중에 할 것이므로, 웹문서에 들어가야 할 내용들만 적당히 써준다. (한꺼번에 글을 완성할 생각보다는 차분히 내용들을 채워간다는 생각으로 글을 작성해야 한다.)

들어가야 할 내용은 저자(개발자)의 판단이 중요하다. 다른 사이트를 참고할 수도 있고, 자신이 나름대로 정리한 내용들이 있을 것이다. CSSLook.com을 기준으로 들어가야 할 내용들을 정리한 후, 드림위버로 작업한 모습은 예제1에서 확인할 수 있다.

이제, 준비했던 신문을 보자. 가장 상단에는 제호(신문사명)이 나오고, 배포일도 나오고, 커다란 글씨로 1면 톱기사 제목이 나오고, 여러 기사들이 단으로 나눠져 있고, 큰 글씨의 제목글들도 몇가지 크기로 분류돼어 있는 것을 확인할 수 있다. 또한 광고도 있다. ^^;

드림위버에서 무작정 작성한 글을 이제 꾸며보자. HTML 요소를 수정하는 것으로, CSS는 추후에 수정할 것이다. 신문의 가장 큰 글자인 톱기사 제목을 HTML에서는 첫번째 머릿글이라고 하고, h1으로 표현한다. heading 1의 줄임말인 것을 유추할 수 있을 것이다. 이와 마찬가지로 2번째 큰 제목을 h2, 3번째는 h3, 이렇게 h6까지 있다.

드림위버에서 작성한 글 중에서 첫번째 제목글이라고 판단한 부분을 선택한 다음, 하단에 속성메뉴 중에서 펼침메뉴로 돼있는 포맷에서 머릿글 1을 선택하면 된다. 이런식으로 적당히 머릿글1~6을 선택해서 포맷을 수정해준다.

신문 한켠을 보면, 그날의 기사 목록이 정리돼있는 박스를 발견할 수 있다. 이를 웹페이지에서는 메뉴라고 하며, 메뉴에 들어갈 내용을 선택한 후에 드림위버 하단의 속성바에서 비순차 목록 아이콘을 누른다. 선택했던 내용들이 ul, li로 둘러쌓인 모습을 코드 보기 모드에서 확인할 수 있다.

이와 같은 방법으로, 머릿글 1에서 6까지(가급적 3까지) 적당히 선택해서 수정하고, 목록들도 수정해준다. 목록은 순차적 목록(ol : Ordered List)과 비순차적목록(ul : Unordered List)이 있는데, 목록의 항목(li : list)들의 배열순서가 상관없는 메뉴는 ul을, 목록의 항목들의 배열순서가 상관있는 최근 글은 ol을 선택하면 된다.

이렇게 HTML의 수정이 끝난 결과는 예제2에서 확인할 수 있다.

드림위버 8를 설치하여 사용중인 제이님이 오후에 MSN으로 내게 물어왔다. 디자인 모드에서 폰트 크기를 em으로 설정하면, 제대로 랜더링 되지 않는다는 것이다.

이는 MX 2004 버전에도 발생했던 문제인데, 한글 프로그램의 경우 디자인 모드에서 기본 글꼴의 크기가 12pt로 설정돼 있는 반면, 영문 프로그램의 경우 글꼴의 크기가 10pt로 설정돼 있기 때문이다.

웹표준화 프로젝트에서는 웹 접근성 측면에서 스크린 미디어 타입에서는 글꼴의 크기의 단위를 em으로 설정하도록 권하고 있다. 물론, 구식 브라우저에서는 제대로 랜더링되지 못하는 문제가 발생하지만, 접근성이라는 웹의 근본 정신을 생각한다면 가급적 사용하도록 노력해야할 글꼴 단위이다.

아직까지 한글 버전의 드림위버 8이 출시되지도 않았고, 드림위버는 한글 버전보다 영문 버전이 오히려 익숙해지는 데 편하기 때문에, 프로그램 환경 설정을 변경할 필요가 있다.

드림위버 8 환경 설정(ctrl+U) 변경하기 : (그림 참조)

기본 설정값인 10pt(small)을 비례폭 글꼴과 고정폭 글꼴은 12pt(medium) 크기로 변경하고 코드뷰용 글꼴은 10pt(small)로 변경하면, 글자를 볼때 딱 좋을 것이다.

이 방법을 알려줄 때 쯤, 이미 제이님은 혼자서 해결해버렸다. (멋쟁이 제이님)

매크로미디어에서 최근에 출시된 드림위버 8는 이전 버전인 드림위버 MX 2004보다 디자인 모드에서 CSS 랜더링이 무척 향상됐다. 이전 버전에서는 *(전체 선택자)에 margin, padding : 0 을 주고 CSS를 제작하면 제대로 랜더링 하지 못했는데, 이번 버전부터는 정확히 랜더링 해준다.

드림위버 MX 2004의 디자인 모드에서 확인한 모습 :

드림위버 8의 디자인 모드에서 확인한 모습 :

물론, 드림위버 8에서도 상단 메뉴는 보여지지 않는 버그가 발견됐다. 오늘 첨 사용하다보니 많은 테스트를 해보지 못했지만, 차차 사용하다 보면 여러 버그들을 발견할 수 있을 것 같다.

제이님도 상단 로고의 랜더링에 문제를 발견했는데, CSS를 이용한 이미지 대체 기술(text-identy 이용)에 취약성이 있는 것 같다.

아~ 기다리고 기다리던~ 매크로미디어 STUDIO MX 2004의 후속 버전인 STUDIO 8이 출시됐다. 8월 8일(어제)에 매크로미디어 블로그와 공식 프레스 페이지에 관련 글이 등록됐다. (자세한 내용)

몇일전에 플래시 플레이어 8과 관련된 소식을 접하게돼서, 혹시나 하는 마음에 매크로미디어 블로그에 방문했더니 해당 뉴스를 확인할 수 있었다.

아직 내용을 상세히 확인하진 못했지만, 가장 많은 기대를 하고 있던 드림위버 8의 모습은 당당할 뿐이다.

드림위버 8의 특징들(출처 및 자세히 보기 : 매크로미디어)

• Visual authoring with XML data
  Integrate XML-based data, such as RSS feeds into web pages using a simple drag and drop workflow. Jump to code view to customize the transformation, using improved code hinting for XML and XSLT.
• New, unified CSS panel
  All the CSS functionality is consolidated into one panel set and enhanced to make working with CSS easier and more productive. The new interface makes it easier to see the cascade of styles applied to a specific element and easily identify where attributes are defined. A property grid allows for quick edits.
• CSS layout visualization
  Apply visual aides at design time to outline CSS layout borders or color CSS layouts to reveal complex nesting schemes and improve selection. Click on the CSS layout for valuable Tooltips, such as ID and padding and margin and border settings.
• Style rendering toolbar
  View content the same way end-users will see it, no matter what the delivery mechanism, with new support for CSS media types in Dreamweaver 8. Use the style rendering toolbar to toggle to design view and see how it will look in print, on a handheld, or on a screen.
• CSS rendering improvements
  Match how complex CSS layouts will render in most browsers, with substantial improvements in design view accuracy. Dreamweaver now fully supports advanced CSS techniques, such as overflow, pseudo-elements, and form elements.
• Accessibility: Support for WCAG/W3C priority 2 checkpoints
  In addition to the integrated accessibility evaluation tool for Section 508 and WCAG Priority 1 checkpoints, Dreamweaver now supports both CSS and accessibility with an updated evaluation tool that includes WCAG Priority 2 checkpoints.
• Improved WebDAV
  WebDAV in Dreamweaver 8 now supports digest authentication and SSL for secure file transfer and offers improved connectivity with a wider array of servers.

내가 바라고 있는 것들이 모두 추가된 듯한 모습이다. 많은 IT 관련 회사들이 매크로미디어 스튜디오 8로 업데이트 비용을 지불할 일만 남았다. ㅋㅋ

매크로미디어 사이트의 드림위버 소개 플래시 동영상을 확인해보니, 레이아웃 모드(뷰)에서 zoom 기능이 가능해졌고, div를 옮길 수도 있으며, 코딩 모드(뷰)에서는 더욱 구조적인 (x)HTML을 작성/관리할 수 있게 됐다.

어도베 고라이브 cs2보다 러닝타임이 얼마나 빠를지에 따라(이미 매크로미디어 프로그램의 UI에 익숙해지면 이런 것은 상관없음), 드릠위버 사용자는 더욱 증가할 것으로 예상됩니다. 지난 2003년에 드림위버 mx 2004가 출시될때, 수많은 개발자/디자이너들이 css1/2의 지원에 매료됐던 것 이상의 환호가 예상됩니다. 좋아 죽겠네요~ ^^;

드림위버로 웹페이지 작업을 하면, 몇몇 문제에 부딪히곤 한다. 그 중 하나는 인코딩 문제이고, 다른 하나는 Text 붙여넣기 이다.

드림위버는 UTF-8을 기본인코딩으로 설정되어있다.
때문에 charset=euc-kr 을 명시하지 않은 HTML 소스의 경우에는 한글이 모두 깨져보이게 된다. 이는 제로보드 소스를 수정하다보면 쉽게 알 수 있다. (한글 주석이 모두 깨져보임)

한글이나 워드, 메모장 등 다른 프로그램에서 작성된 Text 내용을 드림위버로 가져올 때는 반드시 Text 붙여넣기로 해야 한다. 그렇지 않을 경우에는 다른 프로그램에서 미리 만들어 논 태그(눈에 보이지 않지만)들을 그대로 가져오게 된다.

이 부분은 한글(워드 프로그램)에서 작성한 내용을 HTML 문서로 보내기를 해보면 쉽게 알 수 있다. 그냥 단순하게 만든 hwp 파일이 어마어마하게 많은(솔직히 불필요한) tag를 가진 HTML로 변환되는 것을 소스보기를 통해 자세히 알 수 있다.

이런 문제 때문에, 대부분의 드림위버 사용자들은 키보드 단축키 설정(일반적으로 ctrl + shift + alt + V)을 통해 Text 붙여넣기를 사용하고 있다.

이 글은 블로그코리아에서 서핑중에 어느 블로거님의 글을 보고 트랙백 용으로 작성한 글이다. 난 생 처음 트랙백을 해본다.