탈 Bootstrap! 'Material Design Lite'로 우아한 웹사이트를 만들자

「머티리얼 디자인」이란

머티리얼 디자인은 2014년 'Google I/O'에서 google이 제창한 UX 디자인입니다. 「머티리얼 환경」이라고 불리는 가상적인 3차원 공간에 버튼이나 카드 등의 요소(머티리얼)를 배치해, 그림자나 애니메이션에 의해 현실의 물리법칙을 재현합니다.


Cards - Components - Material Design

머티리얼 디자인의 개요를 이해하려면 "Material design - YouTube"이 매우 유용합니다. 본 적이없는 분은 꼭 한번 보시기 바랍니다.

머티리얼 디자인은 '플랫 디자인'의 안티테제

요소로부터 입체감이 제거되어 모든 오브젝트가 하나의 평면에 존재하는 것처럼 느끼게 하는 디자인이 「플랫 디자인」입니다. Windows 8(Metro UI)나 iOS7의 등장으로 주목을 끌었습니다.

심플하고 아름다운 레이아웃을 쉽게 실현할 수 있는 플랫 디자인입니다만, 쓸데없는 장식을 극한까지 배제했기 때문에 유저의 직감에 반하는 인터페이스가 되어 버리는 일이 있습니다.

그 대표적인 예가 Surface RT의 PC 설정 화면입니다. 아래 이미지에서 클릭 가능한 요소는 몇 개입니까?


Windows 8 — Disappointing Usability for Both Novice and Power Users

대답은 7개입니다. 언뜻 보면 "Change PC settings"는 라벨처럼 보이지만 실제로는 클리커블 요소입니다. 이것은 『 문제 해결에 효과적인 '행위 디자인' 사고법 』에서 말하는 「망설임의 버그」에 상당합니다.

이러한 플랫 디자인의 문제점을 해소하기 위해, 현실 세계를 모방함으로써 직관적인 인터페이스를 실현하는 머티리얼 디자인이 탄생했습니다.

역사에서 생각하는 플랫 디자인과 머티리얼 디자인의 차이란? | UX MILK

머티리얼은 '종이'의 은유

머티리얼은 1dp의 두께가 있는 「종이」의 메타파(비유)입니다. 현실 세계의 종이에 그림자가 있는 것처럼, 머티리얼에도 그림자가 있습니다. 머티리얼 환경에서 "주요 빛"과 "환경 빛"이라는 두 개의 가상 광원이 공간을 비추고 머티리얼에 음영을줍니다.

dp (density-independent pixels) 밀도 독립적 픽셀. 화면 해상도에 의한 표시 사이즈의 차이를 해소하기 위한 단위입니다.

주요 빛

주요 빛은 방향성 그림자를 만듭니다.

환경광

환경 빛은 모든 각도에서 부드러운 그림자를 만듭니다.

주요광과 환경광

주요 빛과 환경 빛이 만들어내는 두 개의 그림자가 합쳐져 ​​머티리얼이 보다 입체적이 됩니다.



머티리얼 디자인에서 그림자는 가장 중요한 개념 중 하나입니다. 이 외에도 공간에 배치하는 요소에 대해 다양한 규칙이 정의되어 있습니다. 자세한 내용은 "머티리얼 디자인 가이드라인(일본어판)"을 참조하십시오.

Environment - Material Design

"MaterialDesign Lite"란

'MaterialDesign Lite(MDL)'는 google에서 제공하는 오픈 소스 CSS/javascript 프레임워크입니다. 다양한 구성 요소가 제공되며 누구나 쉽게 재질 디자인을 구현할 수 있습니다.


Material Design Lite

MDL 도입

아래 소스를 html에 붙여 넣기만 하면 MDL을 도입할 수 있습니다.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

이하의 링크에 템플릿이 준비되어 있으므로, 이것을 베이스에 필요한 컴퍼넌트를 조합해 가는 것이 추천입니다.

TEMPLATES | Material Design Lite

향후, 웹 디자인의 트렌드를 담당해 가는 머티리얼 디자인. MDL을 사용해 볼 가치가 충분하다고 생각합니다.