HTML5를 최대한 활용하기 위한 9가지 프로그래밍 도구

[비엠플랜]

• HTML5는 개발자들 사이에서 최신 웹 애플리케이션을 만들기 위한 수단으로 인정받고 있으며, 비디오 및 캔버스 2D와 같은 멀티미디어 기능 일체를 지원한다. HTML5가 등장하면서 어도비 플래시, 마이크로소프트 실버라이트와 같은 독자적인 멀티미디어 브라우저 플러그인의 미래에 대한 의문이 제기됐다. HTML5가 이와 동일한 기능을 표준 기반으로 제공하기 때문이다. HTML5는 여전히 개발 중인 단계지만 개발자들의 관심이 증가하고 있는 만큼 툴 업체들이 HTML5를수용하기 시작한 것은 자연스러운 일이다. 그리고 그 뒤를 이어 프로그램에 HTML5를 수용하기 위해 제공되는 다양한 애플리케이션 개발자용 도구들이 나오기 시작했다.  editor@itworld.co.kr

  

  어도비 엣지(Adobe Edge)
  현재 프리뷰 단계인 어도비 엣지는 HTML5, CSS, 자바스크립트를 사용해 애니메이션 형식의 인터랙티브 콘텐츠를 개발하기 위한 디자인 도구다. 이렇게 개발된 콘텐츠는 모바일 기기와 데스크톱 모두에서 실행할 수 있다. 또한 여러 최신 브라우저에 걸쳐 저작의 일관성을 제공하기 위한 웹킷 기반 스테이지를 제공하며, 타입킷(TypeKit)과 같은 폰트 서비스와 통합된다.
  모션과 그래픽을 HTML 요소에 추가할 수 있으며, 엣지의 자체 코드 라이브러리를 사용하거나 자바스크립트 코드를 통해 애플리케이션을 확장할 수 있다. 각기 독립적인 타임라인의 중첩된 애니메이션과 인터랙티브 기능도 구축할 수 있다. 심볼은 재사용 가능하며, API와 코드를 통해 조작할 수 있다. 콘텐츠는 iOS 및 안드로이드 기기와 파이어폭스, 크롬, 사파리, 인터넷 익스플로러 9 등의 브라우저에서 작동하도록 디자인된다.

• 

  어도비 드림위버 CS6
  어도비 드림위버 CS6은 웹 디자인 소프트웨어로, HTML 웹 사이트와 모바일 애플리케이션을 편집하기 위한 시각적 인터페이스를 제공한다. CSS를 활용하는 플루이드 그리드 레이아웃(Fluid Grid Layout) 시스템은 환경에 따라 적응하는 레이아웃을 구축하기 위한 크로스 플랫폼 호환성을 제공한다. 어도비는 개발자가 코드에 파묻힐 필요 없이 복잡한 웹 디자인과 페이지 레이아웃을 시각적인 수단을 통해 구성할 수 있다고 밝혔다.
  또한 사용자는 라이브 뷰와 멀티스크린 프리뷰 기능을 통해 디자인을 확인할 수 있다. 멀티스크린 프리뷰 창은 개발자가 HTML5 콘텐츠 렌더링을 점검할 수 있게 해준다. 라이브 뷰는 웹킷 렌더링 엔진을 사용해 HTML5를 지원한다. j쿼리 모바일, 폰갭 프레임워크 지원을 통해 모바일 애플리케이션을 구축할 수 있다.

