-
추천할만한 와이어프레임 도구, Wireframe SketcherIT/Software & UX 2014. 2. 16. 08:35
비단 디자이너만의 이야기는 아니다.
오늘날 어떤 결과물을 기획하는데 있어 그 표현을 단순한 텍스트가 아닌 이미지로 한다는 것은 거의 필수가 되고 있다.
자신의 머릿속에 있는 것을 가지고 조직내 커뮤니케이션을 해본 사람은 누구나 공감할 것이다. 텍스트가 빼곡한 장황한 보고서보다도 이미지 한장이 훨씬 더 효과적인 커뮤니케이션 수단이 된다는 것을. 그리고 그렇게 머리속에는 이미 나와있는 그림을 텍스트로 정확히 표현할 수도 없다는 것을 말이다. 애써 긴 텍스트로 표현하고 프리젠테이션까지 하지만 나중에서야 내가 설득시켜야 하는 사람들은 많이 다른 이해를 하고 있었음을 깨닫는다
웹사이트나 어플리케이션을 기획하는 사람들... 이젠 와이어프레임을 그리는 일이 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 로는 최근 가장 나은 녀석인듯 싶어 추천해본다
반응형'IT > Software & UX' 카테고리의 다른 글
가카의톡 대안 메신저, 텔레그램 사용법 (8) 2014.10.14 무료 스토리보드 아이콘 430개 다운받기 (무료 일러스트 카툰) (0) 2014.06.25 홍채인식이나 얼굴인식, 지문인식과는 다르게 봐야 한다 (0) 2013.11.30 모바일 결제, 과연 cool한 사용자 경험을 제공하는가? (0) 2013.11.18 구형 아이패드에 축복 :: 올드버전 앱 다운이 가능해졌네요 (2) 2013.09.18