<주간 UIUX 디자인 : ui 디자인 툴>

UIUX 디자이너라면 꼭 알아야할 UI 디자인 툴 트렌드 (ui 디자인 툴킷 TOP 10)

제로베이스 UIUX 디자인 스쿨

UI 디자인 툴은 어떻게 진화해왔을까요?

UI (User interface)는 사람이 컴퓨터와 편하게 상호작용할 수 있도록 더 쉽고 빠르게 인지할 수 있는 방향으로 발전해왔어요. GUI(Graphic User Interface)는 아이콘이나 그림과 같은 그래픽 요소를 배치해놓고, 마우스 같은 포인팅 장치를 이용해 상호작용 하는 것인데, 시기에 따라 변화한 UI 디자인 툴의 활용 범위를 알아볼게요.

(1) 스마트폰 도입 전

스마트폰이 도입되기 이전의 데스크톱 환경의 인터랙션은 바로 이렇게 하이퍼링크를 마우스 조작으로 사용하는, 다소 정적인 인터페이스하에 놓여 있었어요. 따라서 어도비(Adobe)의 대표적인 비트맵 프로그램인 포토샵(Photoshop)으로 UI를 디자인하는 것이 당연하게 여겨져 왔죠.

(2) 웹 2.0 시대

웹 2.0 시대를 지나게 되면서 인터넷의 정보화는 가속화 되었습니다. 그에 따라 많은 사람들이 다양한 디자인 컬렉션을 포토샵으로 구현해 ‘UI 디자인 패키지’라는 이름으로 사용하게 되었어요. 나름대로 가장 많이 쓰이는 버튼이나 입력 박스 같은 UI 디자인 요소에 일관성을 갖추고, 패턴 라이브러리를 구축하기 시작한 거죠. 이러한 방식으로 재사용 가능한 UI 디자인 요소들로 구성된 룩앤 필 (Look and feel : 마케팅, 브랜딩, 상표화와 같은 분야에서 쓰이는 용어로 사용자의 제품 체험과 겉모양, 인터페이스의 주된 기능을 나타낸다.) 을 보여주는 방식으로 UI 디자인 툴이 활용되었죠.

(3) 스마트폰의 일상화

스마트폰이 일상화되고 나서는 더이상 정적인 인터페이스로는 설명할 수 없는 UI 디자인에 갈증이 생기기 시작했어요. 와이어프레임(wire frame) 작업이 과거에는 낮은 충실도(low fidelity)로 구현하는 핸드 드로잉 정도였다면, 최근에는 UI 툴을 이용해 높은 충실도(high fidelity)로 와이어프레임을 작성한 후 플로우를 추가하고 시안 작업으로 진행되는 것이 일반적인 추세가 되었죠. 기술이 발달하면서 디바이스도 고도화 되었고, 다양한 인터랙션의 프로토타입을 동적으로 구현하는데 점차 한계가 생기기 시작했어요.

또 프로젝트의 범위가 커질수록 수많은 분야의 사람들과 협업을 하게 되었구요. 각 분야의 사람들이 정해진 프로젝트 지침을 잘 이행하고 프로젝트 내용을 정확하게 공유하기 위해 ‘디자인 시스템’이 탄생하게 됐죠.

특히 마우스 포인터에서 손가락 터치 제스처로의 전환하면서 더 다양한 인터랙션을 요구하게 되었고, 이에 따라 비트맵 프로그램인 포토샵은 동적인 프로토타입에 대한 한계와 psd 파일의 지나치게 큰 용량으로 인해 디자이너들은 좀 더 라이트하면서도 액티브한 UI 디자인 툴을 찾지 않을 수가 없게 되었습니다.

터치 제스처 전환에 따른 다양한 인터랙션을 확인해보세요!

(1) 슬라이더 (Slider)

(2) 탭 (Tab)

(3) 스와이프 (Swipe)

전세계 UI 디자이너들은 어떤 툴을 사용하고 있을까요?

