UI 속의 글래스모피즘
또 다른 새해가 가까워지고 있는 요즘, UI에 있어서 또 하나의 트렌드가 디자이너들 사이에서 점점 더 인기를 얻고 있습니다. 여러분은 알고 계시나요? 지난해 저는 의도치 않게 뉴모피즘(Neumorphism)에 대한 열풍을 일으켰습니다. 하지만 그때 예상했던 것처럼, 뉴모피즘이 디자인 계를 정말로 장악하는 일은 없었습니다. 물론 뉴모피즘 스타일로 만들어진 앱과 제품들이 있기는 했습니다. 가장 유명하게는 삼성이 일부 광고에서 이런 스타일을 많이 사용했고, MKBHD가 인트로 동영상에서도 사용했습니다. 하지만 어떤 제품군 전체라기보다는 일부의 요소로만 활용되었습니다. 즉, 이런 스타일은 아주 조금만 사용해도 효과가 있으며, 굳이 다른 장식이 없어도 이러한 배경 위에 있는 개체들은 그 구조를 유지할 수 있고 쉽게 읽을 수 있다는 저의 가설을 입증하는 것입니다.
MKBHD의 뉴모피즘 인트로
안녕, 글래스모피즘(Glassmorphism)
현재 우리 구역에 새로운 스타일이 나타나서 점점 인기를 얻어가고 있습니다. 뉴모피즘이 돌출된 플라스틱 표면을 모방하고 있었다면(그러면서도 하나의 레이어처럼 보입니다), 지금의 새로운 트렌드는 좀 더 입체적으로 솟아 오릅니다. 이 새로운 트렌드의 대표적인 특징은 다음과 같습니다.
- 투명도 (배경을 흐릿하게 처리해서 성에가 낀 듯한 유리(glass) 효과) - 개체가 공간에 떠 있는 것처럼 보이는 다중 레이어 접근 방식 - 선명한 컬러를 사용해서 흐릿한 투명도를 더욱 강조 - 반투명한 개체의 은은하면서도 가벼운 느낌의 테두리 입체적인 느낌을 강조한 속성과 그것을 투과해서 볼 수 있기 때문에, 사용자들은 인터페이스의 우선순위와 깊이감을 느낄 수 있습니다. 그들은 마치 가상의 유리조각처럼 그 위에 어떤 계층이 있는지를 쉽게 알 수 있습니다. 이처럼 유리(glass)같은 모습 때문에, 이것을 글래스모피즘(GLASSMORPHISM)이라고 부르는 것이 좋다고 생각합니다.
히스토리
배경을 흐릿하게 처리하는 것은 2013년에 iOS 7에서 처음으로 널리 도입되었습니다. 상당히 급격한 변화였지만, 초경량 폰트와 안 예쁜 아이콘을 둘러싼 논란이 워낙 거셌기 때문에, 실제로는 거의 논쟁거리조차 되지 않았습니다. 사람들은 그걸 좋아하는 것처럼 보였습니다.
알림 메시지를 끌어 내려서 확인하는 것은 금새 아주 재미있는 것으로 받아들여졌습니다. 아이콘들이 새로운 패널 아래쪽에서 하나씩 사라지면서 흐릿하게 바뀌었고, 특히 (알림 메시지 패널을) 느리게 움직이면 그걸 확실히 알 수 있었습니다.
트렌드의 강화
이후 애플은 모바일 OS에서 흐릿한 유리 효과를 크게 줄였지만, 최근에 맥(Mac) OS 빅서(Big Sur)에서 투명하게 흐릿한 효과를 다시 살렸습니다. 스케치(Sketch) 창을 띄웠을 때 배경 사진이 그 뒤에서 어떻게 비치는지를 보시면 알 수 있습니다. 이렇게 흐려지는 특성을 가장 뚜렷하게 확인할 수 있는 곳은 배경화면입니다.
물론 시스템 설정에서 이런 효과를 완전히 없앨 수도 있습니다.
마이크로소프트(Microsoft)의 플루언트 디자인 시스템(Fluent Design System)
마이크로소프트의 플루언트 디자인 시스템은 이러한 효과에 크게 영향을 주고 있습니다. 마이크로소프트는 이러한 특수효과를 아크릴(Acrylic)이라고 부르며, 자신들의 디자인 시스템에서 필수적인 부분으로 선보이고 있습니다. 아크릴은 반투명의 질감을 만드는 일종의 브러시(Brush)입니다. 앱의 표면에 이런 아크릴 효과를 적용해서 깊이감을 추가하고 시각적인 우선순위 계층을 설정할 수 있습니다. –마이크로소프트의 플루언트 디자인 시스템드리블(Dribbble)의 분석
물론 다른 모든 UI 트렌드와 마찬가지로, 이것도 드리블에서 과도하게 사용되는 경향이 있었습니다. 그러다 분위기가 조금씩 좋아졌고, 아주 멋진 사례들도 많이 있습니다. 물론 그런 사례들은 모두 프레젠테이션과 많은 관련이 있으며, 실제 스마트폰 화면에서는 배경화면 위로 겹쳐지는 걸 쉽게 찾아볼 수는 없습니다. 그 이유는 스마트폰의 앱들이 대부분 전체화면으로 작동하기 때문입니다.
가니 프라디타(Ghani Pradita)가 만든 스마트 캘린더 앱
위쪽의 예시를 보면 일부분에서는 텍스트가 뚜렷하게 읽히지는 않지만, 그래도 이러한 트렌드를 대표적으로 볼 수 있습니다. 배경화면은 아주 은근하지만, 여전히 보이기는 합니다. 그리고 각 개체들은 유리의 끝부분을 닮은 1포인트의 반투명 흰색 윤곽선을 갖고 있습니다.
뉴모피즘과 마찬가지로, 이 스타일은 바로 위의 예시에 있는 배경처럼, 단 하나의 구성요소 위에서 사용될 때 특히나 그 매력을 발산합니다. 물론 여기에서도 프레젠테이션이 커다란 역할을 하고 있지만, 데스크톱의 웹 인터페이스에서도 배경화면에서 비슷한 수준의 투명도를 설정할 수 있을 것입니다.
마샬(Marshall)이 만든 아이콘들
아이콘은 조금 논쟁이 있을 수 있지만, 마샬이 만든 위의 사례처럼 글래스모피즘 처리를 할 수 있습니다. 드리블을 통해서 살펴보면, 이들은 모두 현재 #glass(글래스)라는 해시태그를 달고 있지만, 저는 #Glassmorphism(글래스모피즘)이라는 해시태그가 더 적합하다고 생각합니다. 글래스(glass)라고 하면 우리가 무언가를 따라서 마시는 물잔을 연상시킬 수도 있기 때문에, 스타일에 대해서는 좀 더 쉽게 구별되는 이름이 있어야 한다고 생각합니다.이제 글래스모피즘 효과를 적용해 보자
이 효과 자체는 상당히 쉽지만, 몇 가지 고려해야 할 사항들이 있습니다. 첫째, 다른 카드형 레이아웃과 마찬가지로, 개체가 우리들의 눈에 가까워질수록 좀 더 많은 빛을 끌어 모은다는 것입니다. 즉, 좀 더 가까워질수록 더욱 투명해진다는 뜻입니다.
이러한 모든 효과의 기본은 음영, 투명도, 배경의 블러(흐릿함)를 조합하는 것부터 시작합니다. 이런 스타일은 투명한 레이어 하나만 사용할 수도 있지만, 여러 개의 레이어를 사용할 수도 있습니다. 그리고 가장 두드러지면서도 눈에 띄는 방식은, 조금은 복잡하고 다채로운 배경화면 위에서 최소한 두 개 이상의 반투명한 레이어를 사용하는 것입니다.투명도를 올바르게 설정하는 방법
그렇지만 중요한 것은, 개체 전부를 투명하게 처리하는 것이 아니라, 그것을 채우기(fill)만 투명하게 해야 한다는 것입니다. 대부분의 디자인 도구들은 채우기를 100%로 하고 개체의 투명도를 낮추면 배경을 흐리게 하는 것이 불가능한 경우가 많습니다.
위의 예시를 보면, 배경의 블러(blur) 값을 둘 다 똑같이 8로 설정했지만, 이미지는 서로 완전히 다르게 보입니다. 채우기 불투명도가 100%일 때는, 개체의 불투명도가 얼마인지는 전혀 중요하지 않습니다. 어떤 값을 설정하더라도 배경을 흐릿하게 만들 수 없기 때문입니다.올바른 배경화면을 얻는 방법
배경화면은 이런 효과가 (말 그대로) 빛을 발산하는 데 있어서 중요한 역할을 합니다. 배경화면은 지나치게 단순하거나 재미 없어도 안 되는데, 이런 경우에는 효과가 전혀 나타나지 않습니다. 그리고 지나치게 상세한 이미지도 안 됩니다.
그래서 애플이 맥 OS 빅서(Big Sur)의 기본 배경화면을 다채로운 색상의 이미지로 선택할 것일 수도 있습니다. 톤의 차이를 쉽게 구별할 수 있는 사람들은 흐릿하게 투명한 표면이 그 위에 놓여 있다는 것을 금세 알아차릴 수 있습니다.
배경화면을 선택할 때는, 유리의 효과가 쉽게 나타날 수 있도록 톤의 차이가 충분히 있는 것을 고르는 것이 좋습니다.마지막 세부사항
마지막으로 시도해 볼 수 있는 것은 개체의 내부에 1포인트의 투명한 테두리를 추가해볼 수 있습니다. 그러면 마치 유리의 끝부분처럼 보여서, 배경화면에서 개체를 좀 더 두드러져 보이게 만듭니다. 한 번 실험해 보세요! 흐릿한 배경을 가진 이런 스타일 요소들은 이미 몇 년 동안 존재해 왔지만, 요즘 들어서야 비로소 인기를 얻고 있기 때문에, 아직은 좀 더 탐구해 볼 수 있는 쿨(cool) 하면서도 창의적인 효과들이 많이 남아 있습니다.
왼쪽의 이미지는 반투명 테두리를 적용한 것이며, 오른쪽의 이미지는 테두리가 없는 것입니다.
판독성(Accessibility)
뉴모피즘과 마찬가지로 이 스타일도 판독성이 아주 좋은 것은 아닌데, 마치 구글의 매터리얼 디자인(Material Design)을 보는 것 같기도 합니다. 뉴모피즘의 일반적인 규칙들이 여기에서도 적용됩니다. 훌륭하고 기능적인 우선순위 구조를 갖추고 있으면, 화면 위의 구성요소들은 굳이 배경화면 없이도 충분히 기능을 할 수 있다는 것입니다. 그렇게 하면 민감한 차이를 구별하지 못하는 사람들도 UI를 충분히 이해할 수 있을 것입니다.
이건 나쁜 사례입니다. 뉴모피즘에서와 마찬가지로, 화면에서 보이는 거의 모든 요소들이 이 효과를 남용한 것입니다. 이런 식으로 디자인을 하면 일부 사용자들은 전체적인 UI를 거의 알아볼 수 없을 뿐만 아니라, 지루하고 참신해 보이지도 않습니다.
이런 식의 접근법은 투명 효과가 UX의 필수적인 부분이 아니라 순전히 장식으로 쓰일 때에만 생각해 볼 수 있습니다. 이런 방식을 버튼이나 토글에 사용해서는 안 됩니다. (이런 중요한 개체들은 언제나 대비가 좀 더 강해야 하기 때문입니다.) 하지만 카드형 배경에 사용하는 건 괜찮습니다.
카드 이미지의 내부에 충분한 대비를 설정하고 적절하게 간격을 유지한다면 우선순위가 생성되고, 관련된 개체들 사이에서는 시각적인 “그룹”이 만들어집니다.
이건 좀 더 좋은 사례입니다. 여기에서의 카드는 좀 더 체계가 잘 정리되어 있기 때문에, 유리 배경을 완전히 제거해도 콘텐츠가 여전히 그 역할을 다 할 수 있습니다. 그렇지만 이 사례에서도 색채의 대비는 좀 더 개선될 수 있을 것입니다.2021년의 글래스모피즘은 어떨 것인가?
애플이 자사의 빅서(Big Sur)에 이 스타일을 도입했기 때문에, 앞으로 몇 달 동안은 이에 대해서 열심히 연구와 모방이 이루어질 것이 확실합니다. 인터페이스 전체를 전부 장악하지는 않겠지만(그러지 않는 게 좋을 것입니다), 지금 현재보다는 인기가 더 많아지게 될 것입니다.
우리 인간은 어떤 트렌드에 대해서 쉽게 지루함을 느끼고, 몇 년이 지나면 그 무게중심이 반대편으로 완전히 이동하기도 합니다. 우리는 한 동안 초 미니멀리즘과 거의 아무 것도 없는 인터페이스를 이용해왔지만, 이제는 보다 다채롭고, 좀 더 입체적이며, 더욱 “얼굴 가까이로” 다가오기 시작했습니다. 디자이너로서 우리들은 제품을 만드는 데 있어서의 잠재력과 창의적인 방식을 탐구해야 합니다. 경우에 따라서 이러한 “유리 효과”를 부분적으로 사용한다면 실제로 사용자들에게 제품을 좀 더 멋지고 보다 매력적으로 보이게 만들 수 있습니다.
저는 개인적으로 별다른 장식이 없고 대비가 아주 높은 흑백의 인터페이스를 좋아하기는 하지만, 요즘에는 이러한 스타일을 조금씩 실험해보면서 어떤 가능성이 있는지를 살펴보고 있는 중입니다.
결국 디자인이라는 것은 재미가 있어야 하기 때문입니다. 그래야 우리가 새로운 길을 개척하고, 우리가 하는 일을 즐기고, 정말 특별한 것을 제공할 수 있습니다.
