CSS 선호 투명도

불투명한 UI를 선호하는 사용자를 위해 최적화하고 조정합니다.

Adam Argyle

Chrome 118부터 CSS 미디어 쿼리 5의 새로운 미디어 쿼리 기능 prefers-reduced-transparency를 사용할 수 있습니다. 불투명하지 않은 인터페이스는 두통을 유발하거나 다양한 유형의 시각 장애로 인해 시각적으로 어려움을 겪을 수 있습니다. 그렇기 때문에 Windows, macOS, iOS에는 UI의 투명도를 줄이거나 삭제할 수 있는 시스템 환경설정이 있습니다.

브라우저에 이 새로운 미디어 쿼리가 있으면 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 디자인을 배포하는 동시에 공유 대상 그룹이 내용을 읽고 메시지를 이해할 수 있도록 할 수 있습니다.

.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에서 항목이 삭제됩니다. 이 예는 사용자가 동의하는 경우 모션과 투명성이 추가되는 추가적 사고방식을 보여줍니다.

이 접근 방식을 사용하면 자체적으로 안정적인 건강한 기준 환경을 생각해 볼 수 있습니다. 그런 다음 사용자가 동의하면 환경에 추가합니다.

Devtools

Chrome DevTools는 렌더링 탭에서 투명도 감소 등의 설정을 에뮬레이션할 수 있습니다. 다음 동영상에서는 prefers-color-scheme 및 prefers-reduced-transparency 미디어 쿼리를 전환하여 무광 유리 카드의 밝은, 어두운, 투명한, 투명도가 감소된 변형을 표시하는 방법을 알아봅니다.