<어도비 XD CC 2020 무작정 따라하기>는 어도비 XD 프로그램을 통해 UI/UX 디자인을 배우고자 하는 예비 디자이너의 눈높이에 맞게 기본적인 도구를 활용한 아이콘 디자인과 웹&앱 페이지 디자인, UI 디자인, 앱 디자인에 애니메이션과 인터랙션을 적용한 프로토타이핑을 학습합니다. 어도비 XD의 핵심 기능인 반복 그리드 같은 스타일은 디자인 요소를 반복적으로 사용하는 경우가 많은 웹&앱 디자인에서 유용하게 사용할 수 있습니다. 이 책을 통하여 독자 여러분의 UI 디자인에 유용한 도움이 되기를 바랍니다.
세계 3대 디자인 공모전(iF Design Award 3회), Spark Design Award, Pentawards, 국내 디자인 공모전에서 환경부 장관상, 대한상공회의소 회장상, 전국경제인연합회 회장상, Good Design 선정 등 다수의 수상 경력이 있다. 한국디자인진흥원에서 주관하는 대한민국디자인전람회 초대 디자이너로. 홍익대학교 대학원에서 브랜드패키지디자인과를 졸업하였다. 한일전기, 팬택, 현대통신, 동방메디컬을 거쳐, 현재는 동서울대학교 디자인융합학과 교수로 재직 중이다. 저서로는 『어도비 XD CC 2020 무작정 따라하기』, 『포토샵X일러스트레이터를 연동한 작업의 정석』이 있다.
PART 0 시작하기 전에
CHAPTER 01 어도비 XD를 학습하기 전에 미리 알아두기
01 와이어프레임과 프로토타이핑 제작 도구
02 어도비 XD 기능 알아두기
03 예제 작업 시 필요한 용어 확인하기
CHAPTER 02 어도비 XD 설치하기
01 어도비 XD 최신 버전(2020) 설치하기
PART 1 어도비 XD 시작하기
CHAPTER 01 어도비 XD는 어떻게 생겼을까?
01 어도비 XD 홈 화면 살펴보기
02 어도비 XD 디자인 모드 화면 살펴보기
03 프로토타입 모드 화면 살펴보기
CHAPTER 02 아트보드 만들기
01 새 아트보드 만들기
CHAPTER 03 쉽고 빠르게 여러 가지 도형 그리기
01 둥근 사각형 그리기
02 타원, 다각형 그리기
CHAPTER 04 선 도구로 다양한 선 그리기
01 직선 그리기
02 다양한 점선 그리기
CHAPTER 05 펜 도구와 패스 기능 익히기
01 개곡선과 폐곡선 그리기
02 기준점을 편집하여 변경하기
03 호 형태의 닫힌 폐곡선 그리기
CHAPTER 06 오브젝트 정렬과 재구성하기
01 오브젝트 정렬하기
02 오브젝트 정렬과 배치하기
03 오브젝트를 앞으로 가져오기
04 오브젝트 편집하기
CHAPTER 07 색상 적용하기
01 오브젝트에 테두리 만들기
02 오브젝트에 불투명도 지정하기
CHAPTER 08 그레이디언트 적용하기
01 선형 그레이디언트 적용하기
02 방사형 그레이디언트 적용하기
CHAPTER 09 이미지 편집하기
01 이미지를 확대, 축소하기
02 이미지에 불투명도 조정하기
CHAPTER 10 마스크 적용하기
01 오브젝트에 이미지 삽입하기
02 모양으로 마스크 기능으로 마스크 만들기
CHAPTER 11 반복 그리드 익히기
01 이미지 적용 반복 그리드 사용하기
02 텍스트 적용 반복 그리드 사용하기
PART 2 UI 디자인의 기본, 아이콘 만들기
CHAPTER 01 알림 아이콘 만들기
01 사각형 도구로 알림 아이콘 본체 만들기
02 선과 원형으로 아이콘 완성하기
CHAPTER 02 설정 아이콘 만들기
01 슬라이더 형태의 선 그리기
02 선 간격 조정하고 원을 그려 완성하기
CHAPTER 03 다운로드 버튼 만들기
01 둥근 사각형 만들기
02 다운로드 화살표 만들기
CHAPTER 04 스테퍼 버튼 만들기
01 둥근 사각형 만들기
02 그레이디언트 적용하기
03 -, + 기호 만들기
CHAPTER 05 페이지네이션 아이콘 만들기
01 일련 번호가 있는 둥근 사각형 만들기
02 페이지 선택 아이콘 만들기
CHAPTER 06 온도 조절 아이콘 만들기
01 원형에 테두리와 그림자 효과 만들기
02 온도 문자 입력하기
CHAPTER 07 달력 아이콘 만들기
01 달력 레이아웃 구성하기
02 달력 문자 입력하기
CHAPTER 08 스톱워치 버튼 만들기
01 시간 표시창 만들기
02 플레이 버튼 만들기
03 정지 버튼 만들기
CHAPTER 09 위치 표시 아이콘 만들기
01 위치 표시 아이콘 형태 구성하기
02 그레이디언트로 입체감 표현하기
CHAPTER 10 음악 플레이 아이콘 만들기
01 LP판 형태의 아이콘 형태 구성하기
02 하이라이트 효과 적용하기
CHAPTER 11 시계 GUI 아이콘 만들기
01 원형의 시계 형태 만들기
02 시침과 분침 만들기
CHAPTER 12 열기구 아이콘 만들기
01 타원 형태의 입체 구 만들기
02 하단 몸체 만들기
03 입체 느낌 적용하기
CHAPTER 13 합격 부적 아이콘 만들기
01 부적 형태 구성하기
02 격자 테두리 만들기
CHAPTER 14 러닝 거리 아이콘 만들기
01 그리드 눈금자 만들기
02 눈금자 치수 입력하기
CHAPTER 15 초콜릿 아이콘 만들기
01 초콜릿 형태 구성하기
02 초콜릿 배열하기
CHAPTER 16 온도계 아이콘 만들기
01 온도계 형태 구성하기
02 눈금자와 수치 입력하기
CHAPTER 17 태극기 아이콘 만들기
01 태극 문양 만들기
02 건곤감리 구성하기
03 입체 구 만들기
PART 3 UI 디자인 애니메이션 만들기
CHAPTER 01 서서히 나오는 동그란 점 로딩 UI 디자인하기
01 원형의 점 구성하기
02 로딩 애니메이션 만들기
CHAPTER 02 위로 열리는 자물쇠 잠금 UI 디자인하기
01 자물쇠 형태의 아이콘 만들기
02 잠금 해제되는 애니메이션 만들기
CHAPTER 03 신호등이 깜빡이는 제한속도 UI 디자인하기
01 신호등 형태의 아이콘 만들기
02 신호가 작동되는 애니메이션 만들기
CHAPTER 04 왼쪽에서 오른쪽으로 미는 스위치 UI 디자인하기
01 둥근 사각형의 스위치 버튼 만들기
02 오른쪽으로 밀리는 버튼 애니메이션 만들기
CHAPTER 05 동그랗게 회전하는 스피너 로딩 UI 디자인하기
01 원형 도형 형태 만들기
02 회전하는 스피너 로딩 애니메이션 만들기
CHAPTER 06 위로 사라지는 캐쉬 UI 디자인하기
01 입체 캐쉬 이미지 만들기
02 애니메이션 배경 만들기
03 캐쉬가 위로 사라지는 애니메이션 만들기
PART 4 웹&앱 페이지 디자인하기
CHAPTER 01 프로필 만들기
01 원형 오브젝트에 이미지 삽입하기
02 효과 테두리 적용하기
CHAPTER 02 운동화 상품 페이지 만들기
01 상단 상품 이미지 만들기
02 광고 타이포 구성하기
CHAPTER 03 피자 주문 팝업창 만들기
01 상품과 상품명 배치하기
02 선택 옵션 디자인하기
CHAPTER 04 이커머스 화면 만들기
01 메뉴 리스트 구성하기
02 상품 이미지 배치하기
03 상품 정보 표시하기
CHAPTER 05 카드 팝업창 만들기
01 팝업 버튼 구성하기
02 그림자 효과 적용하기
CHAPTER 06 지출 내역 인포그래픽 만들기
01 도넛 형태의 그래프 만들기
02 수치 데이터 입력하기
CHAPTER 07 방사형 그래프 만들기
01 방사형 오브젝트 만들기
02 선형 그래프 추가하기
CHAPTER 08 세일 팝업창 만들기
01 도트 패턴 만들기
02 세일 문자 구성하기
CHAPTER 09 계산기 만들기
01 계산기 형태 디자인하기
02 버튼 문자 작성하기
CHAPTER 10 인테리어 앱 만들기
01 레이아웃 구성하기
02 이미지 확대 아이콘 작성하기
PART 5 앱 디자인에 인터랙션 적용하기
CHAPTER 01 좌우로 드래그하는 스파클링 와인 팝업창 만들기
01 원형 드래그 버튼 만들기
02 하단 드래그 버튼 만들기
03 탭 버튼 만들기
04 드래그하면 표시되는 화면 만들기
05 스와이프 인터랙션 적용하기
CHAPTER 02 클릭하면 나타나는 로그인 화면 만들기
01 로그인 화면 만들기
02 초기 배경 화면 만들기
03 오버레이 효과 적용하기
CHAPTER 03 터치하면 키보드가 위로 올라오는 여행 앱 만들기
01 입력 검색창 만들기
02 슬라이드 되어 올라오는 키보드 인터랙션 적용하기
CHAPTER 04 버튼을 터치하면 절단되는 팝업 영수증 만들기
01 팝업 영수증 형태 구성하기
02 영수증 문자 입력하기
03 절단되는 영수증 만들기
CHAPTER 05 문자가 표시되는 헤드폰 구매 페이지 만들기
01 방사형 구매 상품 레이아웃 구성하기
02 시간 간격을 두고 표시되는 문자 구성하기
PART 6 사용자 편의를 위한 앱 UI 디자인하기
CHAPTER 01 메시지 앱 화면 UI 디자인하기
01 메시지 앱 상단 메뉴 화면 UI 디자인하기
02 메시지 앱 하단 입력창 화면 UI 디자인하기
CHAPTER 02 카메라 앱 화면 UI 디자인하기
01 카메라 앱 촬영 화면 UI 디자인하기
02 카메라 앱 편집 화면 UI 디자인하기
CHAPTER 03 커피 앱 주문 화면 UI 디자인하기
01 커피 앱 주문 화면 상세 메뉴 UI 디자인하기
02 커피 앱 주문 화면 전체 메뉴 UI 디자인하기
CHAPTER 04 조명 앱 화면 UI 디자인하기
01 조명 앱 메인 화면 UI 디자인하기
02 조명 앱 설정 화면 UI 디자인하기
CHAPTER 05 스마트홈 앱 조절 화면 UI 디자인하기
01 스마트홈 앱 난방 제어 조절 화면 UI 디자인하기
02 스마트홈 앱 가스 제어 조절 화면 UI 디자인하기
03 스마트홈 앱 엘리베이터 호출 화면 UI 디자인하기
CHAPTER 06 마이크 녹음 앱 화면 UI 디자인하기
01 마이크 화면 UI 디자인하기
02 녹음 화면 UI 디자인하기
CHAPTER 07 알람 앱 예약 화면 UI 디자인하기
01 알람 앱 예약 확인 화면 UI 디자인하기
02 알람 앱 예약 설정 화면 UI 디자인하기
CHAPTER 08 날씨 앱 안내 화면 UI 디자인하기
01 날씨 앱 ‘날씨 맑음’ 안내 화면 UI 디자인하기
02 날씨 앱 ‘날씨 흐림’ 안내 화면 UI 디자인하기
03 날씨 앱 ‘날씨 비옴’ 안내 화면 UI 디자인하기
PART 7 실무 프로젝트 활용하기
CHAPTER 01 러닝 앱 화면 UI 디자인과 인터랙션 적용하기
01 러닝 앱 시작 화면 UI 디자인하기
02 러닝 앱 상세 보기 화면 UI 디자인하기
03 러닝 앱 활동 화면 UI 디자인하기
04 러닝 앱 인터랙션 적용하기
CHAPTER 02 음악 앱 화면 UI 디자인과 인터랙션 적용하기
01 음악 앱 재생 목록 UI 디자인하기
02 음악 앱 재생 화면 UI 디자인하기
03 음악 앱 볼륨 조절 인터랙션 적용하기
CHAPTER 03 앱 메뉴 화면 UI 디자인과 인터랙션 적용하기
01 앱 메뉴 화면 UI 디자인하기
02 앱 메뉴 화면 오버레이 인터랙션 적용하기
CHAPTER 04 배터리 충전 화면 UI 디자인과 인터랙션 적용하기
01 배터리 충전 화면 UI 디자인하기
02 배터리 충전 화면 인터랙션 적용하기
CHAPTER 05 공유 자전거 앱 화면 UI 디자인과 인터랙션 적용하기
01 공유 자전거 앱 시작 화면 UI 디자인하기
02 공유 자전거 앱 위치 공유 화면 UI 디자인하기
03 공유 자전거 앱 인터랙션 적용하기
