# UX/UI 책 정리
###### tags: `디자인`
## 디자인이란?
- 객체, 시스템, 활동, 프로세스 등을 구현하기 위한 계획 또는 사양, 결과물
- UX 디자인: 경험 자체를 새롭게 디자인하는 것
- 경험 자체를 디자인하는 것이 쉽게 이해되지 않아 UI 디자인과 UX 디자인이 같은 것이라는 오해가 있다.
- 새로운 트렌드를 쫓아가는 것보다 사용자들이 서비스 이용할 때 겪는 문제를 파악하는 바꾸는 것을 중점으로 생각한다.

## UX/UI 디자인
- UX는 서비스가 아닌 사용자 관점에서 새로운 경험을 제시하겠다는 방법론
- UI는 서비스가 구체적으로 보여지는 형태, 정보의 배치 및 구성(대상)
- UX 방법론을 통해 UI가 중심이 되는 서비스를 디자인하겠다는 것

### 사용자 경험으로써의 UX
- 특정 서비스를 이용할 때 사용자들이 보이는 생각, 감정, 행동
- 사용자들이 서비스 이용 시 겪는 고충, 서비스에 대한 니즈
-

### UX/UI의 디자인 영역
1. 비주얼 디자인(GUI)
- 전달하고자 하는 내용의 시각적 형태, 색체, 표현 방법
- 서비스와 브랜드의 정체성과 개성, 심미성을 강조한다.
- 사용자들이 정보를 잘 이해할 수 있게 대비, 균형, 강조, 리듬같은 조형적인 면을 고려해 디자인에 반영한다.
- 컬러 대비를 강하게해 영역들을 명확하게 구분한다.
- 연관성이 각각 있는 것들엔 대비를 강하게 주면 안된다. 각각을 전혀 다른 정보라고 인식할 수 있기 때문이다.
2. 사용자 인터페이스(UI)
- 사용자에게 내용을 전달하고 의사소통하는 표면, 내용을 구성, 배치, 표현한다.
- UI 디자인을 잘한다는 것을 아래의 4개의 디자인을 바탕으로 이루어져야 한다.
- UI 는 우리가 만든 경험을 사용자에게 전달하는 `방식`이다.
- UX 디자인에서는 UI를 하나의 수단으로 생각한다.
- UI를 어떻게 잘 만드는가보다 어떤 UX를 제공하냐가 중요하기 때문이다.
- 실제 사용자들이 원하는 것은 좋은 UI보다 정보를 잘 탐색하고 이용할 수 있는 좋은 UX 이기 때문이다.
- UI 작업 중 가장 먼저 하는 것은 정보를 구성하는 것이다.
- 어떤 정보를 묶거나 쪼개면서 연관 관계를 설계한다.
- 설계한 정보들을 상하좌우로 배치한다.
- 그 다음, 배치된 정보의 형태를 결정한다.
3. 인터렉션 디자인(IXD)
- 사용자의 행동을 유도하고 결과를 반영하며 동적인 경험을 전달한다.
4. 정보 구조 및 흐름(IA)
- 사용자에게 전달하는 정보의 구조, 프로세스, 탐색방식 등을 설계
- 사용자가 서비스를 원활하게 탐색하기 위한 목적으로 만들어진 도구이다.
- 정보의 전체적인 체계, 논리적 구조, 검색 방법, 필터나 태그, 레이블링이 포함된다.
- 구체적으로는 메뉴구조도, 검색, 필터, 메타데이터 등이 있다.
- 탐색은 UX에서 매우 중요한 비중을 차지한다.
- 왜냐하면 사용자들이 겪는 고충 중 1/3이 원하는 메뉴를 찾지 못하거나 검색을 제대로 하지 못하는 경우이기 때문이다.
- 인터렉션 디자인과 중복되는 부분이 많이 존재한다.
5. 서비스(Content)
- 사용자에게 전달될 내용 그 자체
6. 전략 및 컨셉(Concept)
- 특정한 사용자 경험 시스템의 근거가되는 근원적 모태

