본문 바로가기
UI & UX

2020 UI/UX 디자인 툴 스택

by 시몽 2019. 12. 22.

원문 : https://uxdesign.cc/designers-tech-stack-of-2020-1df2e1203638

 

Designers tech stack of 2020

We’re apporaching the end of the decade and a lot has happened in UX, HCI and Interaction design during the last ten years. Especially…

uxdesign.cc

미디움을 둘러보다가 UI/UX 디자인 툴에 관한 아티클을 보고 정리 및 의견을 목적으로 작성합니다. 저는 원래 모션그래픽을 했었고, 툴을 배우는 속도는 빠르다고 자부하기 때문에 그리고 지금까지 여러 가지 툴을 다뤘던 경험이 있다 보니 도움이 그다지 되지는 않을까 했는데 생각보다 새로운 형태의 툴이 많네요. 일단 원문에는 UI/UX 프로세스를 6단계로 분리해서 각각의 단계에 주로 사용되는 툴을 정리를 했네요. 6단계는 [리서치 - 문제 정의 - 화면 설계 - 프로토타입 - 테스트 - 적용] 정도로 정리하면 될거 같습니다. 

 

 

1. 리서치

https://trint.com/

 

Trint: Automated Transcription of Audio and Video, Powered by AI

Trint goes beyond transcription to provide the world's most collaborative and innovative platform for searching, editing and getting the most out of your audio and video content.

trint.com

Trint라는 서비스는 일단 음성 데이터를 자동으로 텍스트로 정리하는 서비스인 거 같네요. 대략적인 인터페이스를 봤을 때 타임라인이 있는 등 관리 측면에서 유용할 거 같습니다. 그리고 인식률은 어떨지 모르겠지만 Speech-To-Text의 경우에는 녹음 환경이나 발음의 변수도 많기 때문에 Transcription(이하 전사)의 간단한 기록 용도로는 좋을 거 같지만 온전히 회의록 작성을 STT 하나에만 의존하는 건 힘들 거 같습니다. 또 구글에 검색해보니 SST 관련 전사 서비스가 생각보다 많네요. 제대로만 사용되면 생산성을 높이는데 도움이 될 거 같습니다. 개인적으로 회의록을 작성하지 않으면 회의가 끝날 때 결정된 정보를 서로 모르거나 오해하는 경우가 많았던 거 같습니다. 마지막으로 놀랍게도 언어 지원에 한글이 보이네요. 🇰🇷

 

https://otter.ai/

 

Otter Voice Meeting Notes

Otter is a smart note-taking app that empowers you to remember, search, and share your voice conversations. Otter creates smart voice notes that combine audio, transcription, speaker identification, inline photos, and key phrases. It helps business people,

otter.ai

https://dovetailapp.com/

 

The delightful user research platform – Dovetail

Dovetail helps you store, analyze, and collaborate on user research in one place, making it easy to see patterns, discover customer insights, and decide what to do next. Our customers include Arm, BCG, Chargebee, CSIRO Data61, Deliveroo, Deloitte, Harvard,

dovetailapp.com

Otter, Dovetail은 Trint와 비슷비슷해 보이지만 각각 강조하는 기능은 조금씩 달라보이네요. 일단 모든 서비스의 공통점은 공유에 집중한다는 게 특징인 거 같습니다. 프로덕트 개발에서 팀원들이 생각을 서로 공유한다는 건 정말 중요하죠. 🤔

 

 

2. 문제 정의

프로덕트 개발 초기에는 가설 혹은 문제를 정의하고 이를 해결하기 위해 적합한 구조 및 서비스를 설계하고 보통 디자인 쪽에서는 브레인스토밍, 와이어프레이밍을 거쳐서 방향을 설정하는데 아무래도 이런 과정도 시각적으로 정리가 잘 된다면 생산성을 늘리는데 도움이 되겠죠. 이와 관련해서 두 가지 툴을 소개하는데요. 개인적으로는 Miro라는 서비스는 브레인스토밍에 적합하고, Whimsical은 와이어프레이밍이나 플로우 설계에 좀 유리해 보입니다. 원래는 여러 가지 툴을 사용하는데 회의적인 시각인데 최근에는 툴이 너무 잘 나와서 생각이 조금씩 바뀌는 거 같습니다. 😇

 

https://miro.com/

https://whimsical.com/

 

Whimsical — The Visual Workspace

Communicate visually at the speed of thought — collaborative flowcharts, wireframes, sticky notes and mind maps.

whimsical.com

 

 

3. 화면 설계, 프로토타입

