UX/UI란?

• UX : 사용자가 직간접적으로 이용하면서 느끼고 생각하는 모든 총체적인 경험

• UI : 주로 화면의 전체적인 구조와 시각적인 요소(레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘, 이미지 등)

• 제품과 사용자 사이를 이어주는 것이 바로 UX/UI

용어

HCL(Human Computer Interaction)

• 인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야
• 연구의 주된 목적은 사람이 컴퓨터를 더 쉽게 사용하고, 더 - 잘 활용할 수 있도록 개선하는 것
• 대학원에서는 UX/UI보다 HCL이라는 용어를 더 많이 사용

CX (Customer Experience)

• 브랜드를 처음 만나는 순간부터 제품을 사용하는 고객 여정의 모든 측면에서 고객이 경험하는 느낌이나 인상을 말함
• UX와 구분되는 특징 : 느낌, 인상에 더 집중한다.
• CX에는 고객서비스(CS)가 포함

BX (Brand Experience)

• 고객이 브랜드와 상호작용할 때 갖는 전반적인 인식
• CX와 UX모두 BX에 포함된다고 볼 수 있다.
• BI(Brand Identity)라고 부르는 것들 이름, 로고, 컬러, 슬로건 등이 포함

UX/UI 디자이너의 역할

💡 UI 디자이너

• 화면의 전체적인 구조와 시각적인 요소들을 디자인하는 사람
• 시각적인 요소를 활용하여 화면 간의 관계와 인터페이스의 구성을 디자인하는 것에 집중
• 주 업무는 레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘, 이미지 등을 디자인

💡 UX 디자이너

• 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험을 디자인하는 사람
• 사용자를 분석한 데이터를 토대로 편리한 경험을 이끌어내기 위한 일에 집중
• 주 업무는 유저 리서치와 테스트, 정보 구조 설계, 페르소나와 유저 시나리오 작성(조사와 분석의 비중이 크다.)

💡 프로덕트 디자이너

• UI와 UX를 포함하여 제품 전반의 경험을 디자인하는 사람
• UX/UI 디자이너를 아울러 프로덕트 디자이너로 부르고 있다.
• 사용자가 경험하는 제품의 시작과 끝 모두를 담당하며, 반복적인 개선을 통해 제품을 고도화하는 일에 집중
• 주 업무는 문제 정의, 가설 설정, 솔루션 도출, 테스트 등

디자인 가이드라인

• 일관된 디자인을 하기 위한 지침서. 디자인 할 때 지켜야 할 원칙/규칙
• 컬러, 버튼, 폰트, 컴포넌트 디자인의 스타일부터 브랜드 철학이나 디자인 원칙까지 포함될 수 있다.

애플의 Human Interface Guidelines(HIG, 히그)

• HIG는 애플 생태계 내에서 플랫폼 간의 흐름이 끊김없이 이어질 수 있는 경험을 제공할 수 있도록 지원하기 위해 만들어졌다.
• ! HIG를 지키지 않으면 앱스토어에 앱 등록을 거부 당할 수 있다.

✨ Modality

Modal 컴포넌트는 IOS에서 주로 사용하는 특징적인 컴포넌트 중 하나.
사용자에게 임시로 콘텐츠를 보여주고, 특정 작업을 수행하게 할 때 사용한다. 페이지 이동과는 다르다.

구글의 Material Design

• Material Design은 다양한 안드로이드 기기에서 공통으로 적용할 수 있는 디자인 가이드라인

살펴보면 좋은 페이지

Accessiblillity

• 접근성은 장애나 불편함을 가진 사람 모두가 제품을 잘 사용할 수 있도록 사용성을 높이는 원칙
• 누구에게나 평등하면서 높은 사용성을 가진 제품을 만들기 위함.
  Layout
• 다양한 기기에서 흐름이 끊김없이 자연스럽게 이어질 수 있도록 반응형 레이아웃 가이드를 정의하고 있다.
  Elevation
• 플랫 디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리기 위한 목적

UX/UI디자인의 역사와 트렌드

리얼 메타포

• 1990년대, IBM, HCL 디자인 팀에서 초보자들도 컴퓨터를 쉽게 이용할 수 있도록 실제 물건을 모방해 디자인한 것.

스큐어모피즘

• 2007년 아이폰과 함께 등장.
• 실제 물건의 특징을 최대한 반영하여 디지털 화면에서도 어려움 없이 사용할 수 있도록 의도한 것.

플랫 디자인

• 애플이 iOS7에서 선보인 디자인 양식
• 사람들이 다년간 스마트폰을 사용해오면서 인터페이스를 조작하는 능력이 늘어났기 때문에 이전처럼 자세하게 디자인 하지않아도 UI를 이해할 수 있게 됨
• 그림자와 같은 입체적인 효과를 줄이고 최대한 단순하게 표현

뉴모피즘

• 스큐어모피즘과 플랫디자인의 장점을 결합한 디자인
• 단순한 디자인이지만 그림자를 사용하여 대상을 구분하고 볼륨감을 부여하는 것이 특징

숙제- UX/UI 관점에서 화면을 분석

▶ 유튜브 뮤직 스크롤러블 탭메뉴 분석

✅ 좋은점 :

• 선택된 탭 강조 강화 : Material Design에서는 활성 탭에 밑줄, 색상 변화, 배경 강조를 통해 명확히 구분하도록 권장
• 탭 개수와 스크롤 : 탭이 많아 가로 스크롤이 필요한 경우, 스크롤 위치에 따른 시각적 힌트

⛔ 아쉬운 점 :
탭 간 구분이 다소 모호함

• 탭 버튼의 배경 간 대비가 다소 낮아 탭 버튼 간의 경계가 명확해 보이지 않는다. 경계선의 대비를 높여 구분감을 주면 좋겠다.