도서 소개

디지털 시대의 필수 역량, UX/UI 디자인의 모든 것을 담았다. 사용자 중심의 UI 설계부터 매력적인 인터랙션 구현, 효과적인 프로토타이핑 기법까지 체계적으로 다룬다. 초보자부터 전문가까지, 실무에 바로 적용할 수 있는 UX/UI 설계 노하우와 최신 트렌드를 다양한 사례를 통해 배울 수 있다. 훌륭한 UX를 위한 동기 부여와 행동 뒷받침 원칙, HCI, 게슈탈트 원리, 그래픽 디자인 요소 등 이론적 기반도 함께 제공하여 실무 적용력을 높였다.

  출판사 리뷰

디지털 제품의 성공을 이끄는 UX/UI 디자인의 완벽한 로드맵을 만나보세요!

디지털 시대의 필수 역량, UX/UI 디자인의 모든 것을 담았습니다. 사용자 중심의 UI 설계부터 매력적인 인터랙션 구현, 효과적인 프로토타이핑 기법까지 체계적으로 다룹니다.

초보자부터 전문가까지, 실무에 바로 적용할 수 있는 UX/UI 설계 노하우와 최신 트렌드를 다양한 사례를 통해 배울 수 있습니다. 훌륭한 UX를 위한 동기 부여와 행동 뒷받침 원칙, HCI, 게슈탈트 원리, 그래픽 디자인 요소 등 이론적 기반도 함께 제공하여 실무 적용력을 높였습니다.

피그마를 활용한 UX/UI 설계 실습은 단계별 예제를 통해 누구나 쉽게 따라 할 수 있도록 구성되어 있습니다. 이 과정을 통해 디자인 원리를 실제로 적용하는 방법을 익히고, 동시에 업계 표준 도구인 피그마를 능숙하게 다룰 수 있게 될 것입니다.

  작가 소개

지은이 : 조성봉
라이트브레인 UX컨설팅그룹 이사.《이것이 UX/UI 디자인이다》(위키북스, 2020), 《이것이 UX 디자인이다》(위키북스, 2013) 저자.前 UX1 대표.금융연수원 UI/UX 전임강사.디자인진흥원 국가인적자원개발 자문위원.각종 정부 기관 UI/UX 자문.[주 활동 분야]- UX 디자인 컨설팅- 기술/트렌드 기반 제품/서비스 컨설팅- AI UX, 디지털 트랜스포메이션 관련 연구[프로젝트]- 선행 연구: 삼성전자, 현대자동차, SKT, LG전자 등 - UX/UI: 신한은행 SOL, 네이버 메인화면, 네이버 모바일 쇼핑판, 국민은행, 신한카드 등- B2B: 삼성SDS, 웅진그룹, 신한금융지주, 두산그룹, 싸이버로지텍 등- AI UX: 삼성카드 챗봇, 삼성SDS, 삼성전자 등

지은이 : 이정은
라이트브레인 CX 컨설팅그룹 1팀장/수석 컨설턴트디자인진흥원 UI/UX 강사[프로젝트]- 선행연구: 삼성전자 모바일/카메라 등- UX/UI: 삼성화재, 국민은행, LG U+, 현대자동차 등- B2B: SK하이닉스, 두산그룹 등- AI UX: LG전자, SKT 등

  목차

▣ 1장: UI 설계
UX와 User Interface
__스크린을 둘러싼 이야기
__GUI (Graphic User Interface)
__GUI와 UX/UI
UI 설계 흐름
재료(정보 및 기능적 요소) 준비
__정보
__내비게이션
__레이블, UX Writing
__입력/선택 요소
__실행 요소
__다이얼로그
__그래픽
__커뮤니케이션 요소
콘텐츠 가공
__편집
__포매팅
__시각화(Visualization)
콘텐츠 구성
__결합
__구분
__최적화
콘텐츠 배치
__기기/서비스 특성: 시선 흐름
__화면 유형
__강조
__반복
콘텐츠 형태
__공간적 형태
__언어적 형태
__시각적 형태

▣ 2장: UI 요소
입력/선택 요소
__입력상자(Form)
__선택상자(Drop down Selector)
__라디오(Radio) 버튼과 체크박스(Checkbox)
__슬라이더 (Slider)
__피커(Picker)
__토글(Switch, Toggle)
__입력 칩(Input Chips)
실행 요소
__버튼(Button)
다이얼로그
__모달(Modal, 팝업창)
__시트(바텀 시트, Bottom Sheet)
__스낵바/토스트
__스티키 노트(Sticky note, 툴팁)

▣ 3장: 좋은 UX/UI의 조건
좋은 UX를 위해서
UX 영향 요소
__기기/채널의 영향
__서비스 복잡도의 영향
__이용 빈도의 영향
__수행 능력의 영향
__관여도의 영향
__맥락의 영향
__결론
동기 부여
__동기 부여의 중요성
__기본 원리, 위협과 보상
__희소성(Scarcity)
__손실회피(Loss aversion)
__프레임 효과(Framing Effect)
__보상 심리
__인정 욕구
__레벨 업(Leveling up)
__상호 협력과 호혜(Collaboration and Reciprocity)
행동 뒷받침
__매끄러운 행동 전개
__최소한의 행동 요구
__사용자 고민 선반영
__맥락에 부합하는 UI 요소 적용
__직관적인 시각적 계층 구조

▣ 4장: UX/UI 설계 원칙
UI 설계 원칙
__경제성
__의사소통성
__조직성
__스캐폴딩(Scaffolding)
__청크 나누기(Chunking)
HCI 원칙
__힉의 원칙
__밀러의 원칙
__유연성-사용성 균형 원칙
__테슬러의 원칙
__피트의 원칙
__제이콥의 원칙
게슈탈트 원리(Law of Pr?gnanz)
__유사성의 원리(Law of Similarity)
__근접성의 원리(Law of Proximity)
__연속성의 원리(Law of Continuity)
__공동운명의 원리(Law of Common Fate)
그래픽 디자인 요소
__점(Point)
__선(Line)
__모양(Shape)
__형태(Form)
__색상(Color)
__공간(Space)

▣ 5장: 인터랙션
인터랙션 설계 프로세스
__트리거(Trigger)
__패턴(Rules)
__페이드 전환(Fade Transition)
__마이크로 인터랙션(Micro Interaction)
__효과(Feedback)
__모션 효과(Motion Effect)

▣ 6장: 프로토타이핑
피그마 기본 사용법
__피그마 시작
__피그마 인터페이스
와이어프레임 설계
__디바이스/해상도 설정
__프레임 생성
__Layout grid(레이아웃 그리드) 설정
__와이어프레임 설계
__Design system(디자인 시스템)
__실습
프로토타입(Prototype)
__Prototype settings(프로토타입 설정)
__Prototype view mode(프로토타입 뷰 모드)
__Scroll behavior(스크롤 동작) 설정
__인터랙션 설정
__실습
AI in 피그마
__First Draft(퍼스트 드래프트)
__UI 생성형 AI 서비스 비교

  회원리뷰