스케치(Sketch)와 어도비(Adobe) XD, 어떻게 다를까?

올 초 인터랙션 디자이너로 스티비에 합류하면서 어도비(Adobe)를 벗어나 다양한 프로토타이핑 툴을 사용했습니다. 그 중 가장 선호하는 툴은 스케치(Sketch)로, 새로 리뉴얼하는 스티비의 90% 이상을 스케치 기반으로 만들고 있습니다. 처음에는 왜 스케치를 쓰는 디자이너가 많아지는 걸까? 의문이 들었는데요. 스케치를 쓸수록 반복적인 업무가 효과적으로 단축되고 협업할 때 편리해서 제게도 다른 툴을 제치고 가장 많이 사용하는 툴로 자리잡았습니다.

지난해, 디자이너 툴 서베이 결과에 따르면 조사 대상자 중 스케치 사용자가 34%, 포토샵 사용자는 29%로 스케치 유저가 포토샵 사용자보다 많았습니다. 기존 유저 중 절반을 스케치에 빼앗겨버린 어도비가 안쓰러울 정도였는데요. 이렇게까지 유저들이 포토샵에서 스케치로 작업 환경을 옮겨간 이유는 무엇일까요? 바로 아직까지 어도비에서 모바일 어플리케이션 제작에 최적화된 툴을 내놓지 않았기 때문입니다.

모바일 어플리케이션 디자인은 화면을 만든 후 끝나는 작업이 아니라 직접 사용해보며 기획한 대로 시나리오가 흘러가는지, 화면 이동이 자연스러운지 여러 번 테스트를 거쳐야 합니다. 이때 스케치로 작업하면 레이어까지 그대로 활용해 프로토타입을 만들 수 있는 여러 도구가 있어 다양한 프로토타이핑을 시도해볼 수 있습니다. 하지만 어도비에서는 Photoshop과 Illustrator에서 만든 작업물을 이미지로 추출한 후 AfterEffect나 Keynote 등을 활용해 프로토타이핑을 하게 되는데, 이때 작업에 필요한 레이어를 추출하는 것부터 쉬운 일이 아닙니다.

이렇듯 UI/UX 디자이너들은 빠르게 프로토타입을 만든 후 논의와 수정을 거쳐 새로운 서비스를 내놓아야 하는 환경에 놓여있는데 어도비의 프로그램은 이런 흐름을 쫓아가지 못하고 기존의 개별 프로그램만 업데이트하고 있던 것이죠. 그 사이 UI/UX 디자이너들은 자신들의 메인 툴을 어도비에서 스케치로 옮겨버리게 된 것입니다.

그렇다면 디자인 프로그램의 제왕인 어도비가 유저들이 마구 이탈하는 상황에서 가만히 손놓고 당하고 있을까요? 아닙니다. 이들도 UI/UX 툴의 춘추전국시대를 재패할 엄청난 무기를 만들고 있습니다. 그것이 바로 “Adobe XD(Experience Design)”입니다.

어도비 XD(Experience Design) 프리뷰 공개

어도비는 스케치의 가장 큰 단점인 “스케치만 사용해서 프로토타이핑까지 끝낼 수 없다”는 점을 노리고 스케치와 스케치 플러그인들의 장점을 합친 XD를 시장에 내놓았습니다(아직 시험판입니다). 근데 이게….시험판인데도 ‘우와!’ 소리가 납니다. 그도 그럴 것이 스케치와 다양한 플러그인 조합을 사용해 만든 편리한 디자인 환경을 어도비 XD 하나로 경험할 수 있게 했다는 점이 어마어마한 장점이기 때문입니다. 특히 디자인과 프로토타이핑을 하나의 어플리케이션에서 작업할 수 있는 것은 어도비 XD가 지금까지 나왔던 자잘한 프로토타이핑 툴과 스케치를 대체할 수 있는 유일한 대체제로 우뚝 설 수 있다는 것을 점을 시사하고 있습니다.

그럼 이제 본격적으로 Sketch와 Adobe XD를 비교해보겠습니다.

쉽게 사용할 수 있는 스티비의 새로운 에디터를 만든 스케치!

스케치의 기본 인터페이스

단순 반복작업을 일괄적으로 처리

스케치를 통해 다양한 사이즈로 이미지를 추출하는 모습

이미지를 다양한 모바일 화면에 적합한 크기로 추출할 때 이미지마다 저장과정을 반복해야 하는 기존 프로그램과 달리 스케치는 다양한 크기와 포맷으로 이미지를 한번에 추출할 수 있습니다.

이런 단순 반복 작업일수록 스케치의 장점이 가장 돋보이는데요. 여러 페이지에 반복해서 사용하는 도형을 “심볼”로 정해놓고 작업 중간에 “심볼” 하나를 수정하면 전체에 반영되기 때문에 일일이 수정하지 않아도 빠르게 작업을 마칠 수 있습니다. 이 밖에도 도형을 만드는 것부터 정렬하는 것 까지 이렇게 편할 수가! 하는 순간들이 한 두 번이 아닙니다.

다양한 협업툴

웹 서비스를 만들 때 기획자-디자이너-개발자간의 원활한 소통이 가장 중요합니다. 이를 위해서 다양한 문서작업을 하게 되는데, 스케치를 활용하면 문서작업에 들이는 시간이 훨씬 줄어듭니다.

