이것이 UX/UI 디자인이다 스터디 1장(1절~2절)

이것이 UX/UI 디자인이다 스터디

2022.12.21Woogie.Kim

이것이 UX/UI 디자인이다

이것이 UX/UI 디자인이다 표지

1.1 UX/UI 개요

1.1.1. 디자인과 UX 디자인

디자인의 개념은 아래와 같이 변화되어 왔다.

1990년대 이전: 조형이나 미적인 형태를 만드는 작업
1990년대: 포괄적인 비즈니스/서비스/기능의 계획/설계/구현
2000년대 이후: 제품/서비스 이용 시 경험 그 자체를 변화시키는 작업

UX 디자인이란 UX(사용자 경험)를 대상으로 하여 현재의 UX가 갖는 문제를 찾아서 새롭게 변화시키는 것

사용자에게 집중하라. 그러면 모든 것이 따라올 것이다.
- 구글의 열 가지 철학 중 첫 번째 원칙

기업이 제공하는 부가가치는 결국 경험이다. 경험의 질에 따라 시장가치가 수십억 달러를 껑충 뛸 수도 있다.
- 톰 피터스

UX/UI 디자인이란?

소프트웨어나 PC 웹, 모바일 앱에서의 UX 다지인
UI 이외에 (암묵적으로) IA(Information Architecture), 이용흐름, 인터랙션, GUI 등이 포함되어 있음
최근 들어 시각적인 UI 이외에 음성이나 텍스트 UI까지 영역이 넓어졌음
한 마디로 UI 중심의 UX 디자인 접근 방법

UX와 UI의 차이 Image Source

UX: 서비스가 아닌 사용자 관점에서 새로운 경험을 제시하는 프로젝트 수행 절차 - 방법론
UI: 서비스가 구체적으로 보여지는 형태, 정보의 배치 및 구성 - 디자인 대상

1.1.2. UX/UI 디자인 영역

일반적인 UX/UI 디자인을 구성하는 5가지 요소

UI (User Interface)
IA (Information Architecture)
이용흐름 (User Flow)
인터랙션 (Interaction)
GUI (Graphic User Interface)

이중 UI는 나머지 디자인 영역을 대표, 타 요소들과 떼려야 뗄 수 없는 관계. 좋은 UI가 나오기 위해서는 위의 요소들에 대한 탄탄한 토대가 필요하다.

1. UI (User Interface)

‘최신 유행하는 UI’ 에만 집중하지 마라.
실제 사용자들이 원하는 것은 ‘정보를 잘 탐색하고 이용할 수 있는 것’
UI는 수단이지 목적이 아니다.

Image Source

UI 설계

화면 내 노출 될 정보를 구성
- 어떤 정보를 제공할지 정의
- 정보를 묶거나 쪼개면서 연관 관계를 설계
위아래 및 좌우로 배치
- 잘 만들어진 배치는 시각적인 계층구조(Visual Hierarchy)가 뛰어나다.
- 이는 자연스럼게 정보를 이용할 수 있게 돕는다.
- 이를 위해 강조, 대비, 균형, 요약을 사용한다.
각 정보나 기능의 형태를 디자인하는 작업
- 텍스트로 할지, 이미지로 할지, 밀도 있게 표현할지, 여유 있게 표현할 지 등을 UI에 반영

UX 없는 UI를 만들지 마라.

왜 그렇게 정보를 구성하고 배치하였는지 왜 그런 형태를 만들었는지에 대해 고민하고 만들어야 한다. 사용자들이 겪는 문제가 무엇이고, UI를 통해 그것을 해결하겠다는 UX적인 의도를 가져야 한다.

2. IA (Information Architecture)

IA는 사용자가 서비스를 원활하게 탐색하게 돕기 위한 목적으로 만들어진 도구 정보의 전체적인 체계, 논리적 구조, 검색 방법, 결과 범위를 좁히기 위한 필터나 태그, 정보의 이름을 정하는 레이블링 작업이 IA에 해당

