{{{+1 Material Design}}} [목차] ||<tablealign=center><tablewidth=600> {{{#!wiki style="margin: -5px -10px" [youtube(Q8TXgCzxEnw)]}}} || == 개요 == >Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences. >---- >머티리얼 디자인은 이론, 자원 및 디지털 경험을 만드는 도구를 결합한 통합 시스템입니다. [[구글]]이 제창하여 2014년도부터 이용되기 시작한 플랫 디자인 기반의 디자인 메뉴얼. == 상세 == 기존의 [[안드로이드(운영체제)|안드로이드]]의 UX가 [[iOS]]에 비해 너무 밋밋하고 공대감성적이다는 의견과 모바일 뿐만 아니라 다른 기기에서 통일성 있는 사용자 경험을 제공하고자 개발되었다. [[미니멀리즘]]을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 개발되었다. 즉 플랫 디자인의 개량형이다. 그냥 보면 별 차이가 안 느껴질 수도 있지만, 플랫 디자인이 그냥 2차원적인 평면 느낌이라는 것과 달리, 머티리얼 디자인은 그림자 등이 약간씩 있고, 한 면 위에 다른 면이 덮인다던가 어떤 면을 걷어내면서 새로운 면이 나오는 것과 같은 전환 효과를 구현하면서 조금의 입체감이 추가된 3차원이라는 느낌이 적용되었다. [[안드로이드(운영체제)/롤리팝|안드로이드 5.0 롤리팝]]부터 각 기기에 적용되었으며, 구글이 개발한 앱 뿐만 아니라 [[Facebook|페이스북]]과 같은 타사 앱들도 점차 이 가이드라인을 따라 앱을 리뉴얼/개발하고 있다. 19년 기준으로도 깔끔하게 딱 필요한 만큼의 시각적 정보와 미적 요소를 제공하는 머티리얼 디자인은 UI 디자인의 교과서로 쓰인다. 이 디자인이 대세로 등극하면서 반사광과 원형 도형 등 과도한 정보를 삽입해 UI를 사실적으로 구현한 [[스큐어모피즘]] 디자인은 한물 간 디자인으로 취급당하게 되었다.[* 완전히 버려지고 못생기고 구닥다리같은 느낌이라기보단, 스큐어모피즘 디자인은 2000년대를 이끈 스마트 기기([[iPhone]] 등)에 워낙 대세로 쓰인 디자인인데, 그래서 '2000년대', '밀레니얼' 이라고 하면 가장 먼저 떠올리는 상징적인 디자인으로서 클래식한 느낌과 미래지향적인 느낌을 동시에 가진 특별한 디자인으로 남게 되었다.] ||<tablealign=center><tablewidth=600> {{{#!wiki style="margin: -5px -10px" [[파일:flat-material.jpg|width=100%]]}}} || || 스큐어모피즘, 플랫, 머티리얼 디자인의 차이 || == 컬러 팔레트 == 머티리얼 디자인에서 제공하는 색상 팔레트가 있다. [[https://material.io/resources/color|컬러 툴]] 사이트를 사용하면 [[UI]]의 메인 컬러로 정해졌을 때의 전체적인 색 느낌을 볼 수 있다. 사이트에서 팔레트에 있는 정해진 색 말고도 커스텀 색으로 고를 수 있긴 하다. 아래는 머티리얼 디자인에서 사용하는 색 [[팔레트]]를 표로 나타낸 것이다. 색의 배경에 따라 글씨색이 [[검은색]](#000)과 [[흰색]](#FFF)으로 다른데, [[접근성|저시력자를 위한 최소 대비에 맞도록]] 머티리얼 디자인에서 권장하는 글씨 색으로 나무위키에서 표를 만들 때 참고해도 도움이 된다. 색에 따른 정확한 판독성(legibility)을 확인하고 싶다면, 위의 컬러 툴 사이트에서 상단 Accessibility 탭에 들어가면 선택한 색을 배경으로 사용했을때 각종 텍스트의 판독성에 관한 다양한 정보를 볼 수 있다. 색 이름은 맨위의 영어 이름과 숫자를 합쳐서 읽는다. 예를들어 Blue 300은 #64B5F6이다. {{{-2 {{{#!wiki style="word-break: keep-all" ||<tablebgcolor=#FFF><colbgcolor=#FFF,#1F2023><colcolor=#373A3C,#DDD><tablecolor=#000><width=50> ||<width=100> Red ||<width=100> Pink ||<width=100> Purple ||<width=100> Deep Purple ||<width=100> Indigo ||<width=100> Blue ||<width=100> Light Blue ||<width=100> 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><colcolor=#FFF> #F06292 ||<#BA68C8><colcolor=#FFF> #BA68C8 ||<#9575CD><colcolor=#FFF> #9575CD ||<#7986CB><colcolor=#FFF> #7986CB ||<#64B5F6> #64B5F6 ||<#4FC3F7> #4FC3F7 ||<#4DD0E1> #4DD0E1 || || 400 ||<#EF5350><colcolor=#FFF> #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><colcolor=#FFF> #2196F3 ||<#03A9F4> #03A9F4 ||<#00BCD4> #00BCD4 || || 600 ||<#E53935> #E53935 ||<#D81B60> #D81B60 ||<#8E24AA> #8E24AA ||<#5E35B1> #5E35B1 ||<#3949AB> #3949AB ||<#1E88E5> #1E88E5 ||<#039BE5><colcolor=#FFF> #039BE5 ||<#00ACC1> #00ACC1 || || 700 ||<#D32F2F> #D32F2F ||<#C2185B> #C2185B ||<#7B1FA2> #7B1FA2 ||<#512DA8> #512DA8 ||<#303F9F> #303F9F ||<#1976D2> #1976D2 ||<#0288D1> #0288D1 ||<#0097A7><colcolor=#FFF> #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 || ||<tablebgcolor=#FFF><colbgcolor=#FFF,#1F2023><colcolor=#373A3C,#DDD><tablecolor=#000><width=50> A100 ||<width=100><#FF8A80> #FF8A80 ||<width=100><#FF80AB> #FF80AB ||<width=100><#EA80FC> #EA80FC ||<width=100><#B388FF> #B388FF ||<width=100><#8C9EFF> #8C9EFF ||<width=100><#82B1FF> #82B1FF ||<width=100><#80D8FF> #80D8FF ||<width=100><#84FFFF> #84FFFF || || A200 ||<#FF5252><colcolor=#FFF> #FF5252 ||<#FF4081><colcolor=#FFF> #FF4081 ||<#E040FB><colcolor=#FFF> #E040FB ||<#7C4DFF><colcolor=#FFF> #7C4DFF ||<#536DFE><colcolor=#FFF> #536DFE ||<#448AFF><colcolor=#FFF> #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><colcolor=#FFF> #0091EA ||<#00B8D4> #00B8D4 || ---- ||<tablebgcolor=#FFF><colbgcolor=#FFF,#1F2023><colcolor=#373A3C,#DDD><tablecolor=#000><width=50> ||<width=100> Teal ||<width=100> Green ||<width=100> Light Green ||<width=100> Lime ||<width=100> Yellow ||<width=100> Amber ||<width=100> Orange ||<width=100> 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><colcolor=#FFF> #009688 ||<#4CAF50> #4CAF50 ||<#8BC34A> #8BC34A ||<#CDDC39> #CDDC39 ||<#FFEB3B> #FFEB3B ||<#FFC107> #FFC107 ||<#FF9800> #FF9800 ||<#FF5722><colcolor=#FFF> #FF5722 || || 600 ||<#00897B> #00897B ||<#43A047><colcolor=#FFF> #43A047 ||<#7CB342> #7CB342 ||<#C0CA33> #C0CA33 ||<#FDD835> #FDD835 ||<#FFB300> #FFB300 ||<#FB8C00> #FB8C00 ||<#F4511E> #F4511E || || 700 ||<#00796B> #00796B ||<#388E3C> #388E3C ||<#689F38><colcolor=#FFF> #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><colcolor=#FFF> #EF6C00 ||<#D84315> #D84315 || || 900 ||<#004D40> #004D40 ||<#1B5E20> #1B5E20 ||<#33691E> #33691E ||<#827717><colcolor=#FFF> #827717 ||<#F57F17> #F57F17 ||<#FF6F00> #FF6F00 ||<#E65100> #E65100 ||<#BF360C> #BF360C || ||<tablebgcolor=#FFF><colbgcolor=#FFF,#1F2023><colcolor=#373A3C,#DDD><tablecolor=#000><width=50> A100 ||<width=100><#A7FFEB> #A7FFEB ||<width=100><#B9F6CA> #B9F6CA ||<width=100><#CCFF90> #CCFF90 ||<width=100><#F4FF81> #F4FF81 ||<width=100><#FFFF8D> #FFFF8D ||<width=100><#FFE57F> #FFE57F ||<width=100><#FFD180> #FFD180 ||<width=100><#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><colcolor=#FFF> #FF3D00 || || A700 ||<#00BFA5> #00BFA5 ||<#00C853> #00C853 ||<#64DD17> #64DD17 ||<#AEEA00> #AEEA00 ||<#FFD600> #FFD600 ||<#FFAB00> #FFAB00 ||<#FF6D00> #FF6D00 ||<#DD2C00> #DD2C00 || ---- ||<tablebgcolor=#FFF><colbgcolor=#FFF,#1F2023><colcolor=#373A3C,#DDD><tablecolor=#000><width=50> ||<width=100> Brown ||<width=100> Grey ||<width=100> 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><colcolor=#FFF> #A1887F ||<#E0E0E0> #E0E0E0 ||<#90A4AE> #90A4AE || || 400 ||<#8D6E63> #8D6E63 ||<#BDBDBD> #BDBDBD ||<#78909C><colcolor=#FFF> #78909C || || 500 ||<#795548> #795548 ||<#9E9E9E> #9E9E9E ||<#607D8B> #607D8B || || 600 ||<#6D4C41> #6D4C41 ||<#757575><colcolor=#FFF> #757575 ||<#546E7A> #546E7A || || 700 ||<#5D4037> #5D4037 ||<#616161> #616161 ||<#455A64> #455A64 || || 800 ||<#4E342E> #4E342E ||<#424242> #424242 ||<#37474F> #37474F || || 900 ||<#3E2723> #3E2723 ||<#212121> #212121 ||<#263238> #263238 || }}}}}} == 아이콘 == [[파일:머티리얼 디자인 아이콘.png]] [[https://material.io/resources/icons|머티리얼 디자인 아이콘]] 아이콘 세트를 [[오픈소스]]로 공개하고 있다. 종류도 많고 아이콘 스타일도 Filled, Outlined, Rounded, Two-Tone, Sharp로 5개씩이나 있기 때문에 디자이너들이 자주 사용한다. 또한 아이콘들이 전체적으로 굵은 선을 사용했기 때문에 작아져도 모양이 덜 일그러진다. == 기타 == 안드로이드 스튜디오가 도입된 이후 애플리케이션 디자인의 통합된 가이드라인을 제시하고 있지만 굳이 안드로이드 뿐만이 아니라 웹 사이트 개발을 하는데 있어 디자인이 자신이 없다거나 [[Bootstrap(프레임워크)|부트스트랩 프레임워크]]가 질린다면 [[http://materializecss.com/|머티리얼라이즈 프레임워크]]를 적용해 사이트를 개발하는 방법도 있다. 머티리얼라이즈 프레임워크의 전반적인 디자인이 머티리얼 디자인과 매우 유사하다. == 링크 == * [[https://material.io/|머티리얼 디자인 공식 페이지(영어)]] * [[https://www.google.com/design/spec/material-design/introduction.html|머티리얼 디자인 가이드라인(영어)]] [각주] [include(틀:표절,version=1~49,source=https://en.wikipedia.org/wiki/Material_Design)] [[분류:디자인]][[분류:구글]][[분류:안드로이드(운영체제)]]