[8월 4주차] Material Design 3 - Adaptive Design (2)

Component Adaptation

기기의 크기 및 사용처에 따라 시각적인 표현 (패딩, 사이즈, 레이아웃, 정렬 등) 을 달리 하는 것을 Component Adaptation이라고 한다.

 

UI 요소나 레이아웃 컨테이너의 크기를 조정할 때, 위치나 정렬은 어떻게 바뀌어야 하는지도 고려해야 한다. 해당 UI 요소 및 컨테이너 '내부'에 있는 요소를 어느 기준으로 정렬할 것인지도 살펴봐야 한다. 왼쪽 / 오른쪽 / 중앙에 붙일 수도 있고 내비게이션 바 요소처럼 위치를 고정시킬 수도 있다.

 

컴포넌트의 내부 구조를 어떻게 조정할지 고려할 때에는, 인체공학적인 측면 역시 고려해야 한다. 예를 들어 화면의 크기가 커질수록, 가로 방향 카드 요소의 테두리는 더 각진 사각형의 형태가 될 수 있다. 이렇게 조정해야, 큰 화면에서도 이미지가 들어갈 공간을 충분히 확보하고 폰트 크기도 키워 가독성을 높일 수 있기 때문이다. 더불어 가로로 늘리는 것이 가능한 아이콘 버튼의 경우, 아이콘과 텍스트 레이블이 서로 붙은 채로 버튼 중앙에 위치하게끔 조정하기도 한다.

 

(1) Visual presentation

시각적 표현의 조정은, 반응형 UI 요소를 디자인할 때 사용하는 가장 흔한 방법이다. UI 요소의 크기 및 위치에 영향을 주고 그에 따라 각 요소 간의 관계에 변화를 주기도 한다. 예를 들어, 모바일 기기의 텍스트 리스트와 같은 UI 요소가 있다고 가정해보자. 그 요소는 태블릿과 같이 좀 더 큰 화면에서, 여백 및 행간 등을 조정해 화면 크기에 조화롭게 맞출 수 있을 것이다.

 

(2) Component swapping

화면의 레이아웃이 바뀌면서, 특정 UI 요소 또한 그와 비슷한 기능을 하는 다른 요소의 모양으로 바뀔 수 있다. 이렇게 하면 크기가 큰 화면을 위해 UI 요소를 조정할 때 기능적 / 인체공학적인 측면을 적절히 고려할 수 있다. 예를 들어, 모바일 앱에서는 화면 하단에 있는 Navigation Bar가 태블릿에서는 Navigation Rail 로 바뀌거나 그것보다 더 큰 화면에서는 Navigation Drawer로 바뀌는 것처럼 말이다.

 

(3) Component groups

기능적으로 동일한 요소들은 그룹으로 묶어서 상호교환하며 사용할 수 있도록 한다. (위에서 언급한 Navigation Bar의 사례가 가장 와닿았다) 서로 교환하며 사용할 요소를 선정할 때에는 반드시! 기능적으로 동일한지의 여부를 확인해야 한다.

 

---

Responsive patterns

화면의 크기가 바뀜에 따라 UI 요소의 정렬도 달라질 수 있다. 화면의 가용 범위 내에서 요소를 재배치하거나 숨김 처리 하는 등의 방식으로 정렬을 변경한다.

 

(1) Reveal elements

작은 화면에서는 햄버거 메뉴로 접혀 있었던 기능이, 큰 화면에서는 opened navigation drawer으로 표현될 수 있는 것처럼.

 

(2) Reposition elements

요소의 배치를 달리 하는 것도 방법이다. 모바일 화면에서는 하나의 열로 정렬되었던 UI 카드가, 더 큰 화면에서는 두 개의 열로 나뉘는 것이 예시이다.

 

---

External inputs for devices

Common features of external inputs

• 마우스 - 좌우 클릭, 휠, 버튼
• 트랙패드 - 좌우클릭, 제스쳐, 햅틱 (만지는 것)
• 키보드 - 텍스트 입력, 미디어 조절, 특수 키 (ex. Shift, Ctrl과 같이 다른 키와 입력했을 때 특정한 기능을 수행하는 것)

---

Mouse and cursor interactions

외부 입력장치로써 마우스가 사용되는 경우, 디바이스의 종류와 무관하게 마우스의 커서가 화면에 표시되어야 한다. 마우스는 태블릿, 랩탑, 핸드폰 등에 연결될 수 있다. 

 

(1) Primary click - mouse cursor

마우스 입력을 별도로 특정해서 인식하는 장치(모바일 기기 등을 말하는 것 같음) 가 아닌 경우에는, 마우스 커서 인풋이 곧 터치 인풋으로 매핑된다. 마우스 클릭에 대한 피드백이, 터치 인풋에 대한 피드백과 동일하게 다뤄져야 한다는 뜻이다.

 

(2) Secondary click - context menus

우클릭의 경우, 복사/붙여넣기 등과 같은 부가적인 메뉴를 표시하는 것이 원칙이다.

 

(3) Hover

호버된 요소가 상호작용 가능한 요소임을 나타낼 수 있게끔 시각적인 표현에 변화를 준다. 그림자 효과가 생긴다든지, 배경색이 추가된다든지 하는 것은 예시이다.

더불어 상호작용 가능한 이미지 요소가 호버 상태가 되는 경우, 마우스 커서를 화살표에서 손 모양으로 바꾸는 것도 방법이다. 상호작용 가능한 텍스트가 호버 상태로 변하는 경우, 커서가 I-beam 모양으로 변함에 따라 텍스트 선택이 가능한 범위를 보여 준다. 선택 및 수정이 불가한 텍스트의 경우에는 마우스 호버에 따른 상태 변화가 불필요하다. 오히려 사용자를 혼란스럽게 할 수 있다.

 

(4) Text Selection

마우스, 트랙패드, 스타일러스 등을 이용해 텍스트를 선택하는 경우, 선택된 영역에 하이라이트 배경색을 추가한다. 만약 터치 스크린을 통해 텍스트를 선택한 경우에는 배경색 하이라이트와 함께 copy/share/search 와 같은 메뉴도 동시에 표시한다.

 

---

Mouse wheel and trackpad gestures

(1) Vertical scroll

리스트 형식의 요소 위에 커서가 놓인 경우, 마우스 휠 또는 터치패드 위에 두 손가락을 동시에 올리는 동작을 통해 리스트 내에서의 세로 방향 스크롤이 가능하다.

 

(2) Touch scroll & mouse text selection

터치 & 드래그 또는 텍스트 영역을 드래그하는 동작을 통해 텍스트를 선택할 수 있다.

 

(3) Horizontal scroll

마우스 휠을 통해 가로 방향의 스크롤이 가능하다 (몰랐던 사실) 트랙패드의 경우 두 손가락을 동시에 올리는 동작을 통해 가로 방향의 스크롤이 가능하다 <- 세로 방향 스크롤과 동일하구나!

 

---

Physical keyboard

(1) Show and hide virtual keyboard

외부 입력 장치로써 별도의 키보드가 연결된 경우, 화면에서는 가상의 키보드를 노출하지 않아도 된다.

 

(2) Common keyboard interactions

• 엔터 : 메시지 전송 등과 같이, 키보드를 통해 입력한 텍스트의 입력을 완료하는 동작을 보통 수행한다
• 스페이스바 : 미디어 재생 중 사용되는 경우, 해당 미디어의 재생을 일시 중지하는 동작을 수행한다