UX/UI 디자인 완벽 가이드: UI, 인터랙션, 프로토타이핑 편

조성봉

라이트브레인 CX 컨설팅그룹 이사
<UX/UI디자인 완벽 가이드: IA와 유저 플로우 편(2023)> <이것이 UX/UI 디자인이다(2020)> <이것이 UX 디자인이다(2013)> 저자
前 UX1 대표
금융연수원 UI/UX 전임강사, DT Academy 자문위원
디자인진흥원 국가인적자원개발 자문위원
각종 정부 기관 UI/UX 자문

주 활동 분야

• UX 디자인 컨설팅
• 기술/트렌드 기반 제품/서비스 컨설팅
• AI UX, 디지털 트랜스포메이션 관련 연구

이정은

라이트브레인 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 서비스 비교