### UX 방법론
- 문제해결 방법으로, 사용자의 문제를 찾아서 해결 방법을 아이디어, 시나리오, 프로토타입 순서로 풀어나가는 것이다.
- 목표를 설정하고 도달할 방법들을 디자인하는 Bridging과 다르다.
- 여러 가지 가능 대안을 놓고 가장 가능성 높은 대안을 디자인하는 Proposing과도 다르다.
- 사용자들이 서비스를 명확하게 인식하고 쉽게 접근할 수 있게 한다.
- 사용자들이 서비스를 경험하는 맥락을 반영해 이용흐름이나 예외처리를 설계하고 버튼, 팝업, 기능, 도움말 필터링 옵션 등을 배치한다.
- 사용자들의 고충을 찾아 문제를 정의한 후, 서비스의 새로운 컨셉에서부터 출발해 UX/UI 구성요소들의 새로운 디자인을 만들어내는 과정을 거친다.
#### 디자인 씽킹
- 사용자 입장에서 그들의 경험을 깊이 공감하고 무엇이 필요한지 찾고 만족스러운 서비스를 디자인하는 패러다임이다.
- UX는 디자인씽킹에 속하는 방법론 중 하나다.
- 그 밖에, 서비스 디자인 방법론, CX 방법론, 인간 중심 디자인(HCD) 방법론들은 각각 UX 방법론과 유사하지만 적용 분야나 수행 활동 면에서 차이가 있다.

### 사용자 관점에 따라 다른 UX
- 사용자를 보았을 때 3가지 관점으로 UX를 고민할 수 있다.

#### 1. 사람
- 사람으로써의 사용자다.
- 복잡한 것보단 단순한 것, 모양 차이보다는 색상 차이가 더 잘 보이는 것 등이 속한다.

#### 2. 사회인
- 사회으로써의 사용자다.
- 모바일 위주와 공유 문화에 익숙한 시대인 것처럼 전체 세대가 공유하는 트렌드도 있지만 밀레니얼 세대, Z세대 등 세대별로 특징 차이가 있기도 하다.
- 현시대의 트렌드와 세대별로 어떤 트렌드를 따르는지 시대를 읽는 것이 좋은 UX를 제공하는데 밑거름이 된다.
- 이 부분은 UX 방법론 프로세스를 설명하는 데 중요한 근거가 된다.

#### 3. 서비스 이용자
- 서비스 이용자 주체로써의 사용자다.
- 각 사용자들은 불편한 지점이 다르지만 실제로는 비슷비슷한 유형들이 나타난다.
- 이런 유형(페르소나)를 찾아 시장을 구분하고 타겟을 잡아야한다.
- 사용자 특성을 알아내기 위해선 아래의 요소들을 중점으로 조사해야 한다.
1. 이용형태(서비스군을 어떻게 사용하는지)
2. 맥락(사용 장소 및 시간과 상황)
3. 의견과 만족도
4. 태도(서비스에 대한 생각, 정서적 이미지와 관심)
5. 기술적 태도(신기술에 대한 수용도)

### 좋은 UX란?
- 사용자들이 느끼는 보편적인 고충과 어려움이 없는 것
- 실제 서비스를 이용하는 구체적인 맥락이 참작된 것
- 결과가 명확하고 세심하게 전달되는 것
- 주어진 컨텐츠양, 이용흐름의 복잡성, 데이터에 따라 사용자에게 필요한 도구와 지원을 적절하게 지원해주는 것
- Trade off를 통해 경쟁사와 다른 정체성이 분명한 것
- 대상 사용자의 특성을 감안한 기본값이 제공되는 것

## UX에 작용하는 것
### 1. 경험 요소
- UX는 서비스에 내재한 요소 중 실제 사용자 경험과 연관된 서비스들이라고 볼 수 있다.
- UX/UI 디자인 시 일차적인 고려 대상이다.
- what
- 기능
- 정보
- 외형
- UI
- 디자인
- how
- 이용절차
- 배열
- 안내
- 인증
- 에러 처리
- 커뮤니케이션
- what의 요소가 좋아도 how 요소들이 좋아야 좋은 경험 요소라고 볼 수 있다.

