Material Design

• 구글 생태계 애플리케이션 디자이너와 개발자들을 위해 고안된 디자인 시스템

• 앱에서만 사용하는 것이 아닌 웹에도 포함이 됨

• material.io 웹 사이트에서 안드로이드, 플러터, 웹 사이트에 대한 심층적인 UX가이드와 UI 콤포넌트의 적용을 제공

• 안드로이드는 준수하지 않았다고 해서 반려하지는 않음

• 애플은 위배사항이 많으면 앱 스토어에서 반려

Accessibility 접근성!

• 장애를 가진 사람이나, 경험이 부족한 사람들을 포함하여 모든 사람들이 자유롭게 사용할 수 있어야 함
• 접근성은 Material 디자인의 핵심적인 기본가치
• 개발자와 디자이너들에게 접근성을 높이기 위해서
• 사용자의 다양한 경험, 특히 장애를 가진 사람의 경험을 처음부터 고려할 경우 오류를 바로 잡기 위해 다시 디자인하는 경우를 방지할 수 있음
  • 만약 접근성을 생각하지 않고 만들었다가 불편해 하는 사람이 많이 나올 경우 다시 비용을 들여 개발해야하는 경우가 생길 수 있기 때문
• 이는 기술/디자인 부채 경감이라는 의미에서도 중요한 일
  • 기술부채 : 현 시점에서 더 오래 소요될 수 있는 더 나은 접근방식을 사용하는 대신 쉬운(제한된) 솔루션을 채택함으로써 발생되는 추가적인 재작업의 비용을 반영하는 소프트웨어 개발의 한 관점 ( 미래의 나에게 맡긴다? )
• 주요한 고려대상으로는 저시력자 ( 약시 ) , 시각/청각장애인, 인지장애인, 거동이 불편한 사람, 혹은 일시적인 불편을 가진 사람들 ( 팔이 부러져서 잘 못쓰는 경우등 .. ) 이 있음

Assistive Technology 보조기술

• 장애를 가진 사람들을 보조해주기 위한 방법
• 장애를 가진 사람들이 키보드, 스크린 리더, 확대된 화면, 음성 명령 등을 이용하면 디바이스를 사용하는데 어려움을 경감시킬 수 있음

Hierarchy 계층

• 사용자는 화면 탐색이 용이할 때 앱에서 가장 중요한 부분이 어디인지 알기 쉽다.
• 어떤 정보가 중요한지에 대해 강조하기 위한 수단으로는 색상, 도형, 텍스트, 애니메이션, 명로성등이 있다.

Navigation Hierarchy

• 올바른 레이블 설정, 접근하기 쉬운 버튼 요소 등으로 잘 구성된 내비게이션은 사용자가 달성하고자 하는 목표에 최소 단계로 도달하도록 해 줌
• 텍스트 입력 박스등에 대한 자동 포커싱 등은 자주 수행해야할 작업에 적용할 수 있는 좋은 예시
  • 만약에 텍스트 입력할때 enter를 누르면 다음 화면으로 넘어가고, 다음 텍스트 입력에 커서를 올리는 것이 어떤식으로 입력할지를 자동적으로 제시해주는 것
• 화면 안에 배치하는 이미지, 텍스트, 버튼 등이 늘어날 수록 화면의 복잡도 역시 증가함
• 화면 안의 높은 복잡도는 사용자가 길을 잃게 만들기 때문에 다음과 같은 방법으로 정돈이 필요하다.

Clearly Visible Elements

• 애매하게 만드는 것이 아닌 요소들이 다른 것과 확연하게 구분이 될 수 있게 만드는 것

Sufficient contrast and size

• 상대적으로 잘 보이게 하는 정도의 대비를 준다.
• 충분한 대비와 크기를 배치하라

A Clear Higrarchy of importance

• 중요도에 따라서 위치를 바꾸거나, 크기의 대비를 주어 큰 배치는 중요한 요소로 설정해야 한다.

Key Information Emphasize

• 중요한 정보는 강조를 해야하며, 심볼을 넣거나, 글 색상등을 바꿔서 설정해야 한다.

Visual Hierarchy

• 글을 읽을때 왼쪽-> 오른쪽, 위 -> 아래 이런식으로 눈의 흐름이 흘러간다.
• 고려해야 할 것은 아랍 등 오른쪽 -> 왼쪽, 위 -> 아래 순으로 눈의 흐름이 흘러간다면, 배치 고민을 다시 해봐야 한다.

Touch and Pointer Tagert Sizes

• 터치 패널을 생각해야함
• 대부분 플랫폼에서 터치 영역은 최소한 48x48dp 이상을 준수하는 것이 이상적임
• 밀리미터 단위로 고려할 경우 화면상에 표기되는 크기가 가로세로 9mm이상은 보장되는 것이 이상적이다.

DP

• Density-indendent pixel / 디바이스 디스플레이 밀도에 따라 가변되는 추상적 단위
• 구글에서 기기의 디스플레이 별 요소 크기 차이를 상쇄하기 위해 정의함
• 디자이너들에게는 픽셀 단위가 아닌 dp단위로 작업하는 것을 권장함

  DP = px * ( 160 / DPI )

• DPI : Dots per inch / 디바이스 입방인치 당 픽셀 밀도 ㅍㅍ ㅍ

Targer Spacing

