brunch

매거진 Design

라이킷 61 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Sabum Byun Mar 24. 2016

Sketch vs adobe XD - Part1

뭐가 좋을까?

#06

이전에 스케치 관련해서 글을 쓰고 한 두 달만에 비슷한 주제로 글을 써보려 합니다. 이유는 근래에 adobe XD개발팀에서 여러 국가를 돌면서 XD에 대한 사용자 인터뷰를 하는데 이번에 일본 방문 후 저희 Plus X에 방문의사가 있다고 전해와서 입니다.

저는 아직도 실제 작업툴은 Photoshop CC입니다. 하지만 한 달 전부터 애플리케이션 디자인은 Sketch를 사용하고 이번 프로젝트부터는 산출물 자체를 Sketch로 구성하고 있습니다. 이유는 클라이언트사에서 요청도 있었고 개발자와 협업하는 데의 효율 성입니다. 그래서 현재 구성은 Sketch + avocode or zeplin입니다. 저도 이번이 처음이라 시행착오가 있지만 현재까지는 만족할 만한 수준입니다.

그럼 주제에 맞게 두 가지의 툴을 비교해 보도록 하겠습니다.

Interface.

둘 은 많이 비슷합니다. 하지만 가장 다른 점은 오른쪽에 레이어 창입니다. Sketch에는 존재하지만 XD에는 존재하진 않는 레이어 개념입니다. 사실 XD는 인터페이스 상으로만 존재를 하지 않는 것이지 레이어 개념은 가지고 있습니다. keynote나 일러스트의 레이어 개념을 생각하시면 됩니다. 그에 반해 Sketch는 포토샵과 같은 레이어 Interface를 가지고 있습니다. Photoshop 주로 사용하셨던 분이라면 Sketch. Illustrator를 주로 사용하셨던 분이라면 XD가 친숙할 것입니다.

Sketch / XD

좌측 영역의 오브제나 타이포가 셀렉트 되었을 때의 크기나 위치, 색상 등을 수정할 수 있는 옵션이 있습니다. 아직까지는 Sketch가 Blur, Inner Shadows의 기능을 더 가지고 있고 XD는 기본적인 Border와 Shadows, Opacity기능만을 가지고 있습니다. 그리고 정렬을 하거나 수치를 입력하는 것은 동일합니다.

오브젝트를 조합하거나 특정 영역을 빼는 옵션은 Sketch는 상단에 XD는 좌측에 위치하고 있습니다.

Sketch / XD

Interface는 많은 부분 비슷합니다. 기능들의 차이가 조금은 있지만 크게 다르지 않고 XD는 아직 beta버전이기 때문에 추가되는 부분이 있을지 않을까..?라고 예상해봅니다.

그럼 제가 생각하는 장단점입니다.

오브젝트의 위치 수치를 확인하거나 다른 오브젝트와의 간격 마진 등을 확인하는 것은 Sketch가 편합니다.

이유는 Sketch는 option key를 누른 상태에서 오브젝트에 커서를 위치시키면 가로 세로의 마진 위치 값이 나오고 드래그 하거나 키보드 방향키로 수정을 하면 계속해서 수치를 볼 수 있습니다. 하지만 XD는 오브젝트를 선택하고 커서나 키보드의 방향키를 움직이지 않으면 수치를 확인할 수 없습니다. 움직이기 시작하면 가로 세로 영역에 대한 마진이 나오기는 하지만 움직이지 않은 상태에서는 나오지 않습니다. 설명하기가 좀 어렵긴 하지만 수치를 확인하는 것은 Sketch가 편합니다.

그리고 텍스트 입력에서의 차이입니다.

가장 다른 점은 '행간'과 '한문 장안에서 볼드, 레귤러, 라이트 표시'입니다. Sketch는 지원하지만 XD는 지원하지 않습니다. 이 부분은 이후에 분명히 지원이 가능하리라고 생각됩니다. 아직 베타이기 때문에 그렇겠죠? 뭐 기능을 지원하지 않아도 디자인할 수 있는 방법은 많지요. 노. 가. 다