드림위버로 HTML5 개발하기.

드림위버란 아직도 국내 웹디자인 계에서 가장 많이 사용되는(적어도 내 생각엔) 툴이다. 솔직히 말해 개발자들은 드림위버가 느리고 설치과정이 복잡하고 하니 빠르고 간편한 에디트 플러스나 울트라에디터를 자주 사용하는게 사실이다. 아니면 내려밭고 공유하기 편한 이클립스 같은 툴 말이다.

HTML5개발에 앞서 나는 이클립스 GWT, 넷빈즈, xcode등 다양한 툴을 살펴봤는데 아무리 생각해도 드림위버가 가장 간단하면서도 코드 힌트 기능을 통해 쉽게 개발을 할 수 있지 않나 싶다. 솔직히 이클립스 GWT(Google Web Toolkit)는 뭐 물론 웹을 구조화 하는건 좋긴 한데 HTML5를 어떻게 개발해 나가야 할지 감이 안잡히고, 넷빈즈는 공지에는 뭐 지원한다 하더니만 정확한 설명이 없다. xcode는 기본적으로 html5가 자리잡고 있는 것 같지는 않다만, 추가 팩을 통해 지원이 가능한데 일단 추가 팩이 공인이 아니고 내려받아야 한다는 정미 사실 귀찮다.

사용자 삽입 이미지

드림위버 CS5의 초창기 버전에서는 이미 템플릿중 하나로 HTML5를 추가하고 있다. 그리고 어도비 사에서도 얼마전에 가장 강력한 HTML5 툴을 만들겠다고 했는데, 내 생각엔 드림위버를 주축으로 하지 않을까 싶다. 아래의 자료를 보면 곧 드림위버에 추가될 스마트 페이스트(smart paste) 기능을 볼 수 있다.


개인적으로 툴(tool)적인 입장에서 꽤나 혁신적이라 생각한다. 저렇게 눈으로 보이는 것이 단순히 어떤 비트맵화된 이미지가 아닌 백더화된 좌표들의 모임이라면 충분히 HTML5로 컨버팅 가능하며, 물론 이는 다양한 RIA툴에서 적용된 기술이지만 아직까지 이렇게 HTML5를 위한 기능을 제공하는 툴은 없다는 것이다.


사용자 삽입 이미지사용자 삽입 이미지

위에서처럼 이미 기본적으로 드림위버 CS5에는 문서 형식에 HTML5가 추가되어 있고, 가장 기본적인 독타입도 선언되어 있다. 아 물론 아주 기본적인 문서 형식이지만.


그런데 문제는 코드 힌트 기능을 사용하기 위해서는 어도비에서 추가 팩을 받아야 한다는 점이다.


사용자 삽입 이미지



받는 것은 별거 없다. 여기 에서 내려받을 수 있으며, 자신의 운영체제에 맞는 버전을 내려받고 설치만 하면 땡이다.


사용자 삽입 이미지

중간에 이렇게 익스텐션을 거쳐서 설치가 완료된다.


그럼 설치가 되면 대충 어떤 테그가 지원되나 확인해 본다.


사용자 삽입 이미지

기본적인 Canvas테그, 잘 지원된다.



사용자 삽입 이미지

video역시 내부 테그들과 함께 잘 적용된다.



사용자 삽입 이미지

당근 audio테그도 잘 적용.



사용자 삽입 이미지

input테그에서 이미 date와 datetime, datetime-local, 이메일 등을 제공한다.


사용자 삽입 이미지

좀 생소한 테그인 progress도 지원은 된다. 아직은 크롬에서밖에 지원 안하긴

사용자 삽입 이미지

한층 더 깊게 들어가서, 스크립트 단에서는 일단은 getContext()는 지원되는 것으로 보인다.


아직 HTML5가 표준화가 되지 않아서 아마 다양한 함수들이 w3c에서 표준화 되기 전까지는 아마 패치가 몇번 될 것 같다. 그리고 지금같은 CS의 업데이트 속도로 봐선 아마 내년 초쯤 CS6이 나올 거라 조심스레 예측하고 있고 그쯔음 HTML5가 어느정도 틀이 잡히지 않을까 싶다.



무엇보다 최근 나온 IE9 베타를 통해, 베타가 정식이 되는 순간 국내 판도가 서서히 움직이지 않을까 싶고, 다양한 사이트에서 HTML5에 표준을 지원하며 일단 IE9가 정식이 되면 HTML5는 분명 자리잡을 것이다. 라고 일단 나는 예측해 본다.


사실 아직도 HTML5를 지원하는 툴중에 드림위버도 사실 내 성격을 만족시키지는 않는다. 다양한 툴을 살펴보고 조금 정리해서 다음 포스팅 때는 장단점을 한번 비교해 보도록 하겠다.