디지털 제품의 성공을 이끄는 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 서비스 비교