구체적인 산출물로는 메뉴구조도, 내비게이션, 검색, 필터, 메타데이터, 레이블링 설계 등이 있다.

탐색은 UX에서 매우 중요한 비중을 차지한다. 사용자들이 겪는 고충의 1/3가량은 원하는 메뉴를 찾지 못하거나 검색을 제대로 하지 못하고 헤매는 등 탐색 과정에서 발생한다.

IA 분석 사이트 맵 IA 분석 후 UI 화면 befo after Image Source

3. 이용흐름 (User Flow)

사용자가 서비스를 이용하는 흐름 이용흐름 설계에서는 사용자의 연속된 행동이 실제 서비스 상에서 어떤 식으로 흘러가는지를 업무, 화면 단위로 정의한다.

User Flow example Image Source

4. 인터랙션 (Interaction)

UI 설계가 정보를 구성, 배치, 형태로 만들어 내는 정적인 작업이라면 인터랙션 설계는 사용자와 서비스 간의 상호작용, 제스처, 상태변화 디자인 등 동적인 작업이다.

뛰어난 인터랙션은 UI를 풍성하게 만들 뿐만 아니라, 움직임을 통해서 사용자에게 감성을 전달하기도 한다. 움직이는 속도, 방향, 효과 등은 기능적인 의미 이외에 감성적인 이미지를 전달하기 때문

Interaction example Image Source

5. GUI (Graphic User Interface)

GUI는 해당 서비스/브랜드의 정체성과 개성, 고유한 심미성을 드러내는 데 일조할 뿐만 아니라, 정보의 가치를 높이는 데도 기여

레이아웃 컬러, 그래픽, 폰트, 이미지와 같은 기본 요소를 잘 활용하는 것도 중요하지만, 사용자들이 정보를 좀 더 잘 이해하고 사용할 수 있게 대비, 균형, 강조, 리듬과 같은 조형적인 면을 고려해 디자인에 반영하는 것도 매우 종요

GUI 디자인은 창의적인 감성 구현도 중요하지만, 정보의 인식, 이해, 행동에 큰 영향을 미치기 때문에 UX가 끝까지 고려돼야 한다.

서비스

사용자들은 어떤 서비스의 UX 품질을 암묵적으로 판단하는 경향이 있다. 하나하나의 문제를 거론하기 보다는 전체적인 가치를 은연중에 판단해 만족 여부를 표현한다는 뜻

가장 중요한 것은 서비스의 전체적인 UX가 매력을 주지 않으면 안 된다는 것이다.

UX/UI에서의 서비스 기획은 경험요소의 근간이 되는 정보나 기능을 구체적으로 밝히는 작업 서비스 기획을 위해 시장분석을 하다보면 서비스가 지향해야 하는 방향성, 고객에게 제공할 가치와 같은 큰 그림을 생각하게 된다.

상세한 서비스 기획에 앞서 가치를 도출하고 전략을 수립하는 활동이 필요하다.

1.1.3. UX 방법론

UX 방법론 = 문제해결(Solving) 사용자의 문제를 찾아서 그 해결 방법을 아이디어, 시나리오, 프로토타입 순서로 풀어나가는 것이 UX 방법론

UX 방법론 = 사용자 경험 측면에서 문제를 밝힌 다음에 그 해결 방법을 디자인 한다.

문제를 찾는 3가지 관점

1. 프로세스 중심

문제를 찾아 나가는 절차를 중요시 사용자들이 서비스를 이용하는 경험을 실제로 조사 사용자들이 겪는 고충이나 니즈, 행동 등을 면밀하게 분석해 문제를 찾는다.

이후 과정은 찾아낸 문제를 해결하는 일련의 절차로 구성된다.

2. 원칙 중심

사람들이 보편적으로 가지고 있는 심리적인 경향 서비스 이용 시 겪게 될 것으로 예상되는 고충 디자인 영역별로 준수해야 할 원칙을 가지고 문제를 찾는다. 심리학이나 사용성, 게슈탈트 원리(사람들이 사물을 지각할 때 보이는 경험을 이용한 원리), 인터랙션 디자인 원칙이 중요시 된다.

