| 머티리얼 디자인 Material Design | |
| <colbgcolor=#000,#e3e3e3><colcolor=#fff,#000> 개발 | |
| 공개일 | 2014년 6월 25일 |
| 바로가기 | |
[clearfix]
1. 개요
머티리얼 디자인은 이론, 자원 및 디지털 경험을 만드는 도구를 결합한 통합 시스템입니다.
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
구글이 제창하여 2014년부터 사용되기 시작한 플랫 디자인 기반의 디자인 시스템.
2. 상세
기존의 안드로이드의 UX가 iOS에 비해 너무 밋밋하고 공대감성적이다는 의견과 모바일 뿐만 아니라 다른 기기에서 통일성 있는 사용자 경험을 제공하고자 개발되었다. 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 개발되었다. 즉 플랫 디자인의 개량형이다.그냥 보면 별 차이가 안 느껴질 수도 있지만, 플랫 디자인이 그냥 2차원적인 평면 느낌이라는 것과 달리, 머티리얼 디자인은 그림자 등이 약간씩 있고, 한 면 위에 다른 면이 덮인다던가 어떤 면을 걷어내면서 새로운 면이 나오는 것과 같은 전환 효과를 구현하면서 조금의 입체감이 추가된 3차원이라는 느낌이 적용되었다.
안드로이드 5.0 롤리팝부터 각 기기에 적용되었으며, 구글이 개발한 앱 뿐만 아니라 페이스북과 같은 타사 앱들도 점차 이 가이드라인을 따라 앱을 리뉴얼/개발하고 있다.
깔끔하게 딱 필요한 만큼의 시각적 정보와 미적 요소를 제공하는 머티리얼 디자인은 UI 디자인의 교과서로 쓰인다. 이 디자인이 대세로 등극하면서 반사광과 원형 도형 등 과도한 정보를 삽입해 UI를 사실적으로 구현한 스큐어모피즘 디자인은 한물 간 디자인으로 취급당하게 되었다.[1]
| |
| 스큐어모피즘, 플랫, 머티리얼 디자인의 차이 |
3. 역사
3.1. Material Design 2
3.1.1. 컬러 팔레트
머티리얼 디자인에서 제공하는 색상 팔레트가 있다. 컬러 툴 사이트를 사용하면 UI의 메인 컬러로 정해졌을 때의 전체적인 색 느낌을 볼 수 있다. 사이트에서 팔레트에 있는 정해진 색 말고도 커스텀 색으로 고를 수 있긴 하다.
위의 소개 영상에 나오듯 이 세상에 잘못된 색은 없다. 단지 우리가 고를 수 있는 색의 스펙트럼은 너무 많기 때문에 그중에 전문가들이 검증하여 사용하기 좋게 만들어진 팔레트 중 하나가 이 머티리얼 컬러 팔레트일 뿐이다. 즉 여기에 있는 색을 사용하는 게 다른 색들 보다 무조건 효과적이라고 생각하기 보다는, UI에 사용하기 좋도록 밝기를 체계적으로 나누어 놓은 좋은 견본이라고 보면 된다. 따라서 자신의 UI 컨셉에 특별히 정확한 색상값이 정해진 게 아니라면 이 팔레트에 있는 색을 사용하면 좀 더 쉽게 효과적으로 만들 수 있다.
아래는 머티리얼 디자인에서 사용하는 색 팔레트를 표로 나타낸 것이다. 색의 배경에 따라 글씨색이 검은색(#000)과 흰색(#FFF)으로 다른데, 저시력자를 위한 최소 대비에 맞도록 머티리얼 디자인에서 권장하는 글씨 색으로 나무위키에서 표를 만들 때 참고해도 도움이 된다. 색에 따른 정확한 판독성(legibility)을 확인하고 싶다면, 위의 컬러 툴 사이트에서 상단 Accessibility 탭에 들어가면 선택한 색을 배경으로 사용했을때 각종 텍스트의 판독성에 관한 다양한 정보를 볼 수 있다.
색 이름은 맨위의 영어 이름과 숫자를 합쳐서 읽는다. 예를들어 Blue 300은 #64B5F6이다. 중심이 되는 색 500을 기점으로 10가지의 밝기로 나누어져 있다. 추가로 숫자 앞에 A가 붙은 4가지 색은 채도가 높아 눈에 가장 먼저 들어오는 색으로, 행동을 유도하기 위한 메인 액션 버튼에 사용하기 좋다.
{{{#!wiki style="word-break: keep-all"
3.1.2. 아이콘
머티리얼 디자인 아이콘
아이콘 세트를 오픈소스로 공개하고 있다. 종류도 많고 아이콘 스타일도 Filled, Outlined, Rounded, Two-Tone, Sharp로 5개씩이나 있기 때문에 디자이너들이 자주 사용한다. 또한 아이콘들이 전체적으로 굵은 선을 사용했기 때문에 작아져도 모양이 덜 일그러진다.
3.2. Material Design 3
| Material Design 3를 적용한 앱 UI 예시 |
홈페이지
3.2.1. 특징
3.2.1.1. 동적 색상
동적 색상을 지원한다. Android 12 이후 스마트폰에서 지정한 컬러에 맞추어 컬러팔레트가 생성돼 UI에 적용된다. 비활성화나 커스터마이징은 픽셀 계열이 아니면 불가능하기에 바탕화면 색이 강한 사용자들 사이에서 혹평이 좀 많다.3.2.1.2. 다양한 디바이스 지원
타블렛이나 PC 같은 큰 화면에 대한 가이드라인이 지정되어 있으며 폴더블 스마트폰에 경우도 레이아웃 가이드라인이 마련되어있다.3.2.2. 적용된 앱
2022년 이후 계속해서 구글의 기존 앱 디자인에 Material Design 3로 업데이트 하는 작업이 진행되고있다. 하지만 아직 기존 Material 디자인과 혼용해서 사용하거나 iOS 경우 아직 적용된 앱이 적다.- YouTube
- YouTube Music
- Google 캘린더
- Google Maps
- Google Play Store
- Gmail
- Gboard
- Google Drive
- Google Docs
- Google 프레젠테이션
- Google 스프레드시트
- Google One
- Google 번역 - 웹은 적용되지 않았다.
- Google 어시스턴트
- 전화 (Google 앱)
- 주소록 (Google 앱)
- 메세지 (Google 앱)
- Google Photo - 웹, ios는 아직 적용되지 않았다.
- Google Home
- Chrome[2]
- Google Meet
- Google TV
- 계산기 (Google 앱)
4. 여담
- 안드로이드 스튜디오가 도입된 이후 애플리케이션 디자인의 통합된 가이드라인을 제시하고 있지만 굳이 안드로이드 뿐만이 아니라 웹 사이트 개발을 하는데 있어 디자인이 자신이 없다거나 부트스트랩 프레임워크가 질린다면 머티리얼라이즈 프레임워크를 적용해 사이트를 개발하는 방법도 있다. 머티리얼라이즈 프레임워크의 전반적인 디자인이 머티리얼 디자인과 매우 유사하다.
[1] 완전히 버려지고 못생기고 구닥다리같은 느낌이라기보단, 스큐어모피즘 디자인은 2000년대를 이끈 스마트 기기(iPhone 등)에서 대세로 쓰인 디자인인데, 그래서 '2000년대', '밀레니얼' 이라고 하면 가장 먼저 떠올리는 상징적인 디자인으로서 클래식한 느낌과 미래지향적인 느낌을 동시에 가진 특별한 디자인으로 남게 되었다. 별개로 스큐어모피즘을 좋아하는 일부도 어디에나 있다. 어디까지나 개개인의 취향. 본문의 머티리얼도 시간이 지나면 한물 간 취급을 받는다는 논리[2] 원래 안드로이드부터 선행 지원했으나, Chrome 117 업데이트로 모든 환경에서 Material Design 3를 지원한다.