본문 바로가기
ᴜx/ᴀʀᴛɪᴄʟᴇ

2020년, 어떤 UI 디자인 툴을 사용해야할까?

by jinx2a 2020. 6. 12.
반응형

 

2020년, 오늘날의 시장은 UI 설계 도구로 가득 차 있다. Sketch가 사용자 인터페이스를 정교하고 단순하게 제작할 수 있도록 효율적인 툴을 출시한 이후, 많은 회사들이 디자인 툴 시장 점유율의 일부를 차지하기 위해 노력해왔다. UXtools에서 실시한 '2019년 디자인 툴 설문조사'를 살펴보면, 지난해 Sketch가 선두를 달렸던 것과 비교해서 꽤 많은 툴이 Sketch를 따라잡은 것을 볼 수 있다.

 

 

 

 

2019년 가장 인기 있는 UI 디자인 도구 설문조사 결과

2019 UI 디자인 툴 설문조사 그래프

 

2018년 가장 인기 있는 UI 디자인 도구 설문조사 결과

2018 UI 디자인 툴 설문조사 그래프

내가 관찰한 '툴의 성장, 툴을 사용한 나 자신의 경험, 그리고 이러한 툴들에 대한 다른 디자이너들의 경험'에 따르면, 1~2년 안에 Sketch, Figma, Adobe XD가 주목받을 것으로 예상된다.


올해, 열정 있는 디자이너들과 이야기하면서 가장 많이 받은 질문 중 하나는 '스케치나 다른 툴을 배워야 할까?'이다. 이 질문에 답하기 위해, 우리는 툴의 몇 가지 다른 주요 측면을 파고들어 비교를 할 수 있다. 이 글을 간결하게 하기 위해, 설문 조사의 상위 3가지 도구인 Sketch, Figma그리고 Adobe XD에만 초점을 맞추어보자.

 

 

 

 

시스템 요구사항

툴의 핵심 요구 사항부터 시작하자. 이 툴은 실행중인 운영 체제이다. 많은 사람들이 Sketch가 Macintosh 전용 앱이라는 것을 인식하지 못한다. 따라서 Windows 또는 Linux 시스템을 실행중인 경우에는 사용할 수 있는 툴이 Figma 또는 Adobe XD로 제한된다.

 

Mac 사용자의 경우 거의 모든 툴을 사용할 수 있다.

 

 

 

 

가격

많은 사람들의 또 다른 중요한 결정 요인은 가격이다. 아래는 각 툴에 대한 개인/개인 가격 모델을 요약한 것이다.


- Sketch

한 번에 99달러 지불, 1년 무료 업데이트, 새로운 기능의 혜택을 얻기 위해 매년 79달러의 갱신 가격을 지불.
- Figma

3개의 프로젝트 제한, 한 프로젝트 내에서 무제한 파일 수, 그리고 2명의 편집자까지 무료.
- Adobe XD

2020년 10월까지 프로젝트/파일 무제한으로 무료로 공유 가능. 이후 공유 프로젝트 1개, 편집자 2명으로 제한된다.


이 글을 쓸 당시의 기준으로, Adobe XD는 프로모션을 감안했을 때, 가장 큰 가치를 제공하는 것으로 보인다.

 

 

 

 

레이아웃 편집

레이아웃 관리에 상당한 설계 시간이 소요된다. 레이아웃 기능이 잘 설계된 툴을 선택하는 것은 생산성에 매우 중요하다.

 

Sketch의 경우 콘텐츠의 길이/크기 변경 시 컨테이너 자동 크기 조정 등의 작업을 수행할 수 있는 스마트 레이아웃 기능이 있다. 예를 들어 버튼 배경은 텍스트 길이에 맞게 조정된다.

 

Sketch의 스마트 레이아웃은 내용을 편집할 때 오브젝트의 크기를 자동으로 조정

 

 

Figma는 Sketch와 비슷하게 드래그 앤 드롭으로 콘텐츠를 재조정하는 것과 같은 자동 레이아웃 기능을 제공한다.

Figma의 자동 레이아웃 드래그 앤 드롭 그리고 레이어의 재조정

 

 

Adobe XD는 콘텐츠 크기 조정 시 계층 그룹의 패딩을 강제 적용할 수 있는 컨텐츠 인식 레이아웃 기능을 가지고 있다. 다른 툴의 레이아웃 기능에 비해 Adobe XD의 패딩 기능 실행은 상당히 독특하다고 생각한다.

Adobe XD는 콘텐츠가 편집될 때, 패딩을 강제하는 패딩 레이아웃 기능을 제공

 

 

콘텐츠 높이를 변경할 때 레이어의 수직 위치를 자동으로 조정하는 기능은 시간 절약에 매우 도움이 된다. Figma는 이 부위에 약간 유리한 부분이 있다.

 

 

 

 

 


협업

