[UI자료] 글래스모피즘의 접근성을 높이는 방법, Glassmorphism
이 글은 Aimee Liang의 "How to make Glassmorphism more accessible"을 번역한 글입니다.
원문 보기: https://bootcamp.uxdesign.cc/how-to-make-glassmorphism-more-accessible-9121d816004c
2021년의 디자인 트렌드, 글래스모피즘은 인클루시브한가? 접근성이 높은가?
- 인클루시브(inclusive)란 배제하는 사용자 없이 모두가 두루 잘 쓸 수 있는 것을 의미합니다.
- 접근성 역시 모든 사용자가 잘 쓸 수 있는 특성을 의미합니다.
새 프로젝트를 위해 CSS 기술을 확장하고 HTML과 CSS를 사용하여 웹앱의 랜딩페이지를 만들기로 결정했습니다. 저는 글래스모피즘을 활용하고 싶었습니다. 글래스모피즘(Glassmorphism)은 링크드인과 유튜브를 통해 처음 알게 되었습니다. A quick Google Search는 글래스모피즘을 2021 UI/UX 트렌드로 지정했습니다. 글래스모피즘은 매력이 있습니다. 매끄럽고 미니멀합니다. 실제로 UX Collective 는 2020년 11월 말에 이에 대해 처음 발표했습니다.
좌: Sunweb의 glassmorphism 디자인: https://dribbble.com/shots/14756913-Glassmorphism-Design-Concept
우: 사라 살레히의 디자인: https://dribbble.com/shots/14767777-weFly
하지만 이 글에서는 글래스모피즘이 접근 가능한지에 초점을 맞추고 싶습니다. Marty Seinamats\는 자신의 블로그에서 접근성을 매우 명확하게 정의합니다. 11y 는 "미국 인구 4명 중 1명은 장애가 있다"고 말합니다.
글래스모피즘의 매력은 앞서 언급했듯이 얼마나 매끄럽고 미니멀해 보이는가에 있습니다. Albert Walicki의 블로그는 글래스모피즘의 아래와 같은 기본 사항을 강조합니다.
"서리 낀 유리"
"생생한 또는 파스텔 색상"
"가벼운 테두리"
우리는 이미 일상 생활에 유리 형태가 통합되어 있는 것을 보았습니다. 특히 MacOS Big Sur로 업그레이드한 경우가 그렇습니다.
개발자와 엔지니어로서 우리는 가능한 한 포괄적인 디자인을 유지해야 합니다. 다음은 글래스모피즘과 관련된 몇 가지 문제와 더 쉽게 접근할 수 있는 방법에 대한 아이디어입니다.
더 선명한 테두리 대비
글래스모피즘의 주요 특징 중 하나는 얇고 가벼운 테두리와 파스텔 색상입니다. 한 가지 가능한 솔루션은 내부 테두리, 더 두껍고 구별하기 쉬운 테두리를 통해 대비를 더 선명하게 하거나 텍스트, 아이콘 또는 이미지와 더 나은 대비를 허용하는 더 어두운 배경을 선택하는 것입니다.
명확한 계층 감각
우리는 사용자가 인터랙션할 것에 대해 의도적이어야 합니다. Arun Karunanith는 클라이언트 측에서 어떤 요소가 서로의 부모인지 자식 인지를 명확히 하는 데 대해 훌륭한 지적을 합니다. 클라이언트 측의 모든 변경 사항에는 약간의 학습 곡선이 있습니다.
더 큰 글꼴
또 다른 고려 사항은 글꼴을 구별할 수 있도록 만드는 것입니다. 이것은 더 큰 글꼴을 의미할 수 있습니다. 또한 유리 배경과 웹 앱의 배경과 대조되는 글꼴 색상을 선택하는 것을 의미할 수도 있습니다.
저는 UX/UI 전문가는 아니지만 업계에서 이 트렌드를 어떻게 받아들이고 모든 사람이 훌륭한 웹 및 모바일 경험을 가질 수 있도록 변화시킬 수 있을지 궁금합니다. 동시에 이러한 솔루션이 유리 형태를 만드는 고유한 기능을 유지할 수 있는지 여부도 흥미로울 것입니다.
앱에 액세스할 수 있는지 확인하는 방법에 대한 자세한 내용은 a11y의 공식 체크리스트를 확인하세요 .