• 통상적인 경우에 인터랙션 대상들끼리 최소 8dp의 간격을 유지해 주는 것이 정보 밀도에 보기에 좋다.

Essential And Non-Essential Elements

• 정보를 전달하는 이미지내에 중요한 부분과 그렇지 않은 부분을 구분할 것
• 장면 내에 주요 정보를 담은 부분은 큰 텍스트 부분 기준 배경과 3배 이상의 대비차이를 둘 것

Color & Constrast

• 색상과 대비는 사용자가 앱의 내용을 한눈에 해석하고 컨텍스트에 맞는 올바른 인터렉션 요소를 발견하게 해주며 상호작용시 일어날 일에 대해 이해하게 해줌
• 색상은 앱의 전체적인 분위기, 느낌, 중요 정보 등을 전달해 주는 요소
• 주 색상 ( Primary Color ) 보조색상, 강조색상을 선택할때에는 앱의 사용성 향상을 고려해야 함
• 색상 요소 사이의 충분한 대비를 설정한다면 저 시력 사용자가 앱을 사용하는데 도움이 됨

Contrast Ratios

• 색상 대비란 특정 생상이 다른 색상에 비해 얼마나 구분이 가는가의 차이
• 사용자에게 있어 색상 대비는 다양한 텍스트와 비-텍스트 요소들을 구분하는데 중요한 요소
• 특히 밝은 햇빛 아래 등과 같은 상황에서 높은 색상 대비는 화면 내 요소들을 구분하기 좋게 만듦

Adobe.color

Clustering Elements

• 버튼과 같은 특정 비-텍스트 요소들은 버튼 색상이 배경 대비 3:1 이상이 권장됨

---

Content Design

Explain Consequences

• 사용자의 행동에 대해 중립적으로 직접적으로 설명하는 것
• 경고 문구에 대해서는 겁을 주거나, 협박, 생색내는 듯한 표현을 피할 것
• 알럿에 대한 문구는 항상 기능이 실행되었을 때 일어날 결과에 대한 내용만 기술

Use Scannable Words and Formats

• 사용자는 사용 맥락 상에서 자신에게 맞는 기능/정보를 찾기 위해 UI텍스트를 탐색
• 따라서 사용자들에게 도움이 되도록 내용을 올바르게 함축한 제목을 달아야 함
• 사용자가 내용을 단순히 훑어보거나 빠르게 원하는 내용을 찾기 위해 서두를 경우에는 이러한 고려가 실수를 줄여주기 위해 매우 효과적 방법

Use second person pronous

• 당신과 같은 사용자를 지칭하는 2인칭 대명사를 사용할 것

• 2인칭 대명사를 사용할 경우 사용자는 자신에게 전달되는 메시지임을 더욱 명확하게 알 수 잇음

• 사용자의 관점에서 작성된 안내문은 사용자가 행동을 취하는데 도움을 줌

• 기계적인 답변은 지양할 것

• 나, 너의 와 당신 당신의 같은 1인칭과 2인칭 표현을 섞어 쓰지 말 것 ( 맥락이 틀어질 수 잇음 )

• 같은 맥락 안에서 인칭대명사를 섞으면 맥락을 살피는데 어려움을 줄 수 잇음

  ex ) photos -> your photos
  my photos -> your photos
  맥락이 혼란스러움

• 서비스가 사용자에게 도움을 주는 맥락에서 나 혹은 우리라는 말은 로봇같이 들리거나 사용자를 당황하게 할 가능성이 높음

• 이러한 사용자 관점을 고려하여 우리 등의 단어를 사용하지 않는 문장으로 고치는 것을 권장

Exeptions in using pronouns

• 법률 준수나 약관 동의에 대해서는 나, 우리 등의 인칭대명사 사용에 예외를 적용할 수 있음
• 이 경우 1인칭 대명사는 사용자 자신에게 책임이 지워진다는 의미를 담고 있기 때문
• 단 브랜딩 전략이 아닌 이상 서비스 자체를 의인화 하지 말 것

Gesture overview

• 터치스크린 디바이스에서 사용자가 화면 내 요소와 인터랙션 할 수 잇는 수단
• 제스처를 사용할 때는 기능이 동작하는 맥락과 일치하는지 반드시 고려해야함
• 접근성을 위해 화면 내의 주요한 기능을 제스처 이외의 수단으로도 수행할 수 있도록 하는 것을 권장
• 앱의 제스처 영역이 시스템 제스처 영역 ( 화면 모서리 등 ) 과 겹치지 않도록 할 것

Tap

• 화면의 요소를 손가락으로 건드리는 동작
• 요소를 선택할 경우에 수행하는 제스처

Long Press

• 일정 시간동안 요소 위에 손을 올려놓는 동작
• 탭에 비해 보조적인 기능을 수행할 때 사용

Scroll & Pan

• 손가락을 화면 위에서 수직/ 수평으로 미는 동작
• 화면 안의 내용을움직여 가며 탐색할 때 수행

Drop

• 화면 위에 손을 얹은 채 밀어내는 동작
• 화면 내의 요소의 위치를 조작할 때 사용

Pinch

• 두 손가락으로 꼬집듯이 수행하는 동작
• 화면 내 요소의 크기를 조작할 때 주로 사용

출처 : 멋쟁이 사자처럼 유민영 강사남의 UI/UX 특강