내가 Adobe XD를 사랑하게 된 이유
동네사람들! XD 좀 써보시오들!
UI/UX tool의 춘추전국시대
저같이 클래식한 디자인 분야를 좋아하는 디자이너들에겐 가슴 아픈 일이지만, 편집디자인과 브랜딩으로 대변되던 2D 디자인의 시대는 대세의 주류에서 한걸음 물러선 지 이미 오래되었고 최근에는 2000년대 중반부터 급성장하며 치고 올라온 UI/UX 디자인이 현대 시대의 2D 디자인 업계를 선도하고 있다 하여도 과언이 아닙니다.
그래도 갈 곳 없는 그래픽 디자이너들에게 새로운 일자리가 생긴 것 만으로.. 만족을... 크흡..저도 현재의 회사에 들어오기 전까지는 진지한 UI 디자인을 접할 기회가 많지 않았기 때문에 새로운 툴의 기술 습득보다는 이미 익숙한 포토샵과 일러로만 작업하는 방식을 선택했었습니다. 아마도 그때의 불편함과 귀찮았던 작업 프로세스들이 저의 UI/UX 디자인 업계 입문을 더 더디게 했을지도 모릅니다.(라고 핑계를 대보자 하하호호) 그리고 본격적으로 UI/UX 디자인을 시작하게 된 후 처음 사용하게 된 프로그램은 스케치였습니다. 아무래도 스케치가 웹을 주로 다루는 툴 중에 역사와 인지도가 압도적으로 높기도 하였고 마땅히 대체할만한 툴도 없었기 때문에 간혹 불만스러운 사항이 있더라도 꾸준히 사용했습니다.
저만 하더라도 불과 몇 년 전까지 포토샵, 일러, 인디자인만 쓰는 정도였으니까요 (이미지 출처 : blog.prototypr.io)그러던 중, 어도비에서 Project Comet라는 프로젝트 네임으로 개발하고 있던 디자인 툴을 2016년에 Adobe Experience Design이라는 명칭으로 변경하여 베타 런칭하게됩니다. 스케치의 대항마가 될 수 있을까, 란 의심과 어도비라는 디자인 대기업이 내놓을 프로그램이란 기대심에 많은 디자이너들에게 주목받게 되지요.
그동안 어도비의 행보로 봤었을 때 걍 스케치를 사버릴 줄 알았는데... (이미지 출처 : WhatPixel)예상보다도 더 늦게 참전한 후발주자임에도
사실 어도비가 디자인 업계에서 지니고 있는 위상과 파급력을 볼 때 이렇게까지 늦게 UI/UX 툴에 발을 들인 것이 오히려 의아할 정도였습니다. 초기에는 아직 Xd의 완성도도 그리 높지 않았고, 또 프로젝트를 하나씩 하나씩 쳐내기에도 급했던 저는 일단 손에 익숙한 스케치를 계속 사용해왔습니다. 그러던 중 2017년 말을 기해서 Adobe Xd가 베타라는 이름을 때고 정식 발매하게 됩니다. 뭐가 좋아졌나, 살펴볼 겸 시험 삼아 XD로 작업을 하던 저희 팀은 곧 Xd의 매력에 빠지고 머지않아 오래 사용해왔던 스케치의 구독을 취소하게 되었고 지금까지도 Xd와 알콩달콩 좋은 사이를 유지하며 많은 프로젝트들을 제작하고 있습니다.
자, 그럼 XD에 어떤 장점들이 있었는지 한번 살펴봐야겠습니다.
장점 1 . 가볍고 가볍고 또 가볍다! 쾌적한 사용성
--- (주: '연석'님께서 댓글로 달아주신 바에 따르면 최근에는 동일한 양의 프로젝트 진행시 스케치 쪽이 오히려 15% 정도 가벼운 결과를 보이기도 한다고 하시네요! / 2020년 2월 기준) ---
스케치를 사용하면서 가장 아쉬웠던 점은 프로그램이 꽤나 무거웠다는 점입니다. 스케치의 기능이 많기도 하고 웹디자인을 하다 보면 아트보드의 개수가 많아지니까 메모리를 많이 잡아먹는 게 어쩔 수 없겠지만.. 그럼에도 불구하고 2000년대 중반 시절의 일러스트레이터를 보는 듯한 버벅거림은 데드라인이 하나둘씩 가까워질수록 예민해지는 제 신경을 사정없이 긁어댔습니다. 스케치가 자동 저장 기능을 지원하기에 망정이었지, 그렇지 않았더라면 그 수많은 버벅거림과 충돌로 인해 꺼져버리던 스케치를 당장이라도 쓰레기통에 넣어버렸을지 모릅니다. 게다가 스케치는 업데이트가 매우 잦은 프로그램입니다. 뭐가 추가되었는지도 잘 모르겠는데 계속 업데이트하라고 뜨는 팝업창을 계속 끄고 있자면... ㅇ ㅏ, 아까 충돌로 프로그램 꺼질 때의 화가 다시 한번 치밀어 오르기도 했죠.
여러분 저 렉걸린거거거거거거거거거거거거거거 같..그에 반해 XD는 매우 가볍습니다. 약간 오버하자면 디자인계의 깃털로 불리는 인디자인만큼이나 쾌적하고 미니멀한 작업 프로세스가 가능합니다. 어지간히 커다란 이미지를 넣거나 아트보드가 많아져도 전체적인 작업 속도에 큰 변화가 없습니다. 좀 더 상황을 구체화시키기 위해 수치를 확인해봐야겠네요.
제가 한 가지에 집중을 잘 못하는 성격이라 한 번에 여러 개의 프로젝트를 켜놓고 진행합니다. 수시로 생각나는 아이디어들을 바로바로 적용시킬 수 있기 위함인데, 이 정도의 아트보드가 있는 파일을 5개 켜놓았을 때 메모리를 5기가 정도 잡아먹습니다. 스케치의 경우는 어떨까요? 아무 파일도 열지 않고 프로그램을 실행만해도 가볍게 3기가 넘게 소비합니다 (...) 램에 무리가 가지 않는 가벼운 사용성은 저같이 크롬 탭 10개 이상에 포토샵, 일러, XD 등을 동시에 켜놓는 디자이너에게는 매우 큰 장점입니다.
장점 2 . 후발주자로써의 바른 마음가짐 - 빠른 진화 속도
이미 어느 정도 발전이 진행된 산업에 후발 주자로 뛰어든다는 것은 장점과 단점을 동시에 수반합니다. 이미 선점한 업체가 만들어 놓은 레드오션에 뛰어든다는 단점이 있는가 하면 목표로 삼고 벤치마킹할 수 있는 명확한 대상이 있다는 장점이 있습니다. 어도비의 경우 자신들이 가진 자금력과 기술력으로 이 두 가지를 모두 삼켜버리고 있습니다.
큼지막한 연간 업데이트 못지않게 꾸준히 이루어지는 마이너 업데이트들스케치와 다른 UI/UX 디자인 툴이 지니고 있던 기본적인 기능들은 당연히 가지고 있으면서도 그 기능들이 더 안정적으로 돌아갈 수 있는 프로그램으로 자리 잡을 수 있도록 하였고, 또 각 디자인 툴들이 지닌 장점들을 벤치마킹하여 'XD만으로도 완성할 수 있는 웹 생태계'를 구성해나가고 있습니다. 이는 Adobe Xd가 목표로 하고 있는 올인원 UI/UX 솔루션 툴이 어떠한 서비스를 지향하는 것인지 확실히 말해줍니다.
UI/UX 계의 빨간약이 되어가고 있습니다.예를 들어 스케치의 경우, 디자인에 대한 피드백을 클라이언트에게 받기 위해서 Zeplin이라는 프로그램을 사용해야 합니다. Zeplin을 사용할 경우 디자인에 대한 피드백을 메모 형식으로 전달받을 수 있고, 또 추후 퍼블리싱 시에 사용할 수 있는 디자인 css 코드도 확인할 수 있습니다. 프로토타이핑을 위해서는 프로토타이핑을 가능하게 해주는 플러그인을 설치해야 하죠. 스케치는 애초부터 개개인들이 만들어내는 플러그인으로 무궁한 확장성을 기대할 수 있는 툴로 제작되었지만 반대로 말하자면 플러그인에 대한 정보 습득이 어려운 경우엔 프로그램의 활용도가 현저히 낮아질 수 있다는 점이 있습니다. Xd의 경우 다른 프로그램을 사용하는 번거로움을 줄이기 위해 프로토타입 제작은 물론, 피드백과 코드 확인을 위한 화면을 자체적으로 생성할 수 있습니다. 그렇게 생성된 화면은 온라인에 업로드되어 아래와 같이 활용됩니다.
복잡해 보이지만 사실은 하나도 안 복잡한 프로토타이핑
각 디자인 요소에 대한 노트를 남겨두면 클라이언트가 확인 후 피드백을 남길 수 있습니다.
그리고 이런 식의 코드 확인은 퍼블리셔님들의 걱정과 한숨을 조금이나마 덜어드릴 수 있지요.장점 3 . 간단한 애니메이션도 한 화면에서
인비전 스튜디오 또한 UI/UX 디자인 업계에서 비교적 후발주자임에도 불구하고 애니메이션을 통한 인터랙션 제작 기능을 차별점으로 삼아 급성장할 수 있었습니다. 단 인비전 스튜디오도 css 코드를 확인하기 위해서는 인비전 웹에 업로드를 해야 한다고 합니다. Xd는 이러한 동적인 움직임에 대해 굉장한 취약점을 지니고 있었는데 2018년 대규모 업데이트를 통한 auto-animate기능 추가로 인해 다시 한번 진화하는 모습을 보여줍니다.
사실 디자이너가 머릿속에서 상상하는 인터랙션을 개발자 또는 퍼블리셔에게 설명하는 건 생각보다 힘들더라고요. '솨- 해서 솨- 한 느낌으로 1초 정도 쫘아안-! 하다가 뽷! 하고 버튼이 눌리는 느낌'이라고 설명해야 할때면 말해놓고도 자괴감 들고 뭐 그럽니다.
말해놓고도 미안해지는 그런 느낌그렇다고 애프터이펙트나 플래시를 배우기엔 시간적인 리소스가 너무 많이 들 것 같고 (= 다른 기술 배우기는 귀찮다) 그렇다고 내가 직접 css를 건들자니 이과 고자인 제 좌뇌가 너무나 괴로워합니다. Xd에서 애니메이션 기능을 추가한 뒤로는 그런 어려움이 많이 해소되었습니다.
위의 영상은 Xd만을 이용해 제작한 웹사이트 메인화면 프로토타입입니다. 각 요소들이 어떤 식으로, 어떤 방향으로, 얼마간의 시간을 두고 이동할지에 대해 설명하는 수고가 크게 덜어집니다. 백문이 불여일견이란 말이 괜히 생긴 게 아닙니다.
그 외에도 위의 영상처럼 인터랙션없이 움직이는 애니메이션을 구현할 수 있고, (아직 5초가 한계이긴 하지만)
이렇게 간단한 인터렉션들은 준비하는 데에 몇 분도 들지 않으니 디자이너와 개발자 모두에게 윈윈이 아닐 수 없습니다. 그 외에 이 기능을 응용하면 PC 화면 - 태블릿 - 모바일 등 반응형 디스플레이에 대해 이해가 부족한 분들에게 설명하기에 용이한 프로토타입으로도 제작이 가능합니다.
장점 4 . 뭐니 뭐니 해도 어도비라는 브랜드가 주는 접근성
Adobe Xd가 지닌 가장 큰 장점은 제조업체가 어도비라는 점입니다. 아마 디자인하는 분들 중에 Adobe Creative Cloud를 사용하지 않는 분들은 이제 많지 않을 겁니다. Xd 또한 Adobe CC에 포함되어 있고 이미 어도비 프로그램을 사용하고 있는 디자이너들에게 추가 비용이 발생하지 않기 때문에 자연스럽게 하나의 패키지처럼 사용할 수 있다는 느낌이 듭니다. 스케치의 경우 연간 구독의 비용 지불이 필요하고, 인비전의 경우 스튜디오는 무료로 사용이 가능하지만 인비전 웹의 사용은 유료로 이용해야 합니다. 심지어 최근부터는 Xd는 무료로 이용 가능합니다! 비록 피드 백용 링크 생성이 1개로 제한되지만 프로그램 자체의 기술적인 제한은 전혀 없습니다. 엑렐루야!
잘 아시겠죠? 세상사 다 그런 겁니다.또 인터페이스가 다른 어도비 프로그램들과 유사하여 별다른 시행착오 없이 바로 능숙하게 다룰 수 있다는 것도 굉장히 큰 장점입니다. 하나 예를 들자면, 인비전과 스케치는 마우스 휠로 화면 확대/축소를 하기 위해서는 command버튼을 누른 상태여야 합니다. 대부분의 어도비 프로그램들은 alt 버튼을 누른 상태에서 휠을 돌려야 확대/축소가 가능한데 이 UX에 익숙해질 대로 익숙해진 제 엄지손가락이 자꾸 command를 누르고 있으면 기운이 쭉쭉 빠지곤 했습니다. 하지만 Xd를 쓰고 난 이후로는 포토샵, 일러를 사용하다가도 바로 무리 없는 사용전환이 가능하죠.
Adobe Cloud가 제공하는 100gb의 클라우드 스토리지를 이용하면 팀원들과의 협업도 쉬워지고 파일 정리 및 컴퓨터 용량 관리에도 큰 도움을 줍니다.
아직 개선될 여지는 많지만 이대로만 계속 커주라
뭔가 어도비에서 돈 받고 광고글 올린 듯한 글이 되어버렸는데.. 물론 Xd에도 단점은 존재합니다. 프로토타입에서 hover-effect에 대한 애니메이션 설정이 불가능한 것이라던가, 스케치처럼 간단한 이미지 보정이 불가능하다던가 (밝기, 색감, 대비 등), 아직 모바일 미리보기용 어플이 에러가 자주 난다던가 하는 요소들이 있지요. 하지만 2년 정도 되는 짧은 시간 내에 이 정도로 성장했으니 앞으로도 더 가파르게 성장하는 Xd를 볼 수 있으리란 기대를 갖게 됩니다.
아직 Xd를 사용해보지 않으셨다면 이번 기회에 시도해보시는 것도 괜찮지 않을까요?
