어도비 XD 대 스케치 – 쇼다운 2020

두 명의 헤비급 경쟁자가 가장 선호하는 디자인 도구인 Adobe XD와 Sketch의 1위 자리를 차지하기 위해 계속해서 경쟁하고 있습니다. 어떤 도구가 모든 것을 지배할 것인가? 답은 간단하지 않습니다. 둘 다 최근 몇 년 동안 놀라운 발전을 이루었기 때문에 기능, 성능 및 사용 편의성에 대한 포괄적인 설계 도구 비교가 늦어졌습니다.

Sketch는 XD가 데뷔하기 몇 년 전에 이미 몇 년 앞서 있었습니다. 정확히는 6입니다. 광범위하고 열성적인 팬 기반이 있었고 기능이 가득 차 있었고 광범위한 플러그인 생태계가 있었습니다. 그러나 Sketch에는 아킬레스건이 있었습니다. Mac에서만 작동했습니다.

2016년 Adobe는 열기를 식히고 경쟁에 뛰어들었습니다. Sketch를 XD의 유사한 기능과 일치시켰을 뿐만 아니라 Windows에서도 사용할 수 있게 했습니다. 전 세계 데스크톱 컴퓨터의 약 78%가 Windows에서 실행되기 때문에 이는 대담하고 경쟁적인 움직임이었습니다.

Adobe XD는 또한 Creative Suite 라인업에서 상당한 구멍을 메웠습니다. Fireworks는 황금 악수를 받았고 XD에서 제공하는 기능은 Illustrator 또는 Photoshop과 같은 다른 응용 프로그램에서 사용할 수 없었습니다. XD는 Sketch와 동일한 경량의 벡터 기반 디자인 도구일 뿐만 아니라 Adobe Creative Suite 에코시스템의 나머지 부분과 더 잘 통합됩니다.

그러나 디자이너들 사이에서는 여전히 어떤 도구가 더 나은지에 대한 의견이 분분합니다. 이 전투는 최근 두 도구에 기능이 빠르게 추가되어 전면전으로 성장했습니다.

Adobe XD와 Sketch의 다음 기능을 자세히 살펴보고 비교해 보겠습니다.

• 사용자 인터페이스
• 기호/마스터 구성 요소 작업
• 자산 및 구성 요소 패널
• 레이어 및 구성 요소 크기 조정
• 요소 복제 및 배포
• 반응형 디자인 도구
• 플러그인
• 프로토타이핑
• 팀 협업
• 개발자 핸드오프
• 버전 관리 및 공유 라이브러리
• 다크 모드

사용자 인터페이스

Sketch와 Adobe XD는 유사한 인터페이스를 공유하지만 Sketch의 UI는 XD보다 우위에 있습니다. 더 강력하고 전문적인 디자인 도구처럼 느껴지지만 XD는 Illustrator와 Photoshop의 축소된 조합처럼 느껴집니다.

Adobe XD의 심각한 불편은 기본적으로 열릴 때 자산 패널을 표시한다는 것입니다. 이것은 대부분의 디자이너가 기대하는 것이 아닙니다. 디자인 문서를 시작할 때 대부분의 디자이너는 자산 이나 플러그인 이 아닌 레이어 패널이 즉시 표시되기를 기대합니다.

➠ 직관적인 인터페이스를 위해 Sketch에 +1.

기호/마스터 구성 요소 작업

재사용 가능한 디자인 라이브러리 "심볼"은 Sketch와 Adobe XD에서 모두 사용할 수 있습니다(XD에서는 "마스터 구성 요소"라고 함). 심볼 또는 마스터 구성 요소가 업데이트되면 프로젝트에 있는 해당 구성 요소의 다른 모든 인스턴스가 업데이트를 반영합니다.

그러나 Adobe XD와 달리 Sketch의 스마트 레이아웃 기능은 이러한 마스터 구성 요소로 작업할 때 더 강력합니다. 더 많은 유연성과 더 빠른 워크플로를 허용합니다.

Sketch에서 특정 레이아웃을 구성 요소에 할당하고 → 구성 요소를 캔버스로 드래그하고 → 재정의를 사용하여 콘텐츠를 사용자 지정할 수 있으며, 구성 요소는 새 콘텐츠에 따라 크기가 조정됩니다.

➠ 기호를 더 잘 수행하기 때문에 스케치에 +1.

자산 및 구성 요소 패널

Sketch와 Adobe XD는 유사한 자산/구성 요소 패널을 공유하지만 몇 가지 차이점이 있습니다.

