어도비 XD 알아보기
안녕하세요, 소이정입니다.
요즘 UI/UX에서 유용하게 쓰이고 있는 XD에 관해 알아보려고 합니다.
웹 기획자들을 위한 툴에 관해서 소개했을 때도 포함되어 있던 프로그램 중이기도 하죠!
뿐만 아니라 디자이너들도 유용하게 사용하고 있는데요.
무엇보다 어도비 계열이다 보니 포토샵과 일러스트를
속해서 사용하던 분들에겐 익숙할 것 같기도 해요.
그럼 어도비 XD가 무엇인지, 기능은 무엇이 있는지, 프로그램의 기본적인 화면구성은
어떻게 되어있는지까지! 함께 알아보시죠!
어도비 XD란?
어도비에서 출시된 소프트웨어 중 하나로 웹사이트와 모바일 앱, 애니메이션 게임 등 다양한 디자인 작업이 가능합니다. 와이어 프레임과 프로토 타이핑 제작이 가능하며, 하나의 링크를 통해 기획자, 디자이너, 개발자 등 프로젝트에 참여하는 모두가 동일한 페이지에서 공유하고 수정할 수 있다는 점이 제일 큰 장점입니다.
어도비 XD 기능
|
1.
|
사용자 경험 디자인을 빠르게 진행할 수 있음
|
|
|
|
이미지를 포토샵에서 열어 편집할 수 있고, 이미지가 편집되면 자동으로 업데이트 됩니다.
|
|
|
2. |
인터랙티브요소, 모션, 애니메이션 적용하여 프로토타입 제작 가능 |
|
|
|
앱과 웹을 사용하는 흐름과 스타일을 사용자에게 전달할 수 있고 애니메이션도 적용하여 사용자가 직접적으로 경험할 수 있는 프로토타입을 제작할 수 있습니다.
|
|
|
3. |
협업이 가능함 |
|
|
|
프로젝트에 참여하는 모든 팀원이 한 번에 동일한 XD 파일로 작업을 할 수 있으며, 전체적인 작업 과정을 확인할 수 있습니다. 웹페이지로도 내보내기가 가능해 피드백을 받기에도 용이합니다.
|
|
|
4. |
다양한 플러그인 활용 가능 |
|
|
|
개발자 커뮤니티에서 만든 플러그인을 사용하여 워크플로우와 어도비 XD의 기능을 확장할 수 있으며, 팀에서 사용하는 다른 툴과도 연결이 가능해 디자인 작업시간을 단축할 수 있습니다.
|
|
|
5. |
다양한 운영체제 및 언어 |
|
|
세계적으로 쓰이는 어도비 프로그램인 만큼 다양한 운영체제와 언어를 지원합니다. 윈도우와 맥은 물론, XD 모바일앱을 이용할 수 있습니다. 언어는 한국어, 영어, 프랑스어, 독일어, 일본어, 중국어, 포르투갈어(브라질) 및 스페인어를 지원합니다.
|
||
어도비 XD의 화면 구성
제일 처음 어도비 XD를 실행하면 나오는 화면입니다. XD 내의 홈인데요. 파일을 열거나 작업하고자 하는 화면의 크기를 정하는 등의 기능을 수행할 수 있습니다.
① 새 파일 - 새로운 XD 파일 생성하기 가능
② 홈 - 어도비 XD 실행 시 나오는 파일
③ 나와 공유됨 - 누군가와 클라우드 문서 공유 가능
④ 링크 관리 - 어도비 XD 내 작업에 대한 링크 공유 가능
⑤ 새 문서 시작 - 아트보드의 종류를 선택하여 크기를 지정할 수 있음
어도비 XD의 작업 화면
아트보드의 크기를 설정한 후 나오는 작업 화면인데요. 본격적으로 여러 작업을 진행할 수 있는 화면입니다. 어도비 계열 편집 프로그램을 사용해 봤다면 익숙할 것 같습니다.
① 도구 패널 - 선택 도구, 사각형 도구, 타원 도구, 다각형 도구, 선도구, 펜도구, 텍스트 도구, 아트보드, 확대/축소 기능이 포함되어 있는 패널
② 아트보드 - 디자인 화면이 이루어지는 작업 화면, 툴패널을 통해 사이즈 및 개수 조정 가능
③ 옵션 패널 - 아트보드 크기, 텍스트 및 도형 옵션, 그리드 설정 등 디자인 작업이 이루어지는 오브젝트들의 옵션을 확인하고 조정할 수 있는 패널
어도비 XD의 추가 기능
와이어 프레임 작성과 더불어 디자인 작업까지 가능한 프로그램이다 보니, 다른 와이어프레임툴이나 디자인 툴과 다르게 기획과 디자인을 한 번에 진행할 수 있는데요.
|
1.
|
UI 아이콘
|
|
|
|
아이콘 스톡을 사용할 수도 있지만, 직접 그리고 싶을 경우 도형 도구를 이용하는 방법으로 제작이 가능합니다.
|
|
|
2. |
애니메이션 제작 |
|
|
|
로딩 시 돌아가는 아이콘 등 움직임이 필요한 애니메이션 아이콘 등을 디자인할 수 있습니다.
|
|
|
3. |
인터랙션 적용 |
|
|
|
웹이나 앱에서는 버튼을 클릭하거나 페이지를 클릭했을 때 나타나는 팝업이나 페이지를 확인하는 것도 중요한데요. XD에서는 이러한 팝업창이나 페이지를 연결해 확인할 수 있어 좋습니다.
|
|
|
4. |
UI 디자인 |
|
|
|
다양한 화면의 UI 디자인을 통해 전체적으로 통일된 디자인 흐름을 구성할 수 있습니다. 화면의 컬러나 아이콘, 레이아웃 등을 포함하여 시각적으로도 연관성을 높일 수 있습니다.
|
|
여기까지 어도비 XD에 관해 간단하게 알아보았는데요.
직관적인 기능으로 손쉽게 사용할 수 있으니 해당 프로그램을 사용해 보셔도 좋을 것 같아요.
다음엔 XD와 관련된 꿀팁으로 또 찾아오겠습니다.
감사합니다.
©SOIJEONG