2022년 가장 많이 사용된 UI디자인 툴은 그래프에서 보는 바와 같이 피그마(Figma)가 응답자 4,260명 중 3,105명으로 압도인 1위를 차지하고 있어요. Adobe XD(263명)과 Sketch(241명)은 1위와는 비교할 수 없을 정도의 격차로 2위와 3위를 차지하고 있는 걸 볼 수 있습니다. 어도비의 포토샵과 일러스트레이터는 주로 사용하는 UI 디자인 툴이라기 보다는 보조로 사용하는 UI 디자인 툴로서 4위와 5위를 차지하고 있다고 이해할 수 있어요.

UI 디자인 툴 TOP 10의 특징을 한 눈에 정리해봤어요!

1위에서 10위까지 UI툴의 대표 기능 및 무료 가능 여부

UIUX 디자이너가 사용하는 툴은 무엇이 있을까요?

UI UX 디자인 분야는 다양한 분야와의 협업을 기본으로 하기 때문에 표준화된 툴을 사용하는 것이 중요해요. 2022년 디자이너가 사용한 다양한 툴킷(Toolkit)을 살펴보면 우리가 상상한 것 보다 훨씬 더 다양한 분야에서 많은 종류의 툴을 사용하고 있음을 알 수 있어요.

앞서 확인했듯이 UI 디자인의 대표적인 툴은 뭐니 뭐니해도 피그마죠. 피그마는 UI디자인 영역에서 압도적인 비율로 디자이너들의 사랑을 받고 있으며 앞으로도 다른 툴이 피그마를 뛰어 넘기는 쉽지 않을 것으로 보여져요.

왜냐하면 피그마는 UI 디자인 뿐만 아니라 프로토타이핑 툴과 디자인 시스템 툴에서도 압도적인 우위를 차지하고 있거든요! 특히 프로토타이핑은 UI 디자인에서 뗄래야 뗄 수 없는 기능으로 UI 디자인 툴의 순위에도 영향을 미칠 정도로 중요해요. UI 디자인 툴에 있어 프로토타이핑 기능이 얼마나 충실히 구현되는지가 UI 디자인 툴의 경쟁력을 결정한다고 볼 수 있죠.

그런 의미에서 고급 프로토타이핑 부문에서의 1위는 프로토파이가 차지하고 있으니 차세대 UI 디자인 툴로 프로토파이 역시 눈여겨 볼 필요가 있겠죠?

UIUX 디자인을 할 때 꼭 알아야할 UI 디자인 툴은 무엇일까요?

(1) 피그마 (Figma)

2016년 9월에 출시되어 ‘협업’을 차별점으로 강조해온 피그마를 소개할게요! 2010년부터 UI 디자인 툴을 선도해온 스케치를 사용해봤다면 피그마에 적응하는 시간은 그리 오래 걸리지 않을 거예요. 그만큼 인터페이스, 심볼관리, 이미지 추출(export)과 같은 주요 기능 방식이 비슷하거든요.

우선 피그마는 웹 브라우저 기반의 툴로 다른 UI 디자인 툴과는 달리 별도의 데스크톱 애플리케이션을 설치할 필요가 없다는 강점을 가지고 있어요. 물론 네이티브 데스크톱 앱을 별도로 제공하기는 하지만 필수로 설치할 필요는 없어요. 인터넷이 되는 곳이라면, 브라우저 접속만으로 피그마를 사용할 수 있다는 뜻이죠!

피그마 클라우드에 모든 리소스가 저장되기 때문에 별도의 저장 공간도 필요 없고, 링크 한 줄이면 어디서든 디자인을 공유하고 확인할 수 있어요. 또 여러 사람이 하나의 프로젝트에서 동시에 아트보드를 편집할 수도 있고, 서로 어떤 영역에서 무엇을 하는지 바로 바로 코멘트를 남길 수 도 있죠. 프로젝트 파일은 히스토리를 통해 버전 관리까지 가능하구요!

👀 이렇게 좋은 툴을 무료로?

이렇게 유용한 피그마의 가장 큰 장점 중 하나는 이런 기능들을 개인이 ‘무료’로 사용할 수 있다는 점이에요. 물론 제한 없이 사용하기 위해서는 유료 결제가 필요한 부분도 있지만, 무료 버전에서도 충분히 제한 없이 사용이 가능하니 부담 없이 사용해보세요!

