디지털 제품의 성공을 이끄는 UX/UI 디자인의 완벽한 로드맵을 만나보세요! 디지털 시대의 필수 역량, UX/UI 디자인의 모든 것을 담았습니다. 사용자 중심의 UI 설계부터 매력적인 인터랙션 구현, 효과적인 프로토타이핑 기법까지 체계적으로 다룹니다. 초보자부터 전문가까지, 실무에 바로 적용할 수 있는 UX/UI 설계 노하우와 최신 트렌드를 다양한 사례를 통해 배울 수 있습니다. 훌륭한 UX를 위한 동기 부여와 행동 뒷받침 원칙, HCI, 게슈탈트 원리, 그래픽 디자인 요소 등 이론적 기반도 함께 제공하여 실무 적용력을 높였습니다. 피그마를 활용한 UX/UI 설계 실습은 단계별 예제를 통해 누구나 쉽게 따라 할 수 있도록 구성되어 있습니다. 이 과정을 통해 디자인 원리를 실제로 적용하는 방법을 익히고, 동시에 업계 표준 도구인 피그마를 능숙하게 다룰 수 있게 될 것입니다.

▣ 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 서비스 비교