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

클라이언트 힌트 헤더 집합을 사용하면 요청 시 사이트에서 사용자의 미디어 환경설정을 선택적으로 가져올 수 있으므로 서버가 성능상의 이유로 올바른 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 클라이언트 힌트를 통해 보고됩니다.

중요한 클라이언트 힌트에 대한 배경 정보

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

클라이언트 힌트 문법

사용자 환경설정 미디어 기능은 이름 (예: 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: 밝은 색

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 예시

널리 사용되는 Express.js 프레임워크용으로 작성된 아래의 Node.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 클라이언트 힌트의 보안 고려사항과 클라이언트 힌트 안정성의 보안 고려사항도 이 제안에 적용됩니다.

참조

감사의 말

요아브 바이스에게 귀중한 의견과 조언을 제공해 주셔서 감사합니다. Wikimedia Commons에 Tdadamemd의 히어로 이미지