디자인 도구 대결 – Adobe XD 대 Sketch(2019)

잘 정립된 디자인 도구인 Sketch는 2010년 도입된 이후 놀라운 성장을 이룩했습니다. 2016년 Adobe는 XD를 강력한 경쟁자로 소개했습니다. 거의 3년 간의 개발 끝에 Adobe XD는 디자이너가 변경을 고려하기에 충분한 도전 과제를 제공합니까?

UX 디자인 프로세스는 복잡하고 특정 도구, 방법론 및 프레임워크를 사용해야 합니다. 사용자 연구, 분석, 와이어프레이밍, 모형, 반복, 사용성 테스트 및 UI 프로토타이핑은 디자이너가 개발자, 이해 관계자 및 기타 팀 구성원과 의사 소통하면서 작업하는 아티팩트 및 프로세스의 일부일 뿐입니다.

UX 디자이너가 사용하는 널리 알려진 두 가지 디자인 도구는 Adobe XD와 Sketch입니다.

Sketch는 단순한 인터페이스, 광범위한 플러그인, 완전한 툴킷 기능 및 빈번한 업데이트로 인해 대다수의 디지털 디자이너에게 사실상 표준이 되었습니다.

Sketch는 UX 디자이너가 선택하는 도구가 되었지만 수상 경력에 빛나는 디자인 소프트웨어와 디자인 커뮤니티와의 깊은 유대로 오랫동안 알려진 Adobe는 비슷한 옵션을 갖고 있지 않았습니다. Photoshop, Illustrator 및 Fireworks가 있었지만 디자이너는 Sketch가 하나의 응용 프로그램에서 제공할 수 있는 작업을 수행하기 위해 세 가지 도구를 사용하는 것을 꺼렸습니다.

2016년 Adobe는 XD(경험 디자인)를 도입했습니다. Sketch의 진지한 경쟁자인 그들은 여전히 ​​따라잡아야 할 것이 많았습니다. 당시 Sketch는 6살이었고 광범위한 사용자 기반과 전체 플러그인 에코시스템을 가지고 있었기 때문에 강력한 디자인 도구가 되었습니다. 경쟁은 다음 2년 동안 확대되었고 Adobe XD는 민첩한 경쟁자에서 많은 전문 디자이너를 사로잡은 높은 평가를 받는 디자인 도구로 성장했습니다.

Toptal 디자인 블로그는 아직 베타 버전이었던 2017년에 Sketch와 Adobe XD에 대한 기사를 게시했습니다. 2년이 지난 지금 Adobe XD는 UX 디자이너가 필요로 하는 모든 것을 뛰어난 성능으로 기본적으로 제공한다는 분명한 목표를 가지고 여러 번 수정되었습니다.

UX 디자이너가 Sketch에서 Adobe XD로 전환해야 할 때입니까?

어도비 XD 대 스케치

Adobe XD가 Sketch와 어떻게 비교되는지 살펴보겠습니다. 다음 기능을 비교할 것입니다.

• 사용자 인터페이스
• 그리드 반복
• 심볼 및 자산 패널
• 반응형 디자인 도구
• 애드온 및 플러그인
• Auto-Animate로 프로토타이핑하기
• 공유 및 댓글
• 개발자와 협력
• 버전 관리 및 실시간 협업

사용자 인터페이스

Photoshop과 같은 도구에 익숙한 디자이너는 모두 유사한 UI를 공유하므로 Adobe XD 또는 Sketch를 배우는 데 문제가 없어야 합니다.

주목할만한 UI 차이점 중 하나는 Adobe XD에 도구 모음 이 없다는 것입니다. UI 상단에 있는 도구 모음은 개체 그룹화와 같이 일반적으로 사용되는 기능 및 도구에 대한 사용자 지정 가능한 바로 가기가 있는 Sketch의 유용한 기능입니다. Adobe는 소프트웨어의 오른쪽에 있는 도구 상자 라는 유사한 축소 기능을 제공합니다.

Sketch vs XD : Sketch에는 유용한 도구 모음이 있습니다.

그리드 반복

Adobe XD의 주목할만한 기능은 반복 격자입니다. 이것은 조정 가능한 목록과 그리드 기반 화면을 쉽게 만들 수 있는 편리한 도구입니다. Sketch에는 이 기능이 없지만 플러그인으로 어느 정도 복제할 수 있습니다.

Sketch vs XD : Adobe XD에는 소프트웨어 고유의 반복 그리드가 있습니다.

