[TIL][03.24] CX, UI/UX, 디자인 시스템

사용자에게 편리하고 유용한 환경을 제공하기 위해

단순한 서비스를 넘어 사업으로, 문화로 확장하기 위해

 

CX : 고객이 제품이나 서비스를 인지, 탐색, 이용하는 전 과정에서의 경험을 설계하고 최적화 하는 작업

아이폰 광고를 보고, 웹페이지를 봐서 아이폰 구매, 앱 이용

CX > UI/UX

 

UX

사용자 경험 중심적인 관점에서 앱 또는 웹을 구상하고 설계하는 모든 단계

UI

실제로 사용자가 접하게 되는 부분. 즉, 시각적으로 드러나는 것들을 디자인하는 것

 

색의 역할⭐

1. 브랜드 아이덴티티 각인

2. 마케팅 관점에서 클릭을 유도(할인 정보)

3. 방향을 제시(구매하기 버튼)

 

1. 주색 (Primary Color)

UI  내에서 가장 메인으로 사용되는 색상으로 화면 내 클릭을 유도하는 버튼에 많이 사용된다. 주로 브랜드의 고유한 아이덴티티 색상을 사용.

2. 보조색 (Secondary Color)

메인 컬러보다 덜 중요한 요소에 사용된다. UI 콘텐츠에 사용. 일반적으로 브랜드마다 1~5개 정도의 보조 색상이 있는데 UI 내에서는 너무 다양한 컬러를 사용하지 않는게 좋다.

보통 주색에서 채도를 좀 낮춤

3. 중성색 (Neutrals)

흰색부터 검은색까지 회색 음영을 포함한다.

배경, 텍스트 색상 등에 사용. 텍스트에 활용될 때는 대비를 통한 접근성을 고려해야 한다.

4. 시맨틱 컬러 (Semantic Color)

목적을 전달하는 색상. 성공, 경로, 에러, 정보의 상황에 따른 4가지 색으로 구성되어 있다.

5. 확장 팔레트 (Expended Palettes)

다양한 사용 사례를  충족하기 위한 확장형 색상

Primary Color와 Secondary Color에 톤을 추가하거나 결합해서 사용

다이나믹 컬러

앨범 이미지의 컬러를 불러와서 UI에 적용하는 다이나믹 컬러

 

레이아웃⭐

근접성

연관성 있는 요소는 다른 요소들보다 가깝게 배치

서로 가까운 요소를 그룹으로 인식

폐쇄성

윤곽선없이 여백과 간격으로 전체 모양을 디자인

인지 부하 감소

전경과 배경

전경과 배경이 확연하게 구분되게 디자인

어둠과 그림자 이용

 

레이아웃

1단 레이아웃 : 큰 이미지나 영상 컨텐츠. 텍스트 정보도 많이 담을 수 있음 ex. 인스타

2단 레이아웃은 더 많은 정보를 포함함. 비교할 때 많이 사용 ex. 오늘의 집

3단 레이아웃 : 텍스트 정보 보다는 이미지 위주로 한 상품을 간단 소개하느 경우 사용 ex. 웹툰

가로 스크롤 : 좁은 화면의 단점을 해결하는 레이아웃

 

 

 

디자인 시스템

재사용이 가능한 디자인 구성 요소의 모음 (일관성, 효율 중시)

디자인 시스템 장점⭐

일관성의 향상 : 내부 일관성(개발자), 외부 일관성(사용자)

시간의 절약 : 개발 과정을 가속화하여 제품 서비스의 구축 시간 단축

공통된 페이지로의 협업 : 프로젝트에 필요한 자료와 문서를 제공

리스크 최소화 :  제품 서비스 작업을 하는 팀에 통합 언어를 제공

높은 향상성 : 디자인 요소를 처음부터 만드는 과정을 제거

 

 

아토믹 디자인⭐

디자이너와 개발자 사이의 협업이 용이하도록 고안한 디자인 시스템

작은 것부터(ex. button, textfield, ...) 

디자인 시스템 프로세스⭐

1. 목표 설정 : 디자인 시스템을 구축하는 목표와 목적을 명확히 할 필요가 있음

디자인 시스템으로 달성하려는 목표를 정의 -> 

2. 가치설정 : 

3. 키 스크린 분석

4. 구성 요소 분류

5. 시스템 가이드 구축

 

서비스 디자인

더블다이아몬드⭐

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

1. 첫 번째 다이아몬드 영역 : 사용자가 겪은 문제를 찾고 , 디자인으로 해결할 문제를 정의하는 단계

2. 두 번째 다이아몬드 영역 : 앞에서 찾은 문제를 해결할 수 있는 다양한 방안을 탐색하고 

문제를 쫙 확장 > 하나로 수렴시켜서 정의 > 해결책 쫙 확장 > 하나로 정의

애자일 방법론⭐⭐⭐

사용자의 요구사항을 끊임없이 반영하고 점진적으로 제품을 업데이트하여 서비스가 추구하는 가치를 구현하는 프로세스

사용자 시나리오

페르소나⭐

페르소나는 인물의 성격과 성장 배경, 환경 등의 묘사로 구성됨

가상의 인물이 해당 프로젝트의 서비스나 제품을 사용하는 목표와 필요 그리고 서비스의 부재로 느꼈던 불편함 등의 내용을 포함하여 작성

와이어프레임⭐

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