material design(as developer) 정리

 저는 이상하게도 자꾸 머테리얼 디자인이라고 부르게 되는데 공식 표기는 머티리얼 디자인인, 구글에서 제공하는 디자인 가이드에 대해서 정리해보려고 합니다. 사실 안드로이드 개발자라면 한 번쯤은 들어봤고 눈으로 보기도 했을 디자인입니다. 그리고 디자이너들이 머티리얼 디자인에 맞게 작성해주면 안드로이드 개발자로서는 라이브러리 좀 추가하고 기존에 있는 거 사용하면 되니 꽤나 편할 때가 있습니다(물론 새로운 프로젝트를 진행할 때 기준입니다).

 하지만 정작 이 디자인 가이드에 맞춰 작업하는 프로젝트는 거의 본 적이 없습니다. 아무래도 앱의 특성을 살리려면 좀 더 창의적인 디자인을 가려고 하다보니 그런게 아닌가 싶습니다. 또한 옛날부터 이어져 온 프로젝트들은 사실 머티리얼 디자인보다 나이가 많은 경우도 많죠. 이런 경우에는 디자인을 굳이 새로 갈아엎어봐야 유저에게 혼란만 가중하니 바꿀 필요가 없습니다(물론 저는 디자인을 잘 모르기 때문에 많은 이유가 있겠지만 잘 알지는 못합니다).

디자이너 없이 개인 프로젝트를 진행하다보면 그래도 이 머티리얼 디자인이 굉장히 도움이 될 때가 많습니다. 아무래도 가이드를 따라가면 그럴싸한 UI를 뽑아낼 수 있기 때문이죠. 그래서 material 디자인을 사용하기 위해 필요한 링크를 정리했습니다.

---

머티리얼 디자인이란?

 머티리얼 디자인은 구글에서 개발한 UX/UI 디자인 가이드로 모바일에 최적회되어 있습니다. 정확히는 여러 플랫폼을 겨냥하긴 했으나 그 쓰임이 모바일에 제일 알맞게 구성되었다 볼 수 있겠습니다. 머티리얼 디자인을 적용한다는 건, 회사 프로젝트 등에서 사용하는 디자인 소스를 이미 구성해둔 패키지를 가져온다는 것으로 해석할 수 있습니다. 마티리얼 디자인을 가진 라이브러리를 가져온다고 무조건 머티리얼 디자인으로 앱을 구성해야만 한다거나 구성된다는 뜻은 아닙니다. 라이브러리 내부에서 지원하는 코드들을 사용해야 합니다.

 그래서 직접 사용할 땐 오히려 많은 부분을 점검한 후에 사용하는 것이 좋습니다. 회사 프로젝트의 디자인을 사용할 때도 직접 확인하고 사용하는 것 처럼 디자인의 일관성을 유지하는 것은 중요한 부분입니다.

https://m3.material.io/

Material Design

 블로그에 접속하면 Android, Flutter, Web으로 나눠서 친절하게 개발하는 방식에 대해서 설명해주고 있습니다.

 

안드로이드

 아무래도 개발자에게는 사실 디자인의 선택 권한이 없는 경우가 많습니다. 혼자서 진행하는 개인 프로젝트라면 몰라도 협업 프로젝트에는 대부분 UI 디자이너가 포함되어 있을 확률이 높죠. 그렇다면 개발자에게는 사실 머티리얼 디자인의 구조에 관해서는 크게 관심이 없을 것 같습니다. 그렇지만 머리티얼 디자인의 일부를 활용하는 경우는 생길 수 있을 것 같아 도움이 될 만한 링크와 작은 설명을 첨부하겠습니다.

 

XML

 기본적으로 안드로이드에서는 material 라이브러리를 통해 머티리얼 디자인을 지원하고 있습니다. 

https://github.com/material-components/material-components-android

GitHub - material-components/material-components-android: Modular and customizable Material Design UI components for Android

 위 링크는 XML에서 안드로이드 material 컴포넌트를 적용하기 위한 github repo인데요. 설명란의 getting started를 눌러보면 어떻게 build.gradle에 적용하고 사용할 수 있는지 설명을 잘 해두었습니다. 또한 25년 7월 14일 기준으로도 활발하게 업데이트가 일어나고 있는 것을 확인할 수 있습니다. 각 컴포넌트들의 코드들도 공개되어 있으니 궁금하다면 코드들을 확인해보는 것도 좋을 것 같습니다.

 

Compose

https://developer.android.com/jetpack/compose/themes/material3

Compose의 Material Design 3  |  Jetpack Compose  |  Android Developers

 위의 링크는 Compose에서의 material3를 적용하는 가이드입니다. 가이드를 보면 색 구성표부터 서체, 아이콘 등에 대한 설명이 자세하게 나와 있습니다. 색 구성표 부분을 보면 알겠지만, 메인 색상과 보조 색상 2개, 에러와 outline의 틀을 가지고 자신의 앱의 특성에 맞게 얼마든지 변경할 수 있습니다. 또한 그러한 색상들을 통해 구성할 수 있는 테마들을 적용하는 방식도 구성해두었네요.

 

플러터

https://docs.flutter.dev/ui/widgets/material

Material component widgets

 위 링크는 플러터의 머티리얼 컴포넌트 위젯의 가이드입니다. 플러터 위젯 가이드는 코드 옆에 미리보기까지 첨부되어 있어 굉장히 보기가 좋습니다. 각 카테고리들을 눌러보면 자세한 설명들이 나옵니다. 내부적으로 아이콘의 배치까지 신경써주는 설명들이 있는데, 디자인 적인 재능이 없는 저 같은 개발자들에게 굉장히 유용한 정보일 것 같네요(UX에 대한 공부 없이도 기본은 가는 느낌입니다).

 

https://github.com/flutter/flutter/tree/master/packages/flutter/lib/src/material

flutter/packages/flutter/lib/src/material at master · flutter/flutter

 위 링크는 플러터 github에서 material 부분입니다. 플러터의 머티리얼 부분도 공개되어 있어 내부 코드를 확인할 수 있습니다. 컴포넌트를 라이브러리로 사용하는 입장으로서 코드를 많이 볼 일은 없겠지만, 나중에 UI에 문제가 발생했을 때 이렇게 코드가 공개되어 있는 것 만큼 다행인 부분이 없겠죠.

 

 

---

머티리얼 디자인을 처음 본 건 안드로이드였는데, 정작 플러터 프로젝트를 진행하면서 flutter package 안에 material이 들어있는 것을 보고 신기해서 정리하게 되었습니다. flutter에서 iOS의 디자인은 cupertino라는 이름으로 사용하더라구요(정작 iOS 개발진들은 자신의 디자인을 cupertino라는 이름으로 부르지 않는다고 하는데 맞는지는 모르겠습니다...!).

 처음에는 이 글을 머티리얼 디자인에 대한 학습을 해볼까 했는데, 제가 디자이너가 아니고 디자인에 대한 지식의 부재 및 재능의 부재로 인해 굉장히 오래 걸릴 것 같았고 그조차도 제대로 이해하지 못할 것 같아서 그냥 개발자적인 방법으로 정리하기로 했습니다. 그래서 이번 글에는 링크가 굉장히 많은데요. 머티리얼 디자인을 적용할 때 각 링크를 통해 보고 적용하면 좋을 것 같습니다.