3. 트렌드 중심

현시대의 디자인 트렌드를 중요시 최근의 기술이나 디자인 트렌드의 변화에 따라 그것을 받아들이는 사용자 경험도 큰 영향을 받는다는데 주목

위 3가지 관점은 서로 배타적이기 보다는 UX 프로젝트의 목적 및 성격에 따라서 우선순위가 다르게 적용된다.
대부분의 UX 프로젝트는 프로세스 중심으로 전개 되면서 원칙과 트렌드를 부차적으로 활용한다.

UX 방법론 프로세스

UX 방법론은 문제 해결(Solving)의 방법론 문제를 정의한 다음에는 그 해결 방법을 큰 그림에서 시작해 점점 구체적인 디자인 영역(UI, IA, 이용흐름, 인터랙션, GUI)까지 정의한다.

그러나 구체적인 디자인 영역을 하나씩 고민하기에 앞서 전체적인 서비스의 내용을 먼저 고민하고, 전체적인 서비스의 내용을 고민하기에 앞서 서비스의 콘셉트와 전략을 먼저 정의해야 한다.

1.2 UX란?

1.2.1. User (사용자)

우리가 이야기 하는 ‘사용자’라는 정의에는 3가지 관점이 결합돼 있다.

1. 사람(Human)

서비스를 이용하는 과정에서는 사람이면 누구나 갖는 보편적 특성이 나타난다.

복잡함을 회피하려는 성향, 모양 차이보다 색상 차이를 주시, 시각/청각적인 단서가 주어지면 경로를 찾는데 수월한 것 등 사람이 갖는 일반적인 심리적 성향은 UX품질을 판단하는 기초적 원리가 된다.

2. 사회인(member of society)

유행이나 사회경제적 상황, 기술 트렌드, 세대적 성향에 영향을 받는다.

일상생활 전반이 모바일 위주로 변해가거나, 공유 문화에 익숙해 지는 것과 같이 전체 세대가 공유하는 트랜드와 세대 별로 그들만의 특징이 두드러지게 나타나는 트랜드도 있다. 사용자는 한 사람의 사회인으로서 서비스를 이용하기 때문에 현시대의 트렌드를 읽는 작업은 좋은 UX를 제공하는 데 도움이 된다.

3. 사용자

서비스를 이용하는 주체인 (좁은 의미의) 사용자 같은 서비스를 이용해도 서비스에 기대하는 게 서로 다르고, 불편함을 느끼는 지점도 다르지만 실제로는 비슷한 유형들이 나타난다.

UX에서는 이러한 유형(persona)을 찾아내서 시장을 구분(segmentation)하거나 더 나아가 표적으로 선택(targeting) 하는 작업을 종종 진행한다.

1.2.2. 경험 vs 사용자 경험

경험은 매우 포괄적인 용어(사람들의 일상 전반, 살아온 역사, 가치관 등)이다. 사용자 경험은 ‘특정 제품이나 서비스를 이용하는 사람들의 경험’으로, 우리는 일상적인 경험 전체가 아닌, 특정 서비스와 관련된 경험에 주목해야 한다.

UX(사용자 경혐)의 정의

특정 서비스를 이용할 때 사용자들이 보이는 생각, 감정, 행동
사용자들이 서비스 이용 시 겪는 고충, 서비스에 대해 갖는 니즈

1.2.3. 경험요소

서비스에 내재하는 여러 가지 요소 중에서 실제 사용자 경험과 연관된 것들 경험요소는 What과 How로 크게 구분할 수 있다.

What

기능
정보
외형
UI
디자인

How

이용절차
배열
안내
인증
에러 처리
커뮤니케이션

구글 지도 앱의 경험 요소 구글맵 경험요소 예시

What: 위치 선택, 추천 경로, 대안 경로, 지도상의 경로 표시, 경유지 선택, 공유
How: 지도 조작, 거리와 시간의 교차 안내, 교통편으로의 추가적인 접근