자산의 경우 XD에는 드롭다운 메뉴가 있어 디자이너가 "전체"를 제외하고 특정 범주만 볼 수 있는 옵션을 제공합니다. 디자이너는 "격자 보기"와 "목록 보기" 간에 전환할 수도 있습니다. 이러한 옵션은 XD의 에셋 패널을 훨씬 더 사용자 친화적으로 만듭니다. 또한 특정 범주를 볼 수 있는 드롭다운을 통해 향후 범주를 더 유연하게 추가할 수 있습니다.

스케치는 덜 유연합니다. 세 개의 버튼으로 구분된 컨트롤(심볼, 텍스트 스타일 및 색상 스타일용) 아래에 프로젝트 자산을 표시합니다. Sketch를 사용하면 구성 요소를 검색할 수 있지만 범주 간에는 검색할 수 없습니다. XD는 모든 자산의 모든 구성 요소를 검색하여 더 잘 검색합니다.

➠ 자산을 더 잘 관리하기 때문에 Adobe XD에 +1.

다른 라이브러리의 마스터 구성 요소 사용

Sketch를 사용하여 디자이너는 로컬 또는 온라인 공유와 같은 연결된 여러 라이브러리에서 아트보드에 마스터 심볼을 빠르고 쉽게 추가할 수 있습니다. Adobe XD에서 "연결된 자산"은 구성 요소, 색상 및 문자 스타일과 같은 "XD 클라우드"의 디자인에 배치할 수 있지만 이러한 어색한 워크플로 때문에 Adobe XD는 유연성이 훨씬 떨어집니다.

➠ 마스터 구성 요소로 작업할 때 더 나은 UX를 위해 스케치에 +1.

색상 스타일 편집

에셋 라이브러리에 추가된 Adobe XD를 사용하면 디자이너가 색상 스타일을 편집하고 아트보드 전체에서 실시간으로 색상 변화를 관찰할 수 있습니다. Sketch에는 전역적으로 색상을 편집하는 해결 방법이 있지만 Adobe XD만큼 직관적이지 않습니다.

➠ 더 나은 색상 스타일 편집을 위해 Adobe XD에 +1.

디자인 시스템 설정

Sketch는 디자인 시스템(아이콘, 버튼, 색상 스타일, 텍스트 스타일 등)을 구축할 때 구성 요소를 구성하는 좋은 방법입니다. 이러한 자산을 만들고 이름을 지정할 때 슬래시 '/'를 사용하면 구성 요소 패널에서 그룹화되고 삽입 메뉴에서 계층적으로 정렬됩니다. 이는 구성 요소를 논리적인 방식으로 구성하는 탁월한 방법이며 수백 가지 디자인 요소로 작업하는 디자이너에게 적합합니다.

Adobe XD는 이러한 유연성을 제공하지 않습니다.

➠ 스케치에 +1을 추가하여 디자인 자산을 쉽게 관리할 수 있습니다.

레이어 및 구성 요소 크기 조정

여러 구성 요소가 포함된 개체 크기 조정은 Adobe XD에서 제대로 처리되지 않습니다. 일반적으로 Sketch는 이를 훨씬 더 잘 처리합니다. 예를 들어, 심볼의 크기를 조정할 때 요소 사이의 적절한 간격을 잘 유지합니다.

또한 Sketch에는 스케일할 원점을 지정하면서 백분율 또는 숫자를 사용하여 요소 그룹의 크기를 조절할 수 있는 유용한 레이어 스케일링 기능( Command+K )이 있습니다. 스케치는 선택한 레이어의 크기를 조정하고 테두리 두께, 그림자 크기 및 반지름과 같은 스타일 속성은 적절하게 조정됩니다.

Sketch의 또 다른 편리한 기능은 인스펙터에서 숫자 또는 백분율로 요소의 크기를 조정하는 기능입니다. 이것은 위의 Scale Layers 명령과 약간 다릅니다. 백분율 또는 숫자에 다음 문자를 추가하여( c/m, t, b, r) -Sketch는 해당 원점에서 선택한 요소의 크기를 조정합니다. 예를 들어 " 50%c "는 선택한 요소의 크기를 중앙에서 50%로 조정합니다.

• c/m: 중심에서 스케일
• t: 위에서부터 스케일
• b: 바닥에서 스케일
• r: 오른쪽부터 스케일

참고 : "왼쪽에서 축척" 옵션은 Sketch의 기본 동작이기 때문에 표시되지 않습니다.

