UI 트렌드 : 글래스모피즘 & 클레이모피즘

2022년 UI/UX 트렌드를 검색하다

글래스모피즘, 클레이모피즘 이란 단어를 보게 됐다.

 

글래스? 클레이?
그게 뭔데....
UI/UX랑 어떤 연결고리가 있는데...

 

글래스모피즘은 이미 2021년도부터 트렌드였던 것 같고,

클레이모피즘은 메타버스의 출현과 NFT의 3D에 대한 인기가 상승하면서 부상하고 있다고 한다!

 

글래스모피즘	클레이모피즘
흐릿하고 약간의 투명도가 있는 불투명한 유리와 같은 모습으로 떠 있는 느낌을 주는 기법. 웹 기술의 발전으로 디자이너가 작업한 것과 매우 흡사한 정도의 수준까지 사이트에 반영이 가능해졌기 때문에 많이 이용 될 것으로 예상됨. 해당 효과를 통해 텍스트나 이미지 등의 가독성에 문제를 주지 않고, 영역의 색상을 달리하는 등으로 페이지 영역의 디자인 사용성이 높아지게 되었음.	메타버스의 출현과 NFT의 3D에 대한 인기가 상승하면서 부상하고 있는 UI 트렌드. 내부 및 외부 그림자의 조합으로 이뤄진 3D적인 디자인 표현으로 친근함과 어린아이 같은 인터페이스를 만들어준다. 최소한의 텍스트를 사용하는 것이 좋고, 강한 악센트 색상은 대비가 어울린다. 모양도 직사각형 또는 정사각형의 형태에서 크기 대비 50% 이상으로 모서리를 둥글게 만든다.

 

확실히 글래스모피즘만 보면 세련되었고,

클레이모피즘만 보면 귀엽다.

 

글래스모피즘과 클레이모피즘을 결합

 

두가지를 혼합한다면 또 조금은 다른 느낌!

그래도 3D 형태다 보니 둥글둥글 귀여운 느낌이 더 강한 것 같다.

 

 

 

---

글래스모피즘이야 투명도를 조절하는 부분이라 CSS에서 작업 가능하지만

클레이모피즘은 가능할까?

정답은 가능하다!!

 

그림자 효과를 통해 빛과 그림자를 조절하고

전체적으로 border-radius로 둥글게 만들면 된다👍

 

 

자세한 내용은 아래 링크 참고

https://dev.to/preethi_dev/claymorphism-on-2022-css-only-4am

Claymorphism on 2022🎁 (CSS only)

 

 

 

추가적으로 클레이모피즘 관련 검색하다가 알게 된 사이트인데

심플하면서도 알록달록하고 너무 귀엽다..!

https://nft.tinyfac.es/

TinyFaces NFT - Uniquely generated 3D characters