심볼 및 자산 패널

기호는 Sketch의 성공에 크게 기여한 초기 기능이었습니다. 기호는 CSS(Cascading Style Sheets)가 웹사이트 디자인에 사용되는 것처럼 스케치에 사용됩니다. 이를 통해 디자이너는 자산을 쉽게 재사용하고 대량 편집할 수 있어 많은 시간을 절약하고 기성품 디자인 시스템을 만드는 데 도움이 되며 모든 화면에서 일관성을 제공합니다.

Adobe는 기본 기호로 시작한 다음 기호, 글꼴 및 색상을 단일 위치에 결합하는 자산 패널 을 도입했습니다. 이러한 요소를 편집하면 결과 업데이트가 실시간으로 표시됩니다. Sketch에는 이러한 기능이 있지만 Adobe XD는 보다 응집력 있고 향상된 사용자 경험을 제공했습니다.

스케치 대 XD : Adobe XD는 자산 패널 내에서 결합된 UI 요소로 인해 약간의 우위를 가지고 있습니다.

반응형 디자인 도구

Adobe XD는 강력한 반응형 디자인 도구 세트를 제공합니다. 눈에 띄는 기능 중 하나인 반응형 자동 모드 는 다양한 기기 크기에 화면이 어떻게 반응해야 하는지 추측합니다.

이것은 간단한 슬라이더 버튼을 사용하여 켜고 끌 수 있는 매우 유용한 기능입니다. 자동 모드가 예상 동작에 미치지 못하는 경우 디자이너는 반응 속성을 수동으로 변경할 수 있습니다.

Sketch에는 이 기능이 내장되어 있지 않지만 작업을 잘 수행하는 Anima Toolkit과 같은 많은 플러그인이 있습니다.

Sketch vs XD: Adobe XD는 여기에 이점이 있습니다. UI 요소에서 반응형 효과를 볼 수 있는 기본 제공 방법을 제공합니다.

애드온 및 플러그인

Sketch 내의 플러그인 생태계는 틀림없이 가장 큰 기능 중 하나입니다. Sketch의 기능을 확장하고 디자이너가 Sketch 에코시스템 내에서 유지하면서 향상된 기능을 사용할 수 있도록 하는 수백 개의 플러그인이 있습니다.

추가 기능은 플러그인에 해당하는 Adobe XD입니다. Adobe는 2018년에 애드온 에코시스템을 시작했으므로 Sketch만큼 강력하지 않습니다. Adobe의 목표는 애드온의 필요성을 줄이고 소프트웨어에 내장된 기능을 만드는 데 초점을 맞추는 것이기 때문에 Adobe에게는 문제가 되지 않습니다.

Sketch 대 XD: Sketch는 광범위한 플러그인 라이브러리에 이점이 있습니다.

Auto-Animate로 프로토타이핑하기

Adobe는 최근 UX 디자이너에게 매우 유용한 기능인 auto animate 로 XD를 업데이트했습니다. 다른 화면의 요소 사이를 영리하고 부드럽게 전환하여 작동합니다. 결과는 인상적이어서 프로토타이핑을 통해 잠재 고객의 참여를 유도할 수 있는 즐거운 경험을 제공합니다. Sketch는 플러그인이 있어도 이 기능을 제공하지 않습니다.

Adobe가 도입한 또 다른 훌륭한 프로토타이핑 기능은 화면 가장자리에서 패널을 당기거나 키보드를 표시하는 것과 같은 마이크로 상호 작용 지원입니다. Adobe XD는 Alexa 또는 Google Home과 같은 음성 기반 UI의 프로토타이핑도 지원합니다.

Sketch 대 XD: Adobe XD는 시간을 절약해 주는 자동 애니메이션 기능과 Sketch에 없는 미세 상호 작용 지원으로 이점이 있습니다.

공유 및 댓글 달기

디자이너는 다른 팀 구성원, 개발자 및 이해 관계자와 자주 교류합니다. 디자인을 공유하고 피드백을 받는 능력은 디자인 프로세스의 중요한 부분입니다. 따라서 Adobe XD에는 온라인으로 공유할 수 있는 모형 및 프로토타입을 위한 내장 기능이 포함되어 있어 누구나 일반적인 의견을 추가하거나 레이아웃의 특정 위치를 가리키고 피드백을 남길 수 있습니다.

Adobe XD의 동적 프로토타이핑 모드와 결합된 이러한 기능은 기본 Adobe XD 앱이 있는 휴대폰에서 테스트하거나 비대화형 데모용으로 녹음할 수도 있습니다.

