머티리얼 디자인
Material Design
기존의 안드로이드의 UX가 iOS에 비해 너무 밋밋하고 공대감성적이다는 의견과 모바일 뿐만 아니라 다른 기기에서 통일성 있는 사용자 경험을 제공하고자 개발되었다. 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 개발되었다. 즉 플랫 디자인의 개량형이다.
그냥 보면 별 차이가 안 느껴질 수도 있지만, 플랫 디자인이 그냥 2차원적인 평면 느낌이라는 것과 달리, 머티리얼 디자인은 그림자 등이 약간씩 있고, 한 면 위에 다른 면이 덮인다던가 어떤 면을 걷어내면서 새로운 면이 나오는 것과 같은 전환 효과를 구현하면서 조금의 입체감이 추가된 3차원이라는 느낌이 적용되었다.
안드로이드 5.0 롤리팝부터 각 기기에 적용되었으며, 구글이 개발한 앱 뿐만 아니라 페이스북과 같은 타사 앱들도 점차 이 가이드라인을 따라 앱을 리뉴얼/개발하고 있다.
19년 기준으로도 깔끔하게 딱 필요한 만큼의 시각적 정보와 미적 요소를 제공하는 머티리얼 디자인은 UI 디자인의 교과서로 쓰인다. 이 디자인이 대세로 등극하면서 반사광과 원형 도형 등 과도한 정보를 삽입해 UI를 사실적으로 구현한 스큐어모피즘 디자인은 한물 간 디자인으로 취급당하게 되었다.[1]
머티리얼 디자인에서 제공하는 색상 팔레트가 있다. 컬러 툴 사이트를 사용하면 UI의 메인 컬러로 정해졌을 때의 전체적인 색 느낌을 볼 수 있다. 사이트에서 팔레트에 있는 정해진 색 말고도 커스텀 색으로 고를 수 있긴 하다.
아래는 머티리얼 디자인에서 사용하는 색 팔레트를 표로 나타낸 것이다. 색의 배경에 따라 글씨색이 검은색(#000)과 흰색(#FFF)으로 다른데, 저시력자를 위한 최소 대비에 맞도록 머티리얼 디자인에서 권장하는 글씨 색으로 나무위키에서 표를 만들 때 참고해도 도움이 된다. 색에 따른 정확한 판독성(legibility)을 확인하고 싶다면, 위의 컬러 툴 사이트에서 상단 Accessibility 탭에 들어가면 선택한 색을 배경으로 사용했을때 각종 텍스트의 판독성에 관한 다양한 정보를 볼 수 있다.
색 이름은 맨위의 영어 이름과 숫자를 합쳐서 읽는다. 예를들어 Blue 300은 #64B5F6이다.
[image]
머티리얼 디자인 아이콘
아이콘 세트를 오픈소스로 공개하고 있다. 종류도 많고 아이콘 스타일도 Filled, Outlined, Rounded, Two-Tone, Sharp로 5개씩이나 있기 때문에 디자이너들이 자주 사용한다. 또한 아이콘들이 전체적으로 굵은 선을 사용했기 때문에 작아져도 모양이 덜 일그러진다.
안드로이드 스튜디오가 도입된 이후 애플리케이션 디자인의 통합된 가이드라인을 제시하고 있지만 굳이 안드로이드 뿐만이 아니라 웹 사이트 개발을 하는데 있어 디자인이 자신이 없다거나 부트스트랩 프레임워크가 질린다면 머티리얼라이즈 프레임워크를 적용해 사이트를 개발하는 방법도 있다. 머티리얼라이즈 프레임워크의 전반적인 디자인이 머티리얼 디자인과 매우 유사하다.
1. 개요
구글이 제창하여 2014년도부터 이용되기 시작한 플랫 디자인 기반의 디자인 메뉴얼.Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
머티리얼 디자인은 이론, 자원 및 디지털 경험을 만드는 도구를 결합한 통합 시스템입니다.
2. 상세
기존의 안드로이드의 UX가 iOS에 비해 너무 밋밋하고 공대감성적이다는 의견과 모바일 뿐만 아니라 다른 기기에서 통일성 있는 사용자 경험을 제공하고자 개발되었다. 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 개발되었다. 즉 플랫 디자인의 개량형이다.
그냥 보면 별 차이가 안 느껴질 수도 있지만, 플랫 디자인이 그냥 2차원적인 평면 느낌이라는 것과 달리, 머티리얼 디자인은 그림자 등이 약간씩 있고, 한 면 위에 다른 면이 덮인다던가 어떤 면을 걷어내면서 새로운 면이 나오는 것과 같은 전환 효과를 구현하면서 조금의 입체감이 추가된 3차원이라는 느낌이 적용되었다.
안드로이드 5.0 롤리팝부터 각 기기에 적용되었으며, 구글이 개발한 앱 뿐만 아니라 페이스북과 같은 타사 앱들도 점차 이 가이드라인을 따라 앱을 리뉴얼/개발하고 있다.
19년 기준으로도 깔끔하게 딱 필요한 만큼의 시각적 정보와 미적 요소를 제공하는 머티리얼 디자인은 UI 디자인의 교과서로 쓰인다. 이 디자인이 대세로 등극하면서 반사광과 원형 도형 등 과도한 정보를 삽입해 UI를 사실적으로 구현한 스큐어모피즘 디자인은 한물 간 디자인으로 취급당하게 되었다.[1]
3. 컬러 팔레트
머티리얼 디자인에서 제공하는 색상 팔레트가 있다. 컬러 툴 사이트를 사용하면 UI의 메인 컬러로 정해졌을 때의 전체적인 색 느낌을 볼 수 있다. 사이트에서 팔레트에 있는 정해진 색 말고도 커스텀 색으로 고를 수 있긴 하다.
아래는 머티리얼 디자인에서 사용하는 색 팔레트를 표로 나타낸 것이다. 색의 배경에 따라 글씨색이 검은색(#000)과 흰색(#FFF)으로 다른데, 저시력자를 위한 최소 대비에 맞도록 머티리얼 디자인에서 권장하는 글씨 색으로 나무위키에서 표를 만들 때 참고해도 도움이 된다. 색에 따른 정확한 판독성(legibility)을 확인하고 싶다면, 위의 컬러 툴 사이트에서 상단 Accessibility 탭에 들어가면 선택한 색을 배경으로 사용했을때 각종 텍스트의 판독성에 관한 다양한 정보를 볼 수 있다.
색 이름은 맨위의 영어 이름과 숫자를 합쳐서 읽는다. 예를들어 Blue 300은 #64B5F6이다.
-2 {{{#!wiki style="word-break: keep-all"
|| || Red || Pink || Purple || Deep Purple || Indigo || Blue || Light Blue || Cyan ||
|| 50 ||<#FFEBEE> #FFEBEE ||<#FCE4EC> #FCE4EC ||<#F3E5F5> #F3E5F5 ||<#EDE7F6> #EDE7F6 ||<#E8EAF6> #E8EAF6 ||<#E3F2FD> #E3F2FD ||<#E1F5FE> #E1F5FE ||<#E0F7FA> #E0F7FA ||
|| 100 ||<#FFCDD2> #FFCDD2 ||<#F8BBD0> #F8BBD0 ||<#E1BEE7> #E1BEE7 ||<#D1C4E9> #D1C4E9 ||<#C5CAE9> #C5CAE9 ||<#BBDEFB> #BBDEFB ||<#B3E5FC> #B3E5FC ||<#B2EBF2> #B2EBF2 ||
|| 200 ||<#EF9A9A> #EF9A9A ||<#F48FB1> #F48FB1 ||<#CE93D8> #CE93D8 ||<#B39DDB> #B39DDB ||<#9FA8DA> #9FA8DA ||<#90CAF9> #90CAF9 ||<#81D4FA> #81D4FA ||<#80DEEA> #80DEEA ||
|| 300 ||<#E57373> #E57373 ||<#F06292> #F06292 ||<#BA68C8> #BA68C8 ||<#9575CD> #9575CD ||<#7986CB> #7986CB ||<#64B5F6> #64B5F6 ||<#4FC3F7> #4FC3F7 ||<#4DD0E1> #4DD0E1 ||
|| 400 ||<#EF5350> #EF5350 ||<#EC407A> #EC407A ||<#AB47BC> #AB47BC ||<#7E57C2> #7E57C2 ||<#5C6BC0> #5C6BC0 ||<#42A5F5> #42A5F5 ||<#29B6F6> #29B6F6 ||<#26C6DA> #26C6DA ||
|| 500 ||<#F44336> #F44336 ||<#E91E63> #E91E63 ||<#9C27B0> #9C27B0 ||<#673AB7> #673AB7 ||<#3F51B5> #3F51B5 ||<#2196F3> #2196F3 ||<#03A9F4> #03A9F4 ||<#00BCD4> #00BCD4 ||
|| 600 ||<#E53935> #E53935 ||<#D81B60> #D81B60 ||<#8E24AA> #8E24AA ||<#5E35B1> #5E35B1 ||<#3949AB> #3949AB ||<#1E88E5> #1E88E5 ||<#039BE5> #039BE5 ||<#00ACC1> #00ACC1 ||
|| 700 ||<#D32F2F> #D32F2F ||<#C2185B> #C2185B ||<#7B1FA2> #7B1FA2 ||<#512DA8> #512DA8 ||<#303F9F> #303F9F ||<#1976D2> #1976D2 ||<#0288D1> #0288D1 ||<#0097A7> #0097A7 ||
|| 800 ||<#C62828> #C62828 ||<#AD1457> #AD1457 ||<#6A1B9A> #6A1B9A ||<#4527A0> #4527A0 ||<#283593> #283593 ||<#1565C0> #1565C0 ||<#0277BD> #0277BD ||<#00838F> #00838F ||
|| 900 ||<#B71C1C> #B71C1C ||<#880E4F> #880E4F ||<#4A148C> #4A148C ||<#311B92> #311B92 ||<#1A237E> #1A237E ||<#0D47A1> #0D47A1 ||<#01579B> #01579B ||<#006064> #006064 ||
|| A100 ||<#FF8A80> #FF8A80 ||<#FF80AB> #FF80AB ||<#EA80FC> #EA80FC ||<#B388FF> #B388FF ||<#8C9EFF> #8C9EFF ||<#82B1FF> #82B1FF ||<#80D8FF> #80D8FF ||<#84FFFF> #84FFFF ||
|| A200 ||<#FF5252> #FF5252 ||<#FF4081> #FF4081 ||<#E040FB> #E040FB ||<#7C4DFF> #7C4DFF ||<#536DFE> #536DFE ||<#448AFF> #448AFF ||<#40C4FF> #40C4FF ||<#18FFFF> #18FFFF ||
|| A400 ||<#FF1744> #FF1744 ||<#F50057> #F50057 ||<#D500F9> #D500F9 ||<#651FFF> #651FFF ||<#3D5AFE> #3D5AFE ||<#2979FF> #2979FF ||<#00B0FF> #00B0FF ||<#00E5FF> #00E5FF ||
|| A700 ||<#D50000> #D50000 ||<#C51162> #C51162 ||<#AA00FF> #AA00FF ||<#6200EA> #6200EA ||<#304FFE> #304FFE ||<#2962FF> #2962FF ||<#0091EA> #0091EA ||<#00B8D4> #00B8D4 ||
----
|| || Teal || Green || Light Green || Lime || Yellow || Amber || Orange || Deep Orange ||
|| 50 ||<#E0F2F1> #E0F2F1 ||<#E8F5E9> #E8F5E9 ||<#F1F8E9> #F1F8E9 ||<#F9FBE7> #F9FBE7 ||<#FFFDE7> #FFFDE7 ||<#FFF8E1> #FFF8E1 ||<#FFF3E0> #FFF3E0 ||<#FBE9E7> #FBE9E7 ||
|| 100 ||<#B2DFDB> #B2DFDB ||<#C8E6C9> #C8E6C9 ||<#DCEDC8> #DCEDC8 ||<#F0F4C3> #F0F4C3 ||<#FFF9C4> #FFF9C4 ||<#FFECB3> #FFECB3 ||<#FFE0B2> #FFE0B2 ||<#FFCCBC> #FFCCBC ||
|| 200 ||<#80CBC4> #80CBC4 ||<#A5D6A7> #A5D6A7 ||<#C5E1A5> #C5E1A5 ||<#E6EE9C> #E6EE9C ||<#FFF59D> #FFF59D ||<#FFE082> #FFE082 ||<#FFCC80> #FFCC80 ||<#FFAB91> #FFAB91 ||
|| 300 ||<#4DB6AC> #4DB6AC ||<#81C784> #81C784 ||<#AED581> #AED581 ||<#DCE775> #DCE775 ||<#FFF176> #FFF176 ||<#FFD54F> #FFD54F ||<#FFB74D> #FFB74D ||<#FF8A65> #FF8A65 ||
|| 400 ||<#26A69A> #26A69A ||<#66BB6A> #66BB6A ||<#9CCC65> #9CCC65 ||<#D4E157> #D4E157 ||<#FFEE58> #FFEE58 ||<#FFCA28> #FFCA28 ||<#FFA726> #FFA726 ||<#FF7043> #FF7043 ||
|| 500 ||<#009688> #009688 ||<#4CAF50> #4CAF50 ||<#8BC34A> #8BC34A ||<#CDDC39> #CDDC39 ||<#FFEB3B> #FFEB3B ||<#FFC107> #FFC107 ||<#FF9800> #FF9800 ||<#FF5722> #FF5722 ||
|| 600 ||<#00897B> #00897B ||<#43A047> #43A047 ||<#7CB342> #7CB342 ||<#C0CA33> #C0CA33 ||<#FDD835> #FDD835 ||<#FFB300> #FFB300 ||<#FB8C00> #FB8C00 ||<#F4511E> #F4511E ||
|| 700 ||<#00796B> #00796B ||<#388E3C> #388E3C ||<#689F38> #689F38 ||<#AFB42B> #AFB42B ||<#FBC02D> #FBC02D ||<#FFA000> #FFA000 ||<#F57C00> #F57C00 ||<#E64A19> #E64A19 ||
|| 800 ||<#00695C> #00695C ||<#2E7D32> #2E7D32 ||<#558B2F> #558B2F ||<#9E9D24> #9E9D24 ||<#F9A825> #F9A825 ||<#FF8F00> #FF8F00 ||<#EF6C00> #EF6C00 ||<#D84315> #D84315 ||
|| 900 ||<#004D40> #004D40 ||<#1B5E20> #1B5E20 ||<#33691E> #33691E ||<#827717> #827717 ||<#F57F17> #F57F17 ||<#FF6F00> #FF6F00 ||<#E65100> #E65100 ||<#BF360C> #BF360C ||
|| A100 ||<#A7FFEB> #A7FFEB ||<#B9F6CA> #B9F6CA ||<#CCFF90> #CCFF90 ||<#F4FF81> #F4FF81 ||<#FFFF8D> #FFFF8D ||<#FFE57F> #FFE57F ||<#FFD180> #FFD180 ||<#FF9E80> #FF9E80 ||
|| A200 ||<#64FFDA> #64FFDA ||<#69F0AE> #69F0AE ||<#B2FF59> #B2FF59 ||<#EEFF41> #EEFF41 ||<#FFFF00> #FFFF00 ||<#FFD740> #FFD740 ||<#FFAB40> #FFAB40 ||<#FF6E40> #FF6E40 ||
|| A400 ||<#1DE9B6> #1DE9B6 ||<#00E676> #00E676 ||<#76FF03> #76FF03 ||<#C6FF00> #C6FF00 ||<#FFEA00> #FFEA00 ||<#FFC400> #FFC400 ||<#FF9100> #FF9100 ||<#FF3D00> #FF3D00 ||
|| A700 ||<#00BFA5> #00BFA5 ||<#00C853> #00C853 ||<#64DD17> #64DD17 ||<#AEEA00> #AEEA00 ||<#FFD600> #FFD600 ||<#FFAB00> #FFAB00 ||<#FF6D00> #FF6D00 ||<#DD2C00> #DD2C00 ||
----
|| || Brown || Grey || Blue Grey ||
|| 50 ||<#EFEBE9> #EFEBE9 ||<#FAFAFA> #FAFAFA ||<#ECEFF1> #ECEFF1 ||
|| 100 ||<#D7CCC8> #D7CCC8 ||<#F5F5F5> #F5F5F5 ||<#CFD8DC> #CFD8DC ||
|| 200 ||<#BCAAA4> #BCAAA4 ||<#EEEEEE> #EEEEEE ||<#B0BEC5> #B0BEC5 ||
|| 300 ||<#A1887F> #A1887F ||<#E0E0E0> #E0E0E0 ||<#90A4AE> #90A4AE ||
|| 400 ||<#8D6E63> #8D6E63 ||<#BDBDBD> #BDBDBD ||<#78909C> #78909C ||
|| 500 ||<#795548> #795548 ||<#9E9E9E> #9E9E9E ||<#607D8B> #607D8B ||
|| 600 ||<#6D4C41> #6D4C41 ||<#757575> #757575 ||<#546E7A> #546E7A ||
|| 700 ||<#5D4037> #5D4037 ||<#616161> #616161 ||<#455A64> #455A64 ||
|| 800 ||<#4E342E> #4E342E ||<#424242> #424242 ||<#37474F> #37474F ||
|| 900 ||<#3E2723> #3E2723 ||<#212121> #212121 ||<#263238> #263238 ||
}}} 4. 아이콘
[image]
머티리얼 디자인 아이콘
아이콘 세트를 오픈소스로 공개하고 있다. 종류도 많고 아이콘 스타일도 Filled, Outlined, Rounded, Two-Tone, Sharp로 5개씩이나 있기 때문에 디자이너들이 자주 사용한다. 또한 아이콘들이 전체적으로 굵은 선을 사용했기 때문에 작아져도 모양이 덜 일그러진다.
5. 기타
안드로이드 스튜디오가 도입된 이후 애플리케이션 디자인의 통합된 가이드라인을 제시하고 있지만 굳이 안드로이드 뿐만이 아니라 웹 사이트 개발을 하는데 있어 디자인이 자신이 없다거나 부트스트랩 프레임워크가 질린다면 머티리얼라이즈 프레임워크를 적용해 사이트를 개발하는 방법도 있다. 머티리얼라이즈 프레임워크의 전반적인 디자인이 머티리얼 디자인과 매우 유사하다.
6. 링크
[1] 완전히 버려지고 못생기고 구닥다리같은 느낌이라기보단, 스큐어모피즘 디자인은 2000년대를 이끈 스마트 기기(iPhone 등)에 워낙 대세로 쓰인 디자인인데, 그래서 '2000년대', '밀레니얼' 이라고 하면 가장 먼저 떠올리는 상징적인 디자인으로서 클래식한 느낌과 미래지향적인 느낌을 동시에 가진 특별한 디자인으로 남게 되었다.