2014년, 구글은 머티리얼 디자인(Material Design)이라는 새로운 디자인 언어를 내놓았습니다. 이전부터 회사 저마다의 디자인 철학이나 정책은 존재했지만, 이 정도의 존재감 있는 발표는 드물었어요. 애플은 잡스 사후 스큐어모피즘(skeuomorphism)에서 플랫(Flat)으로 전환을 결과물로 보여주었지만, 디자인 언어 자체에 대해서는 말을 아꼈습니다. 더 앞서 마이크로소프트가 메트로 (Metro)라는 디자인 언어를 선보이며 거대한 선언을 하였으나, 다들 아시다시피 윈도우8의 실패로 빛을 발하지 못하였죠.

 이전까지의 구글은 결코 디자인에 있어 좋은 평가를 받진 못했습니다. 과거 구글 검색 홈페이지나 지메일 서비스를 떠올려 보시면 아실 겁니다. 스큐어모피즘 이라는 강력한 디자인 사상을 기반으로 구축된 아이폰에 비해 안드로이드에서의 디자인은 단지 기술적 구현의 일부였기에, 어색하며 못생기며 종잡을 수 없는 디자인을 갖고 있었습니다. 하지만 머티리얼 발표를 기점으로 구글 전사의 디자인을 한 가지 철학으로 다 잡아 변화하며 평가를 반전시키는데 성공하였습니다.

 잠시 디자인 언어들의 흐름을 짚어보겠습니다. 스큐어모피즘은 도구라는 뜻의 그리스어 skeuos와 형태를 뜻하는 morphê의 합성어로 실재 물질의 모양을 흉내낸 장식적 양식을 일컫습니다. 시계나 오디오, 또는 기계 스위치의 모양 등을 흉내내는 것은 가상의 디지털 스크린 인터페이스를 보다 친절하게 나타내기 위한 방법이었습니다. 오랫동안 디지털 인터페이스 디자인의 핵심적 사상이었죠.

 하지만 픽셀(점)로 이루어진 스크린의 물리적 제약은, 아무리 표현을 잘 해도 모사라는 한계를 벗어나지 못합니다. 나무 무늬를 프린트한 판넬 가구를 원목가구라고 부르지 않는 것과 같습니다. 그리고 표현과 개발 구현에도 생각외로 손이 많이 가기도 합니다. 때문에 스큐어모피즘이 디지털에 적합한 표현방식인지는 단골 논쟁거리였습니다.

 모더니즘과 미니멀리즘을 필두로 한 플랫스타일이 등장한 것도 이때입니다. 플랫은 실제와 같은 질감, 빛의 반사 같이 기능과 관계없는 장식적 요소를 모두 걷어내고 평면에 색, 면 그리고 타이포그라피로 이루어진 스타일을 일컫습니다. 이는 평면 스크린에 가장 적합한 방식이라 여겨졌고, 실제로 애플은 iOS7 에서부터 플랫으로의 대전환을 선언하죠. 당시 이전의 익숙함 경험 때문에 치열한 논쟁이 있었지만 곧 흐름은 플랫으로 기울었습니다.

 하지만 지나친 미니멀리즘으로 인해 또 충돌이 생깁니다. 미적인 형태에 집중하다 보니 정보영역과 버튼 같이 역할이 다른 객체 간 시각적 혼란이 생기기도 하고, 지나치게 단순하고 정제된 스타일로 디자인들이 비슷해지기도 했죠. 머티리얼은, 여기서 '종이'가 '빛'과 반응하는 효과를 추가합니다. 스크린 내의 객체들이 '종이'와 같은 레이어로 이루어져 각 층에 위치하여, 서로의 관계가 시각적으로 명확히 구분되는 것이지요. 이렇게 실제 세계에서의 시각적 암시를 기반으로 한다는 점은, 스큐어모피즘과 맞닿은 사상이기도 합니다.

 안드로이드는 iOS의 폐쇄성과 반대의 개방성을 지향했습니다. 때문에 삼성, LG 같은 대형 제조사 뿐만 아니라, 중소업체들에서 까지 수백만개의 스마트폰을 만들 수 있게 합니다. 하지만 이는 디자이너와 개발자에게 최적화라는 시련을 내려줍니다. 안드로이드 초창기부터 강조된 적용성(Adaptivity)은 머티리얼에서도 필수 사상일 수 밖에 없습니다. 그들이 세운 가이드를 준수하는 것으로도 비교적 균질의 디자인을 할 수 있고, 다양한 기기에 일관된 경험을 제공할 수 있다는 것이 장점입니다.

 올해 5월, 구글의 연례 개발자 컨퍼런스인 Google I/O를 통해 머티리얼 디자인의 업데이트를 발표하였습니다. 발표에 따르면 이번 업데이트는 "적용할 수 있는 디자인 시스템 Adaptable design system"으로의 변화입니다. 디자인과 개발과의 협업은 모든 과정에서 중요한 지점이었습니다. 때문에 디자인의 의도가 온전히 구현될 수 있도록 서로의 간극을 줄이는 것이 과제였지요. 새로운 머티리얼을 통해 이들이 보다 긴밀하게 소통하고 협업할 수 있도록 하려 합니다. 디자인 리소스와 코드를 더욱 다듬어 공개하고, 이들을 쉽게 응용할 수 있는 다양한 도구들도 함께 출시 하였죠. 불필요한 노력과 시간낭비를 줄이고, 만들고자 하는 프로덕트의 본질에 집중하는데 돕겠다고도 하였습니다. 그럼 이제 한번, 과연 머티리얼이 어떻게 바뀐 것인지 짚어보고자 합니다.

 현재 디지털 디자이너들에게 가장 널리 쓰이고 있는 툴인 Sketch에서 손쉽게 머티리얼 스타일 디자인을 적용해보고 조정할 수 있는 툴입니다. 기존에는 General Compose로 단순히 참고만 가능하던 것을 아예 플러그인으로 넣은 것이지요. 머티리얼에서 제시하는 타입들을 기반으로, 자신만의 스타일을 쉽게 심볼화 하여 응용하는 것도 가능해졌습니다. 아이콘의 모양이나 박스의 굴림값, 컬러의 톤을 바꿀때 여러 그림을 일일이 바꾸지 않고 한번에 바꿀 수도 있습니다. 글꼴 역시 기본 시스템 폰트인 Roboto 외에 구글이 최적화 시킨 여러 폰트를 테스트해 볼 수도 있습니다. 또 바로 다음에 언급할 Gallery로 전송하는 기능도 포함하여, 공유하는 과정도 간소화 되었습니다. 사실 이전에 유사한 프로그램들이 있긴 했습니다만, Theming은 표준 툴 로서 그 효용과 높은 안정성이 기대 됩니다.

 디자이너가 개발, 기획, PM등 협업 파트너와 커뮤니케이션 하는 방식은 은근 복잡했습니다. 디자이너가 시안을 공유하려면 이를 png나 jpeg로 변환하고, 이를 다시 PPT에 얹거나 메일에 압축하여 첨부를 해야 사람들에게 전송이 가능해집니다. 보는 사람들은 여기에 답메일이나 전화 같은 전통적(?) 방식으로 커뮤니케이션을 하는데 이들은 휘발되거나 제대로 의미 전달도 어렵죠. 이런 어려움을 해결하기 위해 Dropbox나 Trello, Slack 같은 다양한 공유나 커뮤니케이션 서비스들이 존재하나 이들은 결국 별개의 소프트웨어이기 때문에 이들을 오고가야 하는 불편이 생깁니다.

 Gallery는 이런 것들을 구글 클라우드를 통해 통합 해버렸습니다. 디자이너가 Sketch 에서 작업한 디자인을 바로 프로젝트에 업로드하면 팀원들이 바로 댓글로 코멘트를 남길 수 있습니다. 또 컨셉, 설계문서, 디자인 결과가 하나로 묶여 화면별 히스토리 관리까지 가능해졌습니다. 수정 역시 Sketch에서 적용한 것이 바로 반영이 가능하니, 수기로 문서 버전을 관리할 필요 역시 없어졌습니다.

 이전까지 아이콘 스타일은 Solid 한 가지를 권장했던 것을 5개로 세분화 했습니다. 사실 이는 현존하는 모든 스타일들에 해당합니다. 이런 것들을 가이드로 제안하는 것은 물론, 스타일 별, 기능 별 아이콘을 모두 아카이브로 만들었습니다. 단순한 검색방식으로 필요한 아이콘을 찾으면, 이를 바로 다운로드 하여 디자인 리소스로 활용할 수 있게 된 것입니다.

 원래 앱바는 화면 상단에만 존재하는 것이 불문율 이었습니다. 스마트폰 뿐만 아니라, Windows나 MAC OS같은 PC환경에서도 창 닫기나 축소 버튼 같은 설정 기능들이 위쪽에 있는 것도 같은 맥락입니다. 하지만 한손 조작의 사용성이 고려되어야 하는 모바일에서는, 엄지손가락이 닫는 아래쪽에 네비게이션 버튼들을 두는 경우도 있습니다. 이번에는 아예 상단 고정이었던 앱바를 하단에도 둘 수 있도록 허용하였습니다. 하지만 다소 이론적으로는 이해가 가지만, 기존 제시된 다른 하단 컴포넌트와의 충돌이나 웹, 타블렛 같이 다른 환경에서는 어떻게 적용될지 구체적인 사례는 빠져있습니다. 이는 좀 더 충분한 사례연구가 필요한 부분이 아닐까 합니다.

 머티리얼의 기본 사상은 종이로 이루어진 공간 개념입니다. 상단 타이틀 영역은 모든 레이어의 상위에 위치하고 고정되어 화면을 잡아주는 역할이었습니다. 하지만 이번엔 반대로, 상단 타이틀에 해당하는 영역을 가장 아래의 Back 레이어로 두고, 하단 컨텐츠를 Front 레이어로 두게 하였습니다. Back 레이어엔 액션과 옵션 조정이나 정보를 넣어 여기서 조작을 하면, Front 레이어의 컨텐츠가 바뀌는 구조입니다. 이로서 상단 타이틀이 보다 적극적인 확장성과 변형성을 지닐 수 있게 되었습니다.

 화면 에서 가장 핵심적인 액션을 수행하도록 한 FAB(Floating Action Button)의 경우, 플로팅 형태로 제공할 수 있었습니다. 이는 언제든 즉시적으로 실행이 되어야 하기 때문에 시각적으로 강조가 되는 동시에 바탕의 컨텐츠를 가리지 않아야 했었죠. 그래서 포인트 컬러와 아이콘만 쓸 수 있게 제한 되었으나, 기능과 의미 전달에 오해가 발생하는 경우가 있었습니다. 때문에 보다 설명적으로 풀 수 있도록 텍스트를 함께 쓰는 방법을 제시합니다.

 아직까지 디자인 스타일과 언어에 대한 논쟁은 활발합니다. 무엇보다 디자인을 획일되게 만들고, Do와 Don't를 나눈 것이 창의성이 말살된 이분법적 사고를 유발한다는 비판도 있지요. 하지만 결국 도구들을 어떻게 활용할지는 쓰는 사람의 몫이 아닐까 합니다. 적당히 트렌드를 따르면서 적당한 것을 만들던지, 도구를 통해 제품의 본질로 다가갈지는 선택의 문제겠지요.

 머티리얼은 기획자-디자이너-개발자 간 통용될 수 있는 도구로서의 역할을 확장하였습니다. 물론 아직은 디자이너 관점이 강하지만, 분명 이제는 디자인 언어가 더 이상은 디자이너 안에서만 끝나지는 않는다는 것입니다. 다양한 사용자의 경험들을 연결하듯, 디지털 메이커들의 경험들도 공통 언어로 묶일 수 있지 않을까, 조심스레 예측해 봅니다.