Sketch는 Zeplin과 같은 협업 도구를 사용하거나 Invision과 같은 타사 도구와의 통합을 사용하여 공유 및 댓글을 작성할 수 있습니다.

Sketch vs XD: Adobe는 기본 제공 온라인 공유 및 댓글 기능을 통해 약간의 우위를 점하고 있습니다.

디자인 사양

디자인 프로젝트 과정에서 UX 디자이너는 종종 개발자와 디자인 사양을 공유해야 합니다. Adobe는 XD에 이 기능을 포함했지만 Sketch 사용자는 Zeplin 또는 InVision과 같은 통합을 사용해야 합니다.

Sketch 대 XD: Adobe는 디자인 사양이 내장되어 있고 타사 통합이 필요하지 않기 때문에 Sketch보다 우위에 있습니다.

버전 관리 및 실시간 협업

디자이너와 개발자가 의존하는 두 가지 중요한 기능은 버전 제어와 실시간 협업입니다. 동일한 프로젝트에서 함께 작업하는 대규모 설계 팀은 변경 사항이 언제 변경되었는지 확인하고 해당 변경 내역에 액세스할 수 있어야 합니다.

Adobe는 클라우드 문서 를 도입하여 공동 작업 문제를 해결했습니다. 이를 통해 개발자를 포함한 팀의 모든 사람이 중앙에서 작업할 수 있습니다. Adobe에 따르면 클라우드 문서 기능의 다음 단계는 버전 관리가 될 것입니다.

Sketch는 버전 제어 및 플러그인과의 실시간 협업을 제공하지만 이러한 기능은 제품에 내장되어 있지 않습니다.

Sketch vs XD: Sketch가 이 게임에서 승리했습니다. 플러그인에도 불구하고 버전 제어가 있습니다. 이것은 현재 XD에서 제공되지 않습니다.

기능 요약: Adobe XD와 Sketch

현재 버전의 Adobe XD와 Sketch 사이에는 유사점과 차이점이 있습니다. 다음은 각 제품을 비교한 것입니다.

UX 디자인 도구를 바꿀 때인가?

기능을 비교하면 Sketch와 XD가 가깝습니다. Sketch에는 자동 애니메이션, 자동 반응형 디자인, 반복 그리드와 같은 일부 기능이 없으며 모두 XD 고유의 기능입니다.

Adobe XD에 여전히 부족한 유일한 중요한 것은 플러그인 덕분에 Sketch에 있는 버전 제어입니다. Adobe가 클라우드 문서 기능 세트를 계속 개발하면서 곧 XD에 도착할 것으로 기대합니다.

XD는 뛰어난 충실도로 Sketch 파일을 열 수 있으므로 다른 방법보다 Sketch(및 Photoshop 또는 Illustrator)에서 XD로 전환하는 것이 더 쉽습니다. Abstract 또는 InVision Craft와 같은 스케치 전용 플러그인에 의존하는 경우 몇 가지 문제가 발생할 수 있습니다.

일부 시나리오에서는 선택이 명확합니다. Windows 사용자의 경우 Sketch를 사용할 수 없고 Adobe Creative Cloud 구독자의 경우 무제한 공유 프로토타입과 함께 XD가 무료로 포함됩니다. 그것은 우연히 일어난 일이 아닙니다.

그러나 Sketch는 이에 맞서고 있습니다. 이 회사는 최근 2천만 달러의 자금 조달을 마감했으며 2019년에는 팀 협업, 기본 전달 및 앱의 웹 버전과 같은 중요한 기능을 약속합니다.

버전 제어가 중요한 문제가 아닌 경우 Adobe XD 사용을 고려하기에 가장 좋은 시기입니다. 사용자 경험 디자인 커뮤니티에 대한 Adobe의 노력은 자동 응답 모드, 반복 그리드 및 기본 제공 프로토타이핑과 같은 기능을 통해 분명합니다. 늦은 시작에도 불구하고 Adobe는 Sketch에 강력한 도전을 제공할 수 있음을 입증했습니다.

Toptal Design 블로그에 대한 추가 정보:

• Adobe XD vs. Sketch - 나에게 적합한 UX 도구는 무엇입니까?
• 원자 설계 및 스케치 - 워크플로 개선 가이드
• 정밀한 디자인 - Adobe XD Review
• 스케치의 타이포그래피에 대해 모를 수도 있는 것들
• 스케치 플러그인 개발에 익숙해지기