다른 디자이너와 함께 작업하는 경우, 세 가지 툴 모두 다른 사용자와 파일을 공유할 수 있는 방법을 제공하고 플러그인의 가용성을 계산할 수 있게한다. 각 툴과 함께 제공되는 기본 협업 관련 기능에 초점을 맞추어 논의해보자.


스케치의 경우 파일을 클라우드 서버에 저장할 수 있다. 다른 클라우드 스토리지 서비스와 마찬가지로 다른 사용자와 파일을 공유하고 편집할 수도 있다. 버전 지정이 가능하며, 현재 이 글을 쓰고 있는 시점의 검사 툴은 베타 버전이다. Sketch는 Invision이나 Zeplin과 같은 다른 툴과 결합되어 디자인 공유와 핸드오프와 같은 협업 기능을 제공한다. Sketch는 이러한 기능들의 더 나은 버전을 제공하기 위해 노력하고있지만, 2020년에는 다른 경쟁사들에 비해 약간 뒤처져 있다.

 

Figma는 여러 사람이 동시에 같은 파일을 보고 편집할 수 있는 라이브 협업 능력을 가지고 있다. 이것은 최근 UI 디자인 툴 시장에서 가장 독특한 특징 중 하나이다. 이 기능에 대해 이야기 해보자면, 같은 프로젝트에서 동시에 실제로 협업하는 디자인 팀에게만 유익하다. 라이브 편집/미리보기 기능은 디자인 파일을 검토하면 누구나 항상 최신 변경사항을 볼 수 있다는 점에서 편리하다. 라이브 협업 외에도, Figma는 버전 관리, 설계 시스템 및 다른 툴과 동등한 검사 기능을 가지고 있다.


Adobe XD는 2019년 11월에 다중 사용자 편집과 파일 버전 관리 등의 기능을 갖춘 자체 코딩 기능을 출시했다. 또한, XD는 다른 툴과 유사한 공유 기능 및 핸드오프 세트를 가지고 있다.

 

Adobe XD은 현재 베타 버전에서 함께 수정이 가능

현재 베타 버전에서의 XD를 봤을 때, Figma는 라이브 협업을 진행하는 디자이너들에게 특히 첫번째로 선택받을 것이다.

 

 

 

 

 


퍼포먼스

하드웨어 사양이 적절한 대부분의 사람들에게, 세 가지 설계 툴 사이에 성능 차이가 크지 않을 것이다. 대량의 아트보드/프레임, 외부 플러그인, 이미지 에셋을 파일 내에서 작업할 때 성능 문제가 더욱 두드러질 것이다.


Sketch를 사용할 때, 한 Sketch 페이지에 아트보드가 수십 장 이상 있는 파일에서 작업할 때 종종 느린 인터랙션을 경험한다. 타사 플러그 인을 사용할 때 성능 문제가 발생한 보고서도 본 적이 있다.


나는 Figma를 꾸준히 사용해오면서 성능 문제를 거의 경험하지 못했다. Figma가 브라우저 기반 툴(웹 앱으로 감싸져있을 가능성이 높은 데스크톱 앱도 가지고 있음)임을 감안할 때 성능은 하드웨어 의존도가 낮으며, 대부분 상당히 좋다. Sketch와 마찬가지로 플러그 인의 내용 및 기능에 따라 로딩하는 데 다소 시간이 걸릴 수 있지만 이는 그다지 중요하지 않다.


Adobe XD의 경우 2019년 초에 처음 출시되었을 때 성능 문제를 몇 가지 접했다. 이후 후속 업데이트로 동일한 성능 문제가 해결되었다. 나는 솔직히 다른 도구들처럼 XD의 성능을 광범위하게 테스트하지 않았지만 지금까지 그 성능은 Sketch와 동등했다.


내 경험상, 퍼포먼스 부문에서는 Figma가 가장 믿을 만했다.

 

 

 

 


프로토타이핑 특징

프로토타이핑 툴은 시중에 앞선 세 가지 툴에 비해, 더 전문화된 툴이 있기 때문에 더욱 논의할 것이 많다. 그러나 지금은 세 가지 툴을 사용하여 프로토타이핑 기능을 요약하는 것이 좋을듯하다.


스케치는 핫스팟을 사용하여 클릭 가능한 프로토타입을 제작하기 위한 화면 연결을 지원한다. 프로토타입은 로컬에서 미리 보거나 Sketch Cloud를 통해 다른 사람과 공유할 수 있다. '스크롤링 시 고정 위치' 및 '클릭 후 스크롤 위치 유지'와 같은 기능을 추가하면 Invision에서 시제품 제작을 위해 제공하는 것과 동등하게 Sketch로 만들 수 있다.

 

스크롤할 때 고정위치를 설정할 수 있는 Sketch

 

Figma는 Sketch와 거의 동일한 프로토타이핑 제작 특징을 가지고 있다. 가장 큰 차이점은 전환 효과인데, 여기서 Figma는 두 프레임 사이의 상태를 자동으로 애니메이션화하는 스마트 애니메이트 기능을 가지고 있다. 스마트 애니메이트를 사용하면 더 복잡해 보이는 프로토타입을 만들 수 있다.

 

 