Sketch에서 레이어 크기 조정이 작동하는 방식 보기→

➠ 요소의 크기를 조정할 때 더 많은 융통성과 정확성을 위해 스케치에 +1.

요소 복제 및 배포

Adobe XD의 격자 반복은 요소 그룹을 해당 개체를 반복하는 격자로 바꾸는 편리한 기능입니다. 대부분의 디자이너는 XD를 탐색할 때 몇 번 시도했을 것입니다. 하지만 디자이너는 몇 번이나 사용할까요? 그리고 불행히도 반복 그리드 는 레이어에 스냅되지 않는 중요한 단점입니다.

반면에 Sketch를 사용하면 Option 키를 누른 상태에서 레이어를 드래그하여 복제할 수 있습니다( Shift 키도 누른 상태에서 제한). 그런 다음 Command+D 는 복제본 사이에 정확히 동일한 간격으로 원하는 만큼 요소를 반복합니다.

또한 Sketch는 Smart Distribute 를 통해 설계 워크플로의 속도를 높입니다. 디자이너는 그리드 생성, 간격 조정 및 레이어 재정렬을 더 잘 제어할 수 있습니다. Smart Distribute 가 하는 많은 유용한 작은 일들 외에도, 인스펙터에 마법의 "정리" 버튼이 있습니다.

아트보드에 여러 개체를 무작위로 배치한 후 정리 버튼을 클릭하면 마술처럼 그리드에 고르게 분포됩니다. 표시되는 핸들을 드래그하거나(그룹 위로 마우스를 가져갈 때) 절대 정밀도에 대한 수동 값을 입력하여 간격을 추가로 조정할 수 있습니다.

Smart Distribute 외에도 그리드, 안내선 및 배포에 대한 디자이너를 돕기 위해 여러 Sketch 플러그인이 생성되었습니다. 다음은 세 가지입니다.

레이어 분산 • SketchDistributor • 고르게 분포된 가이드

➠ 더 나은 요소 복제 및 배포를 위해 스케치에 +1.

반응형 디자인 도구

Adobe XD와 Sketch에는 유사한 자동 반응 기능이 있습니다. 둘 다 경계 상자의 특정 원점에 요소를 고정하는 동안 요소의 고정 너비와 높이를 수동으로 제어할 수 있습니다. Adobe XD에는 요소와 그룹의 크기를 자동으로 결정하는 영리한 "반응형 크기 조정" 도구도 있지만 완벽하지는 않습니다.

Sketch에는 Smart Layout 이라는 스마트 반응형 도구가 있습니다. 디자이너는 반응형 구성 요소를 구축할 수 있으며 콘텐츠가 조정될 때마다 구성 요소가 변경 사항을 수용하여 더 많은 유연성과 더 빠른 워크플로를 가능하게 합니다.

스마트 레이아웃 을 사용하면 디자이너는 텍스트 레이블의 길이에 관계없이 일관된 여백과 패딩을 유지하면서 자동으로 크기가 조정되는 버튼을 쉽게 만들 수 있습니다. 스마트 레이아웃은 그룹에서도 작동합니다.

Adobe XD는 최근에 "반응형 크기 조정" 기능을 구현했지만 여전히 Sketch보다 뒤쳐져 있습니다.

➠ 빠르고 쉽게 반응하는 디자인 기능을 위해 Sketch에 +1.

플러그인

수많은 디지털 디자인 도구 중에서 Sketch는 가장 강력한 플러그인 생태계 중 하나입니다. 수천 개의 플러그인을 보유하는 것은 Sketch의 가장 매력적인 기능 중 하나이며 개발자는 Sketch의 기능을 확장하는 유용한 플러그인을 지속적으로 만듭니다.

Adobe XD의 플러그인 컬렉션은 이에 비해 창백합니다. 같은 개발자가 Sketch 플러그인의 XD 버전을 만들더라도 XD는 플러그인이 널리 채택되기에는 너무 최신 버전입니다. 게다가 많은 새로운 XD 플러그인은 디자이너가 이를 수용하기에 충분한 가치를 추가하지 않습니다.

➠ 광범위한 플러그인 생태계를 위한 Sketch에 +1.

프로토타이핑

