어도비XD(adobe XD)를 처음으로 실무에 써봤다

나는 아직도 배우고 있다 #1. 프로토타입 툴 어도비XD편

루시와 갑자기 잉여력을 발휘하여 앱을 하나 만들고 있다. 그래서 이왕 만드는김에 관심 있던 어도비 XD(adobe XD)를 시도해봤다. 이전에는 레퍼런스만 살펴보고 공공연히 떠돌아다니는 영상을 보기만 했지 실제 프로젝트로 실행해본 적이 없었다.

참고로 이번에 만들고 있는 앱은 아이디어를 뱉자마자 0.01초만에 서로 간의 합의하에 시작됐다.

애나 : "루시, 전에 루시가 캐릭터 얘기한 적 있잖아요. 근데 내가 이번에 플리마켓에서 캐리커쳐를 받아왔는데 오늘 불현듯 생각나는거야! 사람들이 사진을 올려주면 그걸 그려주는 건 어때요?"

루시 : “오, 그거 재밌을 거 같아요. 바로 만들어보는 거 어때요?"

생각지도 못하게 바로 진행이 됐다. 어어어어 하는 순간에 오오오오 좋아요가 되어 시장성이고 수익성이고 나발이고 그냥 만들어보기로 했다. 지금 제시카가 열심히 기획중인 우리의 팀프로젝트가 있건만 빨리 만들 수 있을 것 같다며 잉여력을 발휘했다. (괜.찮.아.요.제.시? 많이 놀랐죠?)

▲ 아이디어 나와서 커뮤니케이션을 하기 위해 그린 프로토타입, 이때 장소가 밖이었는데 펜은 없고… 에버노트를 켜서 간단하게 아이디어를 구상했다.

▲ 내가 그리기전에 루시가 먼저 스케치를 해줬다… 디자이너인 나보다 산출물이 더 좋네.

어도비 XD(adobe XD)로 작업을 하는 것은 굉장히 좋았다. 내 머릿속에 있는 것을 툴로 표현하기에 굉장히 가볍고 심플하게 느껴졌는데 아무래도 개인적으로 디자인 하는 스타일이 스타일링에 집중하기보다 아이디어를 실행하는데에 더 편향되어 있어서 그런 듯하다. 내가 작업하는 스타일은 페이퍼 프로토타입에 집중을 많이 하고 그걸 거의 비슷하게 UI로 심플하게 얹힌다음에 색이나 아이콘, 크기로 전체적인 볼륨감을 조절한다. 그 이후에 서비스가 잘돼서 업데이트를 하면 스타일링에 좀 더 집중하고 사용성에도 많은 시간을 할애한다. 즉, 이 말은 어도비 XD(adobe XD)로 디테일한 스타일링을 하기에는 적절하지는 않은 것 같다. 그리고 아마도 그렇게 표현하는데에 있어 포토샵보다 빠른 시간내에 쳐낼 수 있는지에 대해서는 의문이 든다.

그냥 동영상으로 봤을 때는 우와 죽인다 했는데 실제 프로젝트를 진행하면서 불편한 사항들이 속속들이 나왔다. 아마도 이 불편함들은 아직 내가 아직 툴에 익숙해지지 않았거나, 원하는 기능을 제대로 사용을 못하고 있거나, 아니면 그 기능이 없거나 셋 중에 하나이거나 동시다발적으로 생긴 문제일 것 같다.

불편한 사항이 어떤 상황에서 발생했는지 보자.

1) 디자인을 다 했다. 이제 크롭을 해야지. 어? 근데 어떻게 하더라. 맞아 file > export… 하면 되는구나. 어? 난 분명 @2x로 보냈는데 이미지가 왜 이렇게 작은거지? 내가 뭘 잘못한건가. 그래, 그렇다면 @3x로 보내보겠다. 응? @3x 크기가 아닌데.. 여러번 시도끝에 아직도 왜 그러는지를 찾지 못했다. 이 부분은 나중에 레퍼런스를 다시 찾아봐야할듯 하다. 이미지가 4개밖에 들어가질 않아서 빠르게 일러스트로 다시 작업을 한 후에 포토샵으로 사이즈 재조정한 후 어도비 XD (adobe XD)에 붙여 넣었다.

