어도비 XD CC: 기본편+활용편

웹디자이너를 위한 UX/UI 디자인 기초

임선주 지음

한빛미디어 2021년 05월 31일 출간 종이책 : 2021년 04월 30일 출간

작품소개

책소개

UX/UI 디자인 기초 이론부터 XD를 활용한 프로토타입 제작까지,
웹디자이너를 위한 가장 완벽한 레시피

웹디자인에 꼭 필요한 UX/UI 디자인 기초 이론부터 프로토타입 제작 도구인 XD 활용법까지 제대로 배울 수 있습니다. UX/UI 디자인 기획과 웹디자인 워크플로우를 먼저 이해한 후 XD의 기본&핵심 기능을 익혀 다양한 실무 활용 예제로 프로토타입을 직접 제작해봅니다. XD 최신 버전에 완벽히 대응하였으며, 기본 기능과 활용법을 완벽하게 마스터할 수 있는 3단계 학습 방법인 [기능 실습] - [한눈에 실습] - [실무 실습]의 구성은 누구나 XD를 제대로 배워 바로 써먹을 수 있도록 도와줍니다. 이 책 한 권이면 예비 웹디자이너가 필요한 것을 모두 학습할 수 있습니다.

어떤 독자를 위한 책인가?
ㆍ 예비 웹디자이너 또는 실무에 막 입문한 신입 웹디자이너
ㆍ XD를 활용해 업무 효율을 높이고 싶은 1~3년 차 웹디자이너
ㆍ 워크플로우를 이해해 웹디자이너와 원활한 소통을 하고 싶은 기획자, 개발자, 디자이너
ㆍ 프로토타입을 직접 만들고 싶은 기획자, 개발자, 디자이너

목차

PART 01. 기초가 튼튼해지는 XD 기본편

CHAPTER 01. UX/UI 디자인을 기획하다

LESSON 01. UX/UI 디자인 알아보기 : UX/UI 개념과 프로세스 이해하기
UX 개념과 과정 이해하기
UI 개념과 설계 지침 이해하기
앱과 웹, 반응형 웹 이해하기
UX/UI 개발 프로세스 한눈에 살펴보기

LESSON 02. 벤치마킹 : 사용자의 요구와 콘텐츠 내용 분석하기
벤치마킹 이해하기
다양한 벤치마킹 사례 살펴보기

LESSON 03. 아이디어 도출 : 주제에 맞는 아이디어 정리하기
아이디어 도출 이해하기

LESSON 04. 구조 전략 설계 : 콘셉트를 시각화하기
콘셉트 시각화 이해하기
콘셉트 시각화 한눈에 살펴보기

LESSON 05. 기술적 구현 : 스토리보드 작성하기
스토리보드 이해하기
와이어프레임 작성하기
스토리보드 작성하기

LESSON 06. 목업 : 개발 전 디자인 결과물 만들어보기
목업 이해하기

LESSON 07. 비주얼 디자인 프로토타이핑 : 프로토타입 이해하고 만들기
프로토타이핑 이해하기
프로토타이핑 도구 알아보기

CHAPTER 02. UX/UI 디자인을 제작하다

LESSON 01. XD, 어떻게 생겼지 : XD 실행 화면 살펴보기
XD 워크플로우 이해하기
XD 시작/기본 화면 알아보기
도구 이름과 기능 살펴보기
속성 관리자 살펴보기

LESSON 02. XD 기본 도구 다루기 : 아트보드와 레이어 조작하기
아트보드 다루기
[간단 실습] 아트보드 만들고 이름 변경하기
[간단 실습] 아트보드 추가하고 삭제하기
[간단 실습] 아트보드 정렬하고 옮기기
[간단 실습] 아트보드에 색 적용하기
[간단 실습] 아트보드 확대/축소하기
[간단 실습] 단축키로 아트보드 보기 설정하기
레이어 다루기
[간단 실습] 레이어 정렬하고 그룹 만들기
[간단 실습] 레이어 이름 변경하기
[간단 실습] 레이어 복제하기
[간단 실습] 레이어 순서 바꾸기
[간단 실습] 레이어 잠그기, 숨기기, 삭제하기
[간단 실습] 레이어 내보내기
[간단 실습] 포토샵에서 이미지 편집해 XD로 불러오기

