어도비 XD CC 2020 무작정 따라하기

최신 기능을 수록한 가장 완벽한 입문서

김두한 지음

길벗 2020년 06월 24일 출간 종이책 : 2020년 05월 29일 출간

작품소개

책소개

어도비 XD 시작부터 제대로 배운다.
최신 CC 2020 기능을 수록한 가장 완벽한 입문 활용서

어도비 XD CC 2020 버전 출시에 맞춰 새롭게 선보이는 〈어도비 XD CC 2020 무작정 따라하기〉는 사용자가 단 한 권으로, 쉽고 빠르게 어도비 XD를 배울 수 있도록 구성한 책이다. 어도비 XD는 모바일 환경과 다양한 콘텐츠의 발달로 UI/UX 디자인을 쉽고 빠르게 구현하고자 만들어진 프로그램으로, 〈어도비 XD CC 2020 무작정 따라하기〉는 UI/.UX 디자인 작업 전 미리 알아두어야 할 이론을 익히고, 기본 기능과 예제를 무작정 따라하여 기초를 탄탄히 쌓을 수 있으며, 실무 예제를 따라하여 어도비 XD를 제대로 활용할 수 있도록 도와준다.

목차

머리말 003
이 책의 구성 미리보기 004
길벗출판사 홈페이지 소개 006
어도비 XD 설치 Q&A 007

Part 0 시작하기 전에

Part 1 어도비 XD CC 시작하기
01 | 어도비 XD는 어떻게 생겼을까?
1 어도비 XD 홈 화면 살펴보기
2 어도비 XD 디자인 모드 화면 살펴보기
3 프로토타입 모드 화면 살펴보기
02 | 아트보드 만들기
1 새 아트보드 만들기
03 | 쉽고 빠르게 여러 가지 도형 그리기
1 둥근 사각형 그리기
2 타원, 다각형 그리기
04 | 선 도구로 다양한 선 그리기
1 직선 그리기
2 다양한 점선 그리기
05 | 펜 도구와 패스 기능 익히기
1 개곡선과 폐곡선 그리기
2 기준점을 편집하여 변경하기
3 호 형태의 닫힌 폐곡선 그리기
06 | 오브젝트 정렬과 재구성하기
1 오브젝트 정렬하기
2 오브젝트 정렬과 배치하기
3 오브젝트를 앞으로 가져오기
4 오브젝트 편집하기
07 | 색상 적용하기
1 오브젝트에 테두리 만들기
2 오브젝트에 불투명도 지정하기
08 | 그레이디언트 적용하기
1 선형 그레이디언트 적용하기
2 방사형 그레이디언트 적용하기
09 | 이미지 편집하기
1 이미지를 확대, 축소하기
2 이미지에 불투명도 조정하기
10 | 마스크 적용하기
1 오브젝트에 이미지 삽입하기
2 모양으로 마스크 기능으로 마스크 만들기
11 | 반복 그리드 익히기
1 이미지 적용 반복 그리드 사용하기
2 텍스트 적용 반복 그리드 사용하기

Part 2 UI 디자인의 기본, 아이콘 만들기
01 | 알림 아이콘 만들기
1 사각형 도구로 알림 아이콘 본체 만들기
2 선과 원형으로 아이콘 완성하기
02 | 설정 아이콘 만들기
1 슬라이더 형태의 선 그리기
2 선 간격 조정하고 원을 그려 완성하기
03 | 다운로드 버튼 만들기
1 둥근 사각형 만들기
2 다운로드 화살표 만들기
04 | 스테퍼 버튼 만들기
1 둥근 사각형 만들기
2 그레이디언트 적용하기
3 -, + 기호 만들기
05 | 페이지네이션 아이콘 만들기
1 일련 번호가 있는 둥근 사각형 만들기
2 페이지 선택 아이콘 만들기
06 | 온도 조절 아이콘 만들기
1 원형에 테두리와 그림자 효과 만들기
2 온도 문자 입력하기
07 | 달력 아이콘 만들기
1 달력 레이아웃 구성하기
2 달력 문자 입력하기
08 | 스톱워치 버튼 만들기
1 시간 표시창 만들기
2 플레이 버튼 만들기
3 정지 버튼 만들기
09 | 위치 표시 아이콘 만들기
1 위치 표시 아이콘 형태 구성하기
2 그레이디언트로 입체감 표현하기
10 | 음악 플레이 아이콘 만들기
1 LP판 형태의 아이콘 형태 구성하기
2 하이라이트 효과 적용하기
11 | 시계 GUI 아이콘 만들기
1 원형의 시계 형태 만들기
2 시침과 분침 만들기
12 | 열기구 아이콘 만들기
1 타원 형태의 입체 구 만들기
2 하단 몸체 만들기
3 입체 느낌 적용하기
13 | 합격 부적 아이콘 만들기
1 부적 형태 구성하기
2 격자 테두리 만들기
14 | 러닝 거리 아이콘 만들기
1 그리드 눈금자 만들기
2 눈금자 치수 입력하기
15 | 초콜릿 아이콘 만들기
1 초콜릿 형태 구성하기
2 초콜릿 배열하기
16 | 온도계 아이콘 만들기
1 온도계 형태 구성하기
2 눈금자와 수치 입력하기
17 | 태극기 아이콘 만들기
1 태극 문양 만들기
2 건곤감리 구성하기
3 입체 구 만들기

