Sketch, XD, Figma 와 바교, Pixso가 디자이너에게 어떤 매력이 있을까?

최근 몇 년 동안 UI 디자인 툴 시장이 비약적으로 성장했습니다. 그중 Sketch, Adobe XD, Figma, Pixso가 가장 잘 알려져 있습니다. UI 디자인 과정에 협업이 중요하다면, Figma와 Pixso가 우선이 될 것입니다. 다양한 플러그인을 좋아한다면 Sketch가 더 적합할 것입니다. 만약 이미 Adobe가족 인터페이스를 잘 알고 있다면 Adobe XD는 더 쉽게 배울 수 있을 것입니다. 이 글에서는 UI 디자인 도구를 고를 때 자신에게 맞는 것을 고를 수 있도록 각각 4가지 UI 디자인 소프트웨어를 소개합니다.

디지털 제품 디자인 산업 사슬에서 UI 디자이너는 연결고리 역할을 합니다. 제품 매니저는 "수요"에서 시작하여 추상화된 제품 개념의 모티브를 만들고, UI 디자이너는 이를 통해 추상 개념을 구상화하여 선틀 그라운드+인터랙티브 논리+시각+사용자 경험을 완성하고, 궁극적으로 하이파이 프로토타입을 개발 엔지니어, 결정자, 고객님 등의 역할을 맡깁니다.

보스턴 데이터에 따르면, 전 세계 디자이너 종사자 수가 1억 명에 육박하고, 주로 미국, 중국, 독일, 일본, 한국 등 과학기술 발전의 선두국가에 몰려 있으며, 인터넷 디자이너 인력 수요가 급증하고 있다고 합니다. 그래서 인터넷 디지털 제품을 위한 UI 디자인 툴이 급성장했습니다.

1.Pixso

피그마는 물론 매우 우수한 UI 디자인 도구이지만 영어를 못하는 사용자들에게도 문제가 적지 않습니다. 웹 페이지 로딩이 느리고 일부 내장 글꼴이 호환되지 않으며 한국어 버전이 출시되지 않아 소프트웨어의 사용 문턱을 높인 것이 틀림없습니다.。

Pixso는 Figma와 동일한 원스톱 협업 디자인 툴로 UI 디자인, 프로토타입, 인터랙티브, 마크, 자원 라이브러리를 총망라하여 Figma의 거의 모든 핵심 디자인과 협업 기능을 포함하고 있습니다. 제품, 디자이너, 개발자 협업의 다양한 소프트웨어 간의 장벽을 뚫어 하나의 소프트웨어에서 전 프로세스를 완료할 수 있으며, 한국어를 내장하여 우리 국민의 사용 습관과 요구에 더욱 부합합니다.

현지 사용자의 요구에 대한 통찰과 사용자 피드백을 바탕으로 제품 디자인 측면에서 Figma에 비해 많은 차별화된 기능과 서비스를 제공하고 있습니다.

독특한 벡터 그리드, 그래픽 효율 배가

컴퓨터 그래픽 분야의 깊은 축적을 바탕으로, Pixso는 하나의 앵커 지점에서 수많은 경로를 만들고, 여러 개의 개구부나 닫힌 경로를 연속적으로 만들 수 있는 독특한 벡터 그리드 기능을 선보였습니다. 벡터 그리드 덕분에 복잡한 도형을 빠르게 그릴 수 있으며, 기존의 도구와 같이 여러 개의 도면을 그려서 짜깁기할 필요가 없습니다.

기존 벡터 그리드 기능에 더해, Pixso는 최근 업데이트에서 멀티 컬러 벡터 그리드 특성을 추가하였으며, 색상 채우기에 대한 벡터 그리드 한계를 돌파하였으며, 벡터 편집 모드에서 닫힌 경로를 그리기 위해 다른 색을 채우도록 지원합니다.

Pixso 멀티 벡터 그리드 기능을 사용하여 요즘 핫한 '기하학적 도형' 스타일의 작품을 쉽게 만들 수 있으며 2.5D Logo, 멤피스 디자인, 저다각형 일러스트레이션 등이 포함되어 있습니다.

2.5D LOGO

멤피스 스타일 포스터

저다각형 일러스트레이션

지능화된 벡터 디자인, 페이지 레이아웃이 더 효율적이다

Pixso는 지능화된 벡터 디자인에 초점을 맞추고, 응답형 동적 프레임 자동 배치, 지능화된 옵션을 지원하며, 새로운 그래픽 도구와 형상 도구를 제공하여 디자인 효율성을 크게 향상시킵니다.

