2022년 배워야 할 UI/UX 툴 5가지

2022년 배워야 할 UI/UX 툴 5가지에 대해 알아보겠습니다.

 

UI와 UX는 엄밀히 따지자면 다른 개념이긴 합니다. UI는 사용자 인터페이스(User Interface), UX는 사용자 경험(User Exprience)로, 사용자 인터페이스를 잘 구축해서 좋은 사용자 경험을 제공하는 데 그 목적이 있습니다. 따라서 UI가 UX를 담고 있지만, UX에 대한 이해가 선행되어야 합니다.

 

이렇듯 UI는 대체로 디자인에 초점이 맞춰지고 UX는 사용자가 제품을 경험하는 데 있어서의 경험(효율, 긍정적 평가, etc)을 목표로 한다는 것에서 다른 의미이긴 하나 특별히 UI, UX 업무를 행하는 이들을 제외하곤 둘을 섞어 쓰기도 하고 같은 의미로 혹은 포괄해서 부르기도 합니다. 따라서 아래에서도 그냥 UI/UX 툴로 통칭하도록 하겠습니다.

 

아래에 언급할 UI/UX 툴들은 디자인, 와이어프레임, 목업, 프로토타입 등 UI/UX 디자인 작업을 하는 데 있서 필요한 기능들을 포함하고, 이런 작업들을 빠르고 쉽게 접근할 수 있도록 도와주는 효율적인 UI/UX 설계 도구들입니다.

 

 

---

 

1. 피그마

출시일 : 2016년 9월 27일

https://www.figma.com/

 

웹 기반 툴로 웹브라우저 혹은 데스크탑 앱으로 실행할 수 있습니다. 웹 기반이기에 인터넷이 연결되는 곳이라면 운영체제와 상관 없이 작업할 수 있습니다. 출시 이후 5년 만에 전 세계 디자이너 사이에서 많은 인기를 끌어내며 지금은 UI/UX 툴 계 1인자로 봐도 무방하지 않을까 싶습니다.

 

