[5분 UI/UX]
구글의 머터리얼 디자인

Jan 6. 2025

애플이 보여준 플랫 디자인으로의 변화는 분명 파괴적 혁신이었지만 동시에 급진적인 변화이기도 했다. 한동안 플랫 디자인이 대세로 지속되었지만 동시에 플랫 디자인의 한계도 속속 드러났다.

플랫 디자인은 디자이너 입장에서 작업의 효율성을 가져다주었지만 지나치게 심플함을 강조해 사용자가 아이콘을 보고 기능을 유추하기 어렵다는 단점 또한 가지고 있었다. 디자인 업계에서 플랫 디자인을 열광적으로 지지했던 것에 비해 변화된 디자인에 사용자들의 혹평이 쏟아졌던 건 이런 배경이 있었기 때문이다.

미니멀리즘만을 강조한 플랫 디자인은 곧 몰개성화로 이어졌다. 사용할 수 있는 오브젝트나 디자인 요소가 제한되다 보니 앱 디자인이 비슷비슷해지는 이른바 디자인 동질화가 진행되었고 가뜩이나 사용성과 인지 효과가 떨어지는데 앱 디자인마저 비슷비슷해서 사용성이 더 떨어지는 악순환이 이어졌다.

구글의 머러리얼 디자인¹

이러한 문제점과 한계를 극복하고자 다양한 대안이 등장하기 시작하는데 그중 하나가 구글이 선보인 머터리얼 디자인(Material Design)이다.

머터리얼은 플랫 기반이긴 하지만 물질의 질감을 중요하게 생각한다. 플랫 베이스 2차원 평면에 그림자 효과와 음영을 넣고 인터렉션을 적극 활용해 공간감과 원근감을 느끼게 하는 것이 머터리얼 디자인의 특징이다. 플랫이 추구하는 최소한의 정보와 스큐어모피즘의 입체감, 두 가지 장점을 융합한 디자인이다.

머터리얼 디자인은 그동안 소프트웨어 회사로만 인식되었던 구글의 대중적인 인식 전환을 불러왔다. "공대 감성인 줄 알았는데 디자인도 좀 하네?"라는 것이 사람들의 공통적인 반응이었다.

애플이 플랫 디자인을 전면에 내세우니 많은 디자이너들이 대세에 따랐지만 사실 내심 속으로는 한계를 많이 느끼고 있었던 듯하다 머터리얼 디자인이 발표되자 디자이너들은 열광했고 순식간에 대세가 머터리얼로 기울었다.

머터리얼 디자인이 단순히 스마트폰 UI에만 영향을 끼친 건 아니다.

머터리얼 디자인이 가장 많은 영향을 끼친 건 웹 분야다.

PC, 태블릿, 스마트폰 (거기다가 스마트 TV까지) 등 디바이스가 다양화되면서 디자이너들은 다양한 화면크기와 해상도에 대응할 수 있게 디바이스마다 별도의 웹 페이지를 만들어줘야 했다. PC 웹 페이지 전용 디자인, Mobile 디바이스 전용 디자인 이런 식으로 말이다. 이런 별도 디자인은 작업 리소스를 많이 소모했고 이에 따라 대안으로 등장한 것이 반응형웹(Responsive Web)이다.

해상도에 따라 자동으로 레이아웃이 변환되는 반응형웹

해상도에 맞춰 화면이 자유자재로 변환되는 반응형웹은 분명 혁신적이었지만 디자이너 입장에서 꽤 골치아픈 존재이기도 했다. 오브젝트마다 변화하는 해상도를 고려해 디자인해야 했기 때문이다.

머러티얼 디자인의 카드형 UI 예¹

머터리얼 디자인은 반응형웹과 찰떡궁합이었다.

구글은 타일을 활용한 카드형 UI를 선보였는데 카드형 UI를 이용해 반응형웹을 만들면 아이콘이나 이미지 등 오브젝트는 그대로 두고 카드 크기나 배치만 변화하는 형태로 반응형웹을 대응할 수 있었다. 머터리얼 디자인을 활용하면 이전보다 훨씬 반응형웹 대응이 수월해지는 장점이 있다. 많은 디자이너가 머터리얼에 열광했던 것도 이런 이유이다.

미니멀리즘을 강조했던 애플은 플랫에 스큐어모피즘을 결합한 디자인을 선보이고 있고 물질과 질감을 강조했던 구글은 반대로 극단적으로 심플한 머터리얼 유라는 디자인을 선보였다.

디자인 트렌드는 변화무쌍하지만 한편으로는 돌고 돈다. 디자인 트렌드는 현대 미술 사조 변화와 유사하면서도 다른 특성을 보이는데 리얼리즘 → 미니멀리즘으로 이어지는 변화는 유사하지만 이후 현대 미술은 추상, 입체, 초현실 등 여러 갈래로 분파한 반면 스마트폰 UI는 하나의 유행이 대세로 자리 잡으면 사람들이 대세를 쫓아가려는 움직임을 보인다. 그래서 변화가 쉽게 일어나지 않지만 한번 트렌드가 바뀌면 급격하게 대세가 기울어지는 특징이 있다.