2021년 디자이너의 베스트 툴킷
2021년을 돌아보며 - 격변하는 시대의 디자인 도구
UX Tool에서 진행하는 UX/UI 디자인 툴 설문조사/통계가 매년 발표되고 있습니다. 올해도 3,319명의 디자이너의 참여로 2021년의 통계 결과가 완성되었습니다.
미국, 영국, 독일, 프랑스 등 여러 국가 디자이너들이 설문에 참여하였고, 한국 디자이너는 111명이 참여하였습니다.정말 많은 일이 있었던 2021년, 디자인 업계에서도 많은 변화와 이슈가 있었는데요. 팬데믹, 코로나19로 인한 비대면 업무, 원격 업무 활성화, 업계의 재택근무 적극적인 도입이 적지 않은 영향을 끼쳤을 거라 생각됩니다.
격변하는 시대에 디자인 툴을 함께 살펴볼까 합니다.
#Digital WhiteBoarding , On boarding
원격 업무 및 온라인 회의 활성화에 따른 디지털 보드 툴의 발전도 흥미로운 요소입니다. On boarding, Digital Whiteboard, 실시간 브레인스토밍 툴의 급격한 성장이 눈에 띕니다.
On boarding, Digital Whiteboard 부문 1위는 Miro가 차지하였습니다. Miro는 다양한 템플릿을 제공하고 있으며 간단하고 편리하게 문서를 구현하며 공유할 수 있는데요. Miro자체에서 채팅 기능을 제공하기 때문에 실시간으로 아이디어를 확인하며 커뮤니케이션 하기에 용이합니다. 회의실에서 모여 카드 소팅, 브레인스토밍을 하며 포스트잇을 손수 붙이던 화이트보드를 그대로 옮겨온 것 같은 인터페이스를 갖추고 있습니다.
아이데이션 보드 이미지 출처 | Miro official site
채팅 기능 제공으로 실시간으로 화면을 보며 협업하고 의견을 나누며 소통할 수 있습니다. 이미지 출처 | Miro official site대부분 레퍼런스 Research 및 Wireframe단계에는 회의 전 아이디어 시각화 과정이 필요합니다. 그동안 아이데이션 공유 과정에서 효율을 발휘하긴 어려웠습니다. 아이디어 시각화 과정에는 잘 정리해서 공유하는 과정도 중요했기 때문이죠. Miro는 최대한 아이디어에 집중할 수 있도록 도와주는 툴입니다.
실시간 협업은 물론 아이데이션 보드를 문서로 추출, 다른 프로그램과의 임베드, 이미지로 저장 등 여러 방법으로 내보내기가 가능합니다.
저 역시 아이디어가 떠올랐을 때, 불현듯 떠오르는 아이디어들을 메모할 때 Miro를 이용하고 있습니다. 복잡한 생각 정리가 필요할 때, 실시간으로 아이디어가 떠올랐을 때 빠르게 공유, 전달할 수 있는 점이 큰 매력 요소가 아닐까 싶습니다.
생활 속에서 반짝 아이디어가 떠오르거나 평소 생각한 점 , 느낀 점, 메모가 필요할 때 자유롭게 사용하고 있습니다.대세에 힘입어 출시된 Figma의 Figjam 역시 강력한 툴임에는 분명합니다. 가볍고 심플한 인터페이스, 실시간 다중 접속으로 협업 가능, 여러 워크플로우, 차트, 다이어그램 템플릿 등을 제공하며 처음 접하는 사람도 쉽게 익힐 수 있을 정도로 가볍고 간편합니다.
심플하며 직관적인 Figjam의 인터페이스. 마치 메모장을 꺼내서 펜으로 적어야 할 것 같은 느낌이 들지 않나요?#UI Design
UI 디자인 툴의 점유율은 Figma가 압도적입니다. Figma는 2020년부터 Sketch의 점유율을 넘어서기 시작했는데요. 2021년에는 압도적으로 Sketch를 넘어서게 됩니다.
Sketch는 Mac OS 환경을 마련하지 않으면 사용할 수 없는 툴이지만 Figma는 웹 기반 브라우저로 어떤 환경에서도 제약을 받지 않으며 누구나 사용하기 쉽게 만들어졌습니다. 접근성이 높아 ALL IN ONE 패키지라고 불려도 손색없을 만큼 많은 기능을 갖고 있으면서 편하고 가볍습니다.
Figma의 CSS생성/ Auto Layout / View mode의 Comment 기능Sketch는 Zeplin이나 Abstract를 함께 사용해야 Handoff, 개발코드 생성, 버전 관리가 가능하지만 Figma는 이를 한 번에 해결합니다. 게다가 View Mode에 실시간 Comment제공까지.. 기획, 디자인, 개발 등 다양한 분야에서 사용하기에 좋은 툴이어서 Figma의 압도적인 점유율은 자연스러운 현상이 아닐까 생각됩니다.
2017년부터 2021년 디자인 툴 변화 추이위 표를 보면 대부분의 디자이너가 Sketch에서 사용하는 툴을 Figma로 전환했음을 보여줍니다. 2022년까지 Figma의 인기는 계속될 것으로 예상됩니다..
#Platform/OS
디자이너가 사용하는 OS 분야에서는 Mac OS가 압도적이고 Window OS가 그 뒤를 잇고 있습니다. Lean/Agile 조직에서는 이미 대부분 Mac OS를 도입하는 추세입니다.
대부분의 디자이너들은 Mac OS를 사용합니다. 하지만 클라이언트의 프로덕트를 다루는 직군(업계/에이전시)은 Window OS환경 등 여러 환경도 함께 고려해야 합니다.#Framer의 비상
또 하나의 눈여겨봐야 할 부분은 Framer가 꾸준히 높은 사용률을 보이고 있다는 점과 모든 분야에서 압도적인 1위를 차지한 Figma의 뒤를 추격하고 있다는 점입니다.
2022년 가장 기대되는 툴에 Figma 뒤를 추격하고 있는 Framer.
UI 디자인 툴 분야에서 Framer는 Figma와 함께 4.7의 높은 사용자 평점을 기록했습니다.Framer는 개발언어 자바스크립트의 좀 더 쉬운 버전인 커피 스크립트라는 언어를 탑재한 인터렉티브 프로 타이핑 툴로 당시 Framer로 프로토타이핑을 구현하려면 코딩 언어를 어느 정도 이해해야 다룰 수 있는 툴이었습니다. 결국 코딩에 익숙하지 않은 디자이너에게는 진입장벽이 높아 도입률이 높지 않았던 툴입니다.
하지만 2018년 Framer X가 발표되었고 React 기반의 툴로 완벽히 탈바꿈을 하게 됩니다. 직접 Framer 내에서 UI 디자인이 가능하게 되었고 코드를 몰라도 사용하는데 어렵지 않게 말이죠.
Framer X가 되기 전의 버전을 Framer Classic화면인터페이스를 살펴보면 개발 언어를 다루는 툴에 가까운 구조를 띄고 있고 개발 언어나 코드를 알지 못하면 구현이 어려울 정도로 진입장벽이 높았습니다.
Framer에서 디자인, 프로토타이핑 후 Framer에서 생성되는 개발코드가 일치하여 디자인된 화면 그대로 완벽하게 구현이 된다는 것 또한 큰 장점이 아닐까 생각합니다. 디자인 결과물과 개발 후의 결과물이 일치하느냐의 문제도 결국 공유와 소통이 잘 되느냐의 문제와도 같습니다.
Component가 디자인 요소만 이루어진 것이 아닌 개발코드를 포함하고 있는 Framer의 Code Component기능* Code Component https://www.framer.com/developers/
Framer는 UI 디자인과 인터랙션을 함께 묶을 수 있는 툴입니다. Code Component기능은 디자인 시스템 제작에 매우 효율적이며 제품의 일관성을 유지하는데 큰 도움이 됩니다.
디자인과 개발 코드를 함께 Component로 등록할 수 있는데요. 인터랙션 역시 Code Component로 제작할 수 있어 불필요한 반복 작업과 확인 작업을 줄이고 UI 디자인을 조합하여 프로토타입 제작을 빠르고 쉽게 할 수 있으며, 빠른 검증 및 문제 해결에 많은 도움이 됩니다. 개발자와 협업, 소통할 때 가장 큰 효율을 발휘할 수 있으며 불필요한 소통을 줄이고 작업과 제품 제작에 더 힘쓸 수 있게 도와줍니다.
실제로 제안 작업이나 프로젝트 진행 시에 인터랙션 구현, 프로토타입 제작이 필요한 상황이 많습니다. 미리 라이브러리화 되어있고 반복 작업이 필요한 Component를 선행하여 구축할 수 있다면, 작업 시간을 좀 더 효율적으로 사용할 수 있지 않을까 생각하게 됩니다.
#Prototyping
프로토타입 제작 툴 분야에서도 Figma가 압도적입니다. 그 뒤로는 Adobe XD, Invision이 뒤를 잇고 있습니다. Figma는 프로토타입 제작을 위해 UI 디자인 후 다른 프로그램으로 Import 할 필요 없이 프로그램 내에서 바로 프로토타입 제작이 가능한 점이 또 하나의 장점입니다.
* Protopie 만족도 조사프로토타입 툴에 대한 만족도는 Protopie가 가장 높은 만족도를 기록했습니다. 프로토타입 툴에 대한 만족도는 Protopie가 가장 높은 만족도를 기록했습니다. Figma도 간단한 인터랙션이나 프로토타입 제작이 가능하지만 조금 더 디테일하고 다이내믹한 구현을 위해 Protopie를 사용하기도 합니다.
디자인 작업 후 프로토타입 제작은 필수가 되었습니다. 디자인을 실제 화면과 같이 구현하는 건 디자이너의 과업이며 업무의 중요한 한 부분이 되었기 때문인데요. 그만큼 디자이너의 프로토타입 제작 능력을 중요시하게 되었다는 것도 주목해야 할 점입니다.
#Hand off
* Zepline 만족도 조사
Handoff 분야에서는 Zeplin이 여전히 높은 평가를 받고 있습니다. OS나 환경에 영향받지 않고 소통할 수 있는 점이 역시 큰 장점입니다. Figma 역시 굳이 다른 프로그램을 사용하여 공유하지 않아도 되는 장점으로 1위를 차지했네요.
#Design System
* Figma 만족도 조사일관성 있고 효율적인 업무를 위한 디자인 시스템 제작 관리 툴 역시 Figma가 1위를 차지했습니다. Figma는 클라우드를 통해 동기화되는 라이브러리를 구축할 수 있는 점도 주목할만한 장점입니다. 그 뒤로는 Zeroheight 툴이 좋은 평가를 받았습니다.
* ZeroheightZeroheight는 디자인 시스템 Asset을 웹 기반 솔루션으로 제공하는 툴입니다. 디자이너는 필요한 에셋을 추출하여 Sketch나 Figma 등의 툴로 Asset을 가져올 수 있습니다.
2021년 디자이너의 베스트 툴킷 , 거의 모든 분야에서 압도적인 1위의 Figma입니다.이렇게 2021년 디자인 툴 통계 결과를 살펴보았습니다.
불과 5년 전까지만 해도 그래픽, 드로잉, UI를 Adobe 포토샵으로만 사용했었는데요. 포토샵은 기능 자체도 많고 훌륭한 툴임에는 분명 하나 UI 디자인을 하기엔 적절하지 않은 툴이었습니다. 선택지는 존재하지 않았고 불편함을 감수하면서 당연히 포토샵으로만 디자인을 해야 한다는 고정관념이 생기지 않았나 생각됩니다.
하지만 생산성을 대폭 끌어올려줄 수 있는 툴들이 출시되어 시간 절감, 반복 작업의 간소화 등.. 디자이너의 생산성 효율성이 높아지는 요즘이 참 반갑습니다.
다만 분명 선택의 폭은 넓어지게 되었지만 프로젝트나 조직에 새로운 툴을 도입 전에 신중한 테스트와 판단이 필요할 것이고 조직이나 프로젝트에 도입 전에 충분한 테스트와 협의가 이루어져야 할 것입니다. 상황에 맞는 기능을 제공하는지, 꼭 필요한 기능을 갖추고 있는지 신중하게 선택해야 되겠습니다.
결국은 커뮤니케이션. 소통을 위함이 아닐까 생각합니다. 디자이너는 커뮤니케이션을 해야 하는 직군입니다. 때로는 그래픽으로, 인터랙션으로, 문서로, 언어로 기획자/개발자/클라이언트와 협업을 합니다. 디자인을 어떻게 보여줄 수 있을 것인가, 잘 전달할 것인가에 대한 끊임없는 고민, 작업물에 디테일을 부여하고 설득력을 부여하는 작업은 마치 디자인에 생명을 불어넣는 일과 같습니다.
디자인이 최종 목표라면 툴은 과정입니다. 툴은 디자인을 하게 도와주는 말 그대로 “도구”입니다. 도구를 능숙하게 다루기 위해서는 손에 잘 익을 수 있게 수련해야 합니다. 빠른 변화의 시대에 적응하기란 매우 어렵습니다. 하지만 상황에 따라 적절히 대응하고 호기심과 관심을 가지면서 받아들이고 배우는 유연한 자세 또한 중요합니다. 본인에게 맞는, 상황에 맞는 툴을 탐구하고 연구하면 좋을 것 같습니다.
- 라이트브레인 가치디자인그룹 양예나
출처
2021 Design Tools Survey : https://uxtools.co/survey-2021/
Framer classic Image : https://nmac.to/framer-studio-1-14-14/
Figma https://pawelgrzybek.com/grow-shrink-and-reflow-elements-with-figma-auto-layout/