2) 스크린샷을 내보내야 하는데 1번과 같은 상황이 발생했다. 화면을 @2x, @3x로 내보내도 작아도 너무 작은거다… 그래서 이걸 어떻게 했는지 알면 정말 디자이너들이 웃기는 짬뽕이라고 할 듯하다. 포토샵으로 다시 그릴수는 없어서 어도비 XD(adobe XD) 화면을 확대해서 포토샵에서 붙혀넣기 한 다음에 편집을 한 후 스크린샷을 완성했다. 모바일 디자이너들은 알겠지만 5.5인치까지 스크린샷을 만들어야 하기 때문에 이 작업은 필수인데… 일은 잘 마무리했지만 이것도 어떻게 해야할지 난감하다.

3) 이번 프로젝트는 가이드없이 진행되어 루시가 대략적인 UI를 얹히고 디테일한 부분은 행아웃으로 대화를 하며 UI를 잡고있다. 하지만 역시 가이드 툴과 연동되지 않는 것이 가장 아쉽다. 아직 제플린을 업무상으로는 써보지 못했지만 연동되면 참으로 반가운 소식일텐데 말이지. 전에 어도비 XD (adobe XD)측에도 문의를 한 적이 있지만 아직 그 부분에 대한 것은 검토 중이라고 한다.

위의 상황은 내 진행상의 문제였지 실제 어도비 XD(adobe XD)의 문제는 아닐 수도 있다. 다음 프로젝트를 진행하게 되면 더 빠른 속도로 업무처리가 가능할 테지만 다음 프로젝트는 어도비 XD (adobe XD)로 시도하지 않을 생각이다. 현재 가장 중요한 팀프로젝트는 스케치(Sketch)로 실행해보려 한다. 어도비 XD (adobe XD)를 쓰면서 처음의 아이디어 프로토타입(5컷)으로 디자인한 시간은 툴을 잡고 2시간이 걸리지 않았을거다. 이전에 한 번 이것저것 만진 경험도 있어서 크게 거부감이 없었고 앱 자체가 단순한 구조이다 보니 중간중간 포인트만 잘 잡으면 디자인도 생각한대로 잘 적용이 된 것 같다. 다만 이후의 협업 과정에서의 개발로 넘어가는 소스를 정리하는 부분에서 시간이 더 오래 걸린 것 같다.

▲ 왼쪽에서부터 50초, 1분 20초, 6분이 걸린 스케치. 시간을 어떻게 아냐고? 중간에 루시가 낸 아이디어였는데 99초만에 그림을 그려주는건 어떠냐는 의견이었다. 그래서 스톡워

포토샵을 10년 넘게 써오고 있다. 아마 앞으로도 안 쓸 일은 없을 것 같다. 하다못해 내가 원하는 스케치 느낌을 주기 위해 포토샵을 연적도 있으니 말이다. 그럼에도 불구하고 어도비 XD(adobe XD)나 스케치(Sketch)를 시도하는 것은 효율성 때문이다. 가이드를 만드는데 쏟아붓는 시간, 아이폰과 안드로이드를 동시에 실행해야 하는데 거기서부터 오는 소모적인 잡 업무들… 이 불필요한 요소들을 앞의 툴들이 해결해줄 것이라 기대하고 있다. 이미 많은 디자이너들이 사용을 하고 있고 해외에서는 적극적으로 활용을 하고 있다. 드리블* 사이트만 가봐도 디자이너들이 원본으로 스케치 파일을 공유했으니 나는 뒷북을 쳐도 한참 친 거다.

디자인에서 중요한 것은 내 머릿속에 있는 무언가, 또는 만들어가는 중에 발견하는 터치포인트들이지 툴 자체가 가장 우선적으로 중요한 것은 아니다. 하지만 내가 생각하는 바를 잘 표현하고 그 안에서 효율성을 높이고 협업자들과 커뮤니케이션을 하기 위해서 툴을 그만큼 잘 알아야 한다. 새롭게 쏟아지는 툴들을 두려워하고 기존의 것을 무조건적으로 의존하기보다는 새로운 것에 도전을 하는 것에 손을 들어주고 싶다. 생각지도 못한 좋은 경험을 하게 된다면 그 경험은 나를 또 한 번 성장시킬 테니까.

* 드리블, dribbble(https://dribbble.com/) : 해외 디자이너들의 포트폴리오 플랫폼

* Adobe XD로 만든 Analog Sketch 구경하러 가기 (http://adobe.ly/1THouGU)