Auto-animate 를 통해 Adobe XD는 프로토타입 제작에 대한 비용을 높였습니다. "지능형" 자동 애니메이션 기능을 사용하여 디자이너는 프로토타입에서 멋진 전환을 만들어 화면 전체에서 콘텐츠의 움직임을 시각화할 수 있습니다. XD는 또한 트리거에 대한 응답으로 사운드 효과 및 기타 오디오 파일을 재생하는 새로운 "액션"을 사용하여 프로토타입에 사운드를 추가할 수 있습니다.

Sketch는 프로토타이핑을 위해 화면 사이에 몇 가지 기본적인 와이프를 제공하지만 마이크로인터랙션에서 동일한 유동성을 제공하지 않습니다. Sketch에서 언제 추가할지 확실하지 않습니다. 초점은 어시스턴트 와 같은 다른 유용한 기능을 Sketch에 통합하는 것 같습니다.

Sketch 제작자는 ProtoPie와 같이 매우 상세한 마이크로 인터랙션이 있는 프로토타입을 만드는 다른 도구가 많이 있다고 생각합니다. 강력하고 Sketch, Figma 및 Adobe XD에서 디자인을 쉽게 가져올 수 있습니다.

Sketch Mirror 및 Adobe XD 와 같이 모바일에서 프로토타입을 미리 볼 수 있는 앱을 제공하는 데 있어 Sketch와 Adobe XD는 모두 목과사입니다. 앱은 USB 케이블이나 Wi-Fi를 통해 데스크탑에서 설계된 프로토타입을 모바일 화면으로 가져옵니다.

➠ 프로토타입을 시각화하기 위한 자동 애니메이션 전환을 위해 Adobe XD에 +1.

팀 협업

두 도구 모두 팀 협업을 제공합니다. Sketch에는 공유 클라우드 작업 공간을 사용하는 디자이너가 아이디어를 공유하고, 공유 클라우드 라이브러리 와 동기화를 유지하고, 다른 팀 프로젝트의 진행 상황을 확인하고, 디자인에 대한 피드백을 남길 수 있는 Sketch for Teams 가 있습니다.

또한 Sketch 앱에 액세스할 수 없는 초대된 이해 관계자 및 공동 작업자는 브라우저에서 디자인을 보고, 검사하고, 댓글을 달 수 있습니다. 개발자 핸드오프는 또한 Sketch for Teams 를 사용하여 Sketch에 통합됩니다.

이 글을 쓰는 시점에서 Adobe XD의 프리미엄 버전을 사용하면 팀에서 Creative Cloud를 통해 다른 디자이너(온라인 및 오프라인)와 XD 파일을 공동 편집하고, 검토를 위해 파일을 공유하고, 개발자에게 사양을 쉽게 전달할 수 있습니다. 이러한 모든 기능은 현재 베타 버전 입니다.

➠ 간단한 팀 협업을 위해 Sketch에 +1.

개발자 핸드오프

개발자에게 디자인을 전달하는 것은 중요한 단계이며 Adobe XD와 Sketch 모두 이를 똑같이 잘 처리합니다. 온라인 플랫폼을 통해 프로젝트를 공유함으로써 디자이너는 사양을 생성하고 개발자와 협력하여 디자인을 웹사이트 및 앱으로 전환할 수 있습니다.

➠ 개발자 핸드오프를 위해 Adobe XD 에 +1 및 Sketch 에 +1.

버전 관리 및 공유 라이브러리

동일한 프로젝트에서 다른 디자이너와 작업할 때 디자인 파일 버전을 제어하는 ​​것은 필수적입니다. 또한 팀 협업을 촉진하고 피드백을 보다 효율적으로 설계합니다. Sketch는 최근 이러한 기능을 Sketch for Teams 에 통합했습니다. Sketch Cloud 를 사용하여 설계자는 분산된 팀의 설계 시스템 작업을 더 쉽게 하는 설계 파일 및 라이브러리 를 공유할 수 있습니다.

Adobe XD에는 Adobe Creative Cloud가 포함된 클라우드 파일 버전 관리 시스템도 있습니다. Creative Cloud 웹 사이트는 XD 파일 버전을 유지하지만 이전 버전으로 되돌릴 수는 없습니다. 이전 버전으로 되돌리려면 디자이너가 Creative Cloud 웹 사이트를 통해 Adobe XD에서 파일을 연 다음 콘텐츠를 복사하여 현재 문서에 붙여넣어야 합니다. 파일 버전도 이름을 지정하거나 북마크하지 않는 한 30일 후에 자동으로 삭제됩니다. 즉, 원활한 프로세스가 아닙니다.