UX/UI 디자인 시에는 어떤 경험요소가 있는지를 먼저 파악하고 나서 어떤 경험요소가 있어야 하는지, 문제가 무엇이고 어떻게 해결해야 하는지를 고민해야 한다.

1.2.4. UX에 작용하는 것들

시간은 UX에서 매우 중요한 의미를 갖는다. 사용자들의 경험에는 과거의 경험이나 미래에 대한 기대가 반영되어 있다. 그 때문에 현재의 경험을 제대로 이해하기 위해서는 과거의 경험과 미래의 기대도 같이 봐야 한다.

과거 경험

사용자들은 과거 경험을 통해서 이미 익숙해져 있는 아이콘이나 레이블을 고수하는 경향이 있다. 본인에게 익숙하지 않은 아이콘이나 레이블의 경우 불편함을 드러내는 경우가 있다. ex. 쇼핑몰의 장바구니 아이콘

장바구니 아이콘

현재 맥락

현재의 맥락(Context)은 UX에 가장 많이 작용하기 때문에 잘 이해해야 한다.

맥락: 주어진 대상 이외에 그 대상과 함께 제시된 모든 정보

UX 외부에서 맥락만큼 UX에 큰 영향을 미치는 것은 없다. 맥락에 따라서 사용자의 관심사, 접근 방법, 예상 결과, 행동 절차 등이 달리지기 때문 똑같은 앱을 사용하더라도 장소와 시간에 따라 경험이 달라진다.

미래 기대

미래에 대한 기대도 현재의 UX에 영향을 미친다. ‘이런 기능이 있었으면 좋겠다’와 같이 막연한 기대가 현재 이용경험에 작용하여 불만을 만들어 내고, 사용자 스스로 차선책을 생각해 미래 기대를 대신할 대안이나 우회로를 찾게 된다.

미래 기대의 작용은 UI에서 작은 단서(아래 예시의 메뉴 아이콘)에도 의미를 부여하고 그것을 자연스럽게 누르게 만든다.

구글 추가 메뉴

시간 흐름에 따른 정보 니즈

현재의 UX는 반드시 현시점에서의 최신 정보와 일치하지 않는다. 사람들은 과거의 정보를 원할 때도 있고, 미래의 정보를 일고 싶어하기도 한다. ex. 과거: 기존 이용 이력, 현재: 교통상황, 미래: 예상 주가

1.2.5. UX의 품질

UX 품질 판단

우리가 추구해야 하는 UX 품질은 시장 내의 경쟁에 따라 문제가 없을 수도 있고, 심각한 문제가 될 수도 있다.

UX 품질 판단 기준

[상식적 판단] 무조건 이게 더 낫다.
[맥락 고려] 맥락을 감안했을 때 이게 더 낫다.
[명확성] 맥락을 감안했을 때 이게 더 낫다.
[조건별 취사선택] 조건에 따라 판단이 달라진다.
[충돌하는 두 가지 중 더 나은 선택] 트레이드 오프(Trade-off)를 어느 쪽이 더 맞게 했는가?
[대상의 누구인가] 누그를 대상으로 했는가에 따라 평가가 달라진다.

좋은 UX란?

사용자들이 느끼는 보편적인 고충, 갈등, 어려움 등이 없는 것
실체 서비스를 이용하는 구체적인 맥락이 참작된 것
결과가 명확하게, 그리고 세심하게 전달되는 것
주어진 콘텐츠의 양, 이용흐름의 복작성, 필요한 정보/데이터에 따라서 사용자에게 필요한 도구와 지원을 적절하게 제공하는 것
희생과 선택(Trade-off)을 통해서 경쟁사와는 다른 그 서비스많의 정체성이 분명한 것
대상 사용자의 특성을 감안하여 좋은 기본값(Good Default)을 제공하고, 기능이나 이용흐름, 제시되는 정보의 양이 대상 사용자가 수용할 수 있을 만큼 적당한 것