화면 설계와 프로토타입(인터랙션)을 하나로 묶었습니다. Figam, Sketch, UXPin툴마다 차이가 있겠지만 대부분 기본적인 화면 설계는 어느 정도 지원을 하고, 관건은 인터랙션 관련된 애니메이션 기능이 조금씩 다른듯 합니다. 화면 설계 관련된 툴은 어느 정도 인터랙션의 영역도 침범을 하고, 프로토타입(인터랙션) 툴도 어느 정도 화면 설계의 영역을 침범을 하기 때문에 개인적으로는 좀 혼란스러워 보이네요. 그냥 빨리 최후의 승자가 나타나면 툴을 정해서 쓰기 좋을 텐데 말이죠. 😎 그리고 모션그래픽을 했던 입장에서는 애니메이션 쪽 기능은 너무 초보적인 형태라 건드리기가 좀 애매하기도 합니다. 쓰기도 좀 불편하고 말이죠.

 

그리고 소규모로 운영되는 팀에는 필요가 거의 없지만 다수의 디자이너가 있고 Sketch를 사용한다면, Abstract라는 툴도 고려를 해볼만 하다고 생각합니다. 이건 하나의 마스터 파일에서 Branch를 따서 다수의 인원이 협업하는데 유용하고요. Branch를 따는 건 아마 개발자분에게 더 친숙한 개념일 겁니다. 그냥 Sketch + Git이라고 생각하시면 됩니다. 물론 디자이너가 혼자라면 필요 없습니다. 버전 관리나 백업 명목으로 사용할 수도 있지만 그다지 추천하지는 않습니다. 😇 Sketch에서 디자인 시스템을 활용한다면 효율면에서는 최고라고 생각합니다. 하지만 Figma같은 경우에는 애초에 협업 기능을 지원하기 때문에 Abstract의 개념이 필요하지 않고요. 규모 있는 팀의 경우 Sketch + Abstract 혹은 Figma로 하는 게 좋다고 생각합니다.

 

https://www.abstract.com/

4. 테스트

테스트의 경우에는 여기서는 사용성 테스트를 의미하는거 같습니다. 보통 정량적, 정성적으로 측정한다고 하죠. 원문에서 소개하는 두 개의 툴은 각각의 형태에 적합한듯합니다. 

 

https://lookback.io/

온라인 상에서 인터뷰를 통해 사용성 테스트 및 사용자 리서치를 진행하는 서비스인 거 같습니다. 실제 프로덕트인지 프로토타입을 얹혀서 사용하는지는 모르겠군요. 딱 봐도 정성적 테스트에 유용해 보입니다. 미국 같은 해외는 땅이 넓어서 그런지 면접 등을 대부분 화상으로 진행하는 거 같습니다. 저도 최근에 화상 면접을 진행했었지만....😭

 

https://maze.design/

 

Maze | Design that works.

Maze is a user testing and usability research platform that turns your prototype into actionable insights from real users, bringing confidence to the design process. Works with InVision, Marvel & Sketch prototypes!

maze.design

이건 제가 사용해본 경험이 있어서 자신있게 말씀드릴 수 있습니다. 프로토타이핑이 된 Sketch 파일을 임포트 해서 목적을 설정하고 링크를 공유하면 사용자 혹은 테스터가 실제로 목적대로 제대로 찾아가는지 체크를 할 수 있습니다. 목적 달성까지 걸린 시간과 화면에 히트맵으로 실제로 어디를 눌렀는지도 확인이 가능합니다. 링크만 뿌리면 누구나 테스터가 될 수가 있기 때문에 정량적 테스트에 유용해 보입니다. 규모가 큰 회사의 경우 사내에서 자체적으로 테스트를 진행해도 좋을 거 같습니다. 대신 좀 지겹겠지만요. 🤪

 

 

5. 적용

https://meetalva.io/

 

Meet Alva

Create living prototypes with code components.

meetalva.io

https://www.modulz.app/

 

Modulz

The visual code editor for designing and building digital products—without writing code.

www.modulz.app

https://www.framer.com/

 

Framer - A lightning fast interactive design tool.

Got creative ideas? Bring them to life with Framer X.

www.framer.com

위의 3가지 툴은 저도 좀 생소한 서비스고 말로만 들었던 형태라서 좀 신기했습니다. 일단 간단하게 설명하자면 코드 기반의 비주얼 에디터구요. React 기반으로 보입니다. 한마디로 디자이너가 React로 컴포넌트를 짜서 직접 보면서 디자인한다는 개념입니다. 간단한 컴포넌트는 디자이너가 짜서 한다는 곳이 있다고는 들었는데 이런 툴을 쓰는지는 모르겠군요. React가 컴포넌트 기반이라 이에 대응해서 나온 툴이라는 생각이 듭니다. 실무에서 React 코드를 아주 조금은 접해본 경험이 있어서 그런지 하나도 이해하지 못한 서비스는 아니라 다행이네요. 🤯

'UI & UX' 카테고리의 다른 글

디자이너가 API와 친해져보기  (0) 2020.11.23
IA란 무엇인가  (0) 2020.08.10
서비스 경험기 - 집토스  (0) 2019.12.11
진정한 반응형 폰트사이즈  (0) 2019.11.06
Lorem Ipsum이란 무엇인가  (0) 2019.11.04