실제로 UI/UX 관련 사이트 uxtools 2021년 조사에 의하면 화이트보드, UI 디자인, 프로토타이핑, 디자인 시스템 등에서 높은 점수를 얻고 있는 툴입니다. (참조 : https://uxtools.co/survey-2021/)

 

심플하고 실용적인 디자인 환경 외에도, 커뮤니티 색션을 통해 플러그인, 위젯, 템플릿, UI 키트, 아이콘, 와이어프레임 템플릿 등을 활용할 수 있고, 이로 인해 디자인 속도를 높일 수 있습니다. 물론 커뮤니티를 통해 내 디자인을 남들과 공유할 수도 있습니다. 어떤 프로그램의 인기를 알기 위해서는 해당 프로그램의 플러그인과 써드파티 업체들이 얼마나 있는가를 살펴보면 알 수 있습니다. UI/UX 툴 중에서 스케치에 유용한 플러그인이 많기로 유명한데 피그마도 못지 않다고 볼 수 있겠습니다. 

 

피그마가 다른 툴과 차별화되는 점은 네 가지로 볼 수 있습니다.

첫 번째는 FigJam입니다. 피그잼은 초안 작업을 하는 화이트보드 역할을 하며, 종이에 스케치하는 대신에 와이어프레임 도구로 사용할 수도있습니다. 특히 피그마 모바일 앱은 작업이 안 되고 뷰어 역할만 한다면, 피그잼 아이패드 앱은 애플펜슬을 이용한 활용면에서 뛰어난 면모를 보여줍니다. (참조 : https://youtu.be/wKFgaxYtMNY)

 

두 번째는 협업입니다. 내 프로젝트에 초대한 타인과 함께 실시간으로 협업을 할 수 있습니다. 다수가 하나의 작업을 공유하여 동시에 작업할 수 있습니다. 빠른 작업을 할 수 있도록 도와주는 다양한 기능과 플러그인이 제공되기에 다수가 하나의 프로젝트로 작업할 경우에 좋은 툴입니다.

 

세 번째는 제플린을 통하지 않고도 css 혹은 xml 코드를 확인할 수 있습니다. 어도비 XD나 스케치로 작업할 경우 프로그래머에게 전달 시 코드로 알려주기 위해 중간 단계로 제플린을 거쳐야 하는데 피그마를 사용하면 중간 변환 없이 바로 작업할 수 있게 됩니다. 물론 프로그래머에 따라서 제플린 타입을 선호하는 사람이 있고 피그마 방식을 더 선호하는 사람이 있기도 합니다.

 

마지막으로 벡터 이미지 생성의 편리성입니다. 어도비 XD로 갖업할 경우 아이콘 작업을 일러스트레이터에서 해서 가져오는 경우가 많은데 피그마의 경우 피그마 자체에서도 생성할 수 있을 정도로 벡터 이미지 생성 기능이 좋습니다. 특히 라인이나 포인트 별로도 세밀하게 조절할 수 있다는 점이 전문 이미지 프로그램보단 떨어지지만 일반적인 UI/UX 툴보다 우위에 있다고 할 수 있습니다.

 

 

 

2. 어도비 XD

출시일 : 2016년 3월 14일

https://www.adobe.com/kr/products/xd.html

 

디지털 이미지 프로그램 업체 중 공룡이라고 부를 정도로 커다란 덩치를 자랑하는 곳이 두 군데 있습니다. 오토데스크와 어도비(Adobe)가 바로 그 곳인데 어도비 사에서도 UI/UX 툴을 가지고 있습니다. 피그마와 마찬가지로 유용한 플러그인이 많으며, 설계에 어도비 UI 키트를 사용할 수도 있습니다.

 

어도비 제품의 가장 큰 차별점은 아무래도 크리에이티브 클라우드라고 할 수 있을 것입니다. 이를 통해 포토샵, 일러스트레이터를 비롯한 다양한 도구에 접근할 수 있을 뿐 아니라 그것들의 장점을 이용할 수 있습니다. 디자이너 기본 소양이랄 수도 있을 포토샵과 일러스트레이터 같은 프로그램들을 통해 XD의 단점을 보완할 수도 있습니다.

 

피그마와 마찬가지로 윈도우즈는 물론 맥에서도 작업할 수 있습니다.

 

 

 

3. 스케치

출시일 : 2010년 9월 7일

https://www.sketch.com/

 

스케치는 UI/UX 디자이너라면 모를 수 없는 툴이며, UI/UX 툴의 아버지라고 부를 수도 있을 것입니다. 초기 UI/UX를 포토샵으로 하던 이들도 스케치의 매력을 맛 보고 "UI/UX를 잘 하고 싶으면 스케치를 배우라"는 말을 할 정도였습니다.

 

피그마와 XD보다 6년을 앞서 출시했으며, 엄청난 업그레이드로(이에 따른 버전 넘버링부터가 남다른 점이 있습니다) all-in-one-designer's toolkit 이라는 광고 문구를 사용할 만큼 피그마와 XD가 자랑하는 기능들을 갖춘 것이 스케치인데 UI/UX 툴 중 압도적 1위라 할 수 없는 이유가 있습니다. 피그마, XD와 다르게 스케치는 맥 OS 용만 있다는 단점이 있는 것입니다. 디자이너라면 맥을 사용한다고 했던 시절이 있다지만 요즘은 그렇지 않죠. 맥에서만 사용할 수 있다는 것은 누구도 부인할 수 없는 약점입니다.

 

 

 

4. 인비전 스튜디오

https://www.invisionapp.com/studio/

 

디자인에서만이 아닌 기획이나 개발 단계에서도 유용한 툴입니다. 사용법이 직관적이라 누구나 쉽게 접근할 수 있습니다. 피그마처럼 웹 브라우저로 구동하기에 윈도우즈와 맥OS 사용자 모두가 사용할 수 있습니다. 피그마처럼 프로젝트 하나는 무료이기에 공부할 때부터 부담이 없습니다. 실용적인 도구라고 할 수 있습니다.

 

슬렉, 트렐로와 같은 협업 툴과도 호환성이 좋습니다. 인비전의 중요하고 가장 유명 플러그인인 Craft를 이용해서 스케치와 연동해 사용할 수도 있습니다.

 

 

 

5. 마블

https://marvelapp.com/

 

마블은 일반 디자이너를 위한 UI/UX 툴이라 할 수 있을 것입니다. 마블은 위의 4가지 툴들과 달리 UX 설계 및 와이어프레임에 초점을 맞추고 있습니다. 와이어프레임과 사이트맵을 위한 기본 요소들로 구성돼 있기에 복잡한 작업보다는 단순하고 쉬운 Lo-Fi 툴이라 할 수 있습니다.

 

내 컴퓨터에 저장된 파일을 이용할 수 있는 건 물론이고 드롭박스나 구글 드라이브 같은 클라우드 서비스에서도 파일을 가져와 작업할 수 있습니다. PSD 파일도 연동 가능하며, jpg, png 같은 일반 이미지를 가져와서 프로토타이핑 작업을 진행할 수 있습니다. (참조 : https://vimeo.com/78741166)

 

 

---

UI/UX 디자이너 혹은 작업에 있어서 툴이 가장 중요하다고는 절대 말할 수 없을 것입니다. 클라이언트와 우리 제품에 대한 이해, 디자인감 등에다 이를 구현하기 위한 프로그램에 대한 기초 지식 등 갖춰야 할 것이 많습니다. 하지만, 다른 필요 요소들과 소통하기 위해 위와 같은 툴들을 사용하면 시간을 절약하고 더 실질적인 최종 제품에 한 발 다가갈 수 있으며, 타 작업자 혹은 클라이언트와 소통하는 데 도움이 될 것이라는 것은 확실합니다.