먼저 시나리오를 만들때 스케치를 활용하면, 각 화면을 인비전(Invision)과 연동해 시나리오가 제대로 만들어졌는지 간단한 프로토타입을 빠르게 만들어볼 수 있습니다. 시나리오 확인 후, 디자이너는 시나리오 파일에 그대로 디자인을 얹어 작업을 진행할 수 있습니다. 따로 틀을 다시 그릴 필요가 없이 한 파일로 mock-up과 시나리오 프로토타이핑 그리고 디자인까지 연동이 가능합니다.

스케치로 작업한 파일을 제플린으로 확인하는 모습

디자인을 마친 후엔 스케치로 작업한 파일을 제플린(Zeplin)으로 연동하게 되면 자동으로 각 페이지의 asset이 얼마인지 개발자가 보기 편하도록 이미지를 문서로 변환해 보여줍니다. 이때 이미지 파일도 함께 연동할 수 있어 디자이너와 개발자 사이에 쓸데없이 오고 가는 문서의 양과 문서를 제작하는데 걸리는 시간을 획기적으로 줄일 수 있습니다.(Photoshop도 CC버젼부터 제플린을 사용할 수 있습니다.)

만약 텍스트 여백 때문에 제플린에 디자이너가 의도한 정확한 수치가 나타나지 않는다면 measure를 사용해 정확한 간격을 입력할 수 있습니다(지금까지 단점으로 지목된 부분은 어도비 CC에서 많이 개선되었습니다).

스케치에게 빼앗긴 유져를 되찾으려 왔다: 어도비 XD

XD의 시작화면. 다양한 사이즈의 화면을 선택해 디자인을 시작할 수 있습니다.

어도비에서도 UI, UX유저를 겨냥한 어도비 XD를 만들었습니다. 스케치와 다양한 프로토타입 툴에 빼앗긴 기존 유저를 되찾아 올 수 있을까요? 지금은 정식 버전 이전으로 프리뷰 버전만 출시되었지만 앞으로 출시될 XD의 모습을 미리 살펴보도록 하겠습니다.

단축키 = 기존 어도비+스케치

디자이너들은 프로게이머와 견줄 수 있을 정도로 끊임없이 단축키를 누르며 작업합니다. 그런데 스케치와 어도비 계열 프로그램은 서로 단축키가 달라 스케치로 작업하다 Photoshop이나 Illustrator에서 작업을 하게 되면 머리와 손에서 단축키가 충돌을 일으킵니다. 허나 XD는 어도비에서 만든 프로그램 아닙니까! 어도비에서 사용하던 단축키를 그대로 사용할 수 있는 것부터 내집에 온듯 편안한 기분이 들게 해줍니다.(만약, XD에서 단축키는 물론이고 Illustrator와 Photoshop 파일까지 자유자재로 호환이 된다면 유저들은 다시 어도비에 충성을 맹세할 것입니다)

Repeat Grid

Repeat Grid로 반복적인 디자인을 구현하는 XD

스케치에서는 craft 플러그인을 활용해서 만들 수 있는 Repeat Grid를 XD에서는 버튼 하나로 바로 구현 가능합니다. (추측이지만 craft팀에서 XD 데모 영상 중 특별한 툴바 없이 finder에서 파일을 드래그만 하면 이미지와 글이 알아서 변경되는 부분을 보고 뒷목을 잡지 않았을까 싶네요.) Repeat Grid, 이것 하나 만으로도 어도비 XD가 위대해 보이는 부분입니다.

인터페이스

Design과 Prototype 패널로 쉽게 페이지를 오고갈 수 있습니다.

스케치와 흡사합니다. 스케치를 사용하던 유저는 조금 더 쉽게 사용할 수 있습니다. 오른쪽 패널은 정렬과 크기, 컬러 등을 선택할 수 있고 왼쪽은 툴이 나열되어 있습니다. 레이어 창이 없는 것이 스케치와 다른 부분입니다. 디자인과 프로토타입 패널도 쉽게 오고갈 수 있습니다.

디자인과 인터렉션을 한번에. 완벽한 프로토타이핑툴

XD는 프로토타입을 만들때 그 장점이 돋보입니다. 스케치에서는 프로토타입을 만들기 위해서 다른 어플리케이션과 스케치파일을 연동시켜 작업하는 것이 일반적입니다. 반면 XD는 디자인과 프로토타입을 한번에, 하나의 어플리케이션 안에서 만들 수 있는 툴입니다.

만드는 방법도 아주 간단합니다. 화면이 시작하는 지점을 클릭하고 그 다음 나타나는 화면을 선택하고 세부 사항을 정하면 완성됩니다. 이렇게 만든 프로토타입은 웹에서 바로 실행해볼 수 있고 핸드폰으로 미러링해 직접 동작해보는 테스트도 가능합니다. URL도 생성할 수 있어 다른 사람들과 바로 공유할 수도 있습니다.

기존 어도비 유저를 그대로 흡수할 가능성이 높은 XD와 다양한 어플리케이션과 함께하는 스케치. 그 최후의 승자가 누가 될까요. UI/UX툴의 홍수 속에서 어서 빨리 XD 정식버전이 나오길 기대합니다.

참고: adobe XD, design tools survey