[3주차]디자인 툴, 뭐가 좋을까?

UXUI를 공부하며, 벌써 3가지 툴에 대해 배우게 되었다.
그리고 동시에 각각의 Authoring Tool에 대해서 정리하는 시간이 필요함을 느끼게 되었다.

현업에서는 스케치, Adobe XD, 피그마, 프레이머, 등의 다양한 프로그램을 사용하고 있지만, 그 중


1. 피그마
2. 프로토파이
3. Adobe XD
4. Sketch


툴의 경우 중요성을 간과할 수 없을 정도로 가장 널리 쓰이는 디자인 툴이라고 한다.
그래서 이 글을 통해 4가지 툴의 각각의 특징에 대해 작성해보고자 한다.

---

A. Figma

: Window + mac
: Web

"협업을 위한 디자인 툴"

1. 다양한 디바이스용 프로토타입 제작 가능

Mobile, PC, Watch, Social media 등 다양한 디바이스에 적합한 프로토타이핑을 제작이 가능하다.
툴 자체가 사용하기 쉽고, 디바이스에 대응해서 다양한 화면을 만들어야 하는 UI 디자인에 최적화 되어 있다고 말할 수 있을 것이다.

Mobile, PC, Watch 등 사이즈별로 디자인을 만들어야 하는 UI 디자인 특성상 비트맵 방식은 다소 적합하지 않을 수 있다.
대표적인 비트맵 방식에는 포토샵이 있는데, 파일을 확대하면 이미지가 모두 깨지는 치명적인 문제가 발생해 UI에는 적합하지 않은 편이다.
이에 반해서, 벡터 방식의 툴인 피그마는 사이즈 변경에 제약이 없어서 간편하게 사이즈 변경이 가능하다는 장점을 자랑한다.

2. 컴포넌트의 저장 및 사용

재사용이가능한 컴포넌트로 불필요하게 반복 작업을 하지 않아도 된다.
많이 사용하는 요소들은 컴포넌트로 저장, 적용할 수 있어서 작업시간을 획기적으로 줄이는 것이 가능하다.
이러한 특징 덕분에 원활한 시스템화 작업이 가능해지고, 프로덕트의 통일을 유지에 용이하다.

3. 동시작업

팀원이 같은 파일을 동시에 접속해서 볼 수 있어 공유 및 협업이 간편하다. UIUX디자이너는 일반적으로 3-5명 정도의 협업을 통해 작업하는데, 이러한 경우에서 한개의 공통된 파일을 동시에 편집 가능해 작업시간을 단축하고, 즉각적인 코멘트를 가능하게 한다.

4. Community

방대한 자료를 가지고 있는 Sketch 등의 프로그램 파일을 피그마에서 사용할 수 있다.
그 외에도 피그마 커뮤니티에서 디자인시스템, 플러그인, UI Kit, 와이어프레임 등 다양한 자료를 검색 및 활용이 가능하다. 플러그인 등 다양한 확장 프로그램을 지원하고 있어서, 간단한 프로토타입을 빠르게 만들어서 공유하고 수정하는 과정을 반복할 수 있다는 것 역시 이 프로그램의 매력 중 하나로 꼽을 수 있다.

5. Micro Interaction

빠르게 구현해보고, 프로젝트에대한 적합성 테스트가 가능해져서 다양한 아이디어를 쉽게 확장할 수 있다는 장점을 가진다.
코딩을 하지 않아도 간단한 인터렉션을 구현해 볼 수 있지만, 복잡한 인터렉션에는 어려운 부분이 존재한다. 하지만, 대략적인 느낌을 보기에는 충분하다.

6. [Code Base]

피그마의 용어는 코딩에서 사용하는 용어와 동일하다. 그만큼 첫 시작에는 진입장벽이 높은 편이기도 하다. 하지만, 만약 코딩을 알고있다면, 툴을 처음 사용하더라도 디자이너, 개발자의 입장에서는 이해가 조금 더 수월하게 느껴질 가능성이 존재한다. 즉, 모르는 기능의 대략적 예측이 가능한 부분이다.

---

B. Protopie

: Window + mac

