안녕하세요. 그로스 마케팅 파트너 허들러스입니다.

이번 글에서는 UI 디자인의 흐름과 현재 위치에 대해서 다뤄보려고 합니다. 그러면 UI 디자인의 변화 과정을 살펴보러 함께 가볼까요? 

 

 

1. 스큐어모피즘

 

아이폰 3G를 사용할 때, 현실과 비슷한 느낌으로 앱들이 디자인 되어 있었어요. 이를 스큐어모피즘이라고 하죠?

쉽게 말해, 현실 세계의 메타포를 그대로 모바일 안으로 옮겨 놓은 디자인이에요. 아이폰의 기본 기능인 ibooks는 집에서 보던 책장을 그대로 옮겨 놓은 듯한 디자인이었죠? 

하지만 스큐어모피즘 디자인에는 한계가 있었는데, 그중 가장 대표적인 것이 디자이너들의 피땀눈물이 들어간다는 것과 개발자들의 용량 문제였어요. 아무래도 현실의 메타포를 거의 그대로 디자인하다 보니까 꽤 오랜 시간이 걸렸고, 그 용량도 상당했죠. 제작된 앱들도 무척 무거워서 초창기에 앱을 다운로드 하면 꽤 많은 용량을 차지하곤 했습니다.

그런 단점을 보완하고자 나온 디자인이 플랫디자인입니다.

 

 

2. 플랫디자인

 

 

 

 

이렇게 이미지로 보면 느낌이 오실 거예요. 플랫디자인은 애플에서 ios7으로 처음 도입했는데요, 미니멀리즘을 추구하면서 적절한 그라데이션으로 작업이 이루어졌어요. 그림자(drop-shadow)는 거의 사용하지 않았어요. 요소 하나하나 그림자와 빛의 방향을 계산하며 작업하다가, 그런 조건을 제외하고 눈에 잘 띄고 플랫하지만 효과적으로 각인시키기 위한 작업들을 해야 했어요.(병적으로 그림자를 빼기도 했어요.)

그런 애플의 움직임에 맞서 구글에서 출시한 것이 있었으니! 현재에도 꾸준히 사랑 받고 사용되고 있는 머티리얼 디자인입니다.

 

 

3. 머티리얼 디자인

 

 

 

 

이전까지 플랫으로만 디자인을 해오다가, 저희가 스타트업을 창업한 시기에 머티리얼 디자인이 나타났어요. 안드로이드 우선 개발이라 가이드를 보았는데 3차원 구성, 즉 depth를 느낄 수 있게 작업하는 게 플랫 디자인과의 가장 큰 차이 같았어요. 가이드 문서가 무척 상세해서 자유롭게 디자인하던 저에게는 조금 불편했으나, 이 시기에는 디자이너가 없더라도 가이드 문서로 개발자 혼자 수준 높은 앱을 만들 수도 있었죠. 디자인 가이드는 안드로이드 마켓의 디자인 퀄리티를 전반적으로 상승하는 역할을 했어요.(실제로 정말 자세하게 되어 있어요.) 

머티리얼디자인은 앞서 말씀드린 것처럼 현재에도 꾸준히 사용되는 중이지만, 조금씩 디자인 계에서 또 다른 움직임을 보이고 있으니 그것은 바로 뉴모피즘입니다.

 

 

4. 뉴모피즘

 

4-1. 뉴모피즘의 시작

 

2020년 뉴모피즘이라는 키워드가 들려왔어요. 오랜만에 변화의 바람이 불어오는 것 같아요. 시작은 특이하게도 그동안에는 애플과 안드로이드에 의해 UI 디자인의 흐름이 결정되었다면, 뉴모피즘은 드리블과 인스타에서 시작되었어요. Jason Kelley는 “New skeuomorphism”을 ‘Neuomorphism’으로 부르겠다고 말했지요. 이름에서도 느껴지듯이 초창기 스큐어모피즘에 대한 향수 같은 느낌이 드네요.

 

