머터리얼 디자인이 웹을 죽이는가

머터리얼 디자인(Material Design)은 현재 수많은 디자이너들 사이에서 회자되고 있는 ’잇it’입니다. 구글에서 안드로이드 기기를 위해 만들어낸 콘셉트로 미니멀하고 깔끔해서 자꾸 사용하고픈 매력을 풍기죠.

머터리얼 디자인을 차용한 웹사이트가 안드로이드 기기에서 스멀스멀 기어나와 여기저기서 모습을 보이고 있습니다. 문제는 바로 그 많은 사이트들이 전부 빼다 박은 듯 닮았다는 겁니다. 

머터리얼 디자인 리뷰

머터리얼 디자인을 정확히 모르시는 분들을 위해 짧게 설명을 해드리자면: 구글이 낳은 콘셉트로 안드로이드 앱의 모양새는 이래야 하고, 유저 인터페이스는 이렇게 작동해야 한다고 구체적으로 설명을 달아놓았습니다. 거기에는 애니메이션, 스타일, 레이아웃, 컴포넌트, 패턴, 사용성을 위한 규칙을 정의해 놨을 뿐만 아니라, 심지어 컬러 팔레트와 타이포그래피 옵션까지 규정해 놨습니다.

이러한 요소들이 자꾸 사용하고 싶고 시각적으로 예쁜 디자인이 되게 하는데 일조했지만, 그 결과는 흔해 빠진 식상한 디자인 컬렉션이 됐다는 겁니다. 

머터리얼 디자인은 초창기 안드로이드에서 벗어나려는 시도이기도 합니다. 비록 콘셉트는 구글의 아이디어이긴 하지만, 디자이너들은 그걸 가지고 작업하고 다양한 플랫폼과 모든 디바이스 타입을 아우르는 웹사이트를 만드는데 머터리얼 디자인을 사용합니다.

머터리얼 디자인의 궁극적 목적은 “좋은 디자인의 전통적 원칙과, 테크놀로지와 과학이 지닌 혁신과 가능성을 융합한 시각적 언어를 창조하는 것“입니다. 여기서 기존의 ’시각적 언어’는 애원하며 묻습니다: 머터리얼 디자인이 웹을 죽이고 있나요?

머터리얼 디자인 라이트(Material Design Lite)

단일 언어가 모바일 우선주의 디자인에서 모든 디바이스를 커버할 수 있는 디자인으로 움직이고 있습니다. 구글이 올 초에 머터리얼 디자인 라이트를 선보였는데요, 심미적으로 간결한 버전으로써 모든 웹사이트 위한 것이라 할 수 있습니다. 

“틀에 자유로운” 템플릿으로 쉽고 빠르게 웹사이트를 만들 수 있습니다. 주로 블로그, 콘텐츠가 많은 사이트, 대시보드, 비주얼 프로젝트, 싱글 페이지 사이트에 맞게 디자인되어 있으며 조정도 가능합니다. 

“엄격한” 디자인 패턴을 위해 규칙을 따르라. 

머터리얼 디자인이 먹혀들고 있는 이유는 꽤나 엄격한 규칙과 사용성 패턴을 바탕으로 하기 때문입니다. 이건 디자인 쪽에서 굉장한 일을 하는 겁니다. 특히 애니메이션 가이드라인은 물리적 현상을 기원으로 했기 때문에 이해하는 것이 중요합니다. 

하지만 그 규칙들 때문에 디자인 작업에 있어서 많은 제약이 따르며 지금까지 머터리얼 디자인을 사용한 대다수의 앱들은 공장에서 찍어나온 듯 다들 비슷한 느낌을 주고 있습니다. 

이러한 엄격한 패턴은 사용자들이 작은 스크린 기기에서 인터랙션을 이해하는데 도움을 주기 위해 개발되었습니다. 머터리얼 디자인은 플랫 디자인에서 발전한 것으로 그 당시 플랫 디자인의 모든 유저 인터페이스 요소들은 디자인 영역에서 명확하게 정의 내려지지 않았었습니다. 머터리얼 디자인은 이 문제를 개선하려고 한 겁니다. 