Part 3 UI 디자인 애니메이션 만들기
01 | 서서히 나오는 동그란 점 로딩 UI 디자인하기
1 원형의 점 구성하기
2 로딩 애니메이션 만들기
02 | 위로 열리는 자물쇠 잠금 UI 디자인하기
1 자물쇠 형태의 아이콘 만들기
2 잠금 해제되는 애니메이션 만들기
03 | 신호등이 깜빡이는 제한속도 UI 디자인하기
1 신호등 형태의 아이콘 만들기
2 신호가 작동되는 애니메이션 만들기
04 | 왼쪽에서 오른쪽으로 미는 스위치 UI 디자인하기
1 둥근 사각형의 스위치 버튼 만들기
2 오른쪽으로 밀리는 버튼 애니메이션 만들기
05 | 동그랗게 회전하는 스피너 로딩 UI 디자인하기
1 원형 도형 형태 만들기
2 회전하는 스피너 로딩 애니메이션 만들기
06 | 위로 사라지는 캐쉬 UI 디자인하기
1 입체 캐쉬 이미지 만들기
2 애니메이션 배경 만들기
3 동전이 위로 사라지는 애니메이션 만들기

Part 4웹&앱 페이지 디자인하기
01 | 프로필 만들기
1 원형 오브젝트에 이미지 삽입하기
2 효과 테두리 적용하기
02 | 운동화 상품 페이지 만들기
1 상단 상품 이미지 만들기
2 광고 타이포 구성하기
03 | 피자 주문 팝업창 만들기
1 상품과 상품명 배치하기
2 선택 옵션 디자인하기
04 | 이커머스 화면 만들기
1 메뉴 리스트 구성하기
2 상품 이미지 배치하기
3 상품 정보 표시하기
05 | 카드 팝업창 만들기
1 팝업

출판사 서평

웹과 앱이 함께하는 디자인의 시대
이제 웹디자인과 앱디자인을 별도로 작업하지 않고 동시에 작업해야 하는 UI/UX 디자인의 시대입니다. 모바일 사용자가 늘어나면서 PC 뿐만 아니라 모바일에서도 디자인과 사용자 인터페이스가 동일성을 유지되도록 개발되어야 하기 때문입니다.
어도비 XD(Adobe XD)는 UI/UX 디자이너를 위한 와이어프레임(화면을 구성한 디자인) 제작 도구입니다. 전체 디자인을 어도비 XD라는 하나의 툴을 통해 와이어프레임, UI 디자인, 앱/웹 디자인을 시뮬레이션한 목업과 인터랙티브한 프로토타입으로 빠르게 제작할 수 있습니다. 사용자에게 앱이나 웹을 어떻게 사용하는지 알려주고, 화면의 연결 상태를 정의할 수 있습니다. 와이어프레임 링크를 통해 디자인에 참여한 디자이너 및 개발자 모두가 동일한 페이지에서 디자인 수정을 원활하게 시작할 수 있습니다.

UI/UX 디자인을 위한 어도비 XD

〈어도비 XD CC 2020 무작정 따라하기〉는 어도비 XD 프로그램을 통해 UI/UX 디자인을 배우고자 하는 예비 디자이너의 눈높이에 맞게 기본적인 도구를 활용한 아이콘 디자인과 웹&앱 페이지 디자인, UI 디자인, 앱 디자인에 애니메이션과 인터랙션을 적용한 프로토타이핑을 학습합니다. 어도비 XD의 핵심 기능인 반복 그리드 같은 스타일은 디자인 요소를 반복적으로 사용하는 경우가 많은 웹&앱 디자인에서 유용하게 사용할 수 있습니다.
실제 현장에서 어도비 XD를 사용하고 저자가 어도비 XD의 기본 기능과 더불어 디자인 아트워크와 실무에서 빠르게 적용할 수 있는 기능들을 알려줍니다. 효율적인 디자인 작업을 위해 어도비 XD 매뉴얼 기능과 현장에서 필요로 하는 UX 디자인 개념을 소개함으로써 사용자들이 인터렉티브한 결과물을 만들 수 있도록 구성합니다.
이 책을 통하여 독자 여러분의 UI/UX 디자인에 유용한 도움이 되기를 바랍니다.

작가정보

저자(글) 김두한

저자 : 김두한
세계 3대 디자인 공모전(iF Design Award), Spark Design Award, Pentawards, 국내 디자인 공모전에서 환경부 장관상, 대한상공회의소 회장상, 전국경제인연합회 회장상, Good Design 선정 등 다수의 수상 경력이 있습니다.
한국디자인진흥원에서 주관하는 대한민국디자인전람회 초대 디자이너로. 홍익대학교 대학원에서 브랜드패키지디자인과를 졸업하였습니다. 한일전기, 팬택, 현대통신, 동방메디컬을 거쳐, 현재는 동서울대학교 디자인융합학과 교수로 재직 중입니다. 저서로는 〈포토샵X일러스트레이터를 연동한 작업의 정석〉이 있습니다.