뉴모피즘말고 클레이모피즘이라구요?
Design Text
새로운 Ui스타일 클레이모피즘
우리가 웹에서 깊이를 추구하는 방법
사용자 인터페이스의 Claymorphism(이미지: Diana Malewicz)2022년을 준비하면서, 작년의 뉴모피즘(Neumorphism)과 글래스모피즘(Glassmorphism)이후 새로운 스타일이 생겨나며, UI 세계에서도 점점 예술의 공간으로 발을 들이고 있다.
안녕하세요, 클레이모피즘입니다! �
클레이모피즘의 특성에 대해 알아보기 전에, 밑에 있는 뉴모피즘(Neumorphism) 코끼리를 처리해야 될 것 같습니다.
다시, 깊이를 재창조하다.
명백한 점부터 말씀드리면, Neumorphism은 실제로 성공하지 못했다.(개인적인 생각으로..) 가장 큰 문제는 접근성에서 시작되었다고 생각한다. 뉴모피즘이 세상에 알려졌을 때에는, 기존의 Ui 디자인에 큰 변화가 생기기 시작하며, Ui 디자인에 큰 변화가 생길 줄 알았으나, 모든 디자인 콘셉트를 뉴모피즘으로 디자인하였을 때, 오히려 기존의 Ui디자인보다 시각적으로 지루하다는 점이었다. 그리고 이를 완벽히 표현해줄 프론트엔드의 기능도 부족했었다고 생각한다.
실제로 뉴모피즘의 스타일은 좋든 나쁘든, 개발자 커뮤니티에는 일부 강력한 지지자들이 있었고, 또한 실제로 그 스타일을 사용하여 구축되기도 했었다.
대다수의 디자이너들도 대부분의 디자인에서 흔히 볼 수 있는 평면적인 디자인에 점점 지루해지는 시점이기도 했다.
빨간색 버튼을 예를 들어 보았을 때, 보기에는 좋아 보일 수 있지만, 이를 "올바른" 코드로 작성하는 것이 매우 어렵다.클레이모피즘? 뉴모피즘 2.0?
디스플레이의 초창기부터 우리는 디스플레이 안에서 깊이를 표현하는 여러 가지 디자인을 시도했다. 과거의 스큐어모피즘의 접근 방식은 우리가 시각적으로 잘 처리하는 데 도움이 되는 동시에 친근하고 유기적인 표현이다.
푹신하고 친근한, 3D
메타버스의 출현과 NFT의 3D에 대한 인기가 점점 상승되고 있는 추세이다.
최근 들어, 한 가지의 특정 스타일의 3D가 인기를 얻고 있습니다. 아니면, 플렛한 디자인들과 혼합되기도 한다. 난 이것을 "fluffy 3d"라고 부르며, 이러한 디자인 스타일의 시작은 스타트업 Pitch에서 귀여운 키 비주얼로 사용했을 때였다. 그 이후로 국내외 디자인 에이전시에서 많이 활용되기도 했었다.
NFT
이 스타일은 전 세계 사람들에게 큰 사랑을 받아 NFT 공간에서 완전히 다른 예술적 방향을 가져왔다. Amrit의 친근했던 페이스 디자인과 다른 많은 디자인 스타일들이 푹신한 3D의 형태로 변형되면서, 수많은 아티스트에게 수백만 달러의 수익을 창출했다.
현시점 가장 트렌디한 디자인
Fluffy 3d는 미니멀한 디자인 세계에 아주 잘 맞고, 플랫한 디자인 위에 비주얼로 표현하기에도 큰 무리는 없다(뉴모피즘(Neumorphism)의 단점을 해결해준다)
왼쪽부터 Amrit Pal Singh, Icons8, Sam Briskar의 Avatarz팽창형 UI
단순히 생각했을 때, 뉴모피즘의 모양을 부풀린 디자인이다. 약간 오목하지만 평평한 면 대신에 3D 형식과 같은 구조로 되어 있다. 특징적으로 매우 둥글고 매우 3차원적이며 부드럽다.
2015년 때 대규모 UI 연구 중 하나로 우리는 실제로 "푹신한 3D" 버튼을 다른 옵션과 비교하여 테스트했었다.
3D 이미지와 함께 이런 디자인적 표현은 친근함과 어린아이 같은 인터페이스를 만들어준다. 이에 대응하기 위해서는 최소한의 텍스트를 사용하는 것이 좋고, 강한 악센트 색상은 대비가 어울린다.
아직 CSS에서 달성할 수는 없지만 일부 개발자는 이미 수정 가능한 SVG에 대해 작업하고 있으므로 코딩할 수 있는 것은 시간문제일 것이다.
클레이모피즘의 효과
뉴모피즘(Neumorphism)과 유사하게 클레이모피즘(Claymorphism)은 내부 및 외부 그림자의 조합이다. 차이점이 있다면 배경에 대한 깊이 값은 하나의 더 큰 그림자만 사용한다. 그리고 X축을 따라 약간 이동하면서 기존 UI 그림자 규칙을 깨뜨린다.
클레이모피즘은 Y축 그림자를 활용하고 X축의 이동에 따라 조금 더 재미를 더 할 수도 있다.
전체적으로 점토와 같은 3D 모양으로 두 개의 내부 그림자를 사용한다. 왼쪽 상단 내부 그림자는 약간 더 밝아야 하고 오른쪽 하단 내부 그림자는 약간 더 어두워야 한다.
모양.
직사각형 또는 정사각형의 형태에서 크기에 대해 50% 이상으로 모서리를 둥글게 만드는 것이다.
클레이모피즘 스타일을 만들기 위한 절차다크 모드에서는 어때??
클레이모피즘(Claymorphism)은 다크 모드에서도 작동 가능하다. 하지만 뉴모 피즘과 마찬가지로 효과가 작동하려면 배경에 대해 내부 그림자를 볼 수 있어야 한다.
글래스모피즘과의 궁합
글래스모피즘(Glassmorphism)이 현재 UI 디자인의 초석 중 하나가 됨에 따라 클레이모피즘(Claymorphism)과의 궁합에도 괜찮은 결과를 얻을 수 있다. 푹신한 유리 모양의 창에 섬세한 내부 그림자를 추가하면 흥미롭고 신선해 보일 수 있는 효과를 가져온다.
VR/AR
메타버스가 점점 유행세를 타고 있음에 따라 VR과 AR 모두 활용 가능하다고 본다.
클레이모피즘(Claymorphism)의 이점은 유형적이라는 것입니다. 퀄리티가 낮은 3D 효과를 사용하면 UX적인 부분에서 버튼과 같은 중요한 컴포넌트를 확실히 인지할 수 있다.
AR로 시뮬레이션한 클레이모피즘결론
클레이모피즘(Claymorphism)의 그래픽스타일은 도구와 사용자 간의 사고방식 변화의 관심이 높아짐에 따라 디자인 커뮤니티에 종종 거론되고 있다. 다소 우울한 현재 시대에서 우리는 모든 것이 푹신하고 부풀려진 어린 시절의 순간을 기억하고 싶을 때가 있을 것이다.
미니멀리즘을 활용한 플랫한 디자인을 아직도 많이 사용하고 있는 것은 사실이다. 하지만 몇몇의 사용자들은 인터페이스가 친숙하기를 원하는지도 할 것 같은 생각이 든다.
미래에는 기획에 따른 사용자들에 대한 특성을 파악해서 한쪽으로만 치우쳐지지 않고, 플랫한 디자인, 뉴모피즘, 클레이모피즘 등 다양한 Ui스타일을 사용하여 디자인한다면 더 많은 표현을 사용한 다채로운 웹의 세계관을 볼 수 있을 것 같다.
* 위 글은 UX Collective에서 업로드한 아티클을 번역한 내용입니다.
원문출처:https://uxdesign.cc/claymorphism-in-user-interfaces-1757fabaa377
