고정 헤더 영역
상세 컨텐츠
본문
UI 디자인도 매해 빠르게 변화하고 있습니다. 이러한 변화에 발맞춰 항상 최신 트렌드에 대한 이해와 학습이 필요합니다.
이 글에서는 뉴모피즘에 이어 최신 트렌드인 글래스모피즘 스타일에 대하여 간략히 요약정리하였습니다.
뉴모피즘의 정의부터 먼저 설명하자면,
뉴모피즘(Neumorphism)이란?
new(새로운)와 skeuomorphism(스큐어모피즘)의 합성어. 즉 새로운 스큐어모피즘을 뜻합니다.
스큐어모피즘은 대상을 원래 그대로의 모습으로 사실적으로 표현하는 디자인 기법을 말합니다.
디테일한 묘사를 하다보니 작업속도도 느리고 오히려 너무 섬세한 디자인이 사용자의 시선을 분산시키는 단점이 있었습니다.
이러한 스큐어모피즘의 단점을 보완하고자 디자인을 단순화시키고
플랫하고 미니멀한 그래픽에 그림자를 두어 보다 입체감있고 심플해진 것이 바로 뉴모피즘입니다.
뉴모피즘은 미니멀리즘을 계승하는 디자인이라 이해하는 편이 좋고
오랜시간 트렌드를 이끌어온 플랫 디자인에 경쾌함과 역동성을 부여한 차세대 디자인 트렌드입니다.
뉴모피즘 : 디자인상의 특징
이렇듯 뉴모피즘은 스큐어모피즘처럼 3차원의 입체감은 내지만
오로지 빛과 그림자로만 표현하여 오브젝트의 질감이 느껴지지 않는 것이 특징입니다.
마치 반질반질한 플라스틱 느낌과 흡사합니다.
(참고) 국가정보자원관리원 대시보드도 뉴모피즘 스타일로 작업하였습니다.
최근에는 뉴모피즘을 지나 글래스모피즘 스타일로 또다시 트렌드가 변화하고 있습니다.
글래스모피즘은 최근 1~2년사이 가장 주목받고 있는 디자인 스타일 중 하나로써 시각적 계층과 화면의 깊이를 표현하는데 훌륭하다는 평가를 받고 있습니다.
이제부터는 가장 최신 트렌드인 글래스모피즘 스타일에 대하여 정리해보도록 하겠습니다.
Glassmorphism (글래스모피즘) 이란 ?
반투명 재질을 사용하여 오브젝트 간의 시각적 계층을 표현하는 그래픽 스타일입니다.
뉴모피즘의 플라스틱 질감과는 또 다르게 '유리를 통해 들여다보는 것 같은 흐릿한 배경'을 특징으로 합니다.
이러한 반투명 재질 스타일은 마치 배경 위에 오브젝트가 떠있는 듯한 3차원적 효과를 표현할 수 있습니다.
<글래스모피즘 스타일 표현 시 유의사항>
1) 화려한 배경 사용
위 예시와 같이 지나치게 복잡한 요소가 많은 이미지를 배경으로 넣을 경우 글래스모피즘 효과가 제대로 발휘되지 않습니다. 배경색을 너무 단순하거나 무미건조하게 넣는 일도 마찬가지입니다.
배경 선택 시 선명하고 화려한 컬러를 사용하여 흐릿한 투명도의 글래스모피즘 스타일이 잘 보여지는지
그 색조차이의 여부를 항상 확인해야합니다.
2) 투명도 설정
Photoshop에서는 오브젝트의 "투명도(Opacity)"를 낮추는 것이 아니라 "채우기(Fill)"을 통해 조정합니다.
배경의 투명도는 변함없이 흐려진 상태로 표현할 수 있습니다.
"채우기(Fill) : 100 %"로 설정하면 흐린 효과를 낼 수 없기 때문에 주의가 필요합니다.
3) 테두리로 경계를 명확하게
1px의 테두리를 적용하면 글래스모피즘 오브젝트 형태를 좀 더 사실적으로 마무리 할 수 있습니다.
반투명한 오브젝트에 은은하면서도 가벼운 느낌의 테두리를 사용함으로써 가장자리를 잘 보이게 하고 배경 위에서의 형태를 더 뚜렷하게 만들 수 있습니다.
또한 반투명한 여러 개의 개체가 겹쳐있을 경우에 테두리를 적용하면 각 개체의 경계를 구분하는데 도움을 줄 수 있습니다.
<글래스모피즘의 접근성>
글래스모피즘 스타일의 사용성과 편의성 측면에서 살펴보자면, 우선 복잡한 배경 디자인이 없어야한다는 것이 가장 중요한 전제 조건입니다.
그러나 아무리 복잡한 배경디자인을 주의한다고 할 지라도, 모든 요소에 반투명 효과만을 남용한다면 일부 사용자들은 UI에 접근하기 어렵고 전반적인 디자인 또한 개성없고 지루해지게 됩니다.
버튼, 토글 등의 UI요소를 적당히 섞어 사용하면서 관련 오브젝트를 시각적으로 그룹화 할 수 있는 여백(간격)과 충분한 색대비가 있는지 확인해야 합니다.
그러므로 위 예시의 오른쪽 이미지처럼, 스타일을 제거하더라도 내용 구조를 볼 수 있게끔 구성되어야 합니다.
스큐어모피즘에서 뉴모피즘, 그리고 최근 핫한 트렌드로 떠오른 글래스모피즘까지.
트렌드는 매년 빠르게 변할 것이고 또 다른 디자인 스타일이 부상할 것입니다. 반투명한 오브젝트의 접근성 문제가 잠재적으로 남아있긴하지만 플랫디자인과 조화롭게 사용한다면 기능과 심미성을 동시에 만족시킬 수 있을 것이라 생각합니다. 글로어모피즘 스타일은 어떻게 적용하느냐에 따라 유용하게 활용 가능하기 때문에 다양한 양식과 조화롭게 혼합하여 앞으로의 대시보드 디자인에 활용해보고자 합니다.
[출처 링크]
https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
'Technology > Tech Insight' 카테고리의 다른 글
| [정보 접근성 컨퍼런스] 웹접근성 국가표준 개정 소개 (0) | 2021.12.23 |
|---|---|
| [보안] 통합보안관리 솔루션 (0) | 2021.12.23 |
| [보안] 웹 보안 취약점 공격 (0) | 2021.12.07 |
| [ML/DL] Orion을 통한 불안정한 시계열 이상 감지 (0) | 2021.12.07 |
| [XAI]XAI 해석 가능한 인공지능 (0) | 2021.12.07 |