피그마를 처음 접하는 사용자라면 피그마의 커뮤니티에서 제공하는 훌륭한 디자인 소스들을 구경하느라 하루종일 커뮤니티에 머무르게 될 지도 몰라요. 인터내셔널 규격 사이즈의 컴포넌트들이나 아이콘과 같은 소스들은 물론이고, 다양한 아이디어를 얻을 수 있는 인터페이스 디자인도 무궁무진하게 접할 수 있거든요.

그 밖에도 스케치나 XD 사용자가 개발자에게 디자인 작업을 넘길 때 사용하는 제플린을 별로도 사용하지 않아도 된다는 것과 토큰의 구현은 피그마가 UI 디자인 툴 중에서 압도적인 1위로 올라서게 된 이유가 아닐까요?

즉, 인터넷 기반의 피그마는 하나의 툴로 UI 디자인, 프로토타이핑, 핸드오프까지 모두 해결해주는 강력한 툴로 굳건히 자리매김하고 있으며 2022년 Adobe에 인수되어 앞으로도 그 인기는 계속 이어져 나갈 것으로 예상됩니다.

(2) 어도비XD (AdobeXD)

와이어프레임은 물론 인터랙티브한 프로토타입까지 가능한 XD는 벡터와 래스터 아트웍을 그리거나 재사용하는 것이 가능해요. 스케치의 후발 주자인 XD가 스케치를 뛰어 넘어 UI 디자인 툴 2위의 자리까지 올라 올 수 있었던 것은 ‘어도비’라는 헤리티지와 함께 1년이 넘는 기간 동안 어도비가 XD 프로그램을 무료로 배포한 영향도 무시할 수는 없었을 거라고 봅니다.

또 스케치는 맥에서만 사용할 수 있는 반면 맥 버전과 함께 윈도우 버전을 제공한 것도 XD가 빠르게 성장할 수 있는 계기가 되었을 거예요. 기존 UI 디자인 툴은 어도비사의 포토샵이나 일러스트레이터의 영향을 받지 않을 수 없기 때문에 같은 어도비 제품군의 XD가 포토샵이나 일러스트레이터와 쉽게 호환되며 어도비 제품의 같은 단축키를 공유하므로 타 UI 툴에 비해 전환율이 좋다는 점도 하나의 강점으로 여겨졌죠.

👀 UI 디자인 툴이 이렇게 쉽다구요?

XD를 사용하다보면, 누구나 쉽게 배울 수 있는 간단한 인터페이스에 쉽고 가벼운 툴임에도 복잡한 하이 피델리티(High-Fidelity) 와이어프레임과 복잡한 인터랙션이 가능하다는 점에 또 한번 놀라게 될텐데요. 심볼(Symbol)의 에셋 라이브러리 등록을 통해 손 쉽게 관리할 수 있다는 점도 큰 장점이에요. 더블 클릭만으로 복제한 컴포넌트를 수정할 수 있는 컴포넌트 관리의 유연함 또한 XD가 UIUX 디자이너들의 사랑을 받는 이유 중 하나죠.

또 XD에서는 피그마와 마찬가지로 다양한 플러그인을 사용할 수 있어요. 플러그인을 사용하면, 몇 번의 클릭 만으로도 손쉽게 인터넷 상의 이미지를 불러올 수 있고, Lorem Ipsum 텍스트로 와이어프레임을 구현할 수도 있죠.

XD는 현재 유료 툴이지만 다른 어도비 툴도 함께 사용하는 디자이너라면 체감상 무료 툴로 느끼는 분들이 많을 거예요. 만약 개인이 어도비 XD만 사용 한다면 월 1만 1천원의 구독료가 있습니다.

(3) 스케치 (Sketch)

스케치는 2019년 전까지만 해도 지금의 피그마와 같은 인기를 누리는 UI 디자인 툴로 기억돼요. 무료 버전이 없고, 가장 큰 단점이라고 생각되는 맥에서만 사용할 수 있는 UI 디자인 툴임에도 불구하고 많은 UI 디자이너들은 스케치를 기꺼이 사용했죠.

2010년에 출시된 벡터 기반의 툴인 스케치는, 아트보드를 생성할 때 1배수를 사용하면 상위배수를 자동으로 커버하면서 포토샵을 사용하던 디자이너들을 놀라게 했습니다. 일러스트레이터와 같이 한 페이지 안에서 여러 개의 아트보드를 배치해 UI 디자인 작업에 특화된 와이어프레임 제작을 가능하게 했구요.

