와이어 프레임 제작 툴과 프로세스
바닥부터 시작하는 UI/UX 디자인
UI/UX 디자인 작업을 할 때 탄탄한 디자인과 설계를 위해서는 필수인 와이어 프레임 구성 단계를 나는 항상 제대로 끝낸 적이 없었던 것 같다. 약식으로 그리는 Lo-Fi 단계에서 나름 고민해서 설계한 뒤 Hi-Fi 단계로 와이어 프레임을 짤 때, 끝까지 완성을 하지 않고 바로 스타일링 작업으로 들어가니 텍스트나 버튼의 위치, 컬러를 다시 고민하면서 작업이 속도가 나지 않았다. 그러다 보니 결국 결과물에서 빈틈이 많았던 것 같다. 이런 상황에 대해 문제의식을 항상 갖고 있었기에, 이번에 본격적으로 포트폴리오 재작업이 들어갈 때에는 설계부터 탄탄히 해보고 싶었다. 그렇다보니, 보통의 디자이너들은 어떤 프로그램과 프로세스를 통해 와이어프레임을 구성하는지 궁금하여 정보 수집이 시작됐다.
와이어 프레임
제작 툴
WireFrame - How companies like Google and Flipkart design apps and website by Hitesh Choudhary
가장 먼저 참고한 정보는 유튜브였다. 정보를 얻고 습득하는 데에는 역시 가장 좋은 채널인 것 같다. 얼마 전 구독하게 된 유튜버 Hitesh Choudhary 인데, 프로그래밍 베이스인데 디자인 관련된 툴도 소개를 해준다. 얘기를 들어보면 본인도 디자인을 본격적으로 한지는 얼마 안됐지만, 다양한 정보를 제공하고자 노력하는 유튜버인 것 같다. 구글같은 회사는 어떻게 디자인을 할까라는 호기심을 자극하는 제목인데, 실제 내용은 그런 내용이 위주는 아니었다. 구글같은 큰 회사에서는 와이어 프레임을 반드시 사용하고, 프리랜서라면 와이어 프레임 단계를 고객 측과 충분히 논의를 하거나 비용을 높게 받아야 한다와 같은 조금 당연한 소리를 언급한 정도였다.
그래도 전체적으로 와이어 프레임은 무엇인지, 실무에서는 어떤 프로그램이나 프로세스를 사용하는지, 어떤 방식을 추천하는지에 대해서 설명해주고 있어서 나도 어떤 방향으로 하면 좋을지 살펴볼 수 있었다. 여기에서 추천해준 세 사이트와 방법을 정리해보고자 한다.
① Balsamiq
https://balsamiq.com/이 사이트는 예전에 알고 있었는데, 그 때도 몇 번 사용하다가 말았다. 자체 프로그램이 있고 약간 두들식의 아이콘들인데 심플하다기 보다는 귀여운 느낌이라 별로 사용하고 싶진 않다. 위의 유튜버도 이건 거의 사용하진 않는다는 식으로 말했다.
② Moqups
위의 Balsamiq 보다는 훨씬 심플한 편이고 유튜버도 추천했다. 근데 익숙하지 않기도 하고, 아트보드형식으로 안되는 것 같아서 불편했고 어차피 구독하면 돈을 내야되니 별로 였다.
③ Wiregrame.cc
웹 기반이고 단순한 편이다. 라인으로만 깔끔하고 빠르게 만들고 싶다면 좋은 툴인 것 같다.
④ 이 외
하지만 역시나 가장 좋은 방법은 스케치나 XD, 피그마 자체에서 해결하는 것이 편하다. 구글링을 하면 와이어프레임 무료 키트를 받을 수 있다. 나도 그렇게 해서 받은게 몇 개 있긴 하지만, 문제는 무료이다보면 내가 원하는 스타일이 아닌 경우가 많고 좀 오래된 것들이 많다. 유튜버도 자체 프로그램에서 제작하는 것을 추천하지만, 그냥 템플릿을 가져와서 붙이는 건 추천하지 않는다 했다. 나도 처음에는 틀이 있어야 한다고 생각하고 빨리 시작을 못했던 건데, 생각해보니 와이어프레임 단계에서 템플릿을 사용하면서 꾸밀 필요도 없고, 신속하게 컴포넌트들의 위치를 정하고 정보를 정리하는 것이 우선이라 판단하여 어느 툴이나 템플릿에 연연할 것이 아니라, 가장 단순한 구조로 내가 만드는 것이 최선이라는 생각이 들었다.
+ 2019년 7월 25일 현재)
나는 피그마로 와이어프레임과 디자인까지 하고 있다. 피그마가 최고다.
와이어 프레임
제작 프로세스
① Low Fidelity -> High Fidelity
이 유튜버는 우선 종이 스케치로 틀을 잡고 작업을 한다. 대부분의 디자이너들의 방식이 이럴 것이다. 나도 종이에 그릴 때는 좀더 간소화되고 고민의 흔적이 많은 상태이고, XD에서 작업을 할 때 다시 고려하면서 마무리한다. 그리고 이 유튜버는 SVGSUS 라는 앱스토어 프로그램으로 아이콘 등을 사용하는데, 2.99달러 정도로 구매해야 된다. 검색기능도 있어서 편리해보이긴 하지만, 구매하는 것 까진 내키진 않는다. 그래서 나는 이번에 작업할 때 그냥 아이콘을 제작했다. 아이콘도 디자인의 요소이니, 아예 전체적으로 같은 컨셉으로 통일될 수 있도록 했다. 원래 예전에는 다 무료 키트에서 사용했었는데, 그러다보면 아무래도 만족스럽지 않은 것 같다.
다음은 바로 작업에 들어가는 것이다. 이 영상이 꽤 도움이 됐던 것은 정말 심플하게 작업하고 있어서 와이어프레임에서 디자인적으로 많은 노력을 할 필요가 없음을 보여준다. 그저 무채색으로, 폰트도 우선 고려하는 것이 아니라 내용적인 설계에 집중하는 것이다.
나도 와이어 프레임 작업을 해 보았다. 홈트레이닝 관련 어플리케이션인데, 공모전 수상작이었으나 예전 작업이라 디자인이 너무 구식이라 다시 해야하고, 부족한 부분을 보완하고자 한다. 나는 위에 소개한 사이트를 따로 이용하는 방식 보다는, 최대한 XD자체에서 해결하고자 했다. 이미지 표시는 엑스 박스고 일러스트나 사진 정도로만 표기했으며, 버튼과 구성 요소들은 사각형 위주로 단순화했고 네비게이션 바에 들어갈 아이콘 같은 경우에는 따로 템플릿에 있는 아이콘을 사용하지 않고, 일관된 스타일이 드러나도록 직접 디자인 해 보았다.
이번에는 와이어 프레임 단계를 허투루 넘기지 않고 정보 구성에 신경을 썼으니 스타일링이 들어갈 때는 그나마 스타일링에 집중할 수 있지 않을까 싶다. 아직 해야 할 부분이 많이 남았지만, 그래도 기초 공사를 해 놓은 것만으로도 아주 조금 마음이 놓인다. 다음주 수요일 전까지 디자인 부분은 끝낼 수 있도록 해야겠다.
