UI 속 글래스모피즘
아티클 번역하기
뉴모피즘에 이어 2021년에는 글래스모피즘이 흥하게 될까요? 글래스모피즘이란 과연 무엇일까요?
이 글은 원작자의 허락을 받고 번역한 글입니다.
출처: https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
지난해에 뉴모피즘이 큰 인기를 끌기 시작했다. 하지만 뉴모피즘은 디자인 씬에선 그렇게 많이 사용되지는 않고 있다. 뉴모피즘은 잠재적인 '접근성 문제'를 가지고 있기 때문이다. 물론 몇몇 앱이나 제품들은 이 스타일을 사용하고 있지만, 가장 주목 받은 것은 삼성의 광고와 MKBHD의 인트로 동영상에 사용한 것이었다. 하지만 어떤 제품군 전체보다는 일부 요소로만 사용되었다. 즉, 이런 스타일은 조금만 사용해도 효과가 있고, 이런 배경에 있는 물체들은 장식 없이도 구조와 가독성을 유지할 수 있다는 나의 가설을 입증하는 것이다.
안녕, 글래스모피즘(Glassmorphism)
점점 인기가 많아지고 있는 새로운 스타일이 있다. 뉴모피즘이 돌출된 것들만 모방하고 있는 동안, 하나의 레이어로 보이는 플라스틱 표면: 이 새로운 트렌드는 수직으로 뻗어가고 있었다.
결정적 특성은 다음과 같다.
투명도(배경 흐림을 사용한 반투명 유리 효과)
물체가 떠 있는 다층 접근 방식
흐릿한 투명도를 강조하는 생생한 색상
반투명 물체의 미묘하고 밝은 테두리
이 수직적인 성과는 사용자가 인터페이스의 계층과 뎁스를 설정할 수 있다는 것을 의미한다. 그들은 단순하게 가상 유리 조각처럼 어떤 레이어가 위에 있는지 간단하게 볼 수 있다. 유리처럼 보이기 때문에 이것을 글래스모피즘이라고 하는 것이 적절하다고 생각한다.
역사
배경 블러는 2013년 iOS 7에 처음으로 널리 도입되었다. 꽤 급진적인 변화였지만, 초경량 글꼴과 못생긴 아이콘 때문에 논란이 있었기 때문에 논쟁의 여지가 없이 변경된 사항(글꼴, 아이콘) 중 하나였다.
새 패널 아래에서 아이콘이 어떻게 희미해지고 흐려지는지 명확하게 볼 수 있기 때문에 알림을 빠르게 내리는 것이 재미있는 일이 되었다.
트렌드 강화
이후 애플은 모바일 OS에서 흐릿한 유리 효과를 크게 줄였지만, 최근 Mac OS Big Sur로 투명 흐림 효과를 되찾았다.
마이트로소프트의 Fluent 디자인 시스템은 이 효과에 영향을 미친다. 그들은 이 특정 요소를 아크릴이라고 부르고 디자인 시스템의 필수적인 부분이라고 보여준다.
아크릴은 반투명 질감을 만드는 브러시 유형입니다. 앱 표면에 아크릴을 적용하여 깊이를 더하고 시각적 계층 구조를 설정할 수 있습니다. — Microsoft Fluent 디자인 시스템
드리블 분석
글래스모피즘은 모든 UI 트렌드와 마찬가지로 드리블에서 종종 남용된다. 물론 실제 핸드폰 화면에서는 오버레이 배경을 쉽게 볼 수 없기 때문에 프리젠테이션 용으로 디자인된 것이긴 하다.
위에 있는 예는 일부 가독성이 어렵지만 이러한 추세를 분명하게 표현하고 있다. 배경은 매우 미묘하지만 눈에 띄게 유리 가장자리를 표현하는 1점 반투명 흰색 윤곽선이 있다.
뉴모피즘과 마찬가지로 이 스타일은 위의 예에서 배경처럼 단 하나의 요소에만 사용될 때 특히 밝게 빛난다.
아이콘은 다소 논란의 여지가 있지만 위의 예제와 같이 유리 형태를 사용한다. Dribbble을 살펴보면 현재 모두 #glass 해시 태그 아래에 있는데, #Glassmorphism이 더 적합하다. 유리잔은 단순하게 마시는 유리잔일 수 있으므로 이 스타일은 쉽게 식별할 수있는 이름을 가질 가치가 있다.
이 효과를 사용하려면?
효과 자체는 매우 쉽지만 몇 가지 고려해야 할 사항이 있다. 카드 기반 레이아웃과 마찬가지로 첫 번째는 개체가 우리에게 가까울수록 더 많은 빛을 끌어들여야 한다. 조금 더 투명해져야 한다는 것이다.
이 전체 효과의 기본은 그림자, 투명도, 배경 흐림의 조합에서 비롯된다. 이 스타일은 하나 또는 여러 개의 투명 레이어만 사용할 수 있지만, 다소 화려한 배경에 최소 2단계의 반투명도가 나타날 때 가장 눈에 잘 띈다.
올바른 투명도를 설정하는 방법
전체 모양을 투명하게 만드는 것이 아니라 채우기만 한다는 점을 기억하는 것이 중요하다. 채우기가 100%이고 개체 투명도가 낮을 때, 대부분의 디자인 도구는 배경 흐림을 비활성화 한다.
위의 예에서 정확히 동일한 배경 흐림값 8을 가지고 있지만 이미지는 완전 다르게 보인다. 채우기 불투명도가 100%면 오브젝트 투명도에 상관없이 안 흐려진다.
올바른 배경을 선택하는 방법
배경은 이 효과를 빛나게 만드는 데 필수적이다. 너무 단순하면 지루하고 효과가 잘 보이지 않는다. 너무 상세한 것도 안된다. 이것이 애플이 Mac OS Big Sur의 기본 배경 화면으로 화려한 배경을 선택한 이유일 수도 있다. 색조차이를 쉽게 식별할 수 있는 것은 투명 표면이 위에 있어도 쉽게 알 수 있다.
최종 세부사항
마지막으로 시도할 수 있는 것은 모양에 투명도가 있는 1px 내부 테두리를 추가하는 것이다. 유리 가장자리를 잘 보이게 하고 배경에서 모양을 더 돋보이게 만들 수 있다. 이 스타일은 수년동안 사용되어 왔지만 이제는 인기가 높아지고 있으므로 창의적인 효과가 여전히 많다.
접근성
뉴모피즘과 마찬가지로, 이 스타일은 기본 머터리얼 디자인처럼 접근하기가 어렵다. 기능적인 계층 구조가 좋으면 화면상의 요소가 배경 없이 작동 할 수 있어야한다. 그래야 시력 문제가 있는 사람도 UI를 이해할 수 있다.
이는 화면 요소에 효과를 남용하는 나쁜 예이다. 이렇게 하면 일부 사용자는 전체 UI에 거의 액세스 할 수 없을 뿐 아니라 지루하고 독창적이지 않다.투명도 효과는 순전히 장식적이고 경험의 필수적인 부분이 아닌 경우에만 발생한다. 버튼이나 토글에 사용하는 것은 피해야한다.(이렇게 되면 중요한 개체에는 더 많은 대비를 가져야한다.) 카드 배경에서는 잘 사용할 수 있다. 카드 내부에 계층구조를 잘 정의하고 모든 관련 개체를 시각적으로 그룹화하기 충분한 대비와 적절한 간격이 있는지 확인하라.
이 카드는 잘 정의된 구조를 가지고 있으므로 유리 배경이 완전 제거된 경우에도 내용이 잘 작동한다.
Glassmorphism 2021?
이 스타일을 Big Sur에 도입한 애플은 앞으로 몇달 안에 이를 모방할 수 있다. 모든 인터페이스를 차지하지는 않겠지만 지금보다는 조금 더 있기 있어질 것이다.
인간들은 트렌드에 쉽게 지루해하고 몇 년마다 반대로 흔들린다. 우리는 한동안 거의 평면에 가까운 초소형 인터페이스를 사용했지만 화려하고 수직적인 인터페이스가 더 많이 나타나기 시작했다.
디자이너로서 우리는제품을 만드는 모든 잠재적이고 창의적인 방법을 탐구해야한다. 어떤 경우에는 '유리'를 제한적으로 사용하면 제품이 사용자에게 더 좋고 매력적으로 보이게 된다.
디자인은 결국 재미있어야 한다. 그것이 우리가 새로운 길을 탐색하고 우리가 하는 일을 즐기고 진정으로 특별한 것을 전달할 수 있는 유일한 방법이기 때문이다!