사용자가 내용을 조정할 때 그림판은 자동으로 크기와 레이아웃을 조정하게 되며, 그림 레이어의 간격을 일괄적으로 조정하여 그림 레이어의 위치를 유연하게 바꿀 수 있으며, 노드, 그래픽 채색, 복잡한 모양, 빠른 변환으로 다양한 그래픽을 얻을 수 있습니다.

마찬가지로, 다중 그래프 레이아웃의 장면에서는 Pixso의 자동 레이아웃 기능을 통해 요소의 위치 조정이나 적층 배열이 더 스마트해지고 수동 동작의 번거로운 단계를 간소화합니다.

스타일과 그룹웨어 라이브러리 공유

Pixso에서는 색상, 텍스트 스타일, 계층 패턴을 원터치로 저장할 수 있을 뿐만 아니라 팀 라이브러리로 배포할 수 있으며 팀 내부와 여러 항목에서 호출됩니다.

일단 어떤 구성 요소가 수정되면 프로젝트에 인용된 모든 인스턴스가 자동으로 업데이트되어 디자인 창작 및 반복적인 효율성을 크게 높일 수 있으며, 모든 리소스를 팀에 공유하여 빠르게 재화용을 이룰 수 있습니다.

팀 공간에 프로젝트를 신설하면 팀이 이전에 배포한 팀 라이브러리를 볼 수 있습니다. 팀 라이브러리를 사용하면 왼쪽 패널에 팀 라이브러리의 모든 구성 요소를 볼 수 있습니다. 이로써 팀 구성 항목별 공유 및 호출이 이루어지며 불필요한 반복 작업을 줄일 수 있습니다.

다양한 디자인 원고를 호환하여, 역사 파일 빈틈없이 연결하기

파일 호환의 경우, Pixso는 Figma, Sketch, XD, Axure의 파일을 가져올 수 있도록 지원하며, 다양한 파일 포맷을 호환하는 최초의 디자인 협업 플랫폼입니다.

디자이너는 각종 주류 형식 파일 쓸 수 있습니다. 원스톱으로 오프라인에서 하이파이 제품 인터페이스 디자인을 실현하고, 디자인 작업의 전체 링크를 통해 팀워크의 효율성을 향상시킬 수 있습니다.

2. Figma

Figma는 웹 브라우저에서 바로 실행할 수 있는 클라우드 기반의 UI 디자인 툴로, 사용자는 어떤 기기나 플랫폼에서 자신의 프로젝트에 접속하거나 소프트웨어를 설치하거나 구매할 필요가 없습니다.

UX TOOLS에서 발표한 '2021 디자인 도구 조사 보고서'에 따르면, 윈도우와 macOS 시스템에서 Figma의 사용자 수가 이전에 출시된 Sketch와 Adobe XD보다 많습니다.

Figma 이전초기 원고부터 프로토타입 디자인까지 두개 이상 소프트웨어를 사용해야 하는 경우가 많았는데, 파일 흐름 횟수가 많습니다. Figma 이후 같은 도킹 프로세스가 대폭 단축되어 팀원들이 파일을 같이 받을 수 있게 되었습니다.

Figma의 장점은 협업입니다. 오른쪽 상단에는 현재 파일을 탐색하고 편집하고 있는 멤버의 프로필 사진이 표시되며, 마우스 포인터는 각각의 닉네임을 가지고 있으며, 누가 무엇을 바꿨는지 쉽게 확인할 수 있으며, 댓글과 피드백을 의사소통이 필요한 곳에 직접 추가할 수 있습니다.

벡터 조작이 있을 때 Figma의 펜 도구는 더 유연합니다. Figma에 내장된 벡터 네트워크는 여러 선을 한 점으로 연결할 수 있도록 하며, 선을 이동할 때 연결된 점들도 자동으로 따라오게 되어 벡터 드로잉의 효율성을 높입니다.

Figma는 선택된 그림판이나 오브젝트에 대해 CSS, iOS, Android 형식으로 코드를 표시하여 디자인 파일을 볼 때 사용할 수 있습니다. 또한, 개발자는 디자인 문서에서 직접 표시 정보를 얻을 수 있으며, 다른 도구를 사용할 필요가 없습니다.

가격면에서 Figma는 무료와 유료 두 가지 모델이 있습니다. 무료 버전은 최대 1개의 항목과 3개의 문서를 쓸 수 있습니다. 3개의 페이지만 가능하며   역사 파일이 30일만 저장될 뿐 팀 라이브러리를 공유할 수 없습니다. 유료 버전은 두 개로 나뉘며 프로 버전은 1인당 월 12달러, 조직 버전은 1인당 월 45달러로 전체적으로 가격이 높습니다.

3.Sketch

Sketch는 지난 10년 동안 주요 UI 디자인 도구 중 하나였습니다. 비록 윈도우를 지원하지 않지만 여전히 많은 추종자들이 있습니다.