LESSON 03. XD 기본 오브젝트 다루기 : 도형과 선 그리고 색 적용하기
오브젝트 다루기
[간단 실습] 사각형 그리고 색 적용하기
[간단 실습] 사각형 모서리 수정하기
[간단 실습] 사각형 테두리 수정하기
[간단 실습] 원, 다각형 그리기
[간단 실습] 선 그리고 수정하기
펜 도구 다루기
[간단 실습] 펜 도구로 그리기
[한눈에 실습] 펜 도구로 열린 도형(직선) 그리기
[한눈에 실습] 펜 도구로 닫힌 도형(직선) 그리기
[간단 실습] 펜 도구로 열린 도형(곡선) 그리기
[간단 실습] 펜 도구로 닫힌 도형(곡선) 그리기
[한눈에 실습] 베지어 게임 사이트 활용해 패스 그리기
[간단 실습] 도형 오브젝트 이동하고 복제하기
[한눈에 실습] 오브젝트에 불투명도, 그림자, 배경 흐림 효과 적용하기
오브젝트 정렬 알아보기
[간단 실습] 오브젝트 상단, 하단 정렬하기
[간단 실습] 오브젝트 왼쪽, 오른쪽 정렬하기
오브젝트 순서 알아보기
[간단 실습] 오브젝트 순서 바꾸기
그레이디언트 알아보기
[간단 실습] 오브젝트에 그레이디언트 적용하기
[간단 실습] 그레이디언트 수정하기
[간단 실습] 그레이디언트 추가하고 삭제하기
오브젝트 병합 알아보기
[간단 실습] 오브젝트 병합하기
[한눈에 실습] 오브젝트 병합하여 톱니바퀴 만들기
3D 변형 기능 알아보기
3D 캔버스 컨트롤 살펴보기
[간단 실습] 캔버스 컨트롤로 오브젝트 3D 변형하기
[간단 실습] 회전 수치를 입력해 오브젝트 3D 변형하기
[한눈에 실습] X축 변형하기
[한눈에 실습] Y축 변형하기
[한눈에 실습] Z축 변형하기
[한눈에 실습] X, Y축 함께 변형하기
[간단 실습] 3D 변형 기능으로 오브젝트에 원근감 표현하기

LESSON 04. XD 기본 도구 활용하기 : 문자 입력하고 그리드 활용하기
문자 도구 다루기
[간단 실습] 문자 입력하기
[간단 실습] 문자에 다양한 속성 적용하기
[간단 실습] 플러그인 설치해 더미 텍스트 입력하기
그리드 다루기
[간단 실습] 레이아웃 그리드 만들기
[간단 실습] 반복 그리드(행) 활용하기
[간단 실습] 반복 그리드(오브젝트) 활용하기

LESSON 05. XD 이미지 편집하기 : 이미지 삽입하고 마스크 적용하기
[간단 실습] 이미지 삽입하기
[간단 실습] 영역 지정하여 이미지 삽입하기
[간단 실습] 이미지 영역의 모양 변경하고 삽입한 이미지 교체하기
[간단 실습] 삽입한 이미지를 포토샵에서 편집하기
[간단 실습] 벡터 이미지를 가져와 편집하기
이미지 혼합 모드 알아보기
[간단 실습] 혼합 모드 실행하기
혼합 모드 미리 보기
마스크 알아보기
[간단 실습] 마스크 적용하여 부채꼴 모양 만들기
[간단 실습] 마스크 해제하기
[한눈에 실습] 마스크 적용해 도트 패턴 하트 만들기

LESSON 06. XD 애니메이션 적용하기 : 프로토타입을 위한 인터랙션 화

출판사 서평

3년 연속 그래픽 분야 1위!
50만 독자가 선택한 믿고 보는 ‘맛있는 디자인’ 시리즈
* 교보문고, 알라딘, 예스24, 인터파크_IT/컴퓨터/그래픽 분야 1위(2018~2020년 집계 기준)

① 풍부한 실무 예제로 XD의 기초부터 활용까지 완전 정복!
가장 완벽한 디자인 레시피를 알려주는 ‘맛있는 디자인’ 시리즈는 50만 독자에게 검증받은 시리즈입니다. 특히 프로토타입 제작을 제대로 하기 위해 반드시 알아야 할 XD의 기초 기능부터 실전 웹디자인 감각을 길러주는 실무 실습까지 한번에 익히고 제대로 써먹을 수 있도록 도와줍니다. [기초가 튼튼해지는 XD 기본편]에서는 웹디자인에 꼭 필요한 UX/UI 디자인 기초 이론과 웹디자인 워크플로우를 먼저 이해한 후 XD의 기본&핵심 기능을 익힙니다. [UX/UI 디자인을 위한 XD 활용편]에서는 다양한 실무 활용 예제를 통해 아이콘 등 프로토타입에 필요한 다양한 디자인 요소를 제작하고 모바일 앱 UI도 디자인해보며 XD를 활용한 프로토타입 제작법을 효과적으로 익힙니다.

② 업데이트가 잦은 XD CC의 최신 버전 완벽 대응!
이 책은 XD CC의 최신 버전에 완벽히 대응했습니다. 3D 변형 기능, 애니메이션을 적용하는 인터랙션 기능, 반응형 웹&앱을 만드는 내용 인식 레이아웃, 협업이 쉬워지는 디자인 사양 공유 및 공동 편집 등 XD를 더 효율적으로 다룰 수 있는 신기능을 쉽고 빠르게 학습할 수 있으며, 신기능을 활용한 예제도 실습할 수 있습니다. 어도비 크리에이티브 클라우드 시스템은 안정성 향상이나 사용자 편의를 위해 프로그램을 지속적으로 업데이트하고 있습니다. 특히 XD CC는 업데이트가 잦은데, 수시로 변경되는 인터페이스나 기능에도 유연하게 대처할 수 있도록 자세한 설명을 수록했습니다.

③ 가장 완벽한 학습 방법인 3단계 구성으로 학습!
왕초보도 알기 쉬운 [간단 실습]부터 눈으로만 봐도 쏙쏙 이해되는 [한눈에 실습], 지금 당장 써먹을 수 있는 [실무 실습]까지, 가장 완벽한 3단계 학습 구성으로 XD를 제대로 배울 수 있습니다. [간단 실습]에서는 꼭 알아야 하는 UX/UI 디자인 기초 지식, XD의 화면 구성 및 패널과 도구 등을 살펴보고, 예제 실습 전 필요한 기본 조작과 설정 방법을 익힙니다. [한눈에 실습]에서는 기능별 예제로 XD의 핵심 기능을 익힙니다. 주요 기능의 사용법과 활용 과정을 한눈에 살펴보며 결과를 바로 확인할 수 있어서 기능이 쏙쏙 이해됩니다. [실무 실습]에서는 여러 개의 기능을 조합하여 하나의 완성된 예제를 만들어보며 실무 감각을 익힙니다.

④ 맛있는 디자인 스터디 공식 카페와 함께하는 학습!
맛있는 디자인 스터디 공식 카페(https://cafe.naver.com/matdistudy)에서는 학습하다가 막히는 부분이 있다면 [Q&A 게시판]을 이용해 질문할 수 있고, 학습 멘토가 빠르고 친절하게 답변해드립니다. 혼자 학습하기 막막한 분, XD를 제대로 학습하고 싶은 분, 어도비 신기능이나 업데이트 내역을 빠르게 확인하고 싶은 분이라면 맛있는 디자인 스터디 공식 카페를 활용해보세요. 맛있는 디자인 스터디 공식 카페에서는 스터디 그룹도 운영합니다. ‘맛있는 디자인 스터디 그룹’은 포토샵, 일러스트레이터, 프리미어 프로, 애프터 이펙트를 쉽고 빠르게 학습할 수 있도록 도와주며, 6주 커리큘럼에 맞춰 학습 분량을 가이드하고 미션을 제공하며 스터디 완주 시 리워드까지 제공합니다.
* 맛있는 디자인 스터디 공식 카페를 활용해 학습한 분들의 실제 후기입니다!
“혼자였다면 작심삼일에서 끝났을 텐데 스터디 덕분에 책 한 권과 왕초보 딱지를 뗄 수 있었어요!” _이로미 님
“처음 공부하는 분들께 강력 추천합니다. 기초부터 실무에 적용할 수 있는 내용까지 뭐 한 가지 부족한 것이 없습니다.” _박해인 님

작가정보

저자(글) 임선주

저자 : 임선주
중앙입시교육연구원, 신문사, IT 벤처 회사 등에서 온라인 개발부의 웹디자이너로 일하며 관련 업무를 익혀왔습니다. 유럽의 풍부한 감성적 토양을 내 것으로 만들고자 스위스 남부 루가노에 위치한 USI(Universit? della Svizzera Italiana)에 편입하여 Communication Arts를 전공하며 기호학, 미디어, 디지털 문화기획에 대한 지식 습득의 즐거움을 누렸고, 대학원에서는 디자인공예를 전공하며 디자인 소양을 갖추고자 했습니다. 현재는 협회 및 학원 등에서 UX/UI 디자인을 강의하고 있습니다.