2021년 12월 11일에 쓴 글
오늘은 며칠 전 웹디자인 트렌드 분석글을 보다가 관심을 가지게 된 '뉴모피즘'과 '글래스모피즘'을 공부해 보았다.
다양한 웹디자인 방식의 개념부터 알아보았는데 내가 정리한 바로는
- 스큐어모피즘: 사물의 모습 그대로를 표현하는 3차원적인 디자인 방식.
- 플랫 디자인: 복잡한 그래픽 효과를 배제하고 단순한 색상과 구성을 통해 직관적인 인식이 가능하도록 구성하는 2차원 디자인 방식.
- 머티리얼 디자인: 플랫 디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식.
- 뉴모피즘: 객체와 배경간의 구분을 오직 그림자로 표현함으로 볼륨감 있고 생생하게 살아있는 듯한 느낌을 받게 하는 디자인 방식.
- 글래스모피즘: 반투명한 유리를 댄듯한 효과를 주고, 투명도를 강조하기 위해 배경에 비비드한 컬러를 사용하는 디자인 방식.
이 5가지 방식을 찾아보았다.
나는 평소에 옛날 폰 화면을 보고 복잡하고 기계적이어서 촌스럽다고 생각했었다. 아마도 내가 스마트폰을 본격적으로 접할 시기에 스큐어모피즘 기반의 디자인이 아닌 머티리얼 디자인을 먼저 접해서 스큐어모피즘을 촌스럽게 느꼈던 것 같다.
이렇게 오늘 내가 배운 내용은 나도 모르게 일상에서 접해온 것이라 정보가 쌓이고 각 디자인의 장, 단점을 분석하며 알아갈 때 더욱 실감 나고 재미있게 배웠다.
나는 뉴모피즘을 브런치 작가 '우디'님의 글에서 알게 되었는데 뉴모피즘을 적용한 디자인을 처음 봤을 때 신선한 충격이있었다. 그 이유는 지금까지 봐온 것과는 다른 느낌의 디자인이 예쁘고 신기했기 때문이다. 첫 인상부터 시각적으로 만족감을 주는 뉴모피즘이었다. 무엇보다 뉴모피즘의 동글동글하고 손으로 터치하면 볼륨감이 느껴질 것 같은 입체적인 느낌의 디자인이 새롭고 마음에 들었다.
뉴모피즘에 관한 여러가지 글을 읽으면서 뉴모피즘의 장, 단점을 알게 되었다. 접근성이 낮다는 단점으로 인해 전체적인 스타일에는 잘 적용되지 않는다는 아쉬운점과 그래도 한 부분의 요소로서 활용되면 터치하고 싶은 욕구를 증가시켜 주목도가 생긴다는 장점도 알게되었다.
서치를 하다 보니 한 개발자가 만든 뉴모피즘 코드를 생성해주는 사이트가 있어서 이것저것 클릭하며 뉴모피즘을 구경해 봤다. 하면서 느낀 것은 뉴모피즘이 접근성은 떨어져도 몽글몽글하니 예쁘다는 것 ^^
뉴모피즘 코드 생성 사이트
https://neumorphism.io/#79a5ec
다음으로는 글래스모피즘에 대해 찾아보았다.
글래스모피즘에서는 뉴모피즘에 비해 매력을 크게 느끼지 못했다. 유리 같은 레이어를 사용해서 디자인하는 것인데 뉴모피즘에 비해 자료도 적어서 아쉬웠다.
글래스모피즘은 뉴모피즘보다 접근성이 좋지만 전체적으로 디자인하기에는 글래스모피즘 역시 무리가 간다는 것을 보고 접근성이 좋은 디자인(플랫, 머티리얼)을 생각해낸 사람들이 얼마나 고민과 노력을 많이 했을지, 대단하다는 생각이 들었다. (물론 글래스모피즘과 뉴모피즘을 생각해낸 사람도 대단하다.)
글래스모피즘 코드를 생성해주는 사이트도 찾았다. IT분야는 퀄리티 높은 정보를 공유해주는 사람이 많은 것 같아서 감사하다.
글래스모피즘 코드 생성 사이트
https://hype4.academy/tools/glassmorphism-generator
오늘은 뉴모피즘을 중심에 두고 여러가지 웹디자인 방식에 대해 알아보았다.
'예쁘면서 접근성도 좋은 디자인을 만들려면 얼마나 고민하고 관찰해야 할까?' 하는 생각이 들었다.
그리고 앞으로 나올 새로운 디자인들이 기대가 된다.
언젠가는 나도 새로운 디자인을 만드는데 동참하는 날이 오면 좋겠다.
오늘의 글 끝!
참고한 글 ∙ 자료
-https://brunch.co.kr/@cliche-cliche/32
-https://bs.greenart.co.kr/community/greenDesignNews_view?idx=1669
-https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9