iOS나 머티리얼 가이드의 리소스를 불러와 스타일이나 심볼을 제작할 때 디자인의 일관성을 유지할 수 있게 하고 그 덕분에 리소스를 쉽고 편리하게 관리할 수 있었어요. 또 라이브러리 기능으로 팀 전체가 심볼을 공유해 협업 하면서 한번에 모든 심볼을 업데이트 할 수도 있죠.

👀 한 때는 전성기였던 UI 디자인 툴의 하락세

스케치는 월 $9 또는 연간 $99로 지불 방식을 선택할 수 있는데요. 추가로 유료 플러그인을 사용 해야된다는 점이 위에 툴들에 비해 경쟁력을 잃어가는 이유 중 하나로 볼 수 있어요. 잦은 업데이트는 스케치의 장점이었으나 최근에는 업데이트마다 소프트웨어가 무거워지면서 특히 파일을 열거나 동기화 시키는데 긴 시간이 소요된다는 단점이 되어가고 있다고 해요.

또 아이콘이나 텍스트 박스의 픽셀 퍼펙트로 인한 소수점 발생과 원인을 알 수 없는 폰트의 깨짐 문제, 그리고 행간과 자간의 자동 수정 문제 등은 오랫동안 UI 디자인 툴의 지존 자리를 지키던 스케치의 인기 하락 원인으로 꼽히고 있습니다.

(4) 프로토파이 (protopie)

2022년 기준 UX Tools의 조사에서 가장 주목하고 싶은 툴은 피그마 보다도 프로토파이를 꼽고 싶은데요! 이제 UI 디자인에 있어 인터랙션의 영역은 사용자 경험과 맞물려 새로운 서비스가 출시 될 때 가장 기대가 되는 영역이기도 하거든요.

그런 의미에서 고급 프로토타이핑 분야 1위에 자리 잡고 있는 프로토파이는 홈페이지가 영문으로 되어 있어 해외 기업이라 생각하기 쉽지만 놀랍게도 국내 스타트업의 디자인 툴이에요.

프로토파이 내에서의 인터페이스 디자인도 가능하지만 피그마, XD, 스케치 파일과 호환이 가능해 프로토파이 안에서 각 요소를 다시 만들지 않아도 되구요. 프로토파이의 가장 큰 장점은 피그마, XD, 스케치에서 구현하기 어려운 다양한 변수와 센서의 사용이에요.

👀 지금 프로토파이를 주목해야 하는 이유!

변수를 사용하여 프로토타입 전체에 데이터를 저장할 수 있으며 변수는 트리거 및 응답에서 변경할 수 있다. 프로토파이는 가속도계, 근접도, 3D 터치와 같은 센서를 사용할 수 있는 유일한 프로토타이핑 도구예요. 모바일 뿐만 아니라 코딩 없이도 데스크톱, TV, 자동차 대시보드 화면 등 다양한 환경에서 테스트가 가능해요.

프로토파이 역시 팀이 공유하는 저장 공간에 프로토타입을 저장할 수 있어요. 언제든 재사용할 수 있는 컴포넌트 라이브러리로 협업을 용이하게 할 수 있도록 지원하죠. 맥과 윈도우 모드를 지원하고 있고, iOS 및 안드로이드 기기에서 IP주소를 사용하거나 USB를 연결하는 것만으로도 미리보기가 가능해요. 즉 테스트가 필요한 기기에서 직접 프로토타입을 시연하는 것이 가능한 매우 편리한 기능을 갖고 있죠.

UI 디자인 툴로 구현할 수 있는 UI 디자인 트렌드를 알아볼까요?

(1) 플랫 디자인 (Flat Design)

플랫 디자인은 입체적이고 복잡한 그래픽 요소를 배제하고 단순한 구성과 컬러를 통해 사용자가 직관적으로 인식 할 수 있게 하는 2차원적인 평면 방식의 디자인을 뜻해요. 그리드 기반으로 규칙적인 레이아웃을 갖고 있는 플랫 디자인은 사용자들이 점차 스마트폰에 익숙해진 이후 빠르게 콘텐츠에 집중할 필요가 생기면서 탄생하게 되었죠.

