기획자라면 알아야할 와이어프레임 서비스 7선

와이어프레임이란?

웹페이지의 구조를 제안하기 위한 인터페이스 디자인에서 사용되는 기본적인 비주얼 가이드입니다. 웹사이트와이어프레임은 인터페이스의 기본적인 구성요소들의 레이아웃을 그리는 것과 비슷합니다. 일반적으로 와이어프레임은 실제디자인 작업이 진행되기 전에 완료됩니다.


Mockup 이란?

제조와 디자인에서 디자인 또는 디바이스의 풀사이즈 또는 축소 모형을 말합니다. 이것은 디자인이나, 프로모션 또는 다른 목적을 달성하기 위해 디자인 또는 디바이스의 사용 방법을 설명하거나, 데모를 시연하거나, 평가를 받기 위한 용도로 사용됩니다. 시스템의 최소한적인 기능을 부분적으로 제공하여 테스트가 가능할 때 우리는 이것을 프로토타입이라고 부르기도 합니다.



웹서비스, 또는 소프트웨어, 어플리케이션 기획 및 디자인에서

스토리보드를 그린다는 것, 와이어프레임, mockup은 상당히 중요합니다.

기획자는 와이어프레임이나, mockup으로

자신이 구상한 아이디어를 다른 사람이 이해할수 있도록 시각화하여 자신의 생각을 설명해야합니다.


이러한 용도로 여러분께 유용한 와이이프레임 서비스를 소개합니다.




balsamiq

balsamiq은 제가 예전에도 블로그를 통해서 소개한적이 있는 wireframe 도구 입니다.

air기반의 설치형 어플리케이션이며 여러 컴포넌트들을 내장하고 있습니다.

손쉽게 마우스 드래그앤 드롭으로 컴포넌트들을 배치하여 사용합니다.

이 포스팅에서 제가 소개해드리는 어플리케이션 중에서 유일하게

한글 사용이 가능합니다.

air 기반의 설치형 어플답게 embed하는 폰트 경로를 설정할수가 있습니다.

자세한 내용의 이전 포스팅을 참고하세요.






MockFlow

웹기반의 플래시로 구현된 mockup 서비스 입니다.

아이폰은 물론이고, 웹, 어플을 모두 고유의 UI 컴포넌트들을 가지고 있어

드래그앤드롭으로 손쉽게 mockup을 할수 있습니다.

홈페이지에 방문하시면 다양한 샘플을 구경할 수 있습니다.





mockingbird

photoshare

iPlotz

HotGloo

Cacoo

소개한 서비스를 비롯하여 웹기반의 와이어프레임 서비스는

대부분 한글을 지원하지 않는 단점이 있습니다.

다름아니라 이 서비스들은 Rich Interface를 위해 플래시를 기반으로 하여 구현되는데

플래시에서 한글을 사용하기 위해선

플래시에 해당 언어셋을 포함(embed)시켜야 합니다.

이렇게 될 경우 당연히 플래시 용량이 커지기 때문에

대부분 영어 또는 자국어 언어만을 지원합니다.


와이어프레임은 비주얼하게 보여지는 것을 만드는 것이니

한글이 안된다고 해서 와이어프레임 도구를 탓하며 마냥 기피하는 것보다

때로는 이러한 도구들을 사용하여 쉽고 빠르고 명료한 와이어프레임을 제작하는 것도 좋습니다.


여러분의 멋진 서비스 기대해봅니다.