구글의 머티리얼 디자인
2014년 6월, 구글은 ‘머티리얼(Material)’이라는 디자인 가이드를 발표했습니다. 세부적인 레이아웃, 패턴, 사용성과 컴포넌트까지 전체적인 스타일에 대한 내용을 포함해서 말이죠. 머티리얼 디자인의 경우 최소한의 요소만 활용하는 플랫 디자인의 성격을 띄고 있으며, 카드를 겹겹이 쌓아올린 UI의 카드스톡을 기본으로 하고 있습니다. 사실 카드 UI는 이전부터 많이 쓰였고, 이미 존재하는 개념이었지만 구글은 질감과 빛에 따른 그림자 효과를 적용하여 각각의 카드들을 더욱 구체적으로 보이게 했습니다. ‘머티리얼 디자인‘의 궁극적 목표는 플랫폼이나 여러 디바이스의 환경에 상관없이 일관된 사용자 경험을 제공하는 것에 있고요. 가이드가 처음 공개된 이후, 실제 적용 사례가 궁금해 열심히 찾아봤던 기억이 있는데 이제는 우리 주변에서도 쉽게 만나볼 수 있게 되었습니다. 제가 자주 쓰는 국내 서비스 중에서는 리멤버와 빙글이 빠르게 머티리얼 디자인을 적용하기도 했습니다.
머티리얼 디자인의 핵심, 컬러
머티리얼 디자인 가이드를 보면, 참고해야할 내용이 정말 많은데요! 그 중에서도 구글이 신경써서 정리해놓은 부분이 있다면 바로 ‘컬러(색상)’이 아닐까 싶습니다. 머티리얼 디자인에 적용할 수 있는 색상표를 구글에서 제공해주고 있지만, 여기서 주 색(Primary Color)과 강조색(Accent Color)을 찾아 조합하기가 쉽지 않기 때문이죠. 그래서 오늘은, 구글 머티리얼 디자인의 스타일 중 ‘컬러’ 조합을 쉽게 만들고 바로 확인할 수 있도록 도와주는 서비스를 소개드리고자 합니다.
머티리얼 디자인을 위한 색 조합을 만들어주는 ‘Material mixer’
오늘 소개드릴 서비스는, 머티리얼 디자인을 위한 색 조합을 쉽게 할 수 있도록 도와주는 ‘Material Mixer’입니다. 위의 이미지는 서비스의 메인페이지로 왼쪽으로는 디자인에 필요한 색상표를 한눈에 보여주며 오른쪽으로는 선택한 색 조합이 적용된 모습을 확인할 수 있도록 구성되어 있었습니다.
조금더 자세히 살펴보면, 색상표가 두 가지 영역으로 나뉜 것을 알 수 있는데요! 이는 주 색(Primary Color)과 강조색(Accent Color)으로 쓸 수 있는 색상을 구분지어 놓은 것으로, 왼쪽의 주 색과 가운데 부분의 강조색을 선택하면 오른쪽으로 해당 조합을 바로 확인해볼 수 있습니다.
마음에 드는 조합을 찾았다면, 코드를 복사해 실제 서비스에 적용해볼 수 있기에 더욱 편리하게 느껴지는 서비스였습니다. 무엇보다 구글에서 제공해주는 색상표를 한 눈에 보며 원하는 조합을 찾을 수 있다는 점에서 매력적으로 다가왔던 서비스였죠. 머티리얼 디자인 가이드가 공개된지 이제 2년 반 정도밖에 지나지 않았고, 스타일 가이드를 넘어 하나의 디자인론으로 바라보는 시각도 많기에 앞으로도 활용 범위가 더욱 넓어질 것 같습니다. 실제로 2017년 디자인 트렌드에서 빠짐없이 언급되는 ‘머티리얼 디자인’이기도 하고요. 고려해야 할 사항들이 많지만 스타일 – 색상의 경우에는 오늘 소개드린 ‘Material Mixer’를 참고하여 조금더 빠르고 쉽게 적용해보는건 어떨까요?
