[UI/UX] Sketch는 영원할 수 있을까?
스케치의 역사와 Adobe XD vs Sketch
저는 개발자지만 디자인에 대해 정말 관심이 많습니다. 요즘 가장 많이 쓰는 UI/UX툴이라고하면 단연 스케치입니다. 특히 최근 제플린 Invision과같은 써드파티와함께 아주 큰 영향력을 발휘하고있습니다. 하지만 최근 Adobe XD의 부상이 심상치 않습니다.
스케치의 등장하기 전까지
먼저 10년전쯤 이야기를 해보겠습니다. 당시 웹을 디자인한다고하면 가장 유명했던 소프트웨어중 드림위버를 꼽을 수 있습니다. 드림위버는 어도비에서 만든 HTML WYSISWYG 저작도구로 디자이너들이 코딩을 하나도 모르는상태로 포토샵과 같이 디자인만한다면 보이는대로 코드를 만들어주었습니다. 물론 2010년대 초반까지는 문제가 없었지만 스마트폰과 테블릿이 상황을 바꾸었습니다.
반응형디자인과 Mobile First
이전에는 딱 2가지만 고민했습니다. 1200px인지 아니면 960px인지 하지만 이제는 그 이하의 화면 사이즈도 고민하기 시작했습니다. 이때부터 드림위버를 이용해 고정되어있는 화면을 기반으로 디자인하는 툴에대한 수요가 줄어들고 HTML5/CSS3 표준과함께 프론트 웹개발자라는 직군이 본격적으로 부상하게됩니다. 이때 현대적인 자바스크립트 개념과함께 SPA의 등장은 더이상 웹프론트를 디자이너들의 영역이 아닌 하나의 독자적인 개발영역으로 변모시켰습니다.
포토샵의 문제점
가장 큰 문제는 다양한 화면에서 어떻게 보여줄지에대해 마땅한 툴이 없었습니다. 포토샵은 애당초 비트맵 방식의 그래픽 편집기이며 어도비 라이팅룸 이전까지 사진가를 위한 툴로 대표도었습니다. 또한 비트맵방식이기때문에 크기가 커지면 커질수록 그리고 많아지면 많아질수록 매우 무겁습니다. (물론 Smart Object방식이 있더라도) 오브젝트가 많아지면 많아질수록 엄청나게 느려집니다.
만약 4 Column의 블로그 영역을 디자인한다고하면 4개의 Element들을 각기 다 만들어주었습니다. 만약 사진영역의 크기를 키운다면? 4개의 요소들을 다 키워주어야합니다. 위 이미지처럼 화면별로 표현되어있다면? 각 모든 요소들을 수정해주어야합니다. (…)
게임체인저 스케치
스케치의 가장 큰 장점은 벡터방식입니다. 에셋이 아무리 많이 늘어나고 화면이 아무리 커지더라도 비트맵방식에 비해 큰 부하를 주지 않습니다. 특히 스케치에서 가장 눈여겨볼 기능은 심볼과 프로토타입입니다.
심볼
이렇게 만들어진 심볼은 템플릿 하나의 수정만으로 모든 요소에서 수정을 가능하게해주며 텍스트의 스타일링또한 템플릿화할 수 있습니다. 각각의 심볼(템플릿)들을 모아 새로운 심볼을 만들 수 있고 그렇게 만들어진 심볼로 또 새로운 심볼을 만들 수 있습니다. 즉 모든걸 템플릿화하여 재사용성을 높일 수 있게됩니다.
개발자들에게 OOP가 있다면 디자이너 세계에는 아토믹 디자인이 있습니다. 각각 개별 요소들이 하나의 모듈을 이루고 Organisms을 이루고 다시 템플릿을 이루고 그리고 큰 하나의 템플릿을 구성할 수 있습니다.
프로토타입
프로토타입기능은 각 화면별 전환이나 애니메이션같은 UX를 지정해줄 수 있습니다. 또한 실제 디바이스에서 정의된채로 목업을 할 수 있도록 도와줍니다.
워크플로우에 정의된대로 화면의 전환등을 구성해볼 수 있고 또 모니터로 작업하다보면 텍스트크기나 이미지 크기를 가늠하기 어려운데 손쉽게 볼 수 있도록 도와줍니다.
제플린
제플린 이전에는 가이드라인따기는 정말 괴로운 작업이였습니다. 이미 만들어진 Element들의 dp나 px들을 표기하고 색상값도 알려주어야하고.. 또 디자인이 변경되면 다시 수정해주어야했습니다. 하지만 제플린은 단지 스케치 파일을 업로드 하는것만으로도 개발자들이 웹인터페이스나 제플린 프로그램을통해 텍스트의 사이즈는 얼마인지 어떤 포인 알 수 있고 심지어 코드로도 변환해줍니다. 특히 IOS 개발을할때 UIColor로 변환해주는건 얼마나 편한지 모릅니다.(…)
Invision
인비전은 스케치로 만든 디자인파일의 프로토타입을 더 쉽게 할 수 있도록 도와주고 특히 UI 애니메이션 구성을 아주 쉽게 할 수 있습니다. 인비전은 100마디보다 1분여짜리 동영상을 보는게 더 이해가 빠를정도로 감각적인 툴입니다.
써드파티툴의 활약
스케치/인비전/제플린은 사실상 UI/UX 영역에서 사진이나 이미지처리 작업을 제외한 모든작업을 어도비 없이 할 수 있게해주었습니다. 2017년경 실리콘밸리에서 웹UI 개발자들을 대상으로한 조사에서 40%가 넘는 사람들이 스케치를 쓴다는 조사가 있을정도로 어도비는 빠르게 시장을 잃어갔습니다.
Adobe XD의 등장
Adobe에서 XD라는 UI/UX 개발툴을 내놓았습니다. 모토는 스케치에서 되는건 다 된다(…)입니다. 처음 나왔을때 기능적 측면에서 정말 완벽한 스케치의 카피캣이었습니다. 어도비의 전통적인 레이아웃은 다양한 툴박스와 화면구성도 포기하고 툴영역마저도 스케치인지 XD인지 헷갈리게했습니다. 게다가 스케치가 OSX 전용 프로그램이었지만 XD는 윈도우에서도 사용가능했기때문에 윈도우 환경의 디자이너들을 기반으로 널리 사용되었지만 큰 주목을 받지는 못했습니다.
스케치의 아류작이라는 비아냥도 들었지만 사실 어도비의 멀티미디어 파일에 대한 응용프로그램 개발능력은 상상을 초월합니다. (우리 어도비가 플래시만 못만들지 다른건 다 잘만들어요..) 스케치의 장점인 써드파티 플러그인을 XD도 똑같이 답습합니다.
어도비의 막강한 시장영향력과 개발력은 XD를 디자이너들을 위한 협업의 끝판왕으로 변모시켰습니다. 게다가 스케치가 OSX에서 사용가능하고 iPhone 목업만 가능한데반해 XD는 윈도우와 안드로이드앱까지 지원합니다.
스케치를 타케팅하는 전략
스케치로 만들어진 파일을 XD에서 불러와 바로 사용할 수 있습니다. 이때문에 스케치에서 XD로 넘어가기가 더 쉬워졌습니다. (스케치입장에서는 아주 얄미운..) 게다가 InVision이나 Zeplin등도 XD를 지원하면서 스케치만의 장점이였던 플러그인들이 오히려 스케치에겐 독이되었습니다.
워크플로우개선
아무리 스케치를 사용해도 포토샵과 일러스트레이터를 안쓰고 작업하기는 힘듭니다. 정교한 벡터작업이나 사진등의 필터,합성등이 있을때 사용을 안할 수 없고 불러오더라도 포토샵에서 이미지로 Export하거나 일러스트레이터에서 새로운 포맷으로 내보내야하지만 XD에서는다릅니다.
일러스트레이터에서 object를 클릭하고 컨트롤+C, 컨트롤+V만으로 사용할 수 있습니다. 또한 포토샵이나 일러에서 수정한 사항을 XD에서 바로 적용할수도있습니다. 실제 작업을 하다보면 XD의 가장 큰 장점이 아닐까 싶습니다.
오토애니메이션
XD에서는 오토애니메이션 기능을 제공합니다. 더이상 Invision과 같은 툴 없이도 애니메이션 구성을 쉽게 할 수 있습니다. 심지어 몇몇 애니메이션은 드래그앤드랍만으로 구성할 수 있습니다. 이 기능은 생각보다 중요합니다.
왜냐하면 이런 요소들을 After Effectf로 내보낼 수 있기 때문인데 Aftter Effect로 Export 한다는것은 곧 Lottie 파일 만들 수 있다는것이고 Lottie파일로 만들 수 있다는건 Lottie Library를 이용해 IOS든 Android이든 Web에서든 동일한 애니메이션을 쉽게 구현할 수 있습니다.
마치며
어도비의 적은 어도비라는 말이 있을정도로 어도비의 시장지배력은 엄청납니다. 이런 시장지배력을 이용해 시장을 잠식하는일은 이전에도 있었습니다.
퀴크익스프레스라는 프로그램이 있습니다. 전자출판등에 가장 큰 공헌을 한 프로그램이었고 출판하면 쿼크익스프레스였지만 당시에도 이미지 작업은 포토샵과 일러스트레이터를 사용했습니다. 비슷하게 어도비는 포토샵과 일러스트레이터를 이용한 끼워팔기 전략으로 쿼크익스프레스를 모방하여 리뉴얼한 인디자인을 내놓았고 처음에는 크게 주목받지 못했습니다. 하지만 시장 점유율은 점점 시장점유율을 잃어갔고 지금은 인디자인을 들어봤어도 쿼크익스프레스를 들어본 사람을 찾기 힘듭니다.
저또한 최근 XD로 넘어가며 조금 더 편하게 작업할 수 있게되었지만 웬지모를 씁쓸함을 느낍니다. 개인적으로 스케치나 기타 프로그램들이 더 분발하여 경쟁할 수 있었으면 좋겠습니다.