이제 다시 변화가 필요한 시점일지도 모르겠습니다. 대부분의 사용자는 무엇이 버튼이고, 그것이 어떤 반응을 보일지 이해하고 있습니다. 디자인 이론의 변화는 사용자에게 디바이스와 웹을 사용하는 방법에 새로운 관점을 가르쳐 줍니다. 사용자는 이해가 빠르죠. 툴은 자주 변하는 것을 좋아하는 사용자를 가르치도록 디자인되어 있습니다. 

이상하게도 머터리얼 디자인에 관한 한, 엄격한 디자인 패턴은 무언가가 디자이너 스스로에게 부담을 지우게 만듭니다. 머터리얼 디자인에서 제공하는 가이드라인과 공통의 디자인 양식에서 단순히 그것을 모방하는 것입니다. 

그렇다면 왜 수많은 디자이너들이 판박이 같은 머터리얼 디자인으로 작업을 하는 걸까요?

공통 UI 요소와 디자인 수선용구

위에 물음에 대한 모든 답은 바로 디테일에 있습니다.

공통의 사용자 인터페이스 요소, 아이콘, 색상표, 타이포그래피가 웹에서 표현할 수 있었던 심미적 기회를 박탈시켜버렸습니다. 하지만 굳이 저런 식으로 디자인 할 필요가 없습니다. 머터리얼 디자인이 제공하는 공통의 가이드라인이나 UI kit 따위를 그대로 가져다 쓰는 게 아니라 오직 머터리얼 콘셉트만을 사용해서 디자인을 할 수 있겠죠. 

자꾸 이슈가 되는 것 중 하나는 머터리얼 디자인의 외형을 그대로 모사하기만 한다는데 있습니다. 기능적인 부분은 하나도 없고, 디테일적인 부분에는 주의를 기울이지도 않고 말이죠. 그건 머터리얼 디자인이 아니라 그냥 웹을 죽이는 거고, 디자이너가 게으른 겁니다. 

하지만 트렌드를 따를 필요는 없다.

“게으른 디자이너”라는 꼬리표를 달지 않고 머터리얼 디자인을 사용할 수 있는 몇 가지 방식이 있습니다. 콘셉트는 유지하면서 동시에 규칙을 몇 가지 부수는 겁니다. 

1. 머터리얼 디자인의 컬러 팔레트 외에도 존재하는 색은 무궁무진합니다. 밝고 강렬한 채도의 컬러 팔레트 대신에 깊고 진한 색이나 파스텔 계열의 색도 생각해보세요. 

2. 디자인 아이콘과 유저 인터페이스 요소들은 기본 가이드라인을 따라 만드는 건 좋습니다. 구글에서 무료로 제공하는 세트는 사용하지 마세요.

3. 100% “머터리얼“ 답게 갈 필요는 없습니다. 디자인 콘셉트에서 필요한 특정 부분에만 적용시키세요. 애니메이션 규칙은 예외적으로 잘 되어 있어서 언제든 고려할 필요가 있습니다. 

4. 자신의 디자인에 맞는 타이포그래피를 생각하고 사용하세요. 디자인을 “죽이는 “ 것들 중 하나가 바로 머터리얼의 타이포그래피 팔레트만의 사용이며, 이로 인해 많은 부분이 비슷해 보이는데 일조하고 있습니다.

5. 다른 여타의 트렌드를 잘 믹스 매치해서 디자인하세요. 머터리얼 디자인은 하나의 트렌드이지 모든 디자인 위에서 군림하는 절대적인 해결책이 아닙니다.  

마치며

그럼 처음에 했던 질문을 다시 해보죠: 머터리얼 디자인이 웹을 죽이고 있나요?

절대 그렇지 않습니다. 웹을 죽이는 근본 원인은 트렌드를 너무 과도하게 사용해서 트렌드를 위한 디자인을 하는 꼴이 되고 있기 때문입니다. 그러니 머터리얼 디자인을 사용하되, 프로젝트의 콘셉트에 맞게 적절히 잘 사용하세요.

원문: Is material design killing the web? 

Refresh Studio

해외 최신 웹/UX 디자인 글과 동향을 소개해 드립니다.