어도비 XD CC 2020 무작정 따라하기 (최신 기능을 수록한 가장 완벽한 입문서)

김두한

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

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

Part0시작하기전에

Part1어도비XDCC시작하기
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텍스트적용반복그리드사용하기

Part2UI디자인의기본,아이콘만들기
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|음악플레이아이콘만들기
1LP판형태의아이콘형태구성하기
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입체구만들기

Part3UI디자인애니메이션만들기
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동전이위로사라지는애니메이션만들기

Part4웹&앱페이지디자인하기
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세일문자구성하기
09|계산기만들기
1계산기형태디자인하기
2버튼문자작성하기
10|인테리어앱만들기
1레이아웃구성하기
2이미지확대아이콘작성하기

Part5앱디자인에인터랙션적용하기
01|좌우로드래그하는스파클링와인팝업창만들기
1원형드래그버튼만들기
2하단드래그버튼만들기
3탭버튼만들기
4드래그하면표시되는화면만들기
5스와이프인터랙션적용하기
02|클릭하면나타나는로그인화면만들기
1로그인화면만들기
2초기배경화면만들기
3오버레이효과적용하기
03|터치하면키보드가위로올라오는여행앱만들기
1입력검색창만들기
2슬라이드되어올라오는키보드인터랙션적용하기
04|버튼을터치하면절단되는팝업영수증만들기
1팝업영수증형태구성하기
2영수증문자입력하기
3절단되는영수증만들기
05|문자가표시되는헤드폰구매페이지만들기
1방사형구매상품레이아웃구성하기
2시간간격을두고표시되는문자구성하기

Part6사용자편의를위한앱UI디자인하기
01|메시지앱화면UI디자인하기
1메시지앱상단메뉴화면UI디자인하기
2메시지앱하단입력창화면UI디자인하기
02|카메라앱화면UI디자인하기
1카메라앱촬영화면UI디자인하기
2카메라앱편집화면UI디자인하기
03|커피앱주문화면UI디자인하기
1커피앱주문화면상세메뉴UI디자인하기
2커피앱주문화면전체메뉴UI디자인하기
04|조명앱화면UI디자인하기
1조명앱메인화면UI디자인하기
2조명앱설정화면UI디자인하기
05|스마트홈앱조절화면UI디자인하기
1스마트홈앱난방제어조절화면UI디자인하기
2스마트홈앱가스제어조절화면UI디자인하기
3스마트홈앱엘리베이터호출화면UI디자인하기
06|마이크녹음앱화면UI디자인하기
1마이크화면UI디자인하기
2녹음화면UI디자인하기
07|알람앱예약화면UI디자인하기
1알람앱예약확인화면UI디자인하기
2알람앱예약설정화면UI디자인하기
08|날씨앱안내화면UI디자인하기
1날씨앱‘날씨맑음’안내화면UI디자인하기
2날씨앱‘날씨흐림’안내화면UI디자인하기
3날씨앱‘날씨비옴’안내화면UI디자인하기

Part7실무프로젝트활용하기
01|러닝앱화면UI디자인과인터랙션적용하기394
1러닝앱시작화면UI디자인하기
2러닝앱상세보기화면UI디자인하기
3러닝앱활동화면UI디자인하기
4러닝앱인터랙션적용하기
02|음악앱화면UI디자인과인터랙션적용하기
1음악앱재생목록UI디자인하기
2음악앱재생화면UI디자인하기
3음악앱볼륨조절인터랙션적용하기
03|앱메뉴화면UI디자인과인터랙션적용하기
1앱메뉴화면UI디자인하기
2앱메뉴화면오버레이인터랙션적용하기
04|배터리충전화면UI디자인과인터랙션적용하기
1배터리충전화면UI디자인하기
2배터리충전화면인터랙션적용하기
05|공유자전거앱화면UI디자인과인터랙션적용하기
1공유자전거앱시작화면UI디자인하기
2공유자전거앱위치공유화면UI디자인하기
3공유자전거앱인터랙션적용하기

찾아보기

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

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

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