Sketch와 마찬가지로 XD는 팀이 Creative Cloud Libraries를 사용하여 공유 에셋을 쉽게 사용할 수 있도록 합니다. 디자이너는 이러한 라이브러리에서 색상, 문자 스타일 및 그래픽을 XD로 가져올 수 있습니다.

➠ 클라우드에서 간편한 파일 버전 관리 및 공유 라이브러리를 위한 Sketch에 +1.

다크 모드

멋지게 보이고 디자인을 돋보이게 만듭니다.

많은 디자이너는 반사나 눈부심 없이 화면에서 자신의 작품을 보기 위해 조명이 어두운 방에서 작업하는 것을 선호합니다. 다크 모드 UI는 그 환경에 잘 맞습니다. 거의 모든 색상에 대해 탁월한 대비를 제공하고 시각적 콘텐츠를 더욱 눈에 띄게 만듭니다.

다크 모드는 멋지게 보일 뿐만 아니라 "디지털 눈의 피로"를 최소화하는 것으로 알려져 있습니다. 사실 디자이너는 하루 종일 화면을 응시합니다. 디지털 눈의 피로는 수백만 명의 사람들에게 영향을 미치는 일반적인 상태입니다. 과도한 컴퓨터 사용부터 밝은 빛에 대한 규칙적인 노출에 이르기까지 모든 원인으로 인해 두통, 목 통증, 시야 흐림, 눈이 따갑거나 따끔거릴 수 있습니다.

액센트 및 하이라이트 색상

Sketch는 Sketch 52(2018년 10월)부터 다크 모드를 지원합니다. 또한 macOS Mojave의 글로벌 액센트 및 하이라이트 색상 기본 설정을 지원합니다. 레이어 패널, Inspector 및 앱의 다른 곳에서 강조 표시된 선택한 옵션은 시스템 기본 설정과 일치합니다.

다크 모드는 macOS에서도, Adobe XD에서도 사용할 수 없습니다.

➠ 어두운 모드의 경우 스케치에 +1.

Adobe XD vs Sketch 대결 승자는… Sketch

Sketch는 Adobe XD를 압도하면서 디자인 도구의 패권을 놓고 경쟁에서 승리했습니다.

일부 시나리오에서는 선택이 명확합니다. Windows에서는 Sketch를 사용할 수 없습니다. Adobe Creative Cloud 구독자의 주목할만한 이점은 XD "스타터 플랜"이 무료로 제공된다는 것입니다. 하지만 상당한 제한이 있습니다.

Sketch의 다재다능함 때문에 macOS의 디자이너는 XD보다 Sketch를 선택해야 합니다. 인터페이스, 플러그인, 협업 기능, 반응형 디자인 도구, 재사용 가능한 심볼, 공유 라이브러리 및 기타 편리한 기능은 Adobe XD의 기능을 능가합니다.

디자인 파일을 XD에서 Sketch로 이동하는 것은 불가능합니다 . XD에서 Sketch 파일을 열 수 있으므로 Sketch(및 Photoshop 또는 Illustrator)에서 XD로 더 쉽게 전환할 수 있습니다. Abstract 또는 InVision Craft와 같은 스케치 전용 플러그인을 사용할 때 몇 가지 문제가 발생할 수 있지만 약간의 정리를 통해 이를 피할 수 있습니다.

일부 디자이너는 자동 애니메이트 기능으로 Adobe XD를 좋아합니다. 프로토타입을 멋지게 보이게 하는 매력적인 기능입니다. 그러나 디자이너는 하나 의 멋진 속성일 뿐임을 명심해야 합니다. Sketch와 XD의 장점을 고려할 때 절충안은 그만한 가치가 없습니다. Sketch와 원활하게 작동하는 많은 정교한 프로토타이핑 도구를 사용할 수 있습니다.

전투는 아직 끝나지 않았습니다. 앞으로 몇 년 동안 Adobe XD와 Sketch 간의 치열한 전면전이 벌어질 것입니다. 결국 두 설계 도구에 더 많은 기능이 추가됨에 따라 이점을 얻을 수 있는 사람은 설계자입니다. 그것은 그들의 일상적인 삶을 훨씬 더 쉽게 만들어 줄 것이며, 그것이 기대되는 것입니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

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

• 정밀한 디자인 – Adobe XD 검토
• 다중 모드 디자인 탐색 – Adobe XD 자습서
• 형태와 기능 – 최고의 와이어프레임 도구 가이드
• 이 최고의 UX 도구로 기술을 마스터하세요
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례