어도비는 스마트폰 사용 인구가 늘어나고 인터넷 환경이 PC에서 모바일로 변경됨에 따라 모바일에 최적화된 다양한 콘텐츠에 대응할 수 있는 UI/UX 디자인을 위한 프로그램을 구상해 왔다. 이런 과정을 거쳐 선보인 툴이 어도비 XD로, UI/UX 디자이너를 위한 와이어 프레임(화면을 구성한 디자인) 제작 도구다. 그동안 어도비 XD는 포토샵, 일러스트, 드림위버와 함께 어도비의 새로운 디자인 툴로만 알고 있었고, 직접 사용해서 디자인 파일을 만들어 본 적은 없다.
어도비 XD는 디자이너 혼자서 작업할 때 보다 여럿이 함께 작업할 때 더 많은 강점이 있다. 디자인팀이 차세대 디지털 경험을 제작하고, 공동작업을 수행하고, 이를 제공할 수 있는 가장 빠른 방법으로 손꼽히고 있다. 하나의 플랫폼에서 디자인 및 프로토 타이핑을 진행하고 어도비 폰트, 포토샵, 애프터 이펙트, 일러스트, 그리고 크리에이티브 클라우드 앱과 통합해 원활한 작업이 가능하다.
그럼, 어도비 XD로 무엇을 할 수 있을까? 먼저 어도비 XD는 사용자에게 앱이나 웹을 어떻게 사용하는지 알려주고, 화면의 연결 상태를 정의할 수 있다. 전체 디자인을 어도비 XD라는 하나의 툴을 통해 와이어 프레임, UI(User Interface) 디자인, 앱/웹 디자인을 시뮬레이션한 목업과 인터랙티브한 프로토타입으로 빠르게 제작할 수 있다.
어도비 XD의 장점은 어도비 XD에 있는 이미지를 포토샵에서 열어 편집할 수 있고, 이미지가 편집되면 어도비 XD에서 자동으로 업데이트되고 누락된 글꼴은 XD 문서를 열어 어도비 폰트가 자동으로 활성화된다. 모든 팀원과 동일한 XD 파일을 동시에 작업할 수 있고, 다른 디자이너가 XD 파일에서 어떤 UI 디자인 부분을 작업하고 있는지 알 수 있다. 따라서 디자인 작업의 전체 과정을 확인할 수 있다.
디자인 작업을 클라우드 문서로 저장하면 공동 디자이너에게 빠르게 파일을 공유해 동일한 원본을 사용할 수 있고 자동으로 업데이트되므로 작업이 손상될 염려가 없다. 또한 다양한 플러그임을 사용하여 워크플로와 어도비 XD의 기능을 확장해 사용할 수 있다. 이외에도 Slack, Jira, Microsfot Teams, Zeplin 등과 같은 앱과 연결되어 있어 디자인 작업 시간을 단축할 수 있다.
이 책은 어도비 XD CC 2020 한국어 윈도 버전을 기준으로 작성되었지만 버전에 따른 차이는 팁으로 설명했다. 이 책에 사용된 예제 파일과 완성 파일은 길벗출판사 홈페이지에서 다운로드해 사용할 수 있다. 특히 예제 파일은 따라해 보면서 만들어 볼 수 있도록 구성되어 있어 다 만든 다음에는 완성 파일과 비교해 보시기 바란다.
이 책은 어도비 XD의 핵심 기능인 반복 그리드 같은 스타일은 디자인 요소를 반복적으로 사용하는 경우가 많은 웹&앱 디자인에서 유용하게 사용할 수 있다. 또한 어도비 XD 프로그램을 통해 UI 디자인을 배우고자 하는 예비 디자이너에 맞춰 기본적인 도구를 활용한 아이콘 디자인을 비롯해 웹&앱 페이지 디자인, UI 디자인, 앱 디자인에 애니메이션과 인터랙션을 적용한 프로토 타이핑 따라하기 등의 예제를 제공한다.
손안의 PC로 불리는 스마트폰 사용이 대중화되면서 인터넷과 연결된 모바일 환경은 우리의 삶에 많은 변화를 주었다. 게임을 하고 음악을 듣고, 음식을 주문하고 배달을 시키고, SNS에서 커뮤니케이션을 하고 모바일 뱅킹 서비스를 이용하는 등 한 통계자료에 따르면 현대인들은 하루에도 2천 번 이상 스마트폰을 확인한다고 한다.
화상회의를 비롯해 온라인 수업 등 코로나19 영향으로 인해 언택트(비대면) 방식에 관심이 모아지면서 UI/UX 디자인 툴인 어도비 XD를 활용할 일도 많아질 전망이다. 포토샵이나 드림위버를 사용해 보지 않았다면 조금 어려울 수도 있지만 어도비 프로그램들을 어느 정도 사용해 봤다면 어렵지 않게 어도비 XD도 사용할 수 있을 것이다.
* 출처 : https://blog.naver.com/twinkaka/222001177963