디지털 모바일 프로덕트 시장이 커지면서 다양한 디자인 툴들도 생겨나고 있다. 초기의 웹, 모바일 디자이너들은 포토샵과 일러스트레이터로 디자인을 했지만 스케치와 어도비 XD 등 가볍고 다루기 디자인 툴이 생기면서 대부분의 디자이너들은 웹&모바일 전용 디자인 툴로 디지털 프로덕트를 제작하고 있다.
약 4년 전에 피그마(Figma)라는 온라인 협업 디자인 툴이 등장하기 시작했고 코비드 19로 재택근무가 증가하면서 피그마가 선풍적인 인기를 끌고 있다.
사실 베테랑 전문가들에게 디자인 툴은 도구에 불과하다. 컴퓨터 그림판으로, 엑셀, 파워 포인트로도 놀라운 그림 실력을 가진 사람들을 종종 만난다. 전문가들에게 새로운 툴은 내 디자인을 향상해줄 것이란 기대보단 익숙한 툴을 또 바꿔야 하는 번거로움으로 작용하기도 한다.
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05145205/20201105_143827-1.png)
그럼에도 불구하고 디자인 툴에 익숙하지 않은 주니어 기획자 혹은 UX 디자이너들에게 새로운 툴은 작업 속도를 단축시켜주고 내 결과물을 더 돋보이게 해주기도 한다.
The Purpose of this article
: 개인적으로 써 본 툴 들 중에서 주니어 기획자와 UX 디자이너들이 자신의 결과물을 좀 더 빠르고 효율적으로 표현할 수 있도록 도와주는 디자인 툴을 소개한다. (배테랑 기획자 & 디자이너분들이라면 과감히 스킵하셔도 됩니다.)
1.Whimscal-와이어프레임, 유저 플로우를 그리는데 최적화된 도구
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05145335/20201105_143840-1.png)
기획자와 UX 디자인의 경계가 모호한 스타트업 회사의 포지션이라면, 파워포인트보다는 좀 더 완성도 있는 Mi-fi wireframe을 찾는 기획자라면 윔스칼을 추천한다.
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05145832/20201105_143852-1.png)
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05145849/20201105_143902.png)
장점
1. 파워포인트를 다루는 것과 비슷하거나 더 쉽다.
2. 몇 번의 손놀림으로 Hi-fi wireframe까지 구현이 가능하다.
3. 디자이너들에게 더 확실한 와이어프레임을 전달할 수 있다.
4. 무료 계정으로 최대 3명까지 동시 작업이 가능하다.
단점
1. 영어 기반 툴이라서 한글을 입력하면 글자가 튕기는 경우가 많다. 필요한 글자들은 메모판에 써서 ‘복붙’하는 것을 추천한다.
2. 너무 구체화된 Hi-fi wireframe로 인해 디자이너의 창의성을 방해할 우려가 있다.
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05150000/20201105_143915-1.png)
윔스칼에서 유저 플로우 차트를 그리는 것 또한 매우 쉽다. 원하는 도형을 쉽게 선택한 후 치수를 조절할 수 있고 손쉽게 표를 만들 수 있다. 그래프에 필요한 도표들도 다양하게 제공한다.
2. Flowmapp-사이트맵, 유저 플로우, 유저 페르소나, 고객 여정 지도 그리기에 최적화된 툴
제목 그대로 사이트맵과 유저 플로우, 유저 페르소나, 고객 여정 지도를 그리기에 최적화된 툴이다.
장점
1. 내 작품을 돋보이게 해주는 깔끔한 인터페이스.
2. 다양한 템플릿 제공. 특별히 유저 페르소나와 고객 여정 지도는 매우 만족스러움.
3. 온라인 협업 가능(유료 버전)
단점
1. 무료 버전에선 각각 하나의 프로젝트만 가능
2. 영어 기반의 서비스라 한글이 튕기거나 밀리는 현상
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05150104/20201105_143929.png)
사이트맵은 일반 사이라면 꼭 있어야 하는 페이지들의 와이어프레임을 제공하여 기획자&디자이너들에게 쉽고 빠르게 사이트 흐름을 파악할 수 있도록 제공한다.
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05150151/20201105_143941.png)
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05150136/20201105_143951.png)
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05150220/20201105_144007-1.png)
![](https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2020/11/05150225/20201105_144017-1.png)
3. Paste by WeTransfer-최적의 프레젠테이션 도구
이미 프레젠테이션의 최강자인 파워포인트와 키노트가 있지만 새로운 디자인 툴을 써보고 싶어 하는 사람들에게 추천한다.
장점
1. 온라인 작업, 협업이 가능하다.
2. 모바일 프로덕트 프레젠테이션에 최적화된 템플릿을 제공한다.
3. 글자 폰트와 색상 차트가 매우 뛰어나 대충 만들어도 간지 난다.
단점
1. 주어진 템플릿 외의 자유도가 떨어진다.
위에서 소개한 3가지의 툴 외에서 Hi-Fi wireframe과 프로토타입을 쉽게 만들어주는 디자인 툴로는 UXPin , JustMind, Principle, Framer 등이 있고 마블과 발사믹처럼 스케치 단계의 콘셉트를 잡는데 유용한 도구들도 넘쳐 나고 있다.
어떤 디자인 툴이 더 좋고 덜 좋고의 문제보다는 최근에 트렌디한 디자인 툴을 몇 개 사용해 보면서 자신에게 가장 잘 맞는 툴을 찾는 게 가장 중요할 듯하다.
헤일리님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
![](https://s3-ap-northeast-2.amazonaws.com/mobiinsidecontent/kr/wp-content/uploads/2019/08/26183552/88x3113.png)
안녕하세요, 비주얼 사이트 맵 도구를 사용해보세요. 감사합니다.
https://octopus.do