사용자 환경설정 미디어 기능 클라이언트 힌트 헤더

클라이언트 힌트 헤더 세트를 사용하면 사이트에서 요청 시 선택적으로 사용자의 미디어 환경설정을 가져올 수 있으므로 서버는 성능상의 이유로 올바른 CSS를 인라인할 수 있습니다.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

CSS 미디어 쿼리, 특히 prefers-color-scheme 또는 prefers-reduced-motion와 같은 사용자 환경설정 미디어 기능은 페이지에서 전송해야 하는 CSS의 양과 페이지가 로드될 때 사용자에게 제공되는 환경에 큰 영향을 미칠 수 있습니다.

prefers-color-scheme에 초점을 맞추되, 다른 사용자 환경설정 미디어 기능에도 동일한 추론이 적용된다는 점을 강조하세요. 중요한 렌더링 경로에서 일치하지 않는 특정 색 구성표의 CSS를 로드하지 말고 대신 현재 관련 있는 CSS만 처음에 로드하는 것이 좋습니다. 이를 위한 한 가지 방법은 <link media>를 통해 하는 것입니다.

그러나 prefers-color-scheme와 같은 사용자 환경설정 미디어 기능을 준수하고 성능상의 이유로 CSS를 인라인 처리하려는 Google 검색과 같은 트래픽이 많은 사이트는 초기 HTML 페이로드에 올바른 CSS가 이미 인라인 처리되도록, 선호하는 색 구성표(또는 기타 사용자 환경설정 미디어 기능)를 요청 시 알 수 있어야 합니다.

또한 특히 prefers-color-scheme의 경우 사이트는 부정확한 색상 테마가 표시되는 현상을 피해야 합니다.

Sec-CH-Prefers-Color-Scheme 및 Sec-CH-Prefers-Reduced-Motion 클라이언트 힌트 헤더는 이 문제를 해결하기 위한 일련의 사용자 환경설정 미디어 기능 클라이언트 힌트 헤더 중 첫 번째입니다.

클라이언트 힌트에 관한 배경

HTTP 클라이언트 힌트는 서버가 사전 콘텐츠 협상에 대한 요청 헤더 사용을 광고하는 데 사용할 수 있는 Accept-CH 응답 헤더를 정의합니다. 이를 통상적으로 클라이언트 힌트라고 합니다. 사용자 환경설정 미디어 기능 클라이언트 힌트 헤더 제안서는 사용자 환경설정 미디어 기능을 전달하기 위한 클라이언트 힌트 집합을 정의합니다. 이러한 클라이언트 힌트는 보고하는 해당 사용자 환경설정 미디어 기능에 따라 이름이 지정됩니다. 예를 들어 prefers-color-scheme에 따라 현재 선호되는 색 구성표는 적절한 이름의 Sec-CH-Prefers-Color-Scheme 클라이언트 힌트를 통해 보고됩니다.

중요한 클라이언트 힌트에 관한 배경

사용자 환경설정 미디어 기능 클라이언트 힌트 헤더에서 제안된 클라이언트 힌트는 아마도 중요한 클라이언트 힌트로 가장 흔히 사용될 것입니다. 중요한 클라이언트 힌트는 결과 리소스를 유의미하게 변경하는 클라이언트 힌트입니다. 이러한 리소스는 사용자에게 표시되는 스위치가 부자연스럽게 발생하지 않도록 페이지 로드 (초기 페이지 로드 포함) 전반에서 일관되게 가져와야 합니다.

클라이언트 힌트 문법

사용자 환경설정 미디어 기능은 이름(예: prefers-reduced-motion)과 허용되는 값(예: no-preference 또는 reduce)으로 구성됩니다. 각 클라이언트 힌트 헤더 필드는 값이 문자열인 항목을 포함하는 HTTP용 구조화된 헤더 객체로 표현됩니다. 예를 들어 사용자가 어두운 테마와 감소된 모션을 선호한다고 전달하려면 클라이언트 힌트는 아래 예와 같이 표시됩니다.

GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"

위의 클라이언트 힌트에서 전달되는 정보에 상응하는 CSS는 각각 @media (prefers-color-scheme: dark) {} 및 @media (prefers-reduced-motion: reduce) {}입니다.

클라이언트 힌트의 전체 목록

