안드로이드 머트리얼 디자인에 대해 알아보자

 안드로이드 머트리얼 디자인(Material Design)

회사에서 입사한지 6개월 만에 첫 신규프로젝트에 투입이 되었다.

신입개발자이다보니까 제플린을 보면서 화면을 그리는 것조차 쉽지 않았다.

구글에서 머트리얼 디자인을 권장하는 것을 알기때문에 이번에 처음으로 공부하면서 사용해보았다.

처음에는 사용법이 좀 낯설어서 시행착오가 있었지만 좀 익숙해져가니 정말 좋은 디자인 툴이라는 것을 알게되었다.

코드량이 줄고 사용법도 너무 간단하기 때문이다.

머트리얼 디자인 공식페이지에 나온 가이드문서를 참고하여 머트리얼 디자인에 대한 가이드를 적어보겠다. 

1. 머트리얼 테마

머트리얼 테마는 뷰 컴포넌트들을 쉽게 커스텀하면서도 브랜드의 컨셉을 잘 나타주는 표현방식이다.

머트리얼 테마는 3가지로 구성되어있다.

먼저, 테마를 정의한다.

다음, 컴포넌트에 테마를 적용한다.

마지막으로, 코드에서 그 컴포넌트를 사용한다.

머트리얼 디자인에는 기본적으로 적용된 테마가있는데 개발자가 얼마든지 커스텀하여 사용가능하다.

2. 머트리얼 테마 구현하기

<색>

머트리얼 디자인에서는 12가지의 색상 카테고리를 제공한다.

이 12가지의 색상 카테고리를 가지고 뷰 컴포넌트들을 손쉽게 꾸밀 수가 있다.

-Primary and secondary colors

Primary color는 주로 앱바나 버튼 같은 컴포넌트에 사용된다.

Secondary color는 floating action button이나 선택도구 같은 악센트를 주는 컴포넌트에 사용된다.

 - Surface, background and error colors

Surface, background 그리고 error colors는 브랜드를 나타내는 색상은 아니다.

Surface color는 카드나 시트 같은 컴포넌트에 사용된다.

Background color는 스크롤 가능한 컨텐트에 사용된다.

Error color는 텍스트 필드에서 에러를 나타내는데 사용된다.

-"On" colors

쉽게 말하면, 원래의 카테코리 색이름과 대비되는 색들을 말한다.

예를들어, OnPrimary color는 컴포넌트에서 사용된 Primary color와 대비되는 색이라고 생각하면 된다.

<글꼴>

정확히 말하면 Typography인데 뭐라 번역을 하는게 제일 자연스러울까? ㅎ

대충 알아듣자....

글꼴과 관련해서는 13가지의 카테고리가 존재한다.

이것들을 활용하여 family, font, case, size 그리고 tracking까지 커스텀이 가능하다.

-Headings

Headlines 1-6은 가장 큰 글꼴 사이즈이다.

Subtitles는 헤드라인 보다 작고 부제에 사용한다.

Body text는 긴 설명문에 사용한다.

Catpion과 overline은 가장 작은 글꼴 사이즈다. 이미지의 태그나 헤드라인의 요약에 사용된다.

Button text는 버튼에 사용된다.

<모양>

Shape system은 모서리 모양을 결정한다.

Rounded와 Cut이 존재한다.

-Rounded shapes

카드, 메뉴, 스낵바 등은 기본적으로 4dp의 rounded shape이 적용되어있다.

-Square shapes

0dp의 rounded shape이라고 생각하면 된다.

-Cut shapes

설명 생략...

<Icon>

₁. Filled ₂. Sharp ₃. Rounded ₄. Outlined ₅. Two-Tone 

머트리얼 디자인에는 5가지의 아이콘 카테고리가 존재한다. 

Share: