추천할만한 와이어프레임 도구, Wireframe Sketcher

비단 디자이너만의 이야기는 아니다.

오늘날 어떤 결과물을 기획하는데 있어 그 표현을 단순한 텍스트가 아닌 이미지로 한다는 것은 거의 필수가 되고 있다.

 

자신의 머릿속에 있는 것을 가지고 조직내 커뮤니케이션을 해본 사람은 누구나 공감할 것이다. 텍스트가 빼곡한 장황한 보고서보다도 이미지 한장이 훨씬 더 효과적인 커뮤니케이션 수단이 된다는 것을. 그리고 그렇게 머리속에는 이미 나와있는 그림을 텍스트로 정확히 표현할 수도 없다는 것을 말이다. 애써 긴 텍스트로 표현하고 프리젠테이션까지 하지만 나중에서야 내가 설득시켜야 하는 사람들은 많이 다른 이해를 하고 있었음을 깨닫는다

 

웹사이트나 어플리케이션을 기획하는 사람들... 이젠 와이어프레임을 그리는 일이 UI 디자이너만의 일이 아니다.

자신이 원하는 컨셉을 그 어떤 방법보다도 효과적으로 커뮤니케이션하는 방법, 백마디의 말보다도 이미지다.

  

 

 

그냥 이런 그림 한번 보여주면 끝이라는 이야기다.

 

자신의 머리속에 있는 모습을 이렇게 와이어프레임(Wireframe) 으로 표현해보면 자신의 생각도 클리어하게 정리할 수 있음은 물론 의사결정자나 디자이너, 개발자 등과 아주 쉽게 커뮤니케이션 할 수 있다.

 

이런저런걸 기획해보다보니 예전부터 이런 니즈를 많이 느낀다. 직접 개발툴이나 디자인 프로그램을 다루지는 않다보니 주로 연필로 슥슥 그리곤 했는데 시간은 좀 걸리긴 하지만 상상으로만 하던 이미지들을 하나씩 하나씩 펜으로 그려나가는 재미도 만만치 않게 매력적이었다.

 

그렇다보니 아래와 같은 UI Stencil kit 에도 뽐뿌를 느끼고...

 

 

어릴 적 사용하던 운형자처럼, 종이에 대고 그릴 수 있는 이런 UI Stencil kit 는 꽤 끌리긴 했으나 계속 변해가는 UI 요소들을 이런 실물이 따라가는데는 한계가 있다는 판단하에 구매하진 않았다

 

그러다 만난 몇가지 MockUp 툴들... 기본적인 와이어프레임을 스케치할 수 있는 툴들이 웹앱 형태로 등장해서 환호성을 질렀었다.

MockFlow 나 MockingBird 같은 와이어프레임 툴들은 최근까지도 썼던 녀석들로 기획자로 키우고 있는 팀원들에게도 소개를 했던 툴들이다. 기본적인 스케치툴로는 괜찮긴 했으나 좀 더 다양한 화면들을 연출하려다 보면 UI Asset들이 좀 아쉬웠고 무료버전의 제약들도 꽤 타이트한 편이다.

 

그러다가 얼마전에 알게 된 이 Wireframe Sketcher, 기존에 필자가 썼던 툴보다는 확실히 좋고 만족스러워서 추천할만 하다.

 

대략 어떤 모습들이 만들어지는지 아래 링크에 있는 샘플들을 구경하면 된다

http://wireframesketcher.com/sample-mockups.html   

 

 

 

Wireframe Sketcher 는 설치형 프로그램으로 Windows 와 Mac 이 모두 지원된다. 그리 크지 않은 프로그램이 빠르게 설치되며 그걸로 준비 끝.

Drag & Drop 및 자유로운 프레이밍이 가능해서 별다른 설명없이도 이것저것 해보면서 쉽게 적응할 수 있다.

 

위 모습이 실제 프로그램을 실행해서 만들어보고 있는 모습이다.

스크린 패널 및 요소를 관리할 수 있는 좌측 영역과 여러가지 UI Assets 들을 끌어다쓸 수 있는 우측 팔레트가 보인다.

 

저런 요소들은 해당 제공사 홈페이지에서 추가로 받고 공유할 수 있다는 점이 특히 마음에 든다

http://wireframesketcher.com/mockups/index.html

 

그렇기 때문에 웹에서의 UI 요소나 특히 빠르게 진화하는 스마트폰에서의 요소들을 지속 업데이트하면서 쓸 수 있다. 

 

 

딱딱하고 건조한 그림보다 이처럼 손으로 그린듯한 느낌을 주는 기본 Asset 들도 마음에 든다. 작업을 하면서도, 그리고 나중에 결과물을 인쇄본이나 이미지로 export 했을 때 좀더 아날로그스러운게, 괜히 좀더 creative 하게 만들어주는 느낌이다.

 

그리고 그림 파일이나 외부 아이콘도 탐색기에서 바로 드래그 앤 드롭으로 쉽게 붙일 수 있어 작업이 편하다

 

 

 

 

안드로이드폰과 아이폰 (iOS7 포함) 요소들을 다 가지고 있는 모바일쪽 템플릿도 제법 잘 갖추어져있다

지속적인 업데이트만 잘 된다면 유료 버전을 구입해서 애용하고 싶을 정도. 교육기관에서 일하고 있거나 학생인 경우 50% 할인도 받을 수 있다.

 

최근 개인적인 필요로 스케치해보고 있는 위젯이 있는데 이 Wireframe Sketcher 로 작업해봐야겠다.  

 

암튼 Wireframe 그리는 tool 로는 최근 가장 나은 녀석인듯 싶어 추천해본다