• 

  어도비 콜드퓨전 10
  엔터프라이즈 웹 애플리케이션 구축을 위한 이 서버용 기술은 HTML5 통합을 활용하여 웹소켓, 인터랙티브 차트, 비디오, 지오태깅을 사용해 다채로운 사용자 환경을 구성한다. 어도비 콜드퓨전 10을 사용하는 개발자는 클라이언트측 인터랙티브 HTML5 차트 저장소를 이용할 수 있다. 실시간 서버 응답을 구현하여 점대점 데이터 푸시를 실행하거나 여러 클라이언트에 데이터를 게시할 수 있다고 어도비측은 밝혔다. 콜드퓨전은 J2EE 를 사용하며, 어도비 톰캣 서블릿 컨테이너와 통합된다.

  • 

    센차 아키텍트 2(Sencha Architect 2)
    모바일 및 데스크톱 애플리케이션 구축을 위한 센차 아키텍트 2는 HTML5 비주얼 애플리케이션 빌더로 분류된다. 하나의 통합 환경에서 팀 전체가 애플리케이션을 디자인, 개발, 배포할 수 있다. 개발자는 센차 터치2와 Ext JS 4 자바스크립트 앱을 구축하면서 라이브로 프리뷰할 수 있다.
    모바일 지원을 통해 iOS 또는 안드로이드 기기에서 배포를 위한 네이티브 패키징이 가능하며, 디자이너는 목록, 버튼, 양식, 표, 컨트롤을 통해 시각적으로 앱을 구축한 다음 빌드를 개발자에게 전달할 수 있다. 또한 디자이너는 인터랙션과 앱 구성을 프로토타이핑하고, 개발자는 시각적 도구를 사용해 UI 컨트롤을 사전 구축하여 앱 개념을 잡은 다음 내장 코드 편집기를 통해 모델 뷰 컨트롤러를 사용하여 앱을 제작할 수 있다.

  • 

    센차 터치 2(Sencha Touch 2)
    센차 터치 2는 센차 HTML5 플랫폼의 초석으로 평가받는 모바일 애플리케이션 프레임워크다. 개발자는 iOS, 안드로이드, 블랙베리, 킨들 파이어 및 기타 여러 기기용으로 애플리케이션을 제작할 수 있다. 이 제품은 네이티브 기기 API에 대한 접근성을 확장하여 HTML5 개발자가 하드웨어 기능을 활용할 수 있도록 한다.
    애플 앱스토어와 구글 플레이 애플리케이션 스토어에 배포할 수 있도록 네이티브 패키저가 포함되어 있다. 버전 2는 사용하기 쉬운 API, 향상된 모델 뷰 컨트롤러 기능, 더 풍부한 문서를 제공한다. 또한 센차는 HTML5를 활용하여 복잡한 애플리케이션을 구축하기 위한 부드러운 애니메이션과 스크롤, 레이아웃 엔진을 버전 2에 추가했다.

  • 

    도조 파운데이션 마케타(Dojo Foundation Maqetta)
    IBM 이니셔티브에서 파생된 도조 파운데이션의 마케타는 데스크톱과 모바일 플랫폼에서 HTML5 애플리케이션을 구축하기 위한 오픈소스 도구다. 브라우저에서 시각적인 HTML5 인터페이스 저작이 가능해지면, 드래그 앤 드롭 방식으로 라이브 UI 모형을 조합할 수 있다. 마케타로 제작한 UI는 디자이너가 개발자에게 전달 가능한 웹 앱 형태를 갖는다.
    마케타는 개발 라이프사이클 전반에 걸쳐 시각적 자산을 보존하도록 설계됐으며, 사용자가 임의의 위젯 라이브러리와 CSS 테마를 추가할 수 있다. 마케타 소스 코드는 사용자의 서버에 다운로드해 설치할 수 있다. 코드는 커스터마이즈가 가능하며, 마케타 프로젝트 자체에 기여하기 위한 작업 결과를 제출할 수 있다. 현재 프리뷰 단계이며, 곧 1.0 버전이 출시될 예정이다.

    • 

      마이크로소프트 비주얼 스튜디오 2010 서비스 팩 1
      마이크로소프트의 비주얼 스튜디오 2010은 처음에는 HTML5 지원 없이 출시되었지만, 2011년 3월에 공개된 SP1에서 몇 가지 기능이 추가됐고 3개월 후 업데이트가 이루어졌다. 인텔리센스를 통해 HTML5 전용 요소가 추가됐는데, 인텔리센스는 명령 인식을 통해 언어 참조에 손쉽게 접근할 수 있도록 고안된 개념이다. HTML5 검증 기능도 지원되므로 코드의 유효성과 표준 부합성을 확보할 수 있다.
      서비스 팩을 설치한 후 비주얼 스튜디오에서 HTML5 스키마를 사용하도록 설정해야 한다. 마이크로소프트의 설명에 따르면 SP1은 ASP.Net 상에서 HTML5와 CSS3 웹 애플리케이션을 더 쉽게 구축할 수 있게 해준다.

    • 

      젯브레인스 웹스톰 4.0(JetBrains WebStorm 4.0)
      HTML 편집기가 포함된 자바스크립트 IDE로 분류되는 웹스톰 4.0은 웹 애플리케이션을 구축하기 위한 전형적인 HTML5 템플릿을 제공한다. 개발자는 HTML 문서를 만들어 파일에 대한 HTML5 지원을 활성화할 수 있다. 예를 들어 개발자가 canvas 요소를 사용하려는 경우 IDE는 입력을 제안한다. 개발자가 스페이스 바를 누르면 IDE는 이 HTML5 요소에서 지원하는 속성을 제안한다.
      개발자는 크롬 브라우저에서 HTML을 라이브로 프리뷰할 수 있다. IDE는 웹GL 셰이더 언어와 Node.JS 코드 편집 및 자바스크립트 디버깅을 지원한다.

      • 

        구글 웹 툴킷
        브라우저 애플리케이션 구축을 위한 개발 툴킷으로, 구글 웹 툴킷 라이브러리의 여러 가지 HTML5 기능을 제공한다. 클라이언트측 스토리지 또는 웹 스토리지 지원이 포함된다. 구글에 따르면 HTML5(웹) 스토리지 사양은 대용량 클라이언트측 스토리지와 세션 스토리지 및 로컬 지속 스토리지의 파티셔닝을 제공하기 위한 표준화된 방법을 제공한다. 그 외에 캔버스 시각화와 오디오 및 비디오 위젯 등의 HTML5 기능을 지원한다.

      http://www.itworld.co.kr/slideshow/76718/HTML5%EB%A5%BC+%EC%B5%9C%EB%8C%80%ED%95%9C+%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0+%EC%9C%84%ED%95%9C+9%EA%B0%80%EC%A7%80+%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D+%EB%8F%84%EA%B5%AC?slide=1#slideshow_anchor