7가지 실전 프로젝트를 따라 하면서 사용자 중심으로 사고하는 UX 방법론과 그에 따른 UI 디자인을 구현할 수 있다.IT 기술의 발전으로 지속적으로 새로운 스마트폰이 출시되고, 다양한 웨어러블 디바이스가 나타나고 있으며, 이제는 메타버스라는 새로운 가상 공간까지 대두되고 있다. 이처럼 다양한 웹 & 앱 환경이라도 사용자를 중심으로 사고하는 UX 방법론과 그에 따른 UI 디자인을 구현할 수 있다면 어떠한 신기술에도 대응할 수 있다. 이 책에서는 이러한 관점으로 To-Do 앱, SNS 앱, 반응형 앱 등 7가지 실전 프로젝트를 직접 따라 해 보면서 웹 & 앱 디자인의 기본기와 함께 어도비 XD를 활용한 UI 디자인을 경험해 볼 수 있다. 특히 처음 시작하는 디자이너라면 이 책을 통해 사람들이 제품을 사용하는 행태를 이해하고, 인터페이스 만드는 요령을 익힐 수 있을 것이다.
홍익대학교 영상대학원 인터랙션디자인과에서 석사 학위를, 홍익대학교 일반대학원 영상·인터랙션과에서 박사 학위를 받은 후 CJ홈쇼핑, SK커뮤니케이션즈의 네이트, 싸이월드, 11번가 등에서 UX/UI 디자이너로 근무하였고, 삼성 Pengteil-차이나와 소셜커머스 업체인 그루폰코리아, 위메프 등에서 e커머스 UX/UI 팀장으로 근무하면서 다양한 서비스를 만들었다. 현재는 한양여자대학교 공과대학 스마트IT과의 조교수로 있으면서 웹앱 UX/UI, 자바스크립트 프론트엔드 개발, 메타버스 지향 유니티 VR/AR, 블렌드 3D 교육을 맡고 있다.
CHAPTER 01 웹과 앱의 UX/UI 디자인 기본기[LESSON 01] 기획과 개발을 고려한 UX/UI 디자인 12_UX 디자인의 필수 요소 12_바람직한 UI 디자인 15[LESSON 02] 웹 환경 이해하기 16_웹 환경과 이미지 16_웹 디자인과 앱 디자인은 다르다 20_HTML/CSS/JavaScript와 디자인의 관계 23_프로토타입과 Adobe XD 24[LESSON 03] HTML+CSS를 고려한 UX/UI 디자인 25_웹 디자인의 기본 요소 25_시스템 기반의 디자인 요소 26_웹과 상호작용하는 UX/UI 30[LESSON 04] iOS와 안드로이드 환경 이해하기 32_애플의 플랫 디자인 33_구글의 머티리얼 디자인 38_안드로이드와 iOS 인터페이스의 차이 39CHAPTER 02 Adobe XD를 활용한 UI 디자인 실습기[LESSON 01] Adobe XD 기능 활용하기 44_기본 툴 개념과 이해 44_패스와 도형 그리기 54_오브젝트와 레이어 활용하기 62_이미지 편집하고 텍스트 입력하기 70_구성 요소와 에셋, 오브젝트와 반복 그리드 79_반응형 웹에 적합한 화면 구성하기 87_그리드 98[LESSON 02] Adobe XD 프로토타입 101_디자인에 움직이는 애니메이션 적용하기 101_다이얼 및 마우스 오버 상태 추가하기 107[LESSON 03] 디바이스 출력 및 공유하기 118 _시스템별 디바이스 환경 118 _협업을 위한 공유 파일 관리 121 _작업 효율을 높이는 플러그인 122 CHAPTER 03 실무 웹/앱 UI 디자인 분석과 실습[LESSON 01] To-Do 앱 UI 디자인 128 _UI 디자인 실습 131 _프로토타입 141 [LESSON 02] SNS 앱 UI 디자인 146 _SNS 바이럴 서비스 디자인 UX 분석 146 _UI 디자인 실습 147 _프로토타입 158 [LESSON 03] 반응형 웹/앱 UI 디자인 164 _데스크탑 버전과 모바일 버전 최적화 165 _HTML과 CSS 적용하기 165 _UI 디자인 실습 166 _프로토타입 175 [LESSON 04] 쇼핑 커머스 앱 UI 디자인 177 _쇼핑 앱 UX 분석 177 _UI 디자인 실습 180 _프로토타입 188 [LESSON 05] 영화 감상 앱 UI 디자인 194 _영상 스트리밍 앱 UX 분석 194 _UI 디자인 실습 195 _프로토타입 202 [LESSON 06] 식품 정보 앱 UI 디자인 204 _UI 디자인 실습 204 [LESSON 07] 인테리어 가구 앱 UI 디자인 217 _UI 디자인 실습 217
