구글 머티리얼 디자인 3 - gugeul meotilieol dijain 3

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

머티리얼 디자인은 이론, 자원 및 디지털 경험을 만드는 도구를 결합한 통합 시스템입니다.

구글이 제창하여 2014년부터 이용되기 시작한 플랫 디자인 기반의 디자인 시스템.

2. 상세[편집]

기존의 안드로이드의 UX가 iOS에 비해 너무 밋밋하고 공대감성적이다는 의견과 모바일 뿐만 아니라 다른 기기에서 통일성 있는 사용자 경험을 제공하고자 개발되었다. 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 개발되었다. 즉 플랫 디자인의 개량형이다.

그냥 보면 별 차이가 안 느껴질 수도 있지만, 플랫 디자인이 그냥 2차원적인 평면 느낌이라는 것과 달리, 머티리얼 디자인은 그림자 등이 약간씩 있고, 한 면 위에 다른 면이 덮인다던가 어떤 면을 걷어내면서 새로운 면이 나오는 것과 같은 전환 효과를 구현하면서 조금의 입체감이 추가된 3차원이라는 느낌이 적용되었다.

안드로이드 5.0 롤리팝부터 각 기기에 적용되었으며, 구글이 개발한 앱 뿐만 아니라 페이스북과 같은 타사 앱들도 점차 이 가이드라인을 따라 앱을 리뉴얼/개발하고 있다.

21년 기준으로도 깔끔하게 딱 필요한 만큼의 시각적 정보와 미적 요소를 제공하는 머티리얼 디자인은 UI 디자인의 교과서로 쓰인다. 이 디자인이 대세로 등극하면서 반사광과 원형 도형 등 과도한 정보를 삽입해 UI를 사실적으로 구현한 스큐어모피즘 디자인은 한물 간 디자인으로 취급당하게 되었다.[1]

스큐어모피즘, 플랫, 머티리얼 디자인의 차이

3. 컬러 팔레트[편집]

머티리얼 디자인에서 제공하는 색상 팔레트가 있다. 컬러 툴 사이트를 사용하면 UI의 메인 컬러로 정해졌을 때의 전체적인 색 느낌을 볼 수 있다. 사이트에서 팔레트에 있는 정해진 색 말고도 커스텀 색으로 고를 수 있긴 하다.

위의 소개 영상에 나오듯 이 세상에 잘못된 색은 없다. 단지 우리가 고를 수 있는 색의 스펙트럼은 너무 많기 때문에 그중에 전문가들이 검증하여 사용하기 좋게 만들어진 팔레트 중 하나가 이 머티리얼 컬러 팔레트일 뿐이다. 즉 여기에 있는 색을 사용하는 게 다른 색들 보다 무조건 효과적이라고 생각하기 보다는, UI에 사용하기 좋도록 밝기를 체계적으로 나누어 놓은 좋은 견본이라고 보면 된다. 따라서 자신의 UI 컨셉에 특별히 정확한 색상값이 정해진 게 아니라면 이 팔레트에 있는 색을 사용하면 좀 더 쉽게 효과적으로 만들 수 있다.

