최근 사용하는 스마트폰의 운영체제를 안드로이드 6.0 마시멜로우로 업데이트 했습니다.
 |  |
마시멜로에서도 머터리얼 디자인이 사용 되었으며 한단계 더 완성도 깊은 디자인(?)의 느낌을 받았습니다.
머터리얼이란, 예전 2013년쯤 애플이 스큐어모피즘을 걷어내고 미니멀리즘 디자인 트렌드를 선도하자
구글도 미니멀리즘을 강조한 머터리얼 디자인을 공개했죠.
2014년 구글 I/O 컨퍼런스에 공개되어 신규 안드로이드 운영체계인 롤리팝(5.0)부터 반영된 디자인 언어이며,
생생한 질감표현과 플랫하고 대담한 컬러의 그래픽 디자인, 매끄럽고 유려한 애니메이션이 특징입니다.
스타일 레이아웃 컴포넌트 등등 사용성규칙이 지정되어있죠.. 심지어 타이포, 컬러 팔레트, 애니메이션의 모션까지도요.
단순히 심플함을 강조하기 보다는 직관성 이해도에 중점을 주기 위한 디자인인 것 같습니다.
100% 머티리얼 디자인을 사용하는 것은 추천하지 않지만, 어느 정도 응용한 웹디자인은
방문자들에게 직관적인 경험을 제공하고 웹사이트의 집중도를 높혀줄 것으로 생각하고 있습니다.
머티리얼 색상 쉽게 사용하기
머티리얼 디자인 가이드 홈페이지에서도 색상표를 제공하지만
가장 간단하게 사용하는 방법은 구글 크롬 요소검사를 사용 하는 방법입니다.
Ctrl + Shift + i 또는 F12 단추키를 누르면 나오는 요소 검사입니다.
색상 컬러를 검색하보면 머티리얼 컬러 팔레트를 제공하기 때문에 손쉽게 적용을 해볼 수 있습니다.
또한 메뉴를 누르면 현재 브라우저에 적용된 컬러들도 한 눈에 볼 수 있기 때문에 저도 웹사이트
색상 작업을 하면서 주로 이용 하고 있습니다.
앞으로 대부분의 버튼색이나 배경색등을 정리하는 작업을 할 것 같네요 ㅠ_ㅠ 지금은 너무많은 색상이 사용 되어서..
그 외 디자인 가이드는 공식 사이트를 참고하세요.
Google Material design
(http://www.google.com/design/spec/material-design/introduction.html/)
머티리얼 디자인을 하기 위한 유용한 사이트
사실 위 공식 사이트는 한글 번역을 제공하지 않기 때문에.. 이놈의 영어 울렁증..
David Kim님 께서 비공식 한국어 번역을 지원해주셨습니다.
https://davidhyk.github.io/google-design-ko
원문과 함께 보면 매우 도움이 될 것 같습니다!!
매일매일 머티리얼 디자인을 포함한 다양한 웹디자인이 소개되어지는 페이지입니다.
iOS 및 MAC_OS 그리고 다양한 웹디자인도 함께 소개가 되니 참고하면 좋을 것 같습니다.
https://www.polymer-project.org/1.0/
구글이 공개한 폴리머 프로젝트 1.0 입니다. 디자인 라이브러리로 소스를 사용해
간편하게 디자인을 할 수 있게 되어있습니다. 매우 빠르고 모던브라우저에서 적용되니 참고하면 좋을 것 같습니다.
최근 2016년 로드맵이 공개되어 더욱 업그레이드 되는 프로젝트를 기대하고 있습니다.
여기도 디자인 사이트입니다. 머티리얼 디자인이 종종 올라오기도 합니다.
다른 디자인 작업을 할 때 참고하면 좋을 것 같고 특히 색상 태그로도 디자인 검색이 가능합니다.
포함된 색상의 컬러 팔레트도 다운이 가능한 곳입니다.
