UX/UI 툴 비교 : 스케치, 제플린, 피그마, XD

디지털 Web/App 시장이 발달하면서 다양한 툴이 생겨났다. 초기 디자이너들은 어도비에서 제공하는 일러스트레이터와 포토샵으로 디자인을 하고 여타 다른 툴로 프로토타입 제작을 했다 하지만, 요즘 실무에서는 스케치나 어도비XD, 제플린, 피그마 등의 툴으로 디자인과 프로토타입을 한 번에 제작하고 있다.

자신에게 맞는 툴을 찾고, 능숙하게 다룰 줄 알게 된다면 작업 속도를 단축시키고 자신의 생각을 더욱 잘 표현할 수 있게 될 것이다.

 

 

그렇다면 대체 어떤 툴을 사용해야 할까?

 

 

스케치

스케치는 2018, 2019년도 가장 인기 있는 UI 디자인 툴로 집계된 디자인 협업 툴이다.

 

장점

확장 가능한 설계 구축 : 컨텐츠에 맞게 자동으로 확장되는 구성요소.
모든 사용자의 동기화 유지.
수 많은 플러그인.

 

단점

애플의 맥에서만 사용할 수 있다는 점.
복잡한 그래픽 작업이 불가능.

 

 

제플린

제플린은 디자이너 및 개발자를 위한 공동 작업 응용 프로그램이다.

장점

스케치, 포토샵과 연동되어 자동으로 작업한 결과물을 에셋과 디자인 가이드로 생성해줌.(진짜 좋음.)
가이드를 생성하고 요소의 크기를 확인하는 과정을 자동화하여 시간과 노력을 절약해줌.

 

단점

앱을 다운로드 받아야 한다는 점.
불안정한 폰트 가이드.(제플린으로 임포트된 텍스트를 클릭해보면 간혹 텍스트 사이즈가 소수점으로 노출되는 경우가 있다고 한다.)

참고로 무료 버전에서는 프로젝트 1개까지만 생성 가능한 것으로 안다.(안드 플젝 하나 만들면 아요는 다른 친구가 파야 한다...ㅋㅋ)

 

 

피그마

피그마는 스케치와는 달리 앱을 다운받지 않고, 구글 Docs와 같이 웹 상에서 팀원들과 실시간으로 공동작업이 가능하다.

장점

설치가 필요없다는 점.

가이드를 생성하고 요소의 크기를 확인하는 과정을 자동화하여 시간과 노력을 절약해줌.유연한 스타일 수정 기능.
컴포넌트 시스템, 텍스트, 컬러 스타일 지정.
모든 기능을 지원하는 플러그인.
자동 저장과 버전 관리.

요즘 업데이트도 많이/빠르게 되고 있어서 점점 더 좋은 툴이 되어 가고 있는 것 같다.(물론 어도비에서 인수했기에 이후 수익 구조가 어찌 변할지... 모르겠지만.)

 

단점

아트보드의 개념이 아니라서 정렬을 센터나 하단으로 했다면 크기 수정할 때 불편함이 있다.(익숙해지면 괜춘.)
처음 시작할 땐 조금 생소한 단축키.(익숙해지면 괜춘.)
복잡한 아이콘 만들기가 불편.(역시 아이콘은 일러스트지.)

 

 

XD

XD는 어도비에서 제공한 백터 그래픽 편집기이자 프로토타이핑 도구이다.

장점

사용자 인터페이스 독점 가능 : 스케치와 어도비 사용자 모두에게 익숙한 인터페이스를 제공한다.
그리드 기능.(피그마에서도 제공하긴 함.)
프로토타이핑을 웹이나 앱에 게시하고 공유할 수 있다.(GOOD)
에셋 패널에 색상 변수나 문자 스타일 및 기호 등을 저장할 수 있다는 점.

 

단점

불필요한 소수점 단위들이 종종 생겨나는 경우가 있다.
프로토타입에서 Hover효과에 대한 애니메이션 설정이 불가하다.
이미지 보정이 불가능(밝기, 색감, 대비 등).

 

 

 

글을 적기 위해 UX 툴을 공부하는 도중 느낀 것은 어디서나 협업을 매우 중요시한다는 것이었다. 실제로 피그마는 클라우드 기반 협업을 뛰어넘어, 웹브라우저 기반의 협업을 상상하며 발전했다. 코로나19로 인해 온라인 상의 협업이 중요해진 만큼 툴을 익히고 활용하면 좋은 협업을 이룰 수 있을 것이다.

또한, 이러한 툴들은 팀과의 협업에서 디자이너들을 대체하는 것이 아닌, 조직에서 더 큰 영향력을 발휘할 수 있도록 도울 것이다.

 

(근 몇 년간 스케치가 꽤나 대세를 이루었는데 최근들어 피그마가 급부상하며 두각을 드러내고 있다. xd도 성장을 했다고는 하지만... 웹 기반에 심플하고 간편한 인터페이스 덕분인가. + 글을 쓴 지 약 1년이 지난 시점에 추가로 덧붙이자면 나도 피그마로 갈아탔다....ㅎ 굉장히 편하다...^^)

 

링크

스케치 : www.sketch.com/

제플린 : zeplin.io/

피그마 : www.figma.com/

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