"Object, Trigger, Response"

1. 실제와 같은 화면 제공

코딩을 통해 아이디어 혹은 새로운 제안을 효과적으로 표현할 수 있다. 보다 단순한 방식의 Object / Trigger / Response 개념을 통해 실제 디바이스 화면과 유사한 형태로 프로토타입 제작이 가능한 것을 가장 큰 장점으로 평가받는다.

2. 커뮤니케이션의 효율화

업데이트를 통해 기존 스케치 파일에서 작업한 이미지를 불러오기 위해 별도의 플러그인 설치 없이 바로 import가 가능하다. 영상 저장을 통해 공유가 가능하다는 점 또한 매력적이다. 이는 개발자가 쉽게 확인할 수 있게하여 소통을 가능하게 만들고, 이로서 디자이너들의 니즈를 충족시킬 수 있을만한 포인트로 보여진다.

---

C. Adobe XD

: Window + mac
: Off-line

"디자인 공룡 Adobe"

1. Adobe 프로그램

Adobe Photoshop / Adobe Illustrator 등 Adobe에서 제작한 다른 디자인 툴과의 호환성이 매우 좋으며, 단축키와 인터페이스까지 상당히 닮은 부분이 많다는 것이 가장 큰 장점이다. 기존의 보유한 계정을 통해 클라우드를 이용, 저장 및 공유가 가능하다.

2. 올인원 툴

별도의 플러그인 없이도, 어느정도 대략적인 프로토타입을 만들어볼 수 있다는 점이 Adobe XD에서 내세우는 가장 대표적인 장점이다. 이에 더불어, 간다한 수준의 애니메이션 구현 / 공유링크를 통한 피드백 시스템 등의 UI에 필요한 대부분의 기능을 Adobe XD 하나에서 해결할 수 있다.

3. 직관적인 프로토타이핑 제공

디자이너, 기획자 등 코드에 친숙하지 않은 사람도 쉽게 익힐 수 있는 방식으로 프로토타입 기능을 제공한다. 디자인 방식을 기반으로한 직관적인 프로토타이핑을 제공하기 때문에, 평소 디자인 툴에 익숙했다면 간단히 컴포넌트를 제작하고 애니메이션을 적용해 볼 수 있다.

---

D. Sketch

: mac only

"오늘날 UI 디자인 툴의 기본 조건을 두루 갖춘 최초의 툴"

1. 다양한 디바이스용 프로토타입 제작 가능

벡터 기반의 그래픽 툴로서 디바이스 사이즈에 맞추어 작업을 진행해야하는 UI 특징에 적합한 형태를 갖춘 도구이다. 또한 와이어프레임을 통해 화면의 레이아웃을 어떻게 구성할지 등의 구상작업이 가능한 것과 같이 유용한 기능을 통해 사용자들에게 선택받고 있는 Authoring Tool이라 말할 수 있다.

2. 외부 확장 플러그인과 Zepline

외부 확장 플러그인과 프로그램이 다양하게 갖추어져 있는데, 대표적으로 Zepline을 꼽을 수 있다.
Zepline은 개발자 등의 팀원들에게 디자인 속성값, 리소스 등의 가이드라인을 제공하여 UI 디자인을 실제 앱으로 구현할 수 있도록 돕는 역할을 한다.
Sketch의 산출물은 Sketch 확장자의 형태로 제공되며, psd 저장이 가능하다는 특징을 보이고 있다.

---

UX와 UI가 사용자의 경험을 위해 최선을 다하는 일인 만큼, 프로토타입은 업무에서 중요한 부분을 맡고 있다.
또한 디자이너로서는 디자인 된 화면만으로 표현하기 어려운 세세한 인터렉션 혹은 화면전환을 비교적 정확하게 표현할 수 있는 수단이라고 생각된다.
프로토타입을 활용해 보다 원활하게 팀원들 혹은 개발자들과 소통할 수 있다는 것 만으로도, 다양한 툴을 사용하는 것을 필요하다고 보여진다.
이렇게 많은 툴에 대해 배우고, 활용도가 상상보다도 더 많다는 것을 알게 되어서 뿌듯한 날이다