미리 보는 UI 디자인 툴 전쟁
아주 오래간만에 공유하면 좋을 거 같아 이렇게 써봅니다.
-
2017년은 충분히 스케치가 얼마나 강력한 툴인지 스케치를 써보지 않은 사람도 스케치가 강력하다는 걸 알 수 있게 되지 않았나 합니다. 그리고 스케치가 UI 디자인 툴에 독식하는가 하더니 그런 분위기를 깨고 올 겨울 즈음부터 복병들이 나왔습니다.
그 복병은 인비전 스튜디오, 프레이머, 어도비 Xd 이 3개의 툴인데 관련해서 짧게 생각을 공유해 보겠습니다.
그러기에 앞서
오랜 사랑을 받아온 어도비 포토샵에 대해 이야기해보겠습니다. 포토샵은 아주 강력한 그래픽 디자인 툴로서 1990년 2월에 출시된 자그마치 27년이나 된 그래픽 툴입니다. 사실 몇 년 전까지만 해도 사실 UI 툴에 대한 개념 없이 모든 그래픽(+디자인)은 포토샵으로 해야 된다는 고정관념이 있었습니다. 초기 포토샵의 이름을 ImagePro로 하려 했는데 해당 이름이 이미 사용 중이었기에 Photoshop으로 되었다고 하는데 최근에 제가 깨달은 사소하지만 중요한 사실을 하나 깨달았습니다.
제품 이름이 무려 포토샵입니다...photoshop..photo...photo...photo
사실 제품 이름에서부터 이미지를 편집한다는 의미를 가지고 있습니다.
어쩌면 우리는 컴퓨터를 처음 접하던 PC가 당연히 윈도우였듯 이미지 편집은 당연히 포토샵을 써야 한다는 고정관념이 있지 않나 생각합니다. 그런데 사실 포토샵이 최적화된 그래픽 툴인지 아닌지는 판단할 근거가 없었습니다. "UI 디자인을 하려면 포토샵을 써야 해~."라고 아무도 말해주지 않은 것도 있지만 별다른 다른 대안이 없었던 것도.. 결국 다들 포토샵화 되지 않았나 합니다.
사실 포토샵의 기능은 대단합니다. 상상 이상의 대박 기능이 많고 무에서 유를 창조할 수 있을 만큼 정교하고 치밀한 툴임에는 아무도 부정하지 못합니다. 그러나 포토샵이 가진 그런 엄청난 괴물 같은 기능 중 과연 몇% 나 쓰고 있습니까? 적어도 UI 디자인의 경우 포토샵이 제공하는 기능의 10%도 쓰지 않아도 될 거라 생각합니다.
과연 포토샵이 최적화된 UI 툴로서 사용 가능할까? 이런 의문을 해본다면 지금은 아닐 거라 봅니다.
그러한 의문을 가지고 혜성처럼 나온 툴이 보헤미안 코딩에서 나온 스케치입니다.
정말 빠르게 성장하고 있는 툴로서 스케치를 사용하기 위해 맥을 구입하는 것도 그리 놀랄 일이 아니게 되었습니다.
1. 스케치
빠른 작업 속도, 플러그인, 가볍고 빠른 툴 환경 등 UI에 최적화된 툴로서 현재로선 대항마가 없습니다. 구글, 애플, 페이스북 등 해외 유명 기업에서 이미 검증을 받았고 국내에서도 대기업에서 스타트업까지 그 성능을 인정받은 UI 디자인 툴의 끝판왕입니다.
스케치는 가볍고 빠른 제작환경을 제공합니다. 그런데 (제 경험에 근거하여) 사용자들을 만나 서면 느낀 점은 플러그인에 너무 의존 적한다던가 혹은 심볼 시스템을 잘 응용하지 못하고 단순 벡터 드로잉으로 끝난다던가 심지어 벡터와 픽셀의 차이점을 모르는 사용자도 있었다는 것에 좀 의외였습니다. 사실 스케치를 제대로 활용하려면 해상도, 타이포, 아이콘, 디자인 시스템 등 여러 다양한 디자인 지식을 요구합니다만 뭐 사실 단순 벡터 드로잉만으로도 사용할 이유는 충분히 된다고 생각합니다.
그러나 맥에서만 구동된다는 단점이 있고 조직이 클수록 스케치 도입이 그리 쉽지는 않습니다. 사내 시스템에 접근하도록 한다던가.. 메신저.. 보안 소프트 등... 사실 맥을 도입하는 거 이외에 할 일이 너무 많아 보입니다.
기존 PSD 기반의 디자인 파일을 어떻게 할 건지... 통합시킬 건지도 사실 쉽지는 않습니다.
이제는 스케치가 UI 디자인 툴로서 확실한 자리매김을 했고 앞으로 어떤 방향으로 갈지가 너무 궁금합니다.
2017년에 스케치에 추가된 신기능을 보면 정말 하나하나 디자이너에게 있어 꼭 필요한 기능들이었습니다.
그리고 도전자들의 공격을 어떻게 방어할지도 귀추가 궁금해지네요.
지극히 개인적으로 스케치의 최대 단점은 맥에서만 구동된다는 건데 사실 맘만 먹으면 Win 버전을 만들 수 있다고 봅니다. 물론 Win 10 버전에서만 구동되겠지만..
아니면 구글이 스케치를 인수한 후 Win 버전 출시 및 개인한테만 무료로 뿌려줬으면 하는 바람입니다.
2. 프레이머
뭐 두말할 것도 없이 아주 강력한 프로토타이핑 툴입니다.
프레이머는 사실 코딩이라는 진입장벽이 있지만 그 장벽을 넘어 버리면 이만큼 강력한 툴도 없을 거라 봅니다.
그런데 최근 업데이트 프레이머가 이상한 대대적인 업데이트를 했는데요..
그 기능이 무려 UI 디자인을 프레이머에서 바로! 직접! 할 수가 있게 되었습니다!
어떤 의미론 뭐랄까... 디자이너에게 있어 프로젝트를 진행하는 데에 있어 여러 개의 툴을 사용하는 건 효율적이지 않을 수 있다고 봅니다. 사실 스케치가 그런 좋은 사례인데 스케치에서 드로잉하고 제플린으로 가이드 올리고 인비 전이나 프레이머나 플린 토로 프로토 타이핑하고... (적어도 2개 이상의 툴을 사용해야 하는군요..)
평소 스케치 + 프레이머 조합으로 작업한 디자이너한테는 희소식이겠지만 여기서 제가 드는 의문은 기존 스케치 사용자들을 어떻게 프레이머로 유입시키게 할 건지... 아니면 프레이머 개발자들에게 드로잉을 하게 만들 건지.. 이게 좀 애매한 거 같습니다. 디자인도 잘하고 코딩도 잘하면 좋겠지만 이 두 가지 조건을 충족하는 디자이너나 개발자는 그리 많이 있는 거 같진 않습니다.
개인적으로 당장엔 쉽진 않겠지만 GUI 기반의 제작환경을 만들어 주면 어떨까요?
3. 인비전 스튜디오
일단 아래 동영상 먼저 보시죠...
플로우 기반 프로토타입 툴 회사인 인비전에서 야심 차게 준비한 스튜디오입니다.
사실 인비전만큼 고객(디자이너)이 많은 서비스가 몇이나 있을까요? 누구나 쉽게 사용할 수 있는 인비전에서 스케치를 잡아먹으려고 작정하고 스튜디오라는 UI 툴을 선보였습니다.
먼저 인비전으로 먼저 말할 거 같으면 플로우 기반의 프로토타입 제품을 만들어 주는 서비스지만 많은 유관/연동 서비스가 많습니다. trello, dropbox paper(써봤는데 괜춘했쉼더..단지 dropbox paper를 안 쓸 뿐..ㅋㅋ), slack, jira 등 다른 서비스와 연동을 제공하고 있으며 앞으로도 이유가 확실하다면 다른 툴들과 긴밀한 작업이 수월하도록 확장될 거라 생각합니다.. 만 사실 유관 기능은 많이 써보지 않았습니다.. 제가 인비전을 쓰면서 한 가지 크게 아쉬워했던 건... 마이크로 인터랙션입니다.
레이어나 그룹 단위로 개별 애니메이션을 구현할 수 있다면 이보다 좋은 건 없을 텐데 하고 생각했었는데... 굳이 욕심부릴 거 같진 않았는데 어느 날 갑자기 스튜디오란 제품을 발표하고 티저 동영상만 오지게 공개하네요.
일단 알려진 정보는
// 2018년 1월에 공개
// Win / Mac 둘 다 지원
// 마이크로 인터랙션 지원
// 공짜
라고 합니다. 수익은 인비전을 통해 얻을 거라 하는데 아마.. 어떻게 돈을 뜯어낼지 궁금합니다.
재미난 제품을 디자인할 수 있겠구나 하면서도 또 새로 배워야 하는구나 하는 부담감도 생겨버렸습니다.
과연 기존 스케치 사용자들을 어떻게 유입시킬 건지.. 과연 스케치 디자이너가 순수하게 갈아탈지도 의문입니다... 뭐 아직 출시도 안 했지만.. 크로스 플랫폼은 정말 매력 있네요.
사실 인비전에 인스펙트라는 가이드 기능이 있습니다. 그게 뭐랄까.. 소스를 업로드하면 레이어까지 까 볼 수 있어서 뭔가 더 제플린보다 정교해 보인다는 단순한 생각이 들었습니다. 적어도 스케치가 없거나 윈도우 환경의 작업자와 일할 땐 효과적일 거라 봅니다만 무슨 툴을 쓰던 실무작업을 하다 보면 생기는 문제가 하나둘씩 생기기 마련이고 그 순간에 대충 알 수 있습니다.. 앞으로 계속 써야 하나 말아야 하나 ㅋㅋ
그래서 스튜디오 조합으로 잘만 활용하면 인비전으로 북 치고 장구치고 다 해 먹을 수 있어 좋습니다.
기다려지네요.
4. Xd
끝으로 아무도 대단하다고 생각하지 않는 Adobe Xd입니다. (죄송합니다 adobe 직원분들)
이유인즉 스케치 없이 Xd 홀로 등장했다면 많은 환영을 받았겠지만 이미 스케치가 UI 툴로서 자리를 충분히 잡은 후에 나온 상태라 사실 Xd의 등장은 그리 신선하지 않았던 건 사실입니다.
지금의 Xd는 소년기를 맞이하여 달리고 있습니다. 꾸준한 업데이트로 스케치만 할 수 있었던 기능을 하나하나 추가하면서 소리 소문 없이 쫒아가고 있습니다.
마치 이런 식인 거죠... 여하튼.. 아직은 미흡한 게 사실이고 스케치를 따라잡는데 시간이 얼마나 걸리느냐인데...
예상엔 지금과 같은 속도라면 빠르면 1년 늦어도 2년 생각합니다.
Xd의 강력한 기능이자 Adobe가 슬로건으로 내세우는 건
모두가 하나로 합쳐진 ALL IN ONE입니다.
Xd는 포토샵의 무거움을 버리고 UI 디자인 하나에 초점을 맞춘 툴입니다.
사진 보정은 포토샵, 아이콘은 일러스트에서 작업해서 쉽게 불러들이도록 되어 있고 뿐만 아니라 디자인 x 프로토타이핑 x 커뮤니케이션을 별도의 다른 툴의 도움 없이 다 먹게 준비된 툴이라는 겁니다.
아직은 소년기이지만 충분히 포텐이 있으니 Xd 역시 해보는 걸 추천드립니다.
일단 벡터 렌더링이 아주 빠릿빠릿합니다. 이 부분은 스케치와 절대 비교불가입니다.
지금은 단순한 화전 전환 그리고 단순한 텍스트만 동적으로 재사용하는 개념의 심벌인지라 스케치 사용자가 봤을 땐 에게? ㅋㅋㅋ 뭐임 ㅋㅋㅋ 이럴 수 있겠지만 다시 말씀드리자면 포텐이 대단합니다.
저는 올초에 미국 본사 엔지니어와 함께 하는 앞으로 추가될 신기능에 대한 피드백을 주는 세미나에 다녀왔습니다. *지금은 Max에서 대부분 발표된 내용인지라 공개하겠습니다.
앞으로 추가될 혹은 주목할 기능은
// 실시간 파일 협업
// PLUGIN 지원
// 타임머신
// 마이크로 인터랙션
// 반응형 디자인
// 가이드 툴
들이 있습니다. 이외에 제가 모르는 추가될 기능들이 많겠죠.
실시간 파일 협업은 하나의 Xd 파일로 여러 명의 디자이너가 동시에 아트보드를 각자 나눠서 작업이 가능해집니다. 이 부분은 정말 좋은 거 같습니다. 마치 구글 닥스에서 다수의 사용자가 문서 편집하는 개념이라 보시면 됩니다.
타임머신은 작업 파일의 과거로 돌아가서 해당 디자인의 필요한 에셋만 복사한 후 현재 작업 중인 파일에 붙여 넣기를 할 수 있었던 거 같습니다. 버전 관리를 안 해도 좋겠죠 : )
마이크로 인터랙션은 로드맵에 있는 앞으로 추가될 기능이고 언제가 될지는 모르겠네요.
반응형 디자인은 스케치와 동일하다고 보면 되고 가이드 툴은 최근 버전에 탑재되었습니다만 아직은 실제 제작 프로젝트에 사용하기엔 살짝 부족한 감이 있어 얼마나 효율적인지는 모르겠지만 계속 기능은 추가되고 보완될 거라 봅니다.
올 초에 비공개지만 소개된 기능이 현재 업데이트를 통해 야금야금 공개되고 있다는 건 어떤 의미론 최소 1년 전에 많은 기능들이 준비되어 있단 뜻이고 어도비도 어떤 기능을 제공해야 하는지 충분히 인지하고 있다는 거라 생각합니다.
Xd는 말이죠... 그냥 한 시간 돌려보면 대부분의 기능을 쉽게 사용할 수 있습니다. 꼭 해보세요. 지금 당장은 아닐 수 있지만 언젠간 꼭 사용할 툴이 될 거라 봅니다.
마치며
좋은 기능으로 무장한 새로운 제품이 나온다는 건 환영할만한 일이지만 또 뭔가 배우고 적용해야 한다는 게 한편으로는 부담이 되네요. 디자인 에이전시가 스케치 도입을 희망하지만 꺼려하는 이유 중 하나가 고객사가 산출물로써 PSD를 요구하기 때문에 무작정 스케치를 도입할 수 없다는 현실의 장벽에 막혀버리기도 합니다.
뭐 2018년엔 이런 과도기? 아닌 과도기의 해가 되지 않을까 생각합니다.
뭐든 재미를 붙이고 열심히 하면 됩니다~!
