rejin 아바타

서브컬처 게이머

세상의 모든 아름다운 것들을 위하여

image 33

이 폰트의 적절한 사이즈는 어느 정도일까? – feat. 구글 머티리얼 디자인

image 33

Google에서는 Andriod 환경에서 최적화된 UX/UI Experience를 제공하기 위해 Material Design Guideline을 제공한다.

사이트의 주소는 아래와 같다.

https://m3.material.io/

머티리얼 디자인(Material Design이란, 플랫 디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식을 말한다. 2014년 구글이 안드로이드 스마트폰에 적용하면서 널리 퍼지기 시작했다. 플랫 디자인과 마찬가지로 최소한의 요소만을 사용하여 대상의 본질을 표현하는 디자인 기법인 미니멀리즘(minimalism)을 추구한다.

@Wikipedia

구글 머티리얼 디자인의 종류와 활용처

나는 머티리얼 디자인 자체에 큰 관심은 없다. 하지만 최적의 UX/UI를 위한 가이드라인에는 관심이 있다.

구글 머리티얼 디자인에서는 Styles Overview라고 해서, UI 컴포넌트의 시각 디자인 가이드라인과 샘플을 제공한다. 아래는 그 범주에 해당한다.

  • Color(색감)
  • Elevation(깊이)
  • Icons(아이콘)
  • Motion(애니메이션)
  • Shape(컨테이너 디자인)
  • Typography(글꼴)
image 39
이미지를 클릭하면 해당 페이지로 이동합니다.

디자이너 입장에서는 모든 것을 일일히 무에서 유를 창조할 필요 없이, 이곳에 있는 자료를 라이브러리로 등록해서 쓸 수 있다. 특히 Figma로 Export할 수 있어서 Figma 사용자 입장에서는 그냥 받아서 쓰면 된다. 전부 무료다.

또한 머티리얼 디자인에서는 Typography에서 Type System이라는 가이드라인을 제공한다.

image 38
@Google Material Design ‘The Type System’

Type System이란, 특정 Typography를 바탕으로 최적의 UI를 설계하기 위한 가이드라인을 말한다.

image 32
Roboto 폰트의 Type System

예를 들어, Roboto라는 폰트를 가장 예쁘게 사용하기 위한 Size, Spacing, Weight값을 알려준다.

특히 최근(2023년) 추세에서는 머티리얼 디자인이 대세인 만큼, 머티리얼 디자인 가이드라인은 이러한 디자인을 참고할 때 큰 도움이 될 것 같다.