CSS 및 JavaScript를 사용하여 사용자 모션 및 테마 기본 설정에 적응

작사: Oscar Jite-Orimiono✏️

인터넷은 웹사이트를 매력적이고 지나치게 자극적으로 만들 수 있는 색상, 애니메이션, 그래픽 효과로 가득합니다. 프런트엔드 애호가이자 전문가로서 우리는 보다 차분한 경험을 선호하는 사람들을 위해 생생한 시각적 요소와 접근성이 뛰어난 사용자 중심 옵션의 균형을 맞춰야 합니다.

이 기사에서는 아래 항목을 살펴보고 더 적은 비용으로 더 많은 작업을 수행해 보겠습니다.

• 애니메이션과 테마를 관리하기 위해 선호-감소-모션 및 선호-색상 구성과 같은 미디어 쿼리를 사용하는 방법을 알아보세요
• @media 규칙의 올바른 구문을 따라 사용자 기본 설정을 적용하세요
• 연결이 제한된 사용자의 데이터 사용을 최소화하는 선호 감소 데이터와 같은 옵션 보기

모션 환경 설정

많은 사용자에게 애니메이션은 웹사이트에서의 경험을 향상시킬 수 있지만 다른 사용자에게 방해가 될 수도 있습니다. 움직임이 너무 많으면 불편하거나 주의가 산만해질 수 있으며 성능 문제도 발생할 수 있습니다.

prefers-reduced-motion 미디어 쿼리는 사용자가 웹사이트 애니메이션을 제한하기 위해 컴퓨터에서 설정을 활성화했는지 확인합니다. 모션 감소를 선호하는 사용자를 위해 애니메이션을 수정하거나 완전히 비활성화할 수 있습니다.

시작하려면 애니메이션이 포함된 웹페이지를 만들어 보겠습니다. 애니메이션 줄무늬 배경은 어떻습니까?

페이지의 HTML은 다음과 같습니다.

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

애니메이션 줄무늬를 사용한 모습은 다음과 같습니다.

기본 설정 없음 구문은 기본 설정이 없는 사용자를 위한 반면, 축소는 기본 설정이 있는 사용자를 위한 것입니다. 모션 감소를 선호하는 사용자를 위해 애니메이션을 완전히 비활성화하거나 수정할 수 있습니다. 선호 감소 모션 미디어 쿼리를 사용하여 움직이는 배경을 비활성화하는 방법은 다음과 같습니다.

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

참고: Windows 11을 실행하는 장치에서는 설정으로 이동하여 접근성을 선택한 다음 시각 효과를 선택하고 끄면 애니메이션을 비활성화할 수 있습니다. 애니메이션 효과. 이 프로세스는 거의 모든 유형의 장치/운영 체제에서 유사합니다.

CodePen은 다음과 같습니다.

애니메이션 유형을 비활성화하는 대신 변경하도록 선택할 수 있습니다. 예를 들어, 모션 감소를 선호하는 사용자를 위해 슬라이드인 변환 애니메이션 대신 페이드인 애니메이션을 사용합니다.

페이지 한쪽에서 요소가 슬라이딩되는 스크롤 애니메이션을 사용하는 경우 페이드인과 같은 더 간단한 효과로 전환할 수 있습니다.

간단한 스크롤 애니메이션을 위한 CSS는 다음과 같습니다.

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

이 예에서는 상자 요소가 웹페이지 오른쪽에서 페이드 인되어 왼쪽으로 이동합니다. 이 움직임은 변환 속성에 의해 제어되므로 움직임 감소를 선호하는 사용자를 위해 간단히 제거할 수 있습니다.

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

기본 설정이 없는 사용자는 스크롤할 때 다음을 볼 수 있습니다.

Reduce를 사용하는 사용자에게는 다음과 같은 내용이 표시됩니다.