4-2. 스큐어모피즘의 흔적

 

아직까지도 스큐어모피즘의 흔적들은 곳곳에서 볼 수 있습니다. (예를 들면, os의 휴지통 아이콘을 봐보세요!) 그리고 최근 애플의 움직임을 보면 극단적인 미니멀리즘에서 다시 변화한 것을 볼 수 있죠?

 

 

 

(위) 극단적 미니멀리즘보다는 (아래) 깔끔하지만 뭔가 현실적인 3d가 더 좋아 보이지 않나요? 저는 개인적으로 좋았는데, 아무래도 대부분의 유저도 저와 비슷하게 느꼈던 것 같아요.

 

 

4-3. 뉴모피즘을 보여주다

 

 

 

 

드리블에서 3000 좋아요를 받은  Alexander Plyuto의 작업입니다.

드리블의 한 디자이너의 작업은 3000 좋아요를 받으며 바이럴이 되었고, 이후로 비슷한 느낌의 작업들이 만들어지고 있습니다.

무엇이 다를까요?

 

 

 

아이콘은 크게 변하는 것이 없습니다. 그래서 실제 카드 콘셉트에 초점을 두어 조금 더 비주얼적으로 멋지게 만들어 보는 거예요.

 

모던/머티리얼 카드

모던 디자인과 머티리얼 디자인에서 사용하던 카드는 대부분 배경의 위에 살짝 떠있는 느낌의 디자인이었어요. 그림자는 깊이감을 나타내 주었고요. border가 없어도 그림자만으로 박스의 경계선을 느낄 수 있게 해 주었죠.

 

뉴모피즘의 카드

배경 속에서 살짝 돌출되거나 들어가는 느낌으로 제작이 됩니다. 모던/머티리얼과 다르게 떠있지 않고 붙어있는 느낌이죠. 이 효과는 그림자의 negative와 positive를 가지고 놀면 쉽게 만들 수 있어요. 배경은 블랙이나 화이트는 되지 않고, 약간의 색조를 주는데 그 색조에 따라 따뜻하거나 차가운 느낌을 연출할 수 있습니다.

 

 

 

 

친절하게 설명도 자세히 되어있네요.

아직까지는 뉴모피즘이 2020년 이후 UI를 이끌어 갈 수 있을지에 대해서는 입장이 나뉘는 것 같아요. UI 디자이너 입장에서 드는 생각은 뉴모피즘이 물론 특별해 보이는 것은 있어요. 하지만 플랫의 시대나 머티리얼 시대처럼 시대의 UI를 대변할 정도의 파급력이 있는가 생각해보면 조금 회의적이에요. 

특별한 느낌을 주는 뉴모피즘 디자인. 매력적이긴 하지만 느낌이 거의 비슷한 것 같아요. 다른 콘셉트의 디자인이라도 뉴모피즘 특징이 주는 특별함이 강해서 그런지, 비슷한 플라스틱? 따뜻함? 눈먼자들의도시? 느낌이 나는 것 같아요. 뉴모피즘도 하나의 콘셉트 정도가 되지 않을까…하는 생각이 드네요. 

시각적인 아름다움도 사용자가 느끼는 좋은 경험의 일부입니다. 하지만 앞서 흐름을 살펴본 것처럼 미적 흐름도 시대에 따라서 조금씩 바뀌어 갑니다. 앞으로 애플이나 구글에서 또다른 UI 디자인의 흐름을 만들지 뉴모피즘처럼 디자이너들의 움직임들 속에서 UI 디자인의 흐름이 만들어 질지 지켜보아야 하겠지만, 흐름을 따라가면서 미래를 제시할 수 있는 디자이너가 되고 싶네요.

* 내용은 뉴모피즘 관련 글과 저의 개인 생각으로 제작되었습니다.

 

긴 글 읽어주셔서 감사합니다.

 

 

해당 글은 그로스 마케팅 파트너 허들러스와 모비인사이드의 파트너쉽으로 제공되는 기사입니다.