Figma의 스마트 애니메이트를 이용한 프레임들 사이의 복잡한 전환

 

Adobe XD는 프로토타이핑 제작 부분에서 더 많은 기능을 가지고 있다. Figma와 Sketch가 제공하는 것 외에도 키보드, 게임패드, 음성 기반 트리거 등 보다 전문적인 프로토타입 경험을 지원할 수 있는 기능이 더 많다.

 

 

 

Adobe XD의 사용자의 음성 기반으로 트리거할 수 있는 기능

 

프로토타이핑과 관련된 기본 제공 기능의 경우, Adobe XD가 좀 더 많은 입력 옵션을 제공하는 선두 주자이다.

 

 

 

 


플러그인

세 가지 툴 모두 플러그인 시스템이 함께 제공된다.

 

Sketch의 공식적인 플러그인 페이지

 

오랜 기간동안 축적된 Sketch에는 크고 다양한 플러그인 라이브러리가 있다. 설계 워크플로우의 속도를 높이거나 Sketch의 기능을 확장하는 유용한 플러그인을 많이 찾을 수 있다.

 

 

 

Figma의 플러그인 페이지

 

Figma는 2019년 플러그인 설치를 지원하기 시작했다. 많은 플러그인이 추가되기 시작했지만, 다른 툴들에 비교해서 부족하다.

 

 

 

Adobe XD의 플러그인 패널

 

Adobe XD는 2018년 플러그인 제공을 시작했다. 아직 Sketch와 같은 수준은 아닐지 몰라도 엄청나게 빠른 속도로 따라잡고 있다. 세 가지 툴 중, 더 좋은 검색 및 플러그인 관리 환경을 갖추고 있다고 생각한다.


Sketch는 방대한 플러그인 라이브러리를 감안할 때 여전히 플러그인 카테고리에서 우세하다.

 

 

 

 


개발속도

시간을 투자해서 배울 툴을 선택할 때, 툴 업데이트가 얼마나 빨리 진행되는지가 큰 고려 사항이다.


Sketch의 업데이트 로그를 보면, 지난 해 한 달에 약 1개의 중요한 (전체 버전) 업데이트를 갱신했다. 이는 이들이 다른 경쟁사들을 따라잡기 위해 2019년 초 가장 최근에 자금을 지원한 데 힘입은 바 크다. 여기서 키워드는 'catch up'으로, 솔직히 Sketch는 한동안 Figma와 Adobe XD에 비해 기능이 밀렸다. Sketch가 경쟁사보다 몇 년 앞서 출시되었다는 점을 고려하면, Sketch가 경쟁사 디자인 도구들과 동등한 수준에 있다는 것은 좀 실망스럽다.


Figma는 Sketch와 비슷한 비율로 새로운 기능을 출시해 왔다. 주목할 점은 Figma가 Maze(테스트용)와 Framer Web(프로토타이핑용)과 같은 다른 툴과의 통합 관련 기능을 더 많이 출시했다는 점이다. 이 때문에, Figma는 설계 워크플로우를 보완하기 위해 추가 툴을 사용하는 디자이너나 팀과 잘 어울린다.


Adobe XD의 출시 속도가 인상적이다. 최초 출시(2017년 말 베타 릴리즈 고려)를 이슈로 내세웠지만 2년도 채 안 돼 다른 툴들의 강력한 경쟁자가 됐다. XD는 다른 타사 설계 또는 개발 툴과 광범위하게 통합되지 않지만 Adobe 제품군과 긴밀하게 통합되어 있다.


이 카테고리의 경우, XD가 지금까지 좋은 주행을 확립한 반면, Figma는 새롭고 다양한 특징들을 밀어내는 더 긴 히스토리를 가지고 있다.

 

 

 

 


그래서 어떤 툴을 사용해야 하는가?

Sketch, Figma, Adobe XD는 모두 훌륭한 UI 디자인 툴들이다. 이제 막 어떤 툴로 뛰어들어야 할지 고민하고 있다면, 나는 Figma를 출발점으로 추천한다. 좀 더 복잡한 프로토타입(예: 음성 입력 트리거)을 생성할 수 있는 설계 도구를 찾고 있다면 Adobe XD로 옮겨라. 궁극적으로, 고용주/디자인 팀은 결국 여러분을 위한 툴을 선택하게 될 수도 있지만, 좋은 소식은 세 가지 툴이 매우 유사하다는 것이다. 만약 당신이 하나의 툴에 시간을 투자해 왔다면, 대부분 다른 툴로 옮겨갔을 때도 충분히 적응을 잘할 수 있다는 것이다.

 

 

 

 

-

저자 : Poyi Chen
원문 링크: https://uxdesign.cc/which-ui-design-tool-should-i-use-in-2020-afbc1c6c0b08

반응형

댓글