### 2. 시간
- UX는 시간에 따라 유동적이다.
- 예를 들어 아침과 점심, 저녁마다 음악의 선곡이나 플레이 방식이 다르다.
- 또한 과거의 경험에 익숙해져 익숙한 것이 아닌 것은 불편하기도 하다.
- 예를 들어 장바구니 아이콘은 실제 장바구니 모양보단 익숙한 카트 모양이 이해가 된다.

### 3. 맥락
- 사용자의 관심사, 접근 방법, 예상치 등에 따라 UX는 달라진다.
- 예를 들어 무언가를 추가하는 레이블에서 `+` 아이콘은 레이블명 뒤에 오는 것보다 앞에 와서 `+`이 능동적으로 레이블을 추가하는 맥락을 표현하는 것이 좋다.
- `Accordion Label +` 보다 `+ Accordion Label`이 맥락상 더 UX가 좋다.

### 4. 목적의식
- 습관적으로 행하는 비 목적의식 행동과 특정한 목적을 두고 시작하는 목적의식적 행동이 존재한다.
- 심심함 - 습관적임 - 내적 동기만 존재 - 지금 해야하는 짧은 행동 - 반드시 해야하는 긴 활동

## UX 품질 판단 기준
- 상식적 판단: 무조건 이게 낫다.
- 문에 손잡이가 있으면 push 보다 pull 이 더 맞는 상황이다.
- 맥락 고려: 이것을 감안했을 때 이게 더 낫다.
- 공인인증서 암호를 누를 때 보조 도구가 단순한 것이 좋아 특수문자와 영문 전환 버튼이 하나로 통합된 것이 좋다.
- 리모컨의 전원버튼은 on, off가 하나의 버튼으로 동작하는 것이 좋다.(하나의 기능을 다룰 땐 하나로 합쳐 제어하는 것이 좋다.)
- 명확성: 이 결과가 더 명확한 것을 봤을 때 이게 더 낫다.
- 조건 필터를 했을 때 자신이 입력한 정보는 작게 보여주고 나머지 결과 속성들을 크게 보여준다.
- 그 중 사용자들이 궁극적으로 알고 싶은 정보를 눈에 띄게 표현하는 것이 좋다.
- 조건별 취사선택: 조건에 따라 판단이 달라진다.
- 충돌하는 두 가지 중 더 나은 선택: trade off
- 감성과 감수성 중 어느 것을 사용하는게 좋을 것인가
- 대상이 누구인가: 타겟 유형에 따라 평가가 달라진다.
- 네이버 쇼핑처럼 자주, 오래 사용하는 서비스가 아니면 타겟 유형의 이목을 끄는 기본 값을 제시하는게 좋다.

## UX 피라미드
- UX를 단순히 쉽고 편리하다, 어렵고 불편하다 란 것보다 구체적으로 이유를 파악하고 표현할 줄 알아야한다.
- 그래서 UX를 구체적으로 표현할 수 있는 체계를 UX 피라미드라고 한다.
- 계층이 올라갈수록(의미성에 가까울수록) 달성하기 어렵다.
- 보안적인 안심, 정보의 신뢰성보다 의미를 주고 감성적으로 다가가는 것이 더 어렵다는 것이다.
- 하지만 감성, 의미성이 유용성, 신뢰성보다 더 좋은 가치라고 보는 것은 아니다.

### 피라미드의 6계층
#### 1. 유용성(Useful)
- 사용자들은 필요한 정보와 기능이 있어야 서비스를 찾는다.
- what과 how 중 what을 주로 다룬다.
- 어떤 정보, 기능이 사용자에게 유용할까를 생각해 유용성을 증대시킨다.
- 예를 들어, 나이키 Fit 앱은 발 사진을 찍으면 AR 기술로 신발 사이즈를 측정해주며 신발 구매때 정보로 사용된다.

