brunch

You can make anything
by writing

C.S.Lewis

by 키미 Apr 04. 2016

어도비 XD 주요 기능

UI/UX 디자인을 위한 프로토타이핑 툴  - 어도비 XD

그야말로 프로토타이핑 툴의 전성시대이다. 모바일 웹 또는 앱을 디자인하는 UI 디자이너의 역할과 작업이 많아졌고, 빠른 커뮤니케이션을 통한 협업이 어느 때보다 중요해졌다는 것을 의미한다. 이처럼 바뀌어버린 작업 프로세스에서 포토샵은 뭔가 아쉬움을 남겼고, 스케치(sketch)는 다양한 플러그인과 활발한 커뮤니티로 부족한 부분들을 채워주고 있다.


지난 3월 중순 어도비가 XD(Adobe Experience Design CC)를 내놓으면서 스케치에 도전장을 내밀었다. 개인적으로 디자인 툴을 이것저것 사용하는 것을 좋아하지 않기에(나타났다가 하루아침에 사라지는 툴이 워낙 많기 때문이다), 어도비가 프로토타이핑 툴 코멧(Project Comet)을 곧 론칭한다는 소식을 듣고 오랫동안 기다려왔다. 기존 사용하던 어도비 툴과의 호환이 자유로울 것이라 기대했기 때문이다.


론칭 후 사용 느낌은…. 아직 프리뷰 버전이라 그런지…. 부족한 부분이 많이 보인다. 어도비 툴과의 호환성도 기대만큼 많지 않았다. 어도비 포럼에 올라오는 기능 요청 리스트를 살펴보니… 그리드 가이드, 룰러(Ruler)부터, 스크롤, 레이어, 세부 타이포 옵션 지원부터, 스타일 가이드 요청까지… 아직 어도비 XD가 가야 할 길이 멀다. 올해 말쯤 정식 버전이 나온다고 하는데… 급변하는 모바일 시장에서 출발이 조금 늦은 것은 아닌가 싶다. 하지만 XD의 야심작! “Repeat Grid”와 외부 플러그인 없이도 인터렉션을 구현할 수 있는 ‘Protype’, 인터렉션을 직접 시연하는 동영상을 만들 수 있는 ‘레코드’ 등 많은 가능성을 가지고 있기에 기대가 크다. (포토샵 CC 라이브러리라도 빨리 서로 호환됐으면…)


어도비 XD의 기능을 궁금해하는 분들을 위해, 그동안 살펴본 주요 기능을 간략하게 소개한다.


Adobe XD(Adobe Experience Design CC)


웹과 모바일 앱 디자인하기(Create designs for web and mobile apps)

드로밍 및 레이아웃 툴 소개, 모바일 앱 또는 웹에서 중복되는 요소를 디자인할 때 유용한, 어도비 XD의 핵심 기능인 ‘Repeat Grid’ 소개. 각각 또는 모든 오브젝트나 아트보드를 PNG, SVG로 내보내는 기능 소개 (동영상: 7분)




인터랙티브 프로토타입 만들기와 공유하기(Create and share interactive prototypes)

보다 빠른 프로토타입 작업을 위한 키보드 숏컷과 다양한 팁 소개(동영상: 6분)


오브젝트 잠그기 : command+L  

이미지 마스크 : 마스킹할 형태와 이미지를 모두 클릭 후 shift+command+M




그 밖 주요 팁(Pro tips for Adobe Experience Design)

포토샵, 스케치에서 SVG 불러오기(동영상: 2분)

반복되는 디자인 영역을 위한 “Repeat Grid” (동영상: 2분)

웹, iOS, 안드로이드, PNG, SVG로 아셋 내보내기 : (동영상: 2분)

인터랙션 추가하여 프로토타이핑하기, 프리뷰 기능 (동영상: 2분)

프로토타입을 리코딩하여 비디오 파일로 만들기 (동영상: 2분)



* 이 글은 저자 블로그 http://www.kimee.net/2016/03/30/adobexd/ 에도 개재했습니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari