소장자료

UX 디자이너가 꼭 알아야 할 Adobe XD의 모든 것

Adobe XD는 UX 프로토타이핑 분야의 복잡하고 다양한 요구 사항을 훌륭하게 충족시킬 수 있도록 빠르고 쉬우면서도 강력한 성능을 목표로 제작된 응용 프로그램입니다. 이러한 특성은 여러 그래픽 응용 프로그램을 이용해 UX/UI 디자인을 제작했던 기존의 과정을 획기적으로 개선해줌은 물론, 경쟁 제품들에 비해 월등히 접근하기 쉬운 난이도와 함께 운영체제 환경을 뛰어넘는 탁월한 호환성까지 갖추고 있는 등 가장 진보한 프로토타이핑 소프트웨어라고 부르기에 충분한 면모를 지니고 있습니다.

이 책은 Adobe XD의 모든 기능을 가장 쉬운 방법으로 소개하고, 이러한 기능들이 어떠한 목적을 가지고 설계되어 있는지를 함께 설명함으로써 독자에게 해당 과정을 암기하는 것이 아닌 원리를 이해하게 할 수 있도록 돕고 있습니다. 더불어 자세하고 긴 분량의 예제를 제공함으로써 눈으로 읽는 것만으로도 해당 프로그램을 이해하고 나아가 UX/UI 디자인에 대한 사례와 디자인 팁 등을 엿볼 수 있도록 구성하였습니다. 소프트웨어의 활용 능력 습득은 물론 UX/UI 디자인의 시각을 탄탄히 할 수 있는 가이드로 적합한 역할을 할 수 있을 것입니다.

이 책의 특징
- 실습 및 예제의 비중을 높여 이해와 반복 학습을 통해 쉽게 익힐 수 있습니다.
- 자세한 이미지는 물론 디자인적 조언과 트렌드를 반영한 예시들로 활용도를 높였습니다.
- 반복되는 내용도 꾸준히 표기하여 책을 이리저리 찾지 않아도 쉽게 학습에 집중할 수 있습니다.

이 책이 필요한 독자
- 프로토타이핑 또는 와이어프레임을 신속히 만들고자 하는 기획자
- 복잡한 UX 프로젝트의 디자인 제작 및 협업이 필요한 디자이너
- 빠른 소통으로 프로젝트의 핵심 목표를 구체화하려는 개발자

UX 디자이너가 꼭 알아야 할 Adobe XD의 모든 것



Adobe XD는 UX 프로토타이핑 분야의 복잡하고 다양한 요구 사항을 훌륭하게 충족시킬 수 있도록 빠르고 쉬우면서도 강력한 성능을 목표로 제작된 응용 프로그램입니다. 이러한 특성은 여러 그래픽 응용 프로그램을 이용해 UX/UI 디자인을 제작했던 기존의 과정을 획기적으로 개선해줌은 물론, 경쟁 제품들에 비해 월등히 접근하기 쉬운 난이도와 함께 운영체제 환경을 뛰어넘는 탁월한 호환성까지 갖추고 있는 등 가장 진보한 프로토타이핑 소프트웨어라고 부르기에 충분한 면모를 지니고 있습니다.



이 책은 Adobe XD의 모든 기능을 가장 쉬운 방법으로 소개하고, 이러한 기능들이 어떠한 목적을 가지고 설계되어 있는지를 함께 설명함으로써 독자에게 해당 과정을 암기하는 것이 아닌 원리를 이해하게 할 수 있도록 돕고 있습니다. 더불어 자세하고 긴 분량의 예제를 제공함으로써 눈으로 읽는 것만으로도 해당 프로그램을 이해하고 나아가 UX/UI 디자인에 대한 사례와 디자인 팁 등을 엿볼 수 있도록 구성하였습니다. 소프트웨어의 활용 능력 습득은 물론 UX/UI 디자인의 시각을 탄탄히 할 수 있는 가이드로 적합한 역할을 할 수 있을 것입니다.



이 책의 특징

- 실습 및 예제의 비중을 높여 이해와 반복 학습을 통해 쉽게 익힐 수 있습니다.

- 자세한 이미지는 물론 디자인적 조언과 트렌드를 반영한 예시들로 활용도를 높였습니다.

- 반복되는 내용도 꾸준히 표기하여 책을 이리저리 찾지 않아도 쉽게 학습에 집중할 수 있습니다.



이 책이 필요한 독자

- 프로토타이핑 또는 와이어프레임을 신속히 만들고자 하는 기획자

- 복잡한 UX 프로젝트의 디자인 제작 및 협업이 필요한 디자이너

- 빠른 소통으로 프로젝트의 핵심 목표를 구체화하려는 개발자



독자대상

초중급



예제파일 다운로드

https://github.com/bjpublic/adobe_xd_guide/



이 책에서 소개하는 Adobe XD는 이러한 시대적 요구에 맞는 효율과 정확성 및 신속성 면에서 현재까지 소개된 프로토타이핑 소프트웨어 중 균형이 가장 잘 잡혀 있는 툴이라고 할 수 있으며, 디자인과 프로토타이핑을 하나의 소프트웨어 안에서 신속하게 처리할 수 있어 경쟁 소프트웨어 중에서도 독보적으로 높은 생산성을 지니고 있다.



이 책은 Adobe XD에 탑재된 모든 기능과 단축키를 소개하고, 따라하기 부분을 통해 예제를 함께 만들어 보며 주요 기능의 복습과 응용을 익힐 수 있도록 구성되어 있다. 각 항목마다 해당 이미지들을 포함하고 있으며, 특히 UX 디자인 분야의 초보자들을 위해 낯선 용어의 해설과 UX 상식을 알려 주는 주석을 추가하였다. 여러분도 이 책과 함께 그 효용을 자신의 것으로 만들어 가길 바란다.

1 Adobe XD 기초학습



Adobe XD 소개(프로토타이핑)

Adobe XD란?

시스템 요구 사항



워크플로



인터페이스

Adobe XD 실행

Adobe XD 시작 시 나타나는 "시작 창"

Adobe XD 인터페이스



디자인 모드

아트보드

캔버스 탐색(패닝, 확대/축소)

레이어

오브젝트의 선택 및 이동

스마트 가이드와 정렬

기본도형 그리기

변형도형 그리기(펜 툴 사용)

텍스트 작업

오브젝트 스타일

색상 선택

그레이디언트

오브젝트 스타일 복사

오브젝트 크기 조정 및 회전

오브젝트 정렬

오브젝트 결합 및 마스크

반복 그리드

에셋

외부 에셋 가져오기

에셋 내보내기



프로토타입 모드

프로토타입 모드 진입하기

홈 화면 설정하기

버튼에 화면 전환 적용하기

화면 전환 효과 적용/변경하기

프로토타입 미리보기

실시간 모바일 미리보기



공유

프로토타입 게시하기

PC 웹 공유 화면 구성



2 예시 따라하기



기초 오브젝트 만들기

개요

참고

버튼 : 동그라미 버튼

버튼 : 네모 버튼

버튼 : 둥근 사각형 버튼

버튼: 동영상 플레이 버튼

카드 타입 : 네모 형태의 카드 타입

카드 타입 : 사진과 텍스트가 혼합된 카드 타입

카드 타입 : 모서리가 등군 카드 타입

카드 타입 : 갤러리(그리드) 형태의 카드 타입

데이터 테이블

테이블 : 스텝퍼(가로)

테이블 : 스템퍼(세로)

메뉴 : 탭 버튼

커스텀 UI : 프로필 화면

커스텀 UI : 체크리스트

커스텀 UI : 프로그레스 바

커스텀 UI : 숫자 키패드

커스텀 UI : 원형 타이퍼 그래프



여행 커뮤니케이션 앱 만들기

새로운 XD 파일 생성

메인 페이지 만들기

메뉴 리스트 만들기

여행지 뉴스피드 페이지 만들기

여행지 상세페이지 만들기

여행지 이미지 팝업 만들기

테마 추천 여행지 페이지 만들기

마이페이지 만들기

내 프로필 사진 확대 팝업 페이지 만들기

알림 팝업 만들기

버튼에 페이지 이동 반영하기

프로토타입 미리보기

공유하기



부록

단축키

팁