아래는 머티리얼 디자인에서 사용하는 색 팔레트를 표로 나타낸 것이다. 색의 배경에 따라 글씨색이 검은색(#000)과 흰색(#FFF)으로 다른데, 저시력자를 위한 최소 대비에 맞도록 머티리얼 디자인에서 권장하는 글씨 색으로 나무위키에서 표를 만들 때 참고해도 도움이 된다. 색에 따른 정확한 판독성(legibility)을 확인하고 싶다면, 위의 컬러 툴 사이트에서 상단 Accessibility 탭에 들어가면 선택한 색을 배경으로 사용했을때 각종 텍스트의 판독성에 관한 다양한 정보를 볼 수 있다.

색 이름은 맨위의 영어 이름과 숫자를 합쳐서 읽는다. 예를들어 Blue 300은 #64B5F6이다. 중심이 되는 색 500을 기점으로 10가지의 밝기로 나누어져 있다. 추가로 숫자 앞에 A가 붙은 4가지 색은 채도가 높아 눈에 가장 먼저 들어오는 색으로, 행동을 유도하기 위한 메인 액션 버튼에 사용하기 좋다.

Red

Pink

Purple

Deep Purple

Indigo

Blue

Light Blue

Cyan

50

#FFEBEE

#FCE4EC

#F3E5F5

#EDE7F6

#E8EAF6

#E3F2FD

#E1F5FE

#E0F7FA

100

#FFCDD2

#F8BBD0

#E1BEE7

#D1C4E9

#C5CAE9

#BBDEFB

#B3E5FC

#B2EBF2

200

#EF9A9A

#F48FB1

#CE93D8

#B39DDB

#9FA8DA

#90CAF9

#81D4FA

#80DEEA

300

#E57373

#F06292

#BA68C8

#9575CD

#7986CB

#64B5F6

#4FC3F7

#4DD0E1

400

#EF5350

#EC407A

#AB47BC

#7E57C2

#5C6BC0

#42A5F5

#29B6F6

#26C6DA

500

#F44336

#E91E63

#9C27B0

#673AB7

#3F51B5

#2196F3

#03A9F4

#00BCD4

600

#E53935

#D81B60

#8E24AA

#5E35B1

#3949AB

#1E88E5

#039BE5

#00ACC1

700

#D32F2F

#C2185B

#7B1FA2

#512DA8

#303F9F

#1976D2

#0288D1

#0097A7

800

#C62828

#AD1457

#6A1B9A

#4527A0

#283593

#1565C0

#0277BD

#00838F

900

#B71C1C

#880E4F

#4A148C

#311B92

#1A237E

#0D47A1

#01579B

#006064

A100

#FF8A80

#FF80AB

#EA80FC

#B388FF

#8C9EFF

#82B1FF

#80D8FF

#84FFFF

A200

#FF5252

#FF4081

#E040FB

#7C4DFF

#536DFE

#448AFF

#40C4FF

#18FFFF

A400

#FF1744

#F50057

#D500F9

#651FFF

#3D5AFE

#2979FF

#00B0FF

#00E5FF

A700

#D50000

#C51162

#AA00FF

#6200EA

#304FFE

#2962FF

#0091EA

#00B8D4

Teal

Green

Light Green

Lime

Yellow

Amber

Orange

Deep Orange

50

#E0F2F1

#E8F5E9

#F1F8E9

#F9FBE7

#FFFDE7

#FFF8E1

#FFF3E0

#FBE9E7

100

#B2DFDB

#C8E6C9

#DCEDC8

#F0F4C3

#FFF9C4

#FFECB3

#FFE0B2

#FFCCBC

200

#80CBC4

#A5D6A7

#C5E1A5

#E6EE9C

#FFF59D

#FFE082

#FFCC80

#FFAB91

300

#4DB6AC

#81C784

#AED581

#DCE775

#FFF176

#FFD54F

#FFB74D

#FF8A65

400

#26A69A

#66BB6A

#9CCC65

#D4E157

#FFEE58

#FFCA28

#FFA726

#FF7043

500

#009688

#4CAF50

#8BC34A

#CDDC39

#FFEB3B

#FFC107

#FF9800

#FF5722

600

#00897B

#43A047

#7CB342

#C0CA33

#FDD835

#FFB300

#FB8C00

#F4511E

700

#00796B

#388E3C

#689F38

#AFB42B

#FBC02D

#FFA000

#F57C00

#E64A19

800

#00695C

#2E7D32

#558B2F

#9E9D24

#F9A825

#FF8F00

#EF6C00

#D84315

900

#004D40

#1B5E20

#33691E

#827717

#F57F17

#FF6F00

#E65100

#BF360C

A100

#A7FFEB

#B9F6CA

#CCFF90

#F4FF81

#FFFF8D

#FFE57F

#FFD180

#FF9E80

A200

#64FFDA

#69F0AE

#B2FF59

#EEFF41

#FFFF00

#FFD740

#FFAB40

#FF6E40

A400

#1DE9B6

#00E676

#76FF03

#C6FF00

#FFEA00

#FFC400

#FF9100

#FF3D00

A700

#00BFA5

#00C853

#64DD17

#AEEA00

#FFD600

#FFAB00

#FF6D00

#DD2C00

Brown

Grey

Blue Grey

50

#EFEBE9

#FAFAFA

#ECEFF1

100

#D7CCC8

#F5F5F5

#CFD8DC

200

#BCAAA4

#EEEEEE

#B0BEC5

300

#A1887F

#E0E0E0

#90A4AE

400

#8D6E63

#BDBDBD

#78909C

500

#795548

#9E9E9E

#607D8B

600

#6D4C41

#757575

#546E7A

700

#5D4037

#616161

#455A64

800

#4E342E

#424242

#37474F

900

#3E2723

#212121

#263238

4. 아이콘[편집]

머티리얼 디자인 아이콘

아이콘 세트를 오픈소스로 공개하고 있다. 종류도 많고 아이콘 스타일도 Filled, Outlined, Rounded, Two-Tone, Sharp로 5개씩이나 있기 때문에 디자이너들이 자주 사용한다. 또한 아이콘들이 전체적으로 굵은 선을 사용했기 때문에 작아져도 모양이 덜 일그러진다.

5. 머티리얼 유(Material You)[편집]

2021년 Google I/O에서 기존 머티리얼 디자인에서 더 나아간 머티리얼 유를 공개하였다. 고유한 팔레트 색상, 크기, 기기 유형등의 UI요소들의 개인화가 강화되었으며. 이는 안드로이드 12의 기본 UI로 적용된다.

2022년 11월 업데이트로 유튜브 웹 버전에도 일부 적용되었다.

6. 기타[편집]

안드로이드 스튜디오가 도입된 이후 애플리케이션 디자인의 통합된 가이드라인을 제시하고 있지만 굳이 안드로이드 뿐만이 아니라 웹 사이트 개발을 하는데 있어 디자인이 자신이 없다거나 부트스트랩 프레임워크가 질린다면 머티리얼라이즈 프레임워크를 적용해 사이트를 개발하는 방법도 있다. 머티리얼라이즈 프레임워크의 전반적인 디자인이 머티리얼 디자인과 매우 유사하다.

[1] 완전히 버려지고 못생기고 구닥다리같은 느낌이라기보단, 스큐어모피즘 디자인은 2000년대를 이끈 스마트 기기(iPhone 등)에 워낙 대세로 쓰인 디자인인데, 그래서 '2000년대', '밀레니얼' 이라고 하면 가장 먼저 떠올리는 상징적인 디자인으로서 클래식한 느낌과 미래지향적인 느낌을 동시에 가진 특별한 디자인으로 남게 되었다.