prefers-reduced-motion 미디어 쿼리를 사용하면 사용자가 원하는 것에 따라 복잡한 애니메이션의 톤을 조절하거나 속도를 늦추거나 완전히 비활성화할 수 있습니다.

기기에서 애니메이션을 비활성화하여 차이점을 확인할 수 있는 CodePen은 다음과 같습니다.

멀미, 현기증 등 전정 장애가 있는 사용자는 애니메이션을 볼 때 방향 감각을 잃거나 어지러울 수 있습니다. 간단한 UI를 선호하는 사용자에게는 애니메이션이 방해가 될 수도 있습니다.

모션 감소 옵션을 사용하면 모션에 민감한 사용자가 웹사이트를 훨씬 더 편안하게 사용할 수 있습니다.

테마 환경설정

이제는 웹사이트와 애플리케이션에 밝은 테마에서 어두운 테마로 전환할 수 있는 옵션이 있는 것이 일반적인 관행입니다. 일부 웹사이트는 시스템 기본 설정에 따라 추가 옵션을 제공합니다.

prefers-color-scheme 미디어 쿼리는 사용자가 어두운 테마를 선호하는지 밝은 테마를 선호하는지 감지합니다. 사용자는 장치 설정에 따라 기본 테마를 얻을 수 있습니다.

밝은 색상의 웹페이지는 다음과 같습니다.

기본 테마가 밝은 경우 사용자에게 표시되는 화면입니다. 그런 다음 Prefers-color-scheme을 사용하여 어두운 테마를 만들 수 있습니다.

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

밝은 모드와 어두운 모드 모두에 대해 이와 같은 CSS 규칙을 작성하는 것은 작업이 너무 많을 수 있으며, 특히 여러 속성이 동일한 값을 공유하는 경우 더욱 그렇습니다. 변수를 사용하여 색 구성표를 계획하면 반복을 방지하는 데 도움이 됩니다.

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

다음은 이전과 동일하지만 어두운 모드가 활성화된 페이지의 스크린샷입니다.

상호작용할 수 있는 CodePen은 다음과 같습니다.

선호 색상 구성표는 색상에만 국한되지 않습니다. 이를 사용하여 이미지를 교체할 수 있습니다:

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

다음은 라이트 모드의 웹페이지 스크린샷입니다.

Unsplash에서 Plufow Le Studio가 촬영한 배경 사진.

어두운 모드의 페이지는 다음과 같습니다.

[캡션>
Unsplash에서 Plufow Le Studio가 촬영한 배경 사진.

모범 사례

가독성을 높이려면 사용하기 전에 색상 대비를 테스트하세요. 사용할 색상을 선택하는 데 도움이 되는 여러 가지 도구가 있습니다.

테마를 전환할 때 배경과 텍스트뿐 아니라 업데이트가 필요한 모든 요소를 ​​고려하세요. 이것이 CSS 변수를 사용하여 테마를 저장하는 것이 좋은 생각인 이유입니다. 버튼, 그림자, 테두리, 링크 등에 대한 대체 항목을 제공해야 할 수도 있습니다.

구현

사용자 기본 설정을 구현하는 가장 간단한 방법은 @media 규칙을 사용하는 것입니다. 모션이나 테마에 대한 기본 설정을 지정해야 합니다. 그렇지 않으면 미디어 쿼리 내부의 CSS 규칙이 다른 규칙이나 장치 설정을 재정의합니다.

즉, 모션 기본 설정의 경우 기본 설정 감소 또는 없음을 지정해야 하며 테마의 경우 밝음 또는 어두움을 지정해야 합니다.

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

이는 코드를 테스트할 때 유용할 수 있지만 구현하기 전에 정확한 기본 설정을 지정해야 합니다.

JavaScript로 사용자 기본 설정 구현

사용자 기본 설정은 JavaScript로 구현할 수도 있습니다. 사용자 기본 설정에 따라 특정 요소에 새 클래스를 추가할 수 있습니다.

애니메이션 줄무늬의 첫 번째 예를 사용하여 JavaScript로 사용자 기본 설정을 확인하는 방법은 다음과 같습니다.

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

CSS는 다음과 같습니다.

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

의사 요소는 DOM의 일부가 아니며 JavaScript에서 직접 선택할 수 없으므로 이 접근 방식을 사용합니다.

데이터 속성으로 사용자 기본 설정 구현

사용자 정의 HTML 데이터 속성과 JavaScript를 사용하면 사용자 기본 설정을 구현할 수 있습니다. 데이터 속성을 사용하면 문서 구조에 영향을 주지 않고 HTML 요소에 정보를 저장할 수 있습니다. 데이터 접두사를 사용하며 JavaScript를 사용하여 쉽게 조작할 수 있습니다.

@media (prefers-color-scheme: dark) {
    #main {
    background-image: repeating-linear-gradient(
      45deg,
      #553c9a,
    #553c9a 50px,
    #3a1e4f 50px,
    #3a1e4f 100px,
    #301934 100px,
    #301934 150px
    );
  }
  nav{
    background: rgba(0, 0, 0, 0.5);
  }
  .logo a,
  nav ul li a{
    color: #b393d3;
  }
  .content {
    background: rgba(0, 0, 0, 0.5);
  }
  .content h1 {
    color: #b393d3;
  }
  .content p{
    color: #b393d3;
  }
}