네덜란드 회사인 Sketch BV에서 2010년에 출시한 macOS의 데스크톱 벡터 그래픽 처리 소프트웨어입니다. Sketch는   초기부터 가능한 한 가볍고 빠르게 대응하도록 디자인되어 Adobe Photoshop과 IIustrator에 내장된 많은 부가 기능을 제거하였습니다.

초기 스케치 인터페이스는 IIustrator CS4에 비해 매우 간단하여 Adobe처럼 복잡한 블록 툴바가 아니며, 스케치 상단의 아이콘이 핵심 기능입니다. Sketch Mirror App은 Sketch에서 가장 유용하고 인기있는 기능 중 하나로, 디자이너는 아이폰을 Mac 컴퓨터에 연결하여 모바일 기기에서 실시간으로 그들의 디자인을 테스트할 수 있습니다.

지금으로서는 놀랄 만한 기능이 있지만, 2010년에 대해 파격적인 기능입니다.

2020년 말에야 Sketch가 실시간 협업 기능을 발표하여 이 분야에서 Figma를 따라잡으려 합니다. 하지만 협업을 시작하기 전에 로컬 Sketch 파일을 먼저 Sketch Cloud에 업로드하고 브라우저에서 공유 링크를 열어야 협업에 참여할 수 있습니다. 이런 협동 경험은 그다지 좋지 않습니다.

가격은 무료체험 후 구독하는 방안으로 30일간 무료체험을 제공하며, 만기 후 편집자 1인당 월 9달러씩 연 99달러를 지불합니다. 가격측은 사용자에게 매력적이지 않습니다.

4.Adobe XD

2016년, Adobe는 벡터 기반의 UI 디자인 툴인 Adobe XD를 출시하였으며, MacOS와 Windows 시스템을 지원하여 Window에 대한 Sketch의 대안으로 플랫폼을 넘나들며 협업하는 팀들이 원활하게 소통할 수 있도록 하였습니다.

만약 Adobe의 소프트웨어를 사용해보고 소프트웨어의 인터페이스에 익숙하다면, XD를 접하게 되면 친근감을 느낄 수 있고, 빠르게 접근할 수 있습니다. 유일한 차이점은 더 복잡한 디자인 시스템에 있습니다.

Adobe 산하의 여러 소프트웨어를 연동할 수 있으며, XD의 가장 큰 매력이라고 할 수 있습니다. Adobe는 비트맵부터 벡터, 액티브까지 디자이너의 요구에 맞는 도구를 가지고 있습니다.

Sketch의 플러그인 생태계를 따라잡기 위해 Adobe사는 1000만 달러의 기금을 조성하여 많은 개발자들이 XD를 위한 플러그인을 개발하도록 장려하고 있으며, 현재 XD에는 RenameIt, Pixel Perfect, Data Generator 등의 플러그인이 통합되어 있습니다.

XD는 로컬 파일을 클라우드 파일로 저장한 후 작성자에게 메일 요청을 보낼 수 있도록 지원합니다. 요청을 받은 사람은 문서를 열면 참여할 수 있습니다. 그러나 XD의 협업 기능은 제한이 있습니다. 유료 가입자가 작성한 문서는 무료 가입자가 30일 동안 협동 편집을 한 후 보기만 할 뿐 더 이상 편집할 수 없습니다. 변칙적으로 모든 협동자가 요금 지불에 참여하도록 요구됩니다.

XD의 등장은 많은 윈도우 사용자들의 복음이라 할 수 있지만, 실제로 사용할 때는 소프트웨어가 붕괴되기 쉽고 내장된 플러그인 라이브러리를 사용할 수 없는 등 많은 문제를 겪고 있습니다.

이 글에서 언급한 4가지 상용 UI 디자인 소프트웨어는 UI 디자인 도구의 변천과 발전은 실제로도 업계의 작업 패러다임 변화 변화라고 할 수 있습니다.

처음에는 쓰기 좋은 UI 디자인 툴 하나 있으면 충분했지만, 나중에는 여러 명이 실시간으로 협업하고 설계와 연구개발자 프로세스를 거치는 원스톱 UI 설계 툴이 탄생했습니다. 툴의 변화 과정은 UI 디자이너의 수요와 협업 프로세스가 끊임없이 변화 발전하고 있음을 말해줍니다.

비교를 거친 후, Sktech의 강력한 프로토타입 디자인 기능, Figma의 커뮤니티 생태, Pixso의 프로토타입+UI디자인+전달의 매끄러운 경험 등 어떤 툴을 선택해야 하는가에 대한 제약이 있는 것이 아니라, 팀의 작업 스타일과 사용 환경에 더 적합한 도구를 선택해야 합니다.