#### 2. 신뢰성(Reliable)
- 보안과 인증, 가입/결제/예약 등의 시스템이 믿음직 해야한다.
- 컨텐츠의 최신성, 입력 화면에서 사용자 행동 지원 등도 포함된다.
- 구글 지도는 검색 결과에 기존 이용이력(평점, 매칭도, 리뷰)을 통해 좀 더 높은 신뢰성을 제공한다.

#### 3. 사용성(Usable)
- 정보나 기능을 찾기 쉬워야 하고 이용흐름이 직관적이어야 한다.
- 단순히 사람의 심리적 성향이나 디자인 원칙을 지킨다해서 달성되는 것이 아니다.
- 대신 심성 모형(Mental Model)을 잘 알고 있어야한다.
- 사용자들의 머릿속에 담긴 서비스 이용 동기, 예상 결과, 행동 절차
- 각 서비스의 특징과 맥락에 따라 달라진다.
- 카카오 페이는 가입과 인증 단계에서 약관 동의나 비밀번호 확인 등 맥락을 벗어난 화면이 별도로 필요하면 화면이 전환하는 대신 원래 화면에 모달 창이 뜬다.
- 이런 경우 핀테크 서비스의 특성과 회원 가입이란 맥락을 잘 고려한 UX이다.

#### 4. 편의성(Convenient)
- 사람들의 노력을 줄여주고 개인화나 추천 등 사용자가 생각치 못한 좋은 정보를 제공한다.
- 사용성과 비슷하지만 특정 맥락에서 기대를 충족시켜 주는 차이가 있다.
- 사용자들이 가지고 있는 막연한 니즈를 찾아내 새로운 기술로 대폭 개선하는 것이 필요하다.
- 극장 자리선택 시 3d 좌표로 스크린과의 각도를 보면서 예약하는 것이 이에 해당된다.

#### 5. 감성(Pleasurable)
- 즐거움을 선사하는 것이다.
- 이성적 영역인 1~4와는 달리 감성의 영역으로, 특별한 것을 제공하는 개념이 아닌 현재 있는 것을 좀 더 매력적으로 만들어 사용자들에게 재미를 느끼게 하는 것이다.
- 가장 중심적인 경험요소로 시각적 분위기가 있다.
- 서비스의 컨셉과 잘 어우러진 짧은 문구는 깊은 울림을 전달한다.
- 인터렉션을 통해 흥미로운 상태 변화로 색다른 재미를 제공할 수도 있다.

#### 6. 의미성(Meaningful)
- 사용자에게 중요한 의미를 주며 서비스가 사용자 삶에 자리매김한다.
- 구글 포토의 "추억 속 오늘" 기능으로 연대기 순으로 사진을 조회하는 기능, 특정 사물,사람,장소 별로 보고 싶은 것만 보는 기능이 이에 해당된다.

- 애자일 방법론
- 애자일: 긴 주기의 프로젝트를 몇 개의 순환 주기로 쪼개어, 리스크를 줄이고 점진적으로 서비스를 완성하는 방법론
- 사용자 여정 측면에서 문제를 찾고 그 해결방법을 모색한다.

- Minimum Viable Product
- 최소한의 실행 가능한 서비스 영역
- 초기 가설을 검증하기 위한 최소한의 서비스
- UX/UI 방법론을 통해 전략, 컨셉, 아이디어를 도출하지만 사용자 시나리오, IA 설계로 이어가지 않고 가장 핵심적인 아이디어만 묶어 프로토타이핑을 만든다.
- 핵심 아이디어를 빠르게 프로토타입으로 구현해 검증 개선한 다음, 나머지 부분에서 다시 접근하면서 리스크를 감소시키는 것이 애자일 방법론의 첫번째 순환 주기에 잘 맞는다.

- AI UX
- 데이터 기반 UX
- 현재 나의 활동으로 데이터를 파악해 그에 따른 UX를 즉시 제공하는 서비스
- 실시간 데이터 수집 -> 사용자 성향 파악 -> 사용자와 콘텐츠 매핑 -> 콘텐츠 추천 -> 사용자 반응 -> 실시간 데이터 수집

p52 부터 정리
3단원부터 읽고 정리
2단원부터 다시 읽기