클라이언트 힌트 목록은 미디어 쿼리 5단계의 사용자 환경설정 미디어 기능을 모델로 합니다.

클라이언트 힌트 허용되는 값 해당 사용자 환경설정 미디어 기능
Sec-CH-Prefers-Reduced-Motion no-preference, reduce prefers-reduced-motion
Sec-CH-Prefers-Reduced-Transparency no-preference, reduce prefers-reduced-transparency
Sec-CH-Prefers-Contrast no-preference, less, more, custom prefers-contrast
Sec-CH-Forced-Colors active, none forced-colors
Sec-CH-Prefers-Color-Scheme light, dark prefers-color-scheme
Sec-CH-Prefers-Reduced-Data no-preference, reduce prefers-reduced-data

브라우저 지원

Sec-CH-Prefers-Color-Scheme 클라이언트 힌트 헤더는 Chromium 93에서 지원됩니다. Sec-CH-Prefers-Reduced-Motion 클라이언트 힌트 헤더는 Chromium 108에서 지원됩니다. 다른 공급업체(예: WebKit 및 Mozilla)의 의견은 대기 중입니다.

Sec-CH-Prefers-Color-Scheme 데모

Chromium 93에서 데모를 사용해 보고 사용자가 선호하는 색 구성표에 따라 인라인 CSS가 어떻게 변경되는지 확인하세요.

Sec-CH-Prefers-Color-Scheme: 어둡게

Sec-CH-Prefers-Color-Scheme: light

Sec-CH-Prefers-Reduced-Motion 데모

Chromium 108에서 데모를 사용해 보고 인라인 CSS가 사용자의 모션 환경설정에 따라 어떻게 변경되는지 확인합니다.

작동 방식

  1. 클라이언트가 서버에 첫 번째 요청을 보냅니다. bash GET / HTTP/2 Host: example.com
  2. 서버는 응답하여 Accept-CH를 통해 클라이언트에게 Sec-CH-Prefers-Color-Scheme 및 Sec-CH-Prefers-Contrast 클라이언트 힌트를 수락한다고 알립니다. 이 중 Critical-CH에 따라 Sec-CH-Prefers-Color-Scheme를 Vary에서 전달한 대로 응답을 변경하는 중요한 클라이언트 힌트로 간주합니다. bash HTTP/2 200 OK Content-Type: text/html Accept-CH: Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Contrast Vary: Sec-CH-Prefers-Color-Scheme Critical-CH: Sec-CH-Prefers-Color-Scheme
  3. 그런 다음 클라이언트는 요청을 다시 시도하여 Sec-CH-Prefers-Color-Scheme를 통해 서버에 어두운 색조 콘텐츠에 대한 사용자 환경설정이 있음을 알립니다. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. 그러면 서버는 클라이언트의 환경설정에 따라 응답을 조정할 수 있으며, 예를 들어 어두운 테마를 담당하는 CSS를 응답 본문에 인라인으로 삽입할 수 있습니다.

Node.js 예시

아래의 Node.js 예시는 널리 사용되는 Express.js 프레임워크용으로 작성되었으며 Sec-CH-Prefers-Color-Scheme 클라이언트 힌트 헤더를 처리하는 방법을 실제로 보여줍니다. 이 코드는 위의 데모를 실제로 실행하는 코드입니다.

app.get("/", (req, res) => {
  // Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
  res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server's response will vary based on its value…
  res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server considers this client hint a _critical_ client hint.
  res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
  // Read the user's preferred color scheme from the headers…
  const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
  // …and send the adequate HTML response with the right CSS inlined.
  res.send(getHTML(prefersColorScheme));
});

개인 정보 보호 및 보안 고려사항

Chromium팀은 사용자 제어, 투명성, 인체공학 등 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 핵심 원칙을 사용하여 사용자 환경설정 미디어 기능 클라이언트 힌트 헤더를 설계하고 구현했습니다.

HTTP 클라이언트 힌트의 보안 고려사항 및 클라이언트 힌트 안정성의 보안 고려사항도 이 제안서에 적용됩니다.

참조

감사의 말씀

Yoav Weiss님께서 보내주신 소중한 의견과 조언에 감사드립니다. 위키미디어 커먼즈의 Tdadamemd님이 제공한 히어로 이미지입니다.