HTML5 개발자들을 위한 온라인 툴 17가지

HTML5 개발자들을 위한 최고의 온라인 툴 톱17



HTML5는 HTML의 최신 버젼으로 웹사이트 디자인에 많은 기능을 추가시켜줬죠. 특히 요즘 웹사이트들은 모바일환경에 적합해야되서 웹개발자들은 HTML5를 자유자재로 사용해 최대한 모바일과 호환성이 있는 기능들을 갖추게 하는것이 매우 중요면서 웹사이트의 유저익스피리언스 (UX)와 유저빌리티에 상당한 영향을 미칩니다. 그럼,이것을 제대로 이용하려면 여러 자원들이 있는데요, 프레임워크, 툴, 테크닉, 라이브러리, 그리고 플러그인들이 있습니다. 이러한 도구들을 웹디자인에 사용하게 되면 훨씬 더 강력해지고 빨라지며 안전성이 있고 인터액티브한 사이트가 될 수 있습니다. 그렇다면 정확히 HTML5의 웹디자인이 어떠한 장점을 가져다 줄 수 있는지, 그리고 가장 유용한 온라인 툴 17가지를 소개해 보겠습니다.


웹디자인의 장점

- 접근성 향상

- 오디오와 동영상 지원

- 깔끔하고 체계화된 코딩

- 높은 인터액션

- 여러 브라우저 호환성

- 모바일 반응형 개발 디자인



HTML5 유용한 온라인 툴 & 테크닉


1.  jQuery를 이용한 파일 업로드

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

업로드 센터는 컴퓨터 하드드라이브에서 드래그엔 드롭으로 사진 파일들을 업로드 시킬수 있습니다. 새로운 API와 AJAX 그리고 파일 리더 API가 브라우저 윈도우를 통해 업로드를 가능하게 만들었습니다.


2.  Front Gragr: 프론트 테스팅 툴

http://fontdragr.com/

이 툴은 커스텀 디자인된 글꼴들을 테스트 하기에 좋습니다. 아무 코딩이 필요없는데요, 그냥 드래그 엔 드롭으로 테스팅을 하시면 됩니다. Front Gragr는 HTML이나 CSS코드를 바꾸지 않아도 글꼴을 쉽게 테스트 할 수 있는 기능을 주죠.


3.  jQuery HTML 업로더

http://www.igloolab.com/jquery-html5-uploader/

간단한 jQuery 플러그인으로 웹 어플리케이션에 업로드 시스템을 장착 시켜 줍니다. 사용자는 드롭박스 요소를 만들어 주기만 하면 나머지 작업은 jQuery가 업로더를 통해 처리합니다.


4.  D3 태그 틀라우드

http://jsfiddle.net/adiioo7/rutpj/light/

D3 태그 클라우드는 워드클라우드(WordClouds)의 오픈소스를 작용시켰습니다. 아웃풋을 그려내는데 캔버스를 사용하면서 좋은 성능을 보여줍니다.



5.  Audio5js

http://zohararad.github.io/audio5js/

HTML5의 오디오 지원은 꽤 뛰어난 편이지만 아직 예전 웹브라우저들과 호환성 문제점들을 지니고 있습니다. Audio5js는 본래 지원이 안되는 모든 코덱을 지원해줍니다.


6.  SceneGraph

http://gwennaelbuchet.github.io/SceneGraph.js/

SceneGraph는 자바스크립트에 기반한 애니메이션 프레임워크입니다. 이 프레임워크는 객체지향인데 쉬운 사용을 위해 캔버스를 바탕으로 만들어졌습니다.


7.  Fabric.js

http://fabricjs.com/

Fabric.js는 캔버스 라이브러리의 강력하고도 심플한 자바스크립트 입니다. 객체들을 자유롭게 만들고 수정할 수 있도록 여러 방법들이 제공됩니다.


8.  Howler.js

http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library

웹오디오(Web Audio) API와 호환되어 작동할 수 있는 자바스크립트 라이브러리입니다. 만약 웹오디오 API를 못찾는다면 HTML5 오디오로 넘어가게 되죠. 이 자바스크립트는 여러 웹브라우저 호환성과 캐싱, 멀티플 재생, 사운드 루핑 등의 기능들을 가지고 있습니다.




9.  WYSI

http://xing.github.io/wysihtml5/

오픈소스 형태의 리치 텍스트 에디터 입니다. 꽤 가벼운데 어떠한 자바스크립트 프레임워크에 얽매이지 않아서 굉장히 빠르게 로딩이 됩니다.


10.  RazorFlow

https://razorflow.com/

RazorFlow는 PHP 프레임워크로 반응형 대시보드를 만들 수 있습니다. 이 대시보드의 장점은 모든 브라우저든과 디바이스 플랫폼에 호환이 가능하고 MySQL, SQLite 또는 PostgreSQL 데이터베이스들과 같이 일을 할 수 있습니다.



11.  WorkLess

http://workless.ikreativ.com/

WorkLess는 HTML5와 CSS3 프레임워크로 시간과 노력을 최소화 해서 여러 웹브라우저 및 웹사이트 호환을 시켜줍니다. 반복되는 작업을 감소해주면서 웹사이트 개발에 들어가는 시간을 확실히 단축시켜 주죠.


12.  Percentage Loader

http://widgets.better2web.com/loader/

퍼센테지 로더는 캔버스를 사용해서 아무 이미지 없이도 멋진 로더(loader)를 만들어 줍니다. 드래그 엔 드롭 기능을 통해서 한 스크린에 여러 로더를 보여 줄 수도 있죠.


13.  Zebra

http://www.zebkit.com/

Zebra는 자바스크립트 라이브러리로 유저들이 데스크탑과 같은 레이아웃을 만들 수 있도록 해줍니다. Zebra의 UI 요소들이 풍부하고 HTML 캔버스와 CSS3 요소들로 만들어졌습니다. Zebra는 모든 장면들이 웬만한 현대 웹브라우저들에 다 동일하게 보여지도록 렌더링을 해줍니다.





14.  Junior

http://justspamjustin.github.io/junior/#home

주니어는 HTML5 프레임워크로서 개발자들이 모바일 어플과 같이 만들 수 있도록 도와주는 프론트엔드입니다. 프레임워크와 함께 미리 제공되는 도큐먼트와 샘플들이 주니어를 사용하는데 매우 쉽게 해주죠. 부드러운 성능을 위해서 CSS3 전환과 여러 UI요소들을 사용합니다.


15.  Radi

http://radiapp.com/

라디는 정말 좋은 시각 디자인 어플리케이션입니다. 라디는 웹을 위한 애니메이션과 그래픽 및 동영상을 만드는데 최적화 된 어플인데, HTML과 자바스크립트 코딩을 이용해 사용할 수 있습니다. 추가로 캔버스 아웃풋을 통한 애니메이션도 만들 수 있죠.


16.  Literally Canvas

http://literallycanvas.com/

Literally Canvas는 그림판과 같은 오픈소스 위젯입니다. 이 위젯은 온라인에서 그림을 그려서 아무 HTML 페이지에 적용시킬 수 있죠. Literally Canvas에 딸려오는 툴로는 그리기, 색상 고르기, 지우기, 뒤로 돌리기 등의 기능들이 있습니다.


17.  HTML Sortable

http://farhadi.ir/projects/html5sortable/

HTML Sortable은 가벼운 플러그인으로서 여러 리스트 사이로 아이템들을 움직이고 연결시켜 줄 수 있습니다. 또한 모든 메이저 웹브라우저들과 호환이 가능한데 HTML5의 기존 API와 연동해서 드래그 엔 드롭을 통해 그리드(grid)나 리스트들을 분류할 수 있습니다. 



댓글

Designed by JB FACTORY