머티리얼 디자인은 윈도우 8의 플랫 디자인과 플립보드의 카드 뷰 디자인을 결합한 ‘카드 UI’를 디자인의 중심축으로 삼아 지금의 방대한 가이드로 확장·발전시켰다. 모바일 시대가 열리고 모두가 막연히만 알고 있던 카드 UI를 논리적으로 재구축해 하나의 완성된 방법론으로 만들어 놓은 것이다. 이제 서로 머릿속에 있는 그것을 힘겹게 꺼내며 뜬구름 잡을 필요 없이 ‘안드로이드 디자인 서포트 라이브러리(goo.gl/v15tJ1)’에 가면 하늘까지 맑아진다.머티리얼 디자인은 많은 걸 바꿔놨다. 안드로이드 스마트폰이 아이폰만큼 예뻐졌다. 머티리얼 디자인을 적용한 구글 캘린더와 이메일을 한 번 열어보자. 사용성의 진일보다. 메뉴와 버튼의 위치부터 디자인 색감까지, 머티리얼 디자인 하나로 안드로이드는 더욱 편리하고 쓰고 싶은 모바일 서비스가 됐다. 더욱 중요한 변화는 서드파티 앱 제조사에게 따를 가치가 충분한 표준이 생겼단 것이다. 이는 안드로이드 플랫폼 내 콘텐츠 품질의 상향 평준화를 뜻한다. 본 특집은 머티리얼 디자인의 핵심 가치를 여기서 찾는다. 그 좋다는 머티리얼 디자인이 실제로 무엇을 어떻게 변하게 만들었느냐는 것이다. 그 전에, 머티리얼 디자인 가이드의 주요 원칙을 복습해보자.

 

하나.

입체적인 표면  UI를 구성하는 표면(이를 머티리얼(Material)이라 부른다)들은 다양한 높낮이를 가질 수 있다. 높낮이는 표면 뒤 은근한 그림자로 확인한다. 즉, 완전한 평면 디자인이 아니라 플랫 머티리얼을 쌓아 만들었다는 것이다. 완벽한 평면을 지향했던 윈도우의 플랫 디자인에서 겪은 혼란을 줄이기 위함이다. 이에 머티리얼 디자인은 ‘플랫 2.0’이라고도 불린다. 여기서 사용자는 입체감을 느끼며 전체 UI의 계층을 쉽게 파악할 수 있다.

[사진 02] 멀티 디바이스에 완벽히 대응하는 반응형 디자인을 꿈꾼다

 

둘.

사용자의 인터랙션을 필요로 하는 가장 중요한 머티리얼은 맨 위에 위치한다. 모든 그림자는 남동쪽 45도 각도를 유지해야 하고 그 길이도 정해졌다. 하나의 화면에 10개 이상의 그림자가 져선 안 된다. 복잡하기 때문이다. 특정 콘텐츠가 화면 끝이나 다른 표면 아래로 이동하는 인터랙션이 있을 경우, 콘텐츠를 담은 표면 자체가 움직인다는 걸 알 수 있도록 가장자리나 표면 아래에 그림자를 표시한다. 우리가 콘텐츠가 아닌 머티리얼 단위로 조작한다는 경험을 심는 것이 포인트다. 둘.

일관된 컬러 조합  머티리얼 디자인에서 스마트폰 화면은 디지털 종이다. 이 위를 수놓는 컬러는 디지털 잉크다. 전통적인 인쇄물 디자인과 같이 색상과 이미지, 구조적 여백이 중요하다. 머티리얼 디자인 적용 전 스마트폰 화면이 종이 신문이었다면, 지금은 월간 웹과 같은 잡지가 된 것이다. 각 앱이 브랜딩을 위해 구사하는 컬러 팔레트는 강조 색이 무엇이냐에 따라 기본색 조합이 결정된다. 강조 색과 기본색은 대비를 이뤄야 하는데, 예컨대 기본색이 파랑일 때 강조 색은 네온 핑크가 된다. 그 외 상세한 컬러 팔레트 조합은 머티리얼 디자인 가이드를 참고하자. 왜냐면 지면에 싣기엔 지침이 너무 많다.

[사진 03] 얼핏 평평해보이지만 모든 머티리얼은 차곡히 쌓여있다

 

셋.

시각적 연속성을 주는 모션  모든 모션은 사용자에게 시각적 연속성을 제공해야 한다. 사용자가 현재 벌어지는 인터랙션이 뭘 뜻하는지 알아챌 수 있도록 하기 위함이다. 이에 모든 요소는 갑자기 나타나거나 사라지지 않고 자연스러워야 한다. 좌측 아래 카드를 누르면 우측 위로 조금씩 커지며 나타나는 식이다. 이것을 ‘Hero 전환’이라 부른다. 안드로이드 폰을 쓰다 종종 발견하는 잔물결 효과는 터치가 일어난 자리에서 시작해 주변부로 퍼진다. 그 지점을 터치했다는 피드백을 주기 위함이다. 역시나 더욱 구체적인 사항은 가이드를 참조하자.

넷.

반응형 디자인과 UI 패턴  머티리얼 디자인은 모바일 안에서의 사용자 경험 통합을 넘어 멀티 디바이스 시대의 경험 연속성을 추구한다. 각 디자인 요소는 스마트폰, 태블릿PC, 랩톱, 데스크톱, TV, 웨어러블 기기까지 어떤 스크린에서든 사용자에게 통일성을 줘야만 한다. 그것이 어떻게 가능할까? 머티리얼 디자인에서의 ‘머티리얼’은 모듈 형태의 콘텐츠 단위와 일치한다. 화면 크기에 따라 이 모듈을 어떻게 배치할 것인지 로직을 짜둔 것이다. 디자이너는 이에 맞춰 디자인하면 그뿐이다. 이렇듯 머티리얼 디자인은 완벽한 반응형 디자인이길 꿈꾼다. 화면의 크기, 가로·세로 회전 여부에 따라 앱 UI가 알맞게 변경되는 것. 지금 구글은 웹사이트까지도 반응형 트렌드를 따르지 않으면 검색엔진의 상위 노출을 제한하고 있다. 안드로이드 점유율이 과반수를 차지하는 한국이 머티리얼 디자인 가이드를 따를 또 다른 이유다.