어도비 XD CC: 기본편+활용편 (웹디자이너를 위한 UX/UI 디자인 기초)

임선주

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

PART01.기초가튼튼해지는XD기본편

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

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

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

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

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

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

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

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

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

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

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

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

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

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

LESSON06.XD애니메이션적용하기:프로토타입을위한인터랙션화면전환효과적용하기
[간단실습]자동애니메이션적용하기
[간단실습]슬라이드애니메이션적용하기
[한눈에실습]대시보드애니메이션적용하기

LESSON07.플러그인활용하기:제플린과다양한플러그인설치하기
제플린알아보기
[간단실습]제플린설치하고연동하기
제플린기본구성살펴보기
[간단실습]제플린프로젝트작업하기
[간단실습]이미지요소확인하기
[간단실습]텍스트요소확인하기
[간단실습]스타일가이드에요소추가하기
[간단실습]노트기능으로팀과협업하기
[간단실습]버전관리기능으로협업하기
다양한플러그인알아보기
[간단실습]플러그인설치하기
유용한플러그인한눈에살펴보기

PART02.UX/UI디자인을위한XD활용편

CHAPTER01.다양한프로토타입을만들며자유자재로XD활용하기

LESSON01.라인아이콘세트제작하기:도형도구와병합을활용해아이콘만들기
디자인모드에서기본아트보드준비하기
홈아이콘만들기
프로필아이콘만들기
종아이콘만들기
아이디카드아이콘만들기

LESSON02.마우스오버버튼제작하기:구성요소활용해마우스오버상태추가하기
기본아트보드준비하고아이콘테두리만들기
ON/OFF입력해마스크적용하기
구성요소만들기기능으로마우스오버상태만들기
마우스오버상태동작확인하기
메뉴아이콘테두리만들기
MENU입력해마스크적용하기
구성요소만들기기능으로마우스오버상태만들기
마우스오버상태동작확인하기

LESSON03.마우스오버가로메뉴바제작하기:구성요소활용해마우스오버상태추가하기
아이콘에마스크적용하기
아이콘을구성요소로만들기
각아이콘에마스크적용하고구성요소로만들기
구성요소활용해마우스오버상태만들기
마우스오버상태동작확인하기

LESSON04.마우스오버세로메뉴바제작하기:구성요소활용해마우스오버상태추가하기
아트보드만들고플러그인설치하기
아이콘을에셋으로추가하기
기본상태의세로메뉴만들기
메뉴의디테일한요소만들기
마우스오버상태의긴메뉴만들기
에셋으로추가한아이콘배치하기
마우스오버상태의문자입력하고마스크적용하기
구성요소활용해마우스오버상태만들기
마우스오버상태의문자입력하고마스크적용하기
구성요소활용해마우스오버상태만들기

LESSON05.뮤직플레이어UI제작하기:이미지드래그슬라이더제작하기
준비파일불러와호버버튼만들기
다운로드리스트만들기
인터랙션적용할아트보드만들기
인터랙션으로드래그애니메이트적용하기
헤더영역(타이틀및앨범리스트영역)만들기
레이아웃에맞춰앨범리스트만들기
인터랙션적용할아트보드복사하기
인터랙션으로드래그애니메이트적용하기

LESSON06.뉴모피즘스타일의스마트홈UI제작하기:다이얼드래그제작하기
준비파일불러와드래그오브젝트만들기
드래그다이얼버튼만들기
온도표시문구만들기
룸넘버영역만들기
하단영역구분선만들기
아이콘을배치할버튼영역만들기
버튼영역에아이콘배치해마무리하기
인터랙션적용할아트보드복사하기
인터랙션으로드래그애니메이트적용하기

CHAPTER02.모바일앱프로토타입으로실무UX/UI디자인익히기

LESSON01.날씨앱UI디자인하기:모바일용프로토타입만들기
새아트보드만들고배경지정하기
구성요소불러와메인페이지만들기
반복그리드로세부요소배치하기
오늘의날씨페이지만들기
세계날씨페이지만들기
접속시간에맞는개별페이지구성하기
인터랙션으로탭애니메이트적용하기

LESSON02.카페앱UI디자인하기:모바일용프로토타입만들기
준비파일불러와메인페이지만들기
메인페이지의터치버튼영역만들기
메뉴선택페이지만들기
스탬프적립페이지만들기
매장찾기페이지만들기
게시판페이지만들기
인터랙션으로탭애니메이트적용하기

LESSON03.여행소개앱UI디자인하기:모바일용프로토타입만들기
새아트보드만들고로그인페이지만들기
아트보드추가해메인페이지만들기
여행지카테고리페이지만들기
여행지사진을배치할본문영역만들기
사각형영역에여행지사진배치하기
여행지세부페이지만들기
여행지세부스크롤페이지만들기
인터랙션으로탭애니메이트적용하기

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

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

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

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

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