불투명한 UI를 선호하는 사용자에 맞게 최적화하고 조정합니다.
Chrome 118부터 CSS 미디어 쿼리 5의 새로운 미디어 쿼리 기능 prefers-reduced-transparency을 사용할 수 있습니다. 불투명하지 않은 인터페이스는 다양한 유형의 시각 장애로 인해 두통을 일으키거나 시각적 문제를 일으킬 수 있습니다. 이러한 이유로 UI에서 투명도를 줄이거나 삭제할 수 있는 Windows, macOS, iOS에는 시스템 환경설정이 있습니다.
브라우저에서 이 새로운 미디어 쿼리를 사용하면 CSS는 투명도 감소를 원하는 사용자를 위해 인터페이스를 조정할 수 있습니다.
.example {
--opacity: .5;
background: hsl(200 100% 50% / var(--opacity));
@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}
이전 코드 예에서 CSS 변수는 50%에 불투명도 값을 보유하며 HSL과 함께 이 값을 사용하여 반투명한 파란색 배경을 만듭니다. 중첩된 미디어 쿼리는 투명도 감소를 위해 사용자 선호도를 확인하고, true인 경우 불투명도 변수를 거의 불투명한 불투명도 값인 95%로 조정합니다.
이 미디어 쿼리는 다른 환경설정 미디어 쿼리와 잘 맞으므로 디자이너와 개발자가 사용자에 맞게 조정하면서 창의력을 발휘할 수 있습니다. 이러한 미디어 쿼리는 사용자의 위치를 자동으로 조정하는 자동차 안의 의자와 같다고 생각하면 됩니다. 사용자가 웹사이트를 방문하면 사용자가 요청하지 않아도 자동으로 조정됩니다. 정말 멋져요.
투명성 감소 사용 사례
다음 섹션에서는 의미 있는 방식으로 투명성을 줄일 수 있는 순간과 기회를 보여주는 데 중점을 둡니다.
이미지의 반투명 캡션
이미지나 동영상 썸네일을 반투명 캡션이나 요약으로 오버레이하는 것이 일반적입니다. 다음 예는 투명도 감소에 관한 환경설정을 처리하는 한 가지 방법을 보여줍니다. 오버레이가 완전히 삭제되며, 동일한 자막 콘텐츠가 오버레이되는 대신 이미지 아래에 표시됩니다.
투명한 모달, 알림 및 팝오버
UI 요소가 콘텐츠를 오버레이하는 또 다른 방법(보통 불투명도 요소가 있음을 의미함)은 모달, 알림, 팝오버를 사용하는 것입니다. 이러한 경우 불투명도를 높임으로써 사용자 환경설정을 존중하는 동시에 오버레이 뒤에서 들여다볼 수 있는 미묘한 색상도 허용할 수 있습니다.
.card {
background: hsl(none none 100% / 20%);
@media (prefers-reduced-transparency: reduce) {
background: hsl(none none 0% / 80%);
}
}
스마트 불투명 유리
널리 사용되는 또 다른 이미지 오버레이 스타일은 불투명 유리입니다. 다음 예에서 설명 뒤의 이미지는 제품 이미지를 미러링한 이미지입니다. 이렇게 하면 이미지가 잘리지 않고 최종 결과에서 밝은 환경설정이나 어두운 환경설정이 조금 더 생겨난다는 몇 가지 이점이 있습니다.
.adaptive-glass {
--glass-lightness: 100%;
--glass-alpha: 50%;
background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
backdrop-filter: blur(40px);
@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}
@media (prefers-reduced-transparency: reduce) {
--glass-alpha: 85%;
}
}
히어로 헤더
일반 홈페이지 요소에는 반복되는 동영상이나 애니메이션 이미지를 오버레이하는 굵은 메시지가 있습니다. 다음 예에는 다채로운 반투명 그라데이션 오버레이와 무한히 애니메이션되는 배경 이미지가 있습니다. 이렇게 하면 많은 사람의 시선을 끌 수 있지만 제어할 수 없는 투명도 및 모션과의 대비가 낮아서 많은 사람의 눈길을 끌 수도 있습니다.
이 문제는 두 가지 CSS 미디어 쿼리(prefers-reduced-motion 및 prefers-reduced-transparency)로 수정할 수 있습니다. 감소된 모션 미디어 쿼리 내에서는 사용자에게 움직임을 줄여도 되는 것으로 코드에 '선정 없음'이 있는 경우에만 무한 애니메이션을 적용할 수 있습니다.
또한 투명도를 줄인 미디어 쿼리를 사용하면 불투명도를 낮춰 오버레이 색상이 거의 100%가 될 수 있습니다. 이제 움직임을 방해하거나 문제가 있는 대비 없이 메시지를 쉽게 읽을 수 있습니다.
이 모든 것을 종합하면 광고 소재 UI 디자인을 배포하는 동시에 타겟층이 UI 디자인을 읽고 메시지를 받도록 할 수 있습니다.
.Hero img {
@media (prefers-reduced-motion: no-preference) {
animation: zoom 30s ease infinite;
}
}
.Hero .overlay {
background: hsl(none none 0% / 95%);
@media (prefers-reduced-transparency: no-preference) {
background: linear-gradient(
to top right in oklab,
oklch(40% 0.3 340 / 70%),
oklch(40% 0.4 200 / 70%)
);
}
}
사용자 선호도에 대한 가산적 관점과 가산적 관점
이전 예에서는 이러한 사용자 환경설정이 줄어든 환경설정을 확인하지 않고 대신 환경설정이 없는지 확인합니다.
@media (prefers-reduced-transparency: no-preference) {
…
}
개발자와 디자이너는 감산적 사고방식으로 이러한 선호도에 따라 사용자 환경을 '대체'하는 경우가 많습니다. 이는 미디어 쿼리에서 '축소'를 확인하는 것으로 나타나며, 이때 UI에서 무언가가 삭제됩니다. 이 예는 가산적 사고방식을 보여주며, 사용자가 괜찮다면 모션과 투명도를 추가합니다.
이 접근 방식은 그 자체로 견고한 건전한 기준 환경을 생각하는 데 도움이 됩니다. 그런 다음 사용자가 괜찮다고 생각하는 경우 환경을 추가합니다.
개발자 도구
Chrome DevTools는 렌더링 탭에서 투명도를 낮추기 위해 이 환경설정을 에뮬레이션할 수 있습니다. 다음 동영상에서는 불투명 유리 카드의 밝음, 어두움, 투명도, 감소된 투명도 변형을 표시하기 위해 Preferred-color-scheme 및 Preferreds-Reduced 투명도 미디어 쿼리를 전환하는 방법을 확인하세요.