CSS 선호 투명도

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

Adam Argyle
Adam Argyle
X GitHub

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

브라우저 지원

  • Chrome: 118.
  • Edge: 118.
  • Firefox: 깃발 뒤쪽에 있습니다.
  • Safari: 지원되지 않음

소스

브라우저에 이 새로운 미디어 쿼리가 있으면 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 미디어 쿼리를 전환하여 무광 유리 카드의 밝은, 어두운, 투명한, 투명도가 감소된 변형을 표시하는 방법을 알아봅니다.

https://codepen.io/web-dot-dev/pen/dyaojxr