사각형의 메트로 디자인으로 구성한 마이크로 소프트 윈도우 8의 시작화면은 대표적인 플랫 UI 디자인의 사례라고 할 수 있어요. 그레이디언트를 배제한 간결한 색의 사용과 장식 요소의 배제하여 사용하여 콘텐츠에 더욱 집중할 수 있도록 간결하고 심플한 디자인을 보여주고 있죠. 이러한 플랫 디자인은 2013년 아이폰의 iOS7에 이르러 인기가 정점을 맞게 되었는데요.

iOS7과 이전의 아이콘을 비교해보면 반사광이나 그레이디언트와 같은 요소가 거의 제거된 것이 보이시나요?

하지만 iOS의 아이콘은 한 번에 변화한 것이 아니라, 조금씩 진화해가면서 사용자가 변화의 과정에 익숙해지도록 사용자를 배려하고 있음을 알 수 있어요. 플랫 디자인은 짧은 기간 동안 엄청난 이슈를 불러오며 모바일 뿐 만 아니라 웹에서도 플랫 디자인을 적용하여 단 기간에 수 많은 서비스들이 플랫 디자인을 지향하게 되었습니다.

👀 완벽해 보였던 플랫 디자인의 이면

하지만 모든 요소가 평면이기 때문에 요소에 담긴 중요 기능을 사용자가 바로 알기 어렵다는 단점이 공존했죠. 클릭이 가능한 영역의 구분도 모호하며 그림자와 깊이감의 부족으로 인해 직관적으로 형태를 알아보기 어려웠고, 지나친 단순화로 사용자가 중요한 기능을 놓치거나 서비스를 이해하지 못하고 지나치게 된다는 단점이 부각되기 시작했습니다.

그리드 기반의 콘텐츠 분할, 산세리프 서체, 유사한 컬러 등의 디자인 원칙은 플랫 디자인을 개성있고 세련되게 만드는 요인이였지만, 시간이 지날수록 수 많은 서비스들이 플랫 디자인을 채택함으로써 점차 개성이 사라지고 유사한 디자인의 스타일이 양산되었죠.
이를 보완하기 위해 그레이디언트나 블러 처리를 통해 요소간의 우선 순위를 표현하기 시작하였는데 이를 플랫 2.0 또는 딥 플랫이라고 합니다.

최근의 iOS는 사실 딥 플랫 방식 보다는 머티리얼 디자인의 그림자 재질을 이용하는 방식에 더 가까우며 머티리얼 디자인도 이러한 점 때문에 iOS를 위한 가이드 지침을 별도로 제공하고 있다. 휴먼 인터레이스 가이드라인을 살펴보면 애플의 iOS디자인으로 대표되는 플랫디자인의 변화된 유형과 사용 가이드를 확인할 수 있습니다.

(2) 머터리얼 디자인 (Flat Design)

플랫 디자인으로 대표되는 것이 애플의 iOS였다면 머티리얼 디자인으로 대표되는 것은 안드로이드라 할 수 있어요. 안드로이드를 운영체제로 사용하는 제조사는 우리나라의 삼성을 비롯해 전 세계적으로 셀 수 없을 만큼의 다양한 제조사와 디바이스가 존재하는데요.

각 제조사는 아이덴티티를 유지하면서도 커스텀이 가능하도록 하는 것이 중요했죠. 이런 상황에 적합한 디자인 기준을 만들기 위해 안드로이드의 롤리팝 버전부터 구글에서는 머티리얼 디자인 가이드 지침을 제공하게 된 거예요.

머티리얼 디자인은 물질의 질감이나 광원효과, 그림자 효과 등을 통해 디자인에 깊이감을 더한 것으로, 디자인보다는 단순하고 편리한 기술 개발에 주력했던 구글이 ‘디자인 중심’으로 전환한 동시에 발표했어요. 머티리얼 디자인은 플랫 디자인과 비슷해 보이지만 평면만 추구하는 플랫 디자인과 달리 종이 두께 높낮이를 표면에 적용해 그림자를 만들고 질감을 표현하고 있어요.