CSS는 다음과 같습니다.

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

데이터 사용량 감소

아직 실험적인 반면, Presored-Data는 사용자가 데이터 저장을 선호하는지 웹사이트에서 감지할 수 있도록 제안된 미디어 쿼리입니다.

prefers-reduced-motion 미디어 쿼리와 동일한 구문을 사용합니다. 이는 가벼운 콘텐츠를 선호하는 사용자를 위해 감소하고 데이터 선호도가 없는 사용자를 위해 선호도가 없습니다.

고해상도 이미지 축소, 대체 글꼴 로드, 자동 재생 비디오 비활성화, 중요하지 않은 콘텐츠 지연 로딩 등의 잠재적인 응용 분야가 있습니다. 이 미디어 쿼리는 제한적이거나 비용이 많이 드는 데이터 요금제를 사용하거나 인터넷 연결이 불안정한 사용자의 로드 시간을 개선하는 데 도움이 될 수 있습니다.

마지막 말

모든 사용자 경험을 향상하려면 사용자 선호도를 존중하는 것이 중요합니다. 이 튜토리얼에서는 사용자의 모션 및 테마 설정을 감지하기 위해 Prefers-Reduced-Motion 및 Prefers-Color-Scheme 미디어 쿼리를 사용하는 방법을 배웠습니다. 대비 및 투명도 기본 설정에 대한 @media 규칙도 있습니다.

웹 개발자로서 귀하는 모든 유형의 사용자를 위해 모든 웹사이트를 편안하고 액세스 가능하며 효율적으로 만들 수 있는 능력을 갖춘 설계자입니다.

---

프런트엔드가 사용자의 CPU를 많이 사용하고 있나요?

웹 프런트엔드가 점점 더 복잡해짐에 따라 리소스를 많이 사용하는 기능으로 인해 브라우저에서 점점 더 많은 것을 요구하게 됩니다. 프로덕션에 있는 모든 사용자의 클라이언트측 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있다면 LogRocket을 사용해 보세요.

LogRocket은 웹 앱, 모바일 앱 또는 웹사이트에서 일어나는 모든 일을 기록하는 웹 및 모바일 앱용 DVR과 같습니다. 문제가 발생한 이유를 추측하는 대신 주요 프런트엔드 성능 지표를 집계 및 보고하고, 애플리케이션 상태와 함께 사용자 세션을 재생하고, 네트워크 요청을 기록하고, 모든 오류를 자동으로 표시할 수 있습니다.

웹 및 모바일 앱 디버깅 방법을 현대화하고 무료로 모니터링을 시작해 보세요.