Xd, Figma, Sketch etc. 2020 디자인 툴 by Courage Egbude

Design tools in 2020 by Courage Egbude

디자인 툴 2020

 

지난 수 년간 여러가지 디자인, 프로토타이핑 툴이 도입되어

디자이너가 애플리케이션 간 이동없이 광범위한 기능을 수행할 수 있게 되었습니다.

 

프로토타이핑은 웹, 모바일 앱 그리고 소프트웨어를 제작할 때 필수적인 부분입니다.

예술가들이 작품을 완성하기 전에 스케치를 하듯, UI, UX 디자이너도 치명적인 실수를 피하기 위해 프로토타입이 작업을합니다.

프로토타이핑 프로세스의 핵심은 정보구조(Architecture of Information), 사용자흐름도(User Flow Diagram), 딸려오는 콘텐츠(Coming Together Content)를 생각하는 것에 있습니다.

또한 여러분은 앞서말한 방법이 UI 디자인 툴에서 원활하게 작동하는지 확실히 확인해야 합니다.

 

디자이너의 UI, UX 기능 수행을 도울 5가지의 툴에 대해 말씀드리겠습니다.

 

 

 

Adobe XD

 

모든 세대의 디자이너들이 Adobe Photoshop을 사용하며 성장했지만, UI 디자이너를 위해 만들어진 툴은 아닙니다.

Adobe는 이것을 인정했고 새로운 XD 애플리케이션 제작을 시작했습니다.

Adobe XD는 와이어프레임(Wireframing)부터 프로토타이핑(Prototyping), 디자인 테스트(Testing Your Designs)까지 모든 것을 지원하는 기능이 풍부한 툴입니다.

 

여러분은 웹이나 앱 디자인을 하든 보이스 인터랙션을 원하든 하나의 인터페이스로 사용할 수 있습니다.

XD를 사용하면 간단하게 동료들과 협업할 수 있으며, Creative Cloud를 통해 다른 애플리케이션과 통합할 수 있습니다.

게다가 여러분은 iOS나 Android 애플리케이션으로 모바일 디자인을 테스트할 수 있습니다. Adobe는 플러그 기능을 가능(Pluggable as Possible)하게 XD를 만들었으며 이미 많은 Sketch 플러그인이 이식되었습니다. 또한 Google Sheets, Airtable, Trello 등과 같은 서비스와의 통합도 제공합니다. Adobe XD는 디자인, 프로토타이핑 및 공유를 다루는 모든 것의 해결책(All-in-one Solution)입니다.

 

호환성: Mac/Windows 유저

 

가격: Starter Plan은 1개의 공유된 프로토타입, 1개의 활성화된 디자인, 2GB의 클라우드 스토리지를 무료로 제공합니다. 무제한의 프로토타입과 디자인, 100GB의 클라우드 스토리지를 원한다면 1달에 $9.99(2020.6.12 기준)로 업그레이드 할 수 있습니다. 또한 더 비싼 Creative Cloud 구독에도 포함됩니다. - USD 기준

 

 

Figma

 

Figma는 여러분이 동일한 공간에서 디자인, 프로토타입 및 공동작업을 할 수 있는 브라우저 기반(Browser-based)의 툴입니다.

스케일링 디자인(Scaling Designs), 레이어 결합(Combining Layers), 부울린 연산(Boolean Operations), 그리고 벡터 사용(Using Vectors)을 간단히 할 수 있습니다.

 

Figma는 Sketch와 많이 닮은 협업 디자인 툴이지만 한 가지 커다란 다른 점이 있습니다. Figma는 시작이 쉽습니다.
Figma.com에서 무료로 가입하기만 하면 브라우저 내에서 첫번째 초안을 시작할 수 있습니다.

 

Figma의 주목할 만한 특징

(1) 디자인, 프로토타입 모드의 쉬운 변경(Easy Switching Between Design and Prototype Modes)

(2)빠른 공유와 실시간 피드백(Fast Sharing and Real-time Feedback)

(3)스크롤링(Scrolling), 연결(Connections), 화면 프레임(Screen Frames), 쉬운 오버레이 관리까지 가능합니다(Overlays Can Also Be Managed With Ease).

(4)공유 리소스(Shared Resources)와 컴포넌트 팀 라이브러리(Component Team Libraries)를 통해 프로토타입을 더욱 빠르게 만들 수 있습니다.

(5)공유 링크를 통해 워크플로우(Workflows), 공동편집(Collaboraative Editing), 복사편집(Copy Editing) 및 빠른 피드백(Fast Feedback)을 할 수 있습니다.

 

Figma의 멋진 점은 모든 파일이 클라우드에 저장되어 어디에서나 접근할 수 있기 때문에 따로 저장할 필요가 없는 것입니다. 만약 여러분이 협업 디자인 워크플로우를 즐기신다면, Figma가 적합할것입니다.

 

호환성: Mac, Windows, Chrome, Linux