머티리얼 디자인은 3차원의 Z축을 이용해 표면의 높낮이를 구현하고 요소 간의 우선 순위를 그림자를 통해 나타내어 정보 구조를 표현하고 구분하고 있어요. 그 결과 사용자는 디자이너의 의도대로 서비스를 이용할 수 있게 되었습니다. 플랫 디자인의 장점인 단순함을 유지하면서 시각적 다양성을 추가해 사용성을 끌어올린 디자인이라고 말할 수 있죠.

(3) 글래스모피즘 (Glassmorphism)

최근 1~2년 사이 가장 주목받고 있는 디자인 스타일 중 하나인 글래스모피즘은 윈도우 11을 발표로 시각적 계층과 화면의 깊이를 표현하는데 훌륭하다는 평가를 받고 있어요.

글래스모피즘은 반투명 유리 재질을 사용하여 요소 간의 시각적 계층을 표현하는데 탁월한 그래픽 스타일이나 아직 디자인 랭귀지 자체로서 자리를 잡지는 않았어요. 마이크로 소프트의 플루언트 디자인 가이드에서는 아크릴 머티리얼(Acrylic Material)로, 휴먼 인터페이스 가이드라인에서는 반투명 재질(Translucency Material)로 표현되고 있지만 이름만 다를 뿐 모두 글래스모피즘 스타일을 의미해요.

👀 글래스모피즘 예쁘기만 한 게 아니에요

글래스모피즘은 반투명 유리 재질의 도형을 글자 위에 떠 있는 것처럼 보이도록 해서 시각적으로 계층을 구분할 수 있어요. 마치 공간에 떠 있는 듯한 3차원적 시각 효과를 표현하는 것이죠. 배경이 흐리거나 단색인 경우 반투명 재질을 제대로 표현하기 어렵기 때문에 다른 어떤 디자인들보다도 화려한 배경을 사용하는 특징을 가지고 있어요.

또 각 오브젝트의 투명도 값을 다르게 주어 계층을 표현하고, 배경에 가까운 요소는 높은 흐림 효과를 적용하며,반대로 배경에 먼 요소는 흐림 효과를 낮게 줍니다. 또 테두리로 명확한 경계를 구분하면서 두 가지 요소가 겹쳐 있을 때 명확한 테두리는 콘텐츠 간의 경계를 구분하는데 큰 도움이 됩니다.

UI 디자인 툴 어떤 걸 배우면 좋을까요?

UI 디자인 툴이 다양하다보니, 새롭게 UIUX 디자인 분야에 진입하려는 분들이라면 누구나 한 가지 이상의 툴 정도는 기본으로 사용할 필요가 있겠죠? 그 중에서도 동료와의 협업을 위해서 어떤 툴을 사용할 지 결정하는 것이 중요할텐데요.
위의 설문에서 확인 했듯이 ‘피그마가 대세니까 피그마를 해야겠다!’고 결심한 분들 도 있을거예요. 하지만 UIUX 디자이너로 입사한 회사가 아직 스케치에서 피그마로 옮겨가지 못한 상황에 처해 있을 지도 모르죠.

물론 설문에 따르면 2023년에도 여전히 피그마는 타의 추종을 불허할 것으로 예상됩니다. 더구나 피그마는 어도비에 흡수되기도 했고요. 결국, UIUX 디자이너가 되고 싶은 분들이라면 피그마를 기본으로 배워두고 서브 UI 디자인 툴로는 무엇을 배워둘지 미리 고민해 볼 필요가 있다고 봐요.
과연 여러분의 선택은? 디자인은 늘 그러하듯이 툴에 있어서도 정답은 없어요. 우리는 늘 시장의 변화를 잘 지켜보고 트렌드를 캐치하는 능력이 중요합니다.

UIUX 디자인 툴이 이렇게 다양하다니! UIUX 디자이너를 꿈꾸는 분들이라면, 각 UI 디자인 툴의 특징을 살펴보며 UI 디자인 트렌드를 놓치지 마세요! UIUX 디자이너로 빠르게 취업하고 싶다면 4개월만에 피그마, XD, 스케치, 프로토파이 모두를 배워볼 수 있는 UIUX 디자인 스쿨에서 시작하는 것도 잊지 마시구요!

그럼 다음에는 더 유익한 UIUX 디자인 이야기로 찾아올게요 안녕~

주간 UIUX 디자인
지난 이야기도 만나보세요.