Glassmorphism에 관하여
글래스모피즘의 장점과 설계 방식의 이해
최근 오랜만에 마이크로소프트에서 Windows10의 차기 버전인 Windows11을 발표하였습니다. 이번 디자인에 가장 큰 변화는 바로 Glassmorphsim 스타일의 적용이었는데 해당 디자인 스타일은 최근 1~2년 사이 가장 주목받고 있는 디자인 스타일 중 하나로써 시각적 계층과 화면의 깊이를 표현하는데 훌륭하다는 평가를 받고 있습니다.
특히 계층 표현에 장점이 있다 보니 모바일 운영체제보다는 큰 화면에서 여러 개의 시각적 계층을 표현해야 하는 데스크톱 운영체제에서 많이 사용되고 있습니다. 이러한 스타일은 사실 새로운 것이 아닌 Windows Vista 나 iOS7에서도 적용된 적이 있는 디자인 스타일이었지만 접근성 문제를 가지고 있었기 때문에 크게 주목받는 그래픽 스타일이 아녔습니다.
하지만 다양한 요소들의 추가와 체계적인 가이드를 통해서 점차 많은 디자인에 적용되어 다시금 많은 디자이너들의 관심을 받는 그래픽 스타일이 되었습니다. 저는 이번 글에서는 이러한 Glassmorphsim에 대한 장점과 이를 설계하는 방식에 대해서 소개해드리려 합니다.
Glassmorphism이란?
Glassmorphism은 반투명 재질을 사용하여 다른 요소 간의 시각적 계층을 표현하는 그래픽 스타일입니다. Fleunt 디자인 가이드에서는 Acrylic material으로 Human-Interface 가이드에서는 Translucency material로 표현되고 있지만 이름만 다를 뿐 모두 Glassmorphism스타일을 의미하고 있습니다.
반투명 재질 스타일은 위의 이미지같이 유리 재질의 도형이 마치 글자 위에 떠있는 듯한 시각적 효과를 주어 계층의 수직성을 확립하고 개체의 흐림 효과는 마치 공간에 떠있는 듯한 3차원적 효과를 표현할 수 있습니다. 특히 다양한 배경에서 많은 프로그램들이 사용되는 데스크톱에서 이러한 효과는 콘텐츠 간의 관계를 설정하는데 더욱 효과적입니다.
Glassmorphism이 다른 디자인 스타일들보다 더욱 주목받는 이유는 다른 그래픽 요소들은 Dribble이나 Behance 같은 디자인 커뮤니티에서 많은 주목을 받더라도 실제 프로젝트에 적용되기보다는 반짝 관심을 받다가 사라지는 경우가 매우 많았기 때문입니다.
그 예로는 Neumorphism이라는 빛과 그림자만을 활용하는 디자인 스타일이 뜨거운 관심을 받았던 적이 있었지만 오로지 빛과 그림자에 의존하기 때문에 질감의 표현에 한계가 있어 프로젝트에 메인 그래픽 요소로 사용되기보다는 이벤트성 페이지에 잠깐 사용되는 것이 대부분이었습니다.
설계 시 유의사항
Glassmorphism의 설계 방식은 디자인 가이드마다 설계 방식이 각각 다르며 생각보다 복잡하게 설계되어있습니다. 많은 사람들이 단순히 블러 처리된 도형에 그림자 효과만 주면 되는 것이 아닌가라고 생각할 수 있는데 디자인 리소스 파일을 살펴보면 실상은 전혀 그렇지 않습니다.
가장 체계적으로 설계되어있다고 생각하는 Fleunt 디자인 가이드의 Acrylic 설계 방식은 개체의 성격이나 화면 모드에 따라서 효과가 모두 다르고 사용 상황까지 상세하게 명시되어있었습니다. 이러한 디자인 가이드와 리소스를 토대로 Glassmorphism을 설계할 때 유의해야 할 점들을 설명드리겠습니다.
1) 화려한 배경 사용
Glassmorphism은 보통 하나의 개체 위에 반투명 재질의 요소를 추가하는 경우로 많이 사용되기 때문에 배경에 크게 의존하는 경우가 많습니다. 배경이 흐리거나 단색의 평범한 화면인 경우에는 반투명 재질의 그래픽 스타일의 효과를 제대로 느끼기 힘들 수 있습니다.
위의 이미지처럼 배경 스타일이 화려한 경우와 단색의 평범한 경우에 각각 적용된 화면을 비교해보면 차이는 명확합니다. 어둡고 대비가 낮은 배경은 반투명 재질의 효과가 손실되기 때문에 화려한 스타일의 배경에서 사용될 때만큼의 효과를 느낄 수 없습니다.
2) 높이에 따른 투명도 구분
반투명 재질을 통해서 계층을 표현해야 하기 때문에 투명도의 값이 다르게 적용되야합니다. 개체는 우리 눈에 가까워질수록 더 많은 빛을 끌어모으게 되는데 이 말은 배경에 더 가까운 요소는 흐림 효과가 높아야 하고 반대로 우리 눈에 가까운 요소는 흐림 효과가 낮아야 하다는 것을 의미합니다.
이는 Fluent 디자인 가이드의 Flyout Surface와 App Surface의 투명도 효과를 비교하면 알 수 있습니다. App Surface는 App의 Side Bar나 Top Bar 같은 배경 요소에 사용되는 표면 설정값이고 Flyout Surface는 앱 내의 옵션 메뉴에 사용되는 표면 설정값입니다.
위의 이미지는 App Surface가 폴더의 상단에 적용된 가이드인데 App Surface의 경우 주로 배경 바로 위에 가깝게 위치하게 되어 배경과 가까운 App Surface는 240의 높은 블러 효과가 적용된 것을 가이드에서 확인할 수 있습니다.
위의 이미지는 Flyout Surface가 Flyout Menu의 배경 요소로 사용된 가이드입니다. 주로 App Surface보다 상단의 레이어에 위치하므로 우리 눈에 더욱 가까운 요소입니다. 그렇기 때문에 App Surface보다 낮은 60의 블러 효과가 적용된 것을 확인할 수 있습니다.
3) 테두리로 명확한 경계 구분
반투명 재질 스타일을 배경 요소로 사용하다 보면 여러 개의 배경이 겹치는 경우가 생기게 됩니다. 이러한 경우 각 요소들의 구분이 애매모호해지는 경우가 생기기 때문에 밝거나 어두운 색의 테두리 요소를 추가하여서 명확한 경계를 구분해주는 것이 좋습니다.
Fleunt 디자인 가이드에서도 반투명 재질을 가지고 있는 두 가지의 요소가 위의 이미지처럼 겹쳐있을 때 테두리가 적용되어 있어서 콘텐츠 간의 경계 구분하는데 도움을 주고 있습니다. 또한 다크 모드에서는 라이트 모드와 다르게 그림자 효과로 콘텐츠 간의 구분을 주기 힘들기 때문에 테두리를 추가하여 경계를 구분하는 것이 효과적입니다.
4) 노이즈 효과 추가
보통 접근성의 문제를 해결하기 위해 흐림 효과를 높게 주어서 해결하는데 너무 높은 흐림 효과를 적용하게 되면 단색에 가까운 느낌을 받을 수 있습니다. 그렇기 때문에 너무 높은 흐림 효과보다는 최상단에 노이즈 텍스처를 추가하여서 접근성의 문제를 해결하는 게 더 좋은 효과라고 생각합니다.
Acrylic matrial의 기본구조를 보면 최하단에 블러 효과의 요소가 있고 그위에 밝기 모드의 요소, 개인설정에 의한 색조 요소가 있으며 그 위에 노이즈 효과가 적용된 요소가 배치되어있습니다. 이처럼 Fleunt 디자인 가이드에서는 노이즈 효과를 통해서 접근성 문제를 해결하고 있는 것을 확인할 수 있습니다.
체계적인 가이드
Glassmorphism 스타일 자체는 매우 매력적인 그래픽 스타일이지만 아무 곳에 규칙성 없이 사용하면 접근성과 통일성을 망치는 그래픽 스타일이 될 수 있습니다. 이러한 실수를 하지 않기 위해 Fleunt 디자인 가이드와 human-Interface 디자인 가이드를 충분히 학습하고 적용해보시기를 바랍니다.
예를 들어 Fluent 디자인 시스템에 따르면 Acrylic표면을 렌더링 하는 작업은 GPU 많이 사용하여 배터리 사용 시간이 단축될 수 있다고 명시되어 있기 때문에 사용자가 투명도 효과를 해제할 수 있는 설정을 만드는 체계적인 가이드는 Glassmorphism을 더욱 훌륭한 그래픽 요소로 만들 수 있습니다.
하단에 참고한 Fleunt 디자인 가이드와 Glassmorphism을 적용한 개인작업 Behance링크를 첨부해드릴 테니 기회가 되시면 꼼꼼히 살펴보시고 프로젝트에 적용해보시는 것을 추천드립니다.
https://docs.microsoft.com/ko-kr/windows/apps/design/style/acrylic
https://www.behance.net/gallery/128400647/Windows-12-Concept
