gabiadesign | 디자인실 adobe XD 전파 교육
32812
single,single-post,postid-32812,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
MAIN_01

디자인실 adobe XD 전파 교육

2019년 협업 부서와의 첫 Adobe XD전파교육이 있었습니다.
올해 2019밀접하게 협업해야 하는 분들과 워밍업? 시간이 된 것도 같고 그렇습니다.

디스플레이 환경의 변화로 넓어지는 디자인 화면, 이에 맞는 폰트들도 크게 변화하고 있습니다.
한쪽 파트에서만 대응이 어렵기 때문에 달라지는 환경과 요구에 빠르게 대응할 수 있도록 다양한 논의가 정기적으로 필요하다고 봅니다.

XD의 주요 기능과 UX의 최적화된 기능들이 어떤 것들이 있는지 몇 가지 짚어 봅니다.

 

 

// Adobe XD 주요 기능

xd-detailsvideo-1-878x494

 

 

 

1/ 시간을 단축시켜주는 툴 활용
캔버스에 수백 개의 아트보드가 열려 있더라도 확대/축소 시 즉각적으로 반응합니다. 반복 그리드와 같은 툴을 사용하여 아트보드에서 원하는 만큼 목록, 사진 갤러리 등의 다양한 요소를 신속하게 복제할 수 있습니다. 변경 내용은 그리드 전체에 반영됩니다.

2/ 몇 번의 클릭으로 디자인을 프로토타입으로 변환
아트보드 간을 와이어로 드래그하여 프로토타입의 완성도를 높일 수 있습니다. 키보드, 메뉴, 대화 상자의 아트보드를 복제할 필요 없이 오버레이를 만들어 콘텐츠를 스택할 수 있으므로 사실적인 경험을 제작할 수 있습니다. 또한 머리글과 바닥글의 위치를 고정시켜 사용자가 스크롤해도 항상 표시되도록 할 수 있습니다.

3/ 다른 앱과 연동

처음부터 디자인을 시작하거나 Adobe Photoshop CC, Illustrator CC, Photoshop Sketch 파일을 앱에서 열어 가져올 수 있습니다. 파일은 아트보드와 레이어를 그대로 유지하면서 XD 문서로 자동 변환됩니다.

4/ 모바일 디바이스에서 미리 보기

디자인하고자 하는 실제 화면에서 프로토타입을 미리 보면서 경험이 원하는 방식으로 작동되는지 확인할 수 있습니다. 데스크탑에서 변경한 내용은 Android 또는 iOS 디바이스에 반영됩니다.

 

 

 

// UX의 미래에 최적화된 기능

1/ 고급 애니메이션 제작
아트보드에서 이동, 크기 조정, 흐림 효과 등의 미세한 인터랙션에 자동으로 애니메이션을 적용할 수 있습니다. XD의 에셋과 아트보드를 Adobe After Effects CC 프로젝트로 내보내 전문적인 애니메이션을 만들 수 있습니다

 

2/ 음성 지원 프로토타입
음성 트리거와 음성 재생을 통해 프로토타입 인터랙션을 구현하여 스마트한 도우미 역할을 하는 경험 등 화면의 한계를 넘어서는 차세대 툴을 제작할 수 있습니다.

 

3/ 심볼 이용
자주 사용하는 버튼, 로고 등의 요소를 심볼로 변환하면 필요할 때마다 아트보드에 드래그하여 놓고 자유롭게 재사용할 수 있습니다. 하나의 심볼을 업데이트하면 해당 심볼이 사용된 모든 인스턴스가 업데이트됩니다. 파일 간에 심볼을 복사해 붙여넣으면 연결이 그대로 유지됩니다.

4/ 앱에서 에셋 사용
Creative Cloud Libraries와 연계하여 Photoshop 및 Illustrator에서 만든 이미지, 색상, 문자 스타일 등을 적용하여 어디에서나 혼합하고 재사용할 수 있습니다.

 

5/ 신속하게 화면 크기 변경
반응형 크기 조정 기능을 사용하면 다양한 화면에 맞게 아트보드의 오브젝트 그룹 크기를 자동으로 조정할 수 있으므로 번거로운 수동 변경에 걸리는 시간을 줄이고 디자인 작업에 더 많은 시간을 할애할 수 있습니다.

 

 

// 교육에 집중하는 모습도 담아봅니다. 

0Y3A0536

0Y3A0542

 

 

// 참석하신 몇 분들과 인터뷰를 해보았습니다.

A씨: 
프로토타입은 액션 등을 정의하기에 유용해보입니다.
또, 내보내기와 같은 기능으로 공통 가이드 파일을 만들어 URL을 통해 상시 접근할 수 있으면 유지보수에 더 편리해지지 않을까요?
(하이웍스면 하이웍스 공통스타일, 가비아는 가비아)
교육 준비에 고생하셨습니다. 감사합니다.

 

B씨:
다소 속도가 빠르긴 했지만 숙달된 조교의 도움 주셔서 감사하다.
어떻게 협업에 잘 사용해볼지 고민해봐야겠다.

D씨:
관심 있는 도구였는데 세세하게 알아볼 기회가 된 거 같아 유익했습니다.
실무에도 적용해봤으면 좋겠네요.


의견 주셔서 감사하고 참고하도록 하겠습니다.^^
앞으로도 관련 부서들과의 적극적인 자유로운 소통이 이루어져 업무와 이해관계가 원할하도록 할 예정입니다.
교육 준비하느라고 고생한 디자인실원들도 파이팅!

 

 

jjang

Glory|Gabia Designer