[Tool] 웹디자이너를 위한 15가지 온라인툴(15 Online HTML5 Tools for Web Designer)。

웹디자이너를 위한 15가지 온라인툴(15 Online HTML5 Tools for Web Designer)。

1. Moqups – HTML5 App For Creating Wireframes

와이어프레임 사이트.

IE에서는 구동이 되지않지만 사이트 UI를 구성하기에 좋은 툴입니다. 

기획자 디자이너에게 유용한 온라인 툴.!

2. Fontdragr – Online Font Testing Tool

폰트 사이즈 / 스타일 별로 확인하고 적용해 볼 수 있는 온라인툴.

갤러리에 있는 폰트를 선택할 수도 있지만 그것은 전부 영문.!

But!!

사용자가 가지고 있는 폰트를 브라우저에 드래그&드롭을 하면 그 폰트가 적용된다는 사실!!

한글폰트를 하고 한글을 치면 적용값을 볼 수 있습니다.

3. Liveweave – HTML5, CSS3 & JavaScript Playground

라이브로 확인할 수 있는 온라인 툴.

HTML5, CSS3, JavaScript 라이브러리 모두 사용해 볼 수 있는 온라인툴.

예제를 공부하기에 좋을거 같습니다.

많이 이용해보세요.!

4. Adobe Edge Animate

어도비 엣지. 플래시가 아닌 스크립트 기반의 모션을 만들 수 있는 툴.

리소스도 제공하고 사용방법 등을 소개하니 인터랙티브 웹을 생각하시는 분들은 사용해보시길 권유드립니다.

5. HTML KickStart

HTML5와 제이쿼리를 다양한 형태의 예제를 보여주는 사이트입니다.

각 유형별 소스를 가져다가 적용만 해도 나타나는 예제 활용하면 편하고 쉽게 UI를 제작할 수 있을거 같습니다.^^

6. Stitches – An HTML5 Sprite Sheet Generator

이툴에 대해서는 잘 모르겠습니다. ㅠ

이미지를 Sprite로 변경해주는거 같은데... 아시는 분들은 댓글 달아주세용ㅠㅠ

7. Create – Web Editing Interface

에디터를 이용하여 타입을 바꿔볼 수 있는 사이트.

자세한 내용을 파악하지 못했다. 다만 라이브러이의 제이쿼리 소스를 제공한다는 점 정도..?

8. SpriteBox Online HTML5 Tool

스프라이트 박스를 만들 수 있는 온라인 툴.!

상자를 그려서 우측에 Create Css를 누르면 코드가 생성!

9. Online Velocity Sketch Tool

HTML로 만든 점과 선을 이용한 기하학적 패턴. 어렵스므니다..

10. On/Off Flipswitch HTML5/CSS3 Generator

온/오프 버튼을 만드는 온라인툴.!

하단에는 코드를 제공해줍니다. 유용한 툴.!

11. Online SVG to HTML5 Canvas Tool

이 툴은 이해가 잘 안가는툴이네요..ㅠ

SVG란 일러스트를 코드로 변환해서 이미지를 넣지않고 코드를 넣는거로 알고 있는데.. 

조언 부탁드려요~^^

12. Online 3D Sketch Tool

3D 스케치를 할 수 있는 온라인툴. 바이브레이션과 솔리드/대쉬라인을 넣어서 그릴 수 있네요~

메모장보다는 좋은거 같아요^^

13. Online Pattern Generator Tool

패턴을 만들어서 쓸 수 있는 온라인 툴.!

코드로 값을 제공해줘서 사용하기에 따라서 멋진 디자인이 나올 수 있을거 같네요~

14. Online XRay Tool

투명창과 그라디언트 등 다양한 효과를 코드로 받아볼 수 있는 사이트.

15. Online HTML5 Audio Maker Tool

한눈에 어떤 사이트구나! 딱 감이 오는 사이트!

오디오 메이커 툴인데 크로스 브라우징보다는 최신브라우저와 모바일에 적극 활용하면 좋을거 같습니다.