[#40] 사용자 경험 CX 디자인

CX(Customer Experience)

• 고객 경험 디자인
• 고객이 제품이나 서비스를 인지, 탐색, 이용하는 전 과정에서의 경험을 설계하고 최적화하는 작업
• UI/UX를 포함

 

UI(User Interface)

• 사용자 인터페이스
• 어떻게 보이고 기능하는가

 

UI 색상

색의 역할

• 브랜드 아이덴티티 각인
• 마케팅 관점에서 클릭을 유도
• 방향을 제시

Primary Color(주색)	- UI 내에서 가장 메인으로 사용되는 색상 - 클릭을 유도하는 버튼에 많이 사용 - 주로 브랜드의 고유한 아이덴티티 색상을 사용
Secondary Color (보조색)	- 메인 컬러보다 덜 중요한 요소에 사용 - UI 컨텐츠에 사용 - 일반적으로 브랜드마다 1~5개 정도의 보조 색상 - 너무 다양한 컬러를 사용하지 않는게 좋음
Neutrals(중성색)	- 흰색부터 검은색까지 회색 음영을 포함 - 배경, 텍스트 색상 등에 사용 - 텍스트에 활용될 떄는 대비를 통한 접근성을 고려해야 함
Semantic Color(시맨틱 컬러)	- 목적을 전달하는 색상 - 성공, 경로, 에러, 정보의 상황에 따른 4가지 색으로 구성
Expended Palettes(확장 팔레트)	- 다양한 사용 사례를 충족하기 위한 확장형 색상 - 주색과 보조색에 톤을 추가하거나 결합해서 사용

 

레이아웃

화면 크기, 텍스트, 이미지, 여백 등 다양한 구성 요소를 고려하여 앱 내에 정보를 시각적으로 배치하는 것

근접성

• 연관성이 있는 요소는 다른 요소들보다 가깝게 배치
• 서로 가까운 요소를 그룹으로 인식

폐쇄성

• 여백과 간격으로 전체 모양을 디자인
• 인지 부하 감소

전경과 배경

• 전경과 배경이 확연하게 구분되게 디자인
• 어둠과 그림자 이용

 

그리드 시스템

여러 종류의 요소를 질서 있게 배치하기 위한 그리드 규칙을 의미

• 12단 주로 사용: 2, 3, 4, 6단으로 했을 때 정수로 나누기 떄문에 가이드라인 잡기와 퍼블리싱에 편함

1단 레이아웃	큰 이미지나 영상 컨텐츠를 스크롤을 통해 이용하면서 강조
2단 레이아웃	1단 레이아웃보다 더 많은 정보를 담을 수 있지만 가로 폭이 좁아 텍스트 정보는 한계가 있음
3단 레이아웃	텍스트 정보보다는 이미지 위주로 한 상품을 간단 소개하는 경우 사용

 

UX(User Experience)

• 사용자 경험
• 사용자가 서비스를 이용하는 데 느끼는 총체적 경험

 

아이콘

• 여러 의미를 지닌 아이콘 사용 피하기
• 너무 현란하거나 디테일하지 않도록 하기
• 사용자에게 도움이 될 수 있다면 레이블 사용하기

UX 라이팅

• 의미 없는 단어 제거하기
• 의미 없는 문장 제거하기
• 반드시 필요한 내용만 전달하기
• 우리만 아는 내용은 바꾸기

사용성

• 정보를 모두 입력하고 나서 다음 단계로 넘어가게 하기
• 포커스 상태로 진입하게 하기
• 사용자가 이전에 입력한 정보라면, 미리 채워주기
• 모바일의 경우, 사용할 키보드 미리 세팅하기
• 버튼을 누르거나 input을 최소화하기

사용자 심리

• 사용자 온보딩 - 빈 상태 고려하기
• 로딩 바/스켈레톤 UI 사용하기

 

유지보수

FE 성능 측정

📍 LCP

• 주요 컨텐츠들이 로드데는 데 걸리는 시간
• 사용에 불편이 없는 시점까지

📍 FID

• 반응속도
• 버튼을 클릭했을 때, 그에 따른 반응이 일어나는데 얼마만큼의 시간이 걸리는지

📍 CLP

• 레이아웃의 안정성
• 요소들의 수치가 들쑥날쑥한지, 위치의 일관성이 없는지

- Pagespeed Insight에서 url 입력 후 성능 확인 가능
- 성능 측정한 것 포트폴리오에 넣으면 좋을 듯 

 

---

디자인 시스템

디지털 제품의 사용 기준을 명확하게 정의한 재사용 가능한 구성 요소의 모음

디자인 시스템 필요성

• 일관성 향상
• 시간 절약
• 공통된 페이지로의 협업
• 리스크 최소화
• 높은 향상성
• 브랜드 구축

 

디자인 시스템 구조

개요	디자인 시스템의 일련의 디자인 원칙을 작성한 문서
파운데이션	가장 기초가 되는 디자인 요소의 모음
컴포넌트	디자인 시스템에서 재사용 가능한 구성 요소
패턴	일관된 사용자 경험을 제공하기 위해 컴포넌트를 특정 조합으로 묶은 것으로 사용자가 목표를 달성하는 방법의 사례. 템플릿
기타	기업에 따라 커뮤니티를 구성하거나 자료를 공유할 수 있는 링크를 제공
스타일 가이드	제품의 전반적인 시각적 요소와 일련의 디자인 원칙을 정리해 놓은 문서
패턴 라이브러리	재사용이 가능하도록 기능적으로 설계한 컴포넌트의 모음
시스템 가이드	디자인 시스템을 운영하고 관리하는데 필요한 가이드 문서

 

디자인 시스템 구축 방법

아토믹 디자인(Atomic Design)

화학의 원리를 이용해 컴포넌트의 구조를 원자, 분자, 유기체, 템플릿, 페이지 단위로 구성하여 전체 디자인 시스템을 구축하는 방식

원자	- 컴포넌트의 가장 작은 단위 요소 - 레이블, 입력 창, 버튼과 같이 독립적으로 사용할 수 없는 단계
분자	- 원자를 결합해 형성 - 기능을 수행할 수 있는 형태
유기체	- 기능을 수행하는 분자를 결합 - 이동이 가능하여 독립적인 사용과 재사용이 가능한 구성 요소를 만들 수 있음 - 최종 인터페이스의 UI 형성 가능
템플릿	- 유기체를 결합하여 최종 결과물에 가까운 페이지를 형성 - 레이아웃 구성 가능 - 분자와 유기체에 대한 컨텍스트를 구체적으로 제공할 수 있음
페이지	- 완성된 시안 구성 - 분자, 유기체, 템플릿을 기능에 맞게 수정하면서 디자인의 실제 맥락을 점검 가능 - 변화하는 템플릿 구조 확인 가능

 

📍 단점

1. 개발 규모가 크지 않을 때 과하게 소비되는 경향
   컴포넌트를 작은 단위로 나누고 체계적으로 구성하는 방식이기 때문에, 프로젝트의 규모가 작을 때는 오히려 과도하게 복잡하고 시간이 많이 들 수 있음
2. 초기 설계가 큼
   처음 설계할 때 각 컴포넌트를 세밀하게 분리하고 정의해야 하기 때문에, 초기 설계가 많이 필요함
3. 구축이 느림
   각 컴포넌트를 독립적이고 재사용 가능한 형태로 만들어야 하기 때문에, 초기 구축이 느릴 수 있음
4. 러닝 커브
   아토믹 디자인을 처음 접하는 개발자나 디자이너에게는 새로운 개념과 방식을 학습해야 하기 때문에 러닝 커브가 존재
5. 디자이너와 개발자 간의 협업 문제
   아토믹 디자인을 잘 활용하려면 디자이너와 개발자 간의 긴밀한 협업이 필요, 컴포넌트 기반의 접근 방식이 잘 정립되어야 하고, 디자인과 개발의 일관성 유지가 중요

 

디자인 시스템 프로세스

목표 설정 ➡ 발견 및 조사 ➡ 구조 설계 ➡ 가치 설정 ➡ 키 스크린 분석 ➡ 구성 요소 분류 ➡ 스타일 가이드 ➡ 패턴 라이브러리 ➡ 시스템 가이드

 

서비스 디자인

사용자의 요구를 파악하고 이를 해결하는 전반적인 과정을 설계하고 실행 가능한 서비스 또는 제품으로 구현한 것

 

서비스 디자인 프로세스

디자인 씽킹

사용자의 행동과 이해를 바탕으로 문제를 재정의하고, 프로토타입 배포와 테스트를 거쳐 혁신적인 해결책을 도출하는 비선형적이고 반복적인 프로세스

• 5단계: 공감 ➡ 정의 ➡ 아이디어 발굴 ➡ 프로토타입 ➡ 테스트

 

더블 다이아몬드 방법론

문제를 정의하고 해결책을 도출하는 두 가지 과정이 한 점에서 시작해 확산과 수렴이라는 과정으로 구조화한 방법

 

서비스 디자인 개발 방법론

애자일 프로세스

소프트웨어가 어느 정도 사용 가능할 만큼 개발되었다면 빠르게 출시한 후 사용자의 의견을 수집하며 제품을 수정하고 다시 배포하는 과정을 반복하는 방법

린 프로세스

낭비 요소를 미리 발견해 제거함으로써 고객에서 기업의 가치를 빠르게 제공하려는 생각에서 출발한 방식

 

서비스 디자인 기획

어떤 서비스를 만들 것인지 정하는 것을 시작으로 문제점을 분석하고 사용자 경험을 바탕으로 실제 제품 및 서비스를 기획하고 정의하는 것

 

사용자 시나리오

현재 사용자들의 행동을 묘사하고 페르소나가 자신의 목적을 달성하는 방법으로 제품을 어떻게 사용할지 시나리오로 작성하는 것

• 페르소나: 실제 제품이나 서비스를 사용할 만한 가상의 인물
• POINTS 분석: 문제, 기회, 통찰, 필요, 테마, 시스템으로 나누어 사용자의 불편을 만드는 문제점과 기회 요소를 분석하는 과정

 

정보 구조

사용자가 원하는 정보를 불편함 없이 사용할 수 있도록 만든 뼈대

정보 구조 설계

서비스에서 제공하는 정보의 구성을 특정 주제별로 그룹화하고 레이블링하여 콘텐츠 흐름에 맞는 계층 구조를 만드는 것

플로우 차트

사용자에게 제품이나 서비스를 이용하는 동선을 알려주는 순서도

 

와이어 프레임

각 화면 단위의 UI를 설계하는 작업으로, 화면의 설계와 화면 간의 관계 그리고 이동 동선까지 모두 표현