가격: 무료 (편집자 최대 2명, 프로젝트 최대 3개), 전문가 (편집자마다 매달 $12), 단체 (편집자마다 매달 $45) - USD 기준

 

 

Sketch

 

Sketch는 UI 디자인의 혁신이며, 직관적인 UI 디자인 툴의 완전히 새로운 물결을 불러 일으켰습니다.

Sketch는 완전 벡터 기반의 워크 플로우를 가진 Mac용 전문 디자인 툴입니다. 작업 공간이 깔끔하고 매끄럽기 때문에 새로운 사용자가 쉽게 툴에 적응할 수 있습니다.

 

Sketch는 가장 일반적인 웹, 앱 디자인 툴이며 프로토타이핑마저 훌륭합니다.

실제로 가장 많이 사용되는 UI 디자인 툴 중 하나이며 GUI가 명확하며 가벼운 디바이스이기 때문에 디자이너가 작업에 집중할 수 있습니다.

 

Sketch를 사용하면 몇번의 클릭만으로도 디자인 화면(Artboard) 을 매끄럽게 전환하고 애니메이션을 추가할 수 있으며 프로토타입을 제작할 수 있습니다. 또한 여러분은 Sketch의 클라우드 인터페이스를 통해 프로토타입을 쉽게 공유하고 즉각적인 피드백을 받을 수 있습니다.

 

호환성: Mac OS

가격: 연 $99 - USD 기준

 

 

InVision

 

InVision은 단일 인터페이스에서 디스플레이(Display), 계획(Plan), 검수(Test) 및 피드백(Feedback)을 얻을 수 있는 포괄적인 디지털 제품 디자인 플랫폼입니다. 디지털 화이트보드 위에 자유롭게 그림 그리고, 디자인 비전 보드를 통해 영감을 얻을 수 있습니다. 그리고 벡터와 레이어를 사용해 여러분의 아이디어를 디자인할 수 있습니다.

정적인 디자인(Static Designs)을 상호작용하는 프로토타입(Interactive Prototypes)으로 변환하거나, 공유된 디자인 작업 공간에서 상호작용하는 입력 값을 수신하는 것도 간단합니다.

 

InVision Studio는 재미있는 창작을 하거나, 상호작용하는 프로토타입을 만들거나, 팀이나 고객과 여러분의 디자인에 대해 이야기하거나, 여러분의 디자인을 개발단계 전에 테스트할 수 있는 프로토타이핑, 애니메이션 툴입니다.

InVision Studio는 InVision Cloud 및 InVision DSM에 포함된 InVision 제품 군의 일부입니다.

 

호환성: Mac, Windows

가격: 개인회원은 매달 $13, 5인 팀의 경우는 매달 $89 - USD 기준

 

 

 

Origami Studio

 

Origami Studio는 Facebook에서 만들고, 사용하는 macOS 데스크탑 응용 프로그램입니다.

모바일 애플리케이션도 있으며, 여러분이 직접 디바이스에서 여러분의 프로토타입을 볼 수 있습니다.

 

일상적인 업무에 사용되는 Facebook 기반의 프로토타이핑 툴로 2013년에 처음 공개했습니다.

처음에는 Quartz Composer와 일했지만 Xcode 환경이 최고의 프로토타이핑 옵션이 아니라는 것은 비밀이 아니며, 이것은 Origami Studio가 지난 해 Facebook에 소개된 이유입니다. 이전 프로토타이핑 툴이지만 그들은 자체 환경에서 작동합니다. 이 방법으로 인해 성능이 크게 향상되었지만 불행하게도 아직까지 macOS 전용입니다.

 

호환성: Mac OS

 

가격: 무료

 

보너스 - ★

 

Proto.io

 

이름에서 알 수 있듯이 Proto.io는 디자이너가 다른 템플릿을 프로토타이핑하는 것을 전문으로 합니다. Proto.io는 2011년에 iPhone 및 iPad용 프로토타입 제작을 위해 상용 웹 플랫폼으로 출시되었습니다.

 

주요기능: 사용자의 테스트 기록, 공유 가능한 프로토타입 제공, VR 프로토타이핑 지원 및 애드온(Adds-ons) 제공

 

호환성: Mac, Windows, Chrome, Linux

가격: 매달 $24부터 시작 - USD 기준

 

---

 

앞서 소개드린 UI, UX 툴들은 현재 시장에서 디자이너에게 제공되는 최고의 옵션 중 일부입니다.

Sketch가 처음 등장했을 때 인터페이스 디자인 영역을 완전히 혼란에 빠뜨렸지만

Figma와 Adobe XD는 커다란 진화해 새로운 도전자로 자리매김 하고 있습니다.

 

한국 시장에서는 스케치와 어도비XD가 주로 사용되고 있으며 Figma를 사용하는 회사도 많이 늘어나고 있는 추세입니다.

 

 

 

아티클 해석 : 김재환

글 작성 : 김재환, 유상혁

 

 

 

UI design과 UX design의 차이점