각종 브라우저에서 HTML5가 설계되고 지원되면서 몇몇의 개발 툴들이 이미 HTML5/CSS3를 이용 가능하도록 하여 쉬운 웹 개발을 돕고 있다.많은 사람들이 이곳(http://www.html5trends.com)에 HTML5관련 툴을 찾기 위해 방문하고 있다. 오늘 우리는 몇몇의 당신이 HTML5를 쉽게 시작할 수 있는 중요한 툴들을 소개하고자 한다.
아래의 툴들은 HTML5/CSS3의 제공 범위가 다르다. 그러니, 이를 사용할 떄는 목적에 맞게 잘 조합하여 사용해야 할 것이다. 만약 여기에 없는 다른 툴을 사용한다면, 코멘트를 남겨주기 바란다.
1. Google Web Toolkit/Eclipse
구글 웹 툴킷 인큐베이터 프로젝트는 HTML5를 마치 GWTCanvas처럼 제공한다. 구글은 이클립스를 통해 간단하고 마치 데스크탑 어플리케이션을 만드는 것처럼 다양한 디버깅 환경을 제공하는 GWT플러그인을 제공한다. 본 플러그인은 GWT코드를 컴파일 하기 전에 크롬과 파이어 폭스에서 가능여부를 확인할 수 있다.
GWT의 좋은 점은 GWTCanvas가 HTML5의 canvas요소를 IE의 이미지처럼 제공하여 IE에서도 GWTCanvas를 통해 작동한다는 점이다.
본 데모를 각각 다른 브라우저에서 확인하기 바란다.
2. Adobe Dreamweaver CS5
Adobe는 HTML5를 제작하는 최고의 툴을 제공하기로 약속했다. 그런데 그들이 없다고? 드림위버 CS5에는 HTML5의 테그와 CSS3개발이 추가되어 있다. 아래 CSS3 미디어 쿼리스에 대한 동영상을 보도록 하자.
스마트 붙혀넣기 기능의 조합으로, 일러스트에서 그린 이미지를 HTML5 의 캔버스 그리기 기능으로 변환할 수도 있다. 아래 데모 참조.
최신 개발정보를 확인하기 위해 어도비 개발 블로그를 방문하라.
추가 : 어도비는 얼마전 막 드림위버 CS5를 위한 HTML5 팩을 릴리즈 했다.
이 확장기능은 드림위버의 다음 점을 향상시킬 것이다.
– 3개의 다른 라이브 뷰 디스플레이를 따르는 멀티스크린 미리보기 패널을 미디어 쿼리를 통해 서포트한다.(윈도우 > 멀티스크린 미리보기)
– HTML5 테그 라이브러리의 새로운 테그, 어트리뷰트 그리고 속성들을 코드힌트에 추가되었다.
– CSS3 명세에 대한 코드 힌트중 다음 추가됨 : 2D/3D 변형,애니메이션,배경 및 테두리,기본 유저인터페이스, 선 레이아웃, 마퀴, 미디어 쿼리, 멀티컬럼, 루비, 텍스트, 변형
– <video> 와 <audio>를 라이브 뷰에서 서포트.(퀵타임 플레이어가 설치되어야 함.)
– CSS3의 라이브 뷰의 렌더링을 발전시킴.
– 새 문서 작성 다이얼로그창에 HTML5 시작 레이아웃 추가.
– 디자인 뷰에서 새로운 테그에 대한 더 나은 렌더링 제안.
3. Adobe Flash CS5
어도비는 HTML5 캔버스 랜더링 결과를 플래시로 변환할 수 있는 유틸리티를 제공한다. “Copy Motion as XML” 메뉴로 모션 트윈기능이 XML로 변환되고 드림위버의 스마트 붙혀넣기(Smart Paste) 기능에 이러한 애니메이션이 HTML5 캔버스로 변환되어 추가된다.아래 비디오의 3분 31초를 참조하라.
4. Netbeans IDE 6.9 beta
넷빈즈 IDE의 다음 릴리즈 버전이 HTML5와 CSS3를 추가할 것이다. 버전 6.9의 베타부터 지원될 전망이다. (현재 6.9.1 이 릴리즈 되어 있음.)
5. CSS3 Generator WebApps
이건 좀 성향이 다른 리스트인데, CSS3의 다양한 스타일에 대한 문법을 지원하는 웹 어플이다.
– CSS3Generator : Border Radius, Box Shadow, Text Shadow, RGBA, @Font Face, Multiple Columns, Box Resize, Box Sizing, Outline 같은 기능들을 제공한다.
– CSS3 Gradient Generator : 그라디언트를 제공한다.
– CSS3 Transforms : Transform(변형) 을 제공한다.
6. Font Dragr
이 어플리케이션은 커스톰 폰트를 테스트할 수 있다. 여기의 웹 어플을 확인하라.
또다른 HTML5를 제보해 준다면, 우리는 기쁜 마음으로 리포트 할 것이다 !
(본 내용은 번역된 내용이며, 저작권은 http://www.html5trends.com/ 에 있습니다. 또한, 원문의 글 주소는 http://www.html5trends.com/best-of/6-html5-authoring-tools/ 입니다. 영어가 약해 저작자의 허락을 얻지 못하고 번역한 점을 죄송스레 생각합니다.)
번역 : Bellamy, CHANG([email protected]) 2010-09-20
번역후기 : 새로운 사실을 많이 알았는데, 특히 드림위버 CS5를 그냥 깔면 안되고 addon을 깔아줘야 HTML5의 새로운 기능을 사용할 수 있는것에 대해 알게 되어 좋은 듯 하다. GWT는 요즘 사용중이긴 한데, 단순히 캔버스를 IE의 캔버스로 변형한다? 그럼 뭐 HTML5툴의 역할을 하는 것인가.. 그건 좀 의문이다. 참고로 본 번역은 필자의 처녀작 번역이다. (축하좀 ㅎㅎ)
