이 페이지는 Cloud Translation API를 통해 번역되었습니다.

데이터 절약을 통한 빠르고 간단한 애플리케이션 제공

Dave Gash

Ilya Grigorik

Jeremy Wagner

Chrome, Opera, Yandex 브라우저에서 사용할 수 있는 Save-Data 클라이언트 힌트 요청 헤더를 사용하면 개발자가 브라우저에서 데이터 절약 모드를 선택한 사용자에게 더 가볍고 빠른 애플리케이션을 제공할 수 있습니다.

간단한 페이지의 필요성

Weblight 통계

웹페이지 속도가 빠르고 가벼울수록 사용자 환경이 만족스러워지고, 콘텐츠 이해도와 유지율이 개선되며, 전환과 수익이 증가한다는 데 동의하는 바입니다. Google 연구에 따르면 '최적화된 페이지는 원본 페이지보다 4배 빠르게 로드되고 사용하는 바이트가 80% 적습니다. 이러한 페이지가 훨씬 빠르게 로드되기 때문에 페이지로 유입되는 트래픽이 50% 증가했습니다."

2G 연결 수는 마침내 감소세를 보이고 있지만 2015년에도 2G가 여전히 지배적인 네트워크 기술이었습니다. 3G 및 4G 네트워크의 보급률과 가용성이 빠르게 증가하고 있지만 관련 소유권 비용과 네트워크 제약은 여전히 수억 명의 사용자에게 중요한 요소입니다.

이는 페이지 최적화에 대한 강력한 주장입니다.

프록시 브라우저 및 트랜스코딩 서비스와 같이 개발자의 직접 개입 없이 사이트 속도를 개선할 수 있는 다른 방법이 있습니다. 이러한 서비스는 매우 인기가 있기는 하지만 단순(때로는 허용되지 않는) 이미지 및 텍스트 압축, 보안 페이지 (HTTPS) 처리 불능, 검색결과를 통해 방문한 페이지만 최적화하는 등 몇 가지 단점이 있습니다. 이러한 서비스의 인기가 매우 높다는 사실은 그 자체로 웹 개발자가 빠르고 가벼운 애플리케이션과 페이지에 대한 높은 사용자 수요를 제대로 처리하지 못하고 있음을 나타냅니다. 하지만 이러한 목표를 달성하기란 복잡하고 때로는 어려운 일입니다

`Save-Data` 요청 헤더

매우 간단한 기법 중 하나는 Save-Data 요청 헤더를 사용하여 브라우저가 지원하도록 하는 것입니다. 웹페이지는 이 헤더를 식별하여 비용과 성능이 제한된 사용자에게 최적화된 사용자 환경을 맞춤설정하고 제공할 수 있습니다.

지원되는 브라우저 (아래)를 사용하면 사용자가 페이지를 렌더링하는 데 필요한 데이터의 양을 줄이기 위해 일련의 최적화를 적용할 수 있는 권한을 브라우저에 부여하는 *데이터 절약 모드를 사용 설정할 수 있습니다. 이 기능이 노출되거나 공지되면 브라우저에서 저해상도 이미지를 요청하거나, 일부 리소스의 로드를 지연하거나, 이미지 및 텍스트 리소스 압축과 같은 다른 콘텐츠별 최적화를 적용하는 서비스를 통해 요청을 라우팅할 수 있습니다.

브라우저 지원

Chrome 49 이상에서는 사용자가 모바일에서 '데이터 절약 모드' 옵션을 사용 설정하거나 데스크톱 브라우저에서 '데이터 절약 모드' 확장 프로그램을 사용 설정하면 Save-Data을 알립니다.
Opera 35+에서는 사용자가 데스크톱에서 'Opera Turbo' 모드를 사용 설정하거나 Android 브라우저에서 '데이터 절약' 옵션을 사용 설정하면 Save-Data를 알립니다.
데스크톱 또는 모바일 브라우저에서 터보 모드가 사용 설정된 경우 Yandex 16.2 이상은 Save-Data를 알립니다.

`Save-Data` 설정 감지 중

사용자에게 '밝은' 환경을 제공할 시기를 결정하기 위해 애플리케이션에서 Save-Data 클라이언트 힌트 요청 헤더를 확인하면 됩니다. 이 요청 헤더는 높은 전송 비용, 느린 연결 속도 또는 기타 이유로 인해 데이터 사용량 감소를 원하는 클라이언트의 선호도를 나타냅니다.

사용자가 브라우저에서 데이터 절약 모드를 사용 설정하면 브라우저는 모든 발신 요청 (HTTP 및 HTTPS)에 Save-Data 요청 헤더를 추가합니다. 이 문서를 작성하는 시점에는 브라우저가 헤더(Save-Data: on)에 *on- 토큰을 하나만 알리지만, 향후 다른 사용자 환경설정을 나타내기 위해 확장될 수도 있습니다.

또한 JavaScript에서 Save-Data가 사용 설정되어 있는지 확인할 수 있습니다.

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

navigator 객체 내에 connection 객체가 있는지 확인하는 것이 중요합니다. 이 객체는 Chrome, Android용 Chrome, 삼성 인터넷 브라우저에서만 구현되는 Network Information API를 나타내기 때문입니다. 여기에서는 navigator.connection.saveData가 true와 같은지 확인하기만 하면 되며 이 조건에서 데이터 절약 작업을 구현할 수 있습니다.

Chrome 개발자 도구에 표시된 데이터 절약 모드 확장 프로그램과 함께 표시된 데이터 저장 헤더 — Chrome 데스크톱에서 데이터 절약 모드 확장 프로그램을 사용 설정합니다.

애플리케이션이 서비스 워커를 사용하는 경우 요청 헤더를 검사하고 관련 로직을 적용하여 환경을 최적화할 수 있습니다. 또는 서버가 Save-Data 요청 헤더에서 공지된 환경설정을 찾아 다양한 마크업, 더 작은 이미지와 동영상 등의 대체 응답을 반환할 수 있습니다.

구현 도움말 및 권장사항

Save-Data를 사용할 때는 이를 지원하고 사용자가 환경 간에 쉽게 전환할 수 있는 UI 기기를 제공합니다. 예를 들면 다음과 같습니다.
- 사용자에게 Save-Data이(가) 지원된다는 것을 알리고 이를 사용하도록 권장합니다.
- 사용자가 적절한 프롬프트와 직관적인 사용/사용 중지 버튼 또는 체크박스를 통해 모드를 식별하고 선택할 수 있도록 합니다.
- 데이터 절약 모드가 선택되면 이를 사용 중지하고 원하는 경우 전체 환경으로 되돌릴 수 있는 쉽고 명확한 방법을 알리고 제공합니다.
경량 애플리케이션은 크기가 작은 애플리케이션이 아니라는 점을 명심하세요. 이들은 중요한 기능이나 데이터를 누락하지 않으며 관련 비용과 사용자 환경을 더 잘 인지합니다. 예를 들면 다음과 같습니다.
- 사진 갤러리 애플리케이션은 더 낮은 해상도의 미리보기를 제공하거나 코드 작성이 많은 캐러셀 메커니즘을 사용할 수 있습니다.
- 검색 애플리케이션은 한 번에 더 적은 결과를 반환하거나 미디어가 많은 결과의 수를 제한하거나 페이지를 렌더링하는 데 필요한 종속 항목의 수를 줄일 수 있습니다.
- 뉴스 중심 사이트에서는 더 적은 수의 뉴스를 표시하거나 덜 인기 있는 카테고리를 생략하거나 더 작은 미디어 미리보기를 제공할 수 있습니다.
Save-Data 요청 헤더를 확인하는 서버 로직을 제공하고, 사용 설정되었을 때 더 가벼운 대체 페이지 응답을 제공하는 것을 고려해 보세요. 예를 들어 필요한 리소스 및 종속 항목의 수를 줄이고, 보다 적극적인 리소스 압축을 적용하는 등의 작업을 수행할 수 있습니다.
- Save-Data 헤더를 기반으로 대체 응답을 제공하는 경우 Vary 목록(Vary: Save-Data)에 추가하여 업스트림 캐시에 Save-Data 요청 헤더가 있는 경우에만 이 버전을 캐시하고 제공해야 한다고 알려야 합니다. 자세한 내용은 캐시와의 상호작용에 대한 권장사항을 참조하세요.
서비스 워커를 사용하는 경우 애플리케이션은 Save-Data 요청 헤더가 있는지 확인하거나 navigator.connection.saveData 속성의 값을 확인하여 데이터 절약 옵션이 사용 설정된 시점을 감지할 수 있습니다. 사용 설정된 경우 더 적은 바이트를 가져오도록 요청을 재작성하거나 이미 가져온 응답을 사용할 수 있는지 고려하세요.
사용자의 연결 유형 및 기술에 관한 정보와 같은 다른 신호로 Save-Data를 보강하는 것이 좋습니다 (NetInfo API 참고). 예를 들어 Save-Data가 사용 설정되지 않은 경우에도 2G 연결을 사용하는 모든 사용자에게 가벼운 환경을 제공할 수 있습니다. 반대로 사용자가 '빠른' 4G 연결을 사용한다고 해서 데이터 저장에 관심이 없다는 의미는 아닙니다(예: 로밍 시). 또한 Device-Memory 클라이언트 힌트로 Save-Data의 존재를 보강하여 메모리가 제한된 기기의 사용자에게 맞게 조정할 수 있습니다. 사용자 기기 메모리는 navigator.deviceMemory 클라이언트 힌트에서도 공지됩니다.

Recipes

Save-Data를 통해 달성할 수 있는 것은 제시할 수 있는 것으로만 제한됩니다. 몇 가지 사용 사례를 살펴보겠습니다. 이 글을 읽으면서 자체적으로 다른 사용 사례를 생각해 낼 수도 있으므로 자유롭게 실험해 보고 무엇이 가능한지 살펴보세요.

서버 측 코드에서 `Save-Data` 확인

Save-Data 상태는 navigator.connection.saveData 속성을 통해 JavaScript에서 감지할 수 있지만 서버 측에서 감지하는 것이 더 좋습니다. JavaScript가 실행되지 않는 경우도 있습니다. 또한 서버 측 감지는 클라이언트로 전송되기 전에 마크업을 수정할 수 있는 유일한 방법이며, 이는 Save-Data의 가장 유용한 사용 사례에 포함됩니다.

서버 측 코드에서 Save-Data 헤더를 감지하기 위한 구체적인 구문은 사용되는 언어에 따라 다르지만, 기본 아이디어는 모든 애플리케이션 백엔드에서 동일해야 합니다. 예를 들어 PHP에서 요청 헤더는 HTTP_로 시작하는 색인의 $_SERVER superglobal 배열에 저장됩니다. 즉, 다음과 같이 $_SERVER["HTTP_SAVE_DATA"] 변수의 존재와 값을 확인하여 Save-Data 헤더를 감지할 수 있습니다.

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

클라이언트로 마크업이 전송되기 전에 이 옵션을 선택하면 $saveData 변수에 Save-Data 상태가 포함되며 페이지의 어디에서나 사용할 수 있습니다. 이 메커니즘을 통해 사용자에게 전송하는 데이터 양을 제한하는 데 이 메커니즘을 사용하는 방법에 관한 몇 가지 예를 살펴보겠습니다.

고해상도 화면에 저해상도 이미지 제공

웹 이미지의 일반적인 사용 사례에서는 이미지를 두 세트로 제공하는 것이 있습니다. 하나는 '표준' 화면(1x)용 이미지이고 다른 하나는 고해상도 화면(예: Retina 디스플레이)을 참조하세요. 이러한 유형의 고해상도 화면이 반드시 고급형 기기로 제한되지는 않으며, 점점 더 일반화되고 있습니다. 더 가벼운 애플리케이션 환경이 선호되는 경우 대형 (2x) 변형보다는 낮은 해상도 (1배) 이미지를 이러한 화면에 전송하는 것이 좋습니다. Save-Data 헤더가 있는 경우 이를 위해 클라이언트에 전송하는 마크업을 수정하기만 하면 됩니다.

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

이 사용 사례는 특별히 더 적은 데이터를 보내달라고 요청하는 사용자를 수용하는 데 약간의 노력이 얼마나 적은지 보여주는 완벽한 예입니다. 백엔드에서 마크업을 수정하고 싶지 않다면 Apache의 mod_rewrite와 같은 URL 재작성 모듈을 사용하여 동일한 결과를 얻을 수도 있습니다. 비교적 적은 구성으로 이를 실행하는 방법의 예가 있습니다.

<html> 요소에 클래스를 간단히 추가하여 이 개념을 CSS background-image 속성으로 확장할 수도 있습니다.

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

여기에서 CSS의 <html> 요소에 save-data 클래스를 타겟팅하여 이미지 제공 방법을 변경할 수 있습니다. 위의 HTML 예에서와 같이 저해상도 배경 이미지를 고해상도 화면에 보내거나 특정 리소스를 완전히 생략할 수 있습니다.

필수가 아닌 이미지 생략

웹의 일부 이미지 콘텐츠는 필수적이지 않은 콘텐츠일 뿐입니다. 이러한 이미지는 콘텐츠와는 다른 면에서 유용할 수 있지만 데이터 전송량 제한이 있는 데이터 요금제에서 가능한 모든 것을 압축하려는 사용자에게는 바람직하지 않을 수 있습니다. Save-Data의 가장 간단한 사용 사례인 경우 앞서 살펴본 PHP 감지 코드를 사용하고 필수적이지 않은 이미지 마크업을 모두 생략할 수 있습니다.

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

아래 그림에서 볼 수 있듯이 이 기법은 분명한 효과를 발휘할 수 있습니다.

저장 데이터가 없을 때 로드되는 중요하지 않은 이미지와 저장 데이터가 있을 때 로드되는 동일한 이미지를 비교합니다.

물론 이미지를 생략하는 것이 유일한 방법은 아닙니다. 또한 Save-Data에 대해 작업을 실행하여 특정 서체와 같은 중요하지 않은 다른 리소스는 전송하지 않을 수 있습니다.

필수가 아닌 웹 글꼴 생략

특정 페이지의 총 페이로드에서 웹 글꼴이 차지하는 비중은 보통 이미지만큼 크지는 않지만 웹 글꼴은 여전히 널리 사용됩니다. 상당한 양의 데이터를 소비하지도 않습니다. 또한 브라우저가 글꼴을 가져오고 렌더링하는 방식은 생각보다 더 복잡합니다. FOIT, FOUT, 브라우저 휴리스틱과 같은 개념으로 인해 렌더링이 미묘한 작업으로 간주됩니다.

따라서 보다 깔끔한 사용자 환경을 원하는 사용자를 위해 필수가 아닌 웹 글꼴을 제외하는 것이 합리적일 수 있습니다. Save-Data를 사용하면 이 작업을 상당히 어렵지 않게 수행할 수 있습니다.

예를 들어 사이트에 Google Fonts의 Fira Sans를 포함했다고 가정해 보겠습니다. Fira Sans는 훌륭한 본문 문구 글꼴이지만 데이터를 저장하려는 사용자에게는 그리 중요하지 않을 수 있습니다. Save-Data 헤더가 있을 때 <html> 요소에 save-data 클래스를 추가하면 처음에는 필수가 아닌 서체를 호출하지만 Save-Data 헤더가 있을 때 이를 호출하지 않는 스타일을 작성할 수 있습니다.

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

이 방법을 사용하면 Google Fonts의 <link> 스니펫을 그대로 두어도 됩니다. 브라우저가 먼저 DOM에 스타일을 적용한 다음 HTML 요소가 스타일 시트의 리소스를 호출하는지 확인하여 CSS 리소스 (웹 글꼴 포함)를 추측적으로 로드하기 때문입니다. Save-Data가 켜진 상태에서 누군가 발생하면 스타일이 지정된 DOM이 호출하지 않으므로 Fira Sans는 로드되지 않습니다. 그 대신, Arial이 그 뒤를 이었습니다. Fira Sans만큼 좋지는 않지만 데이터 요금제를 연장하려는 사용자에게는 선호될 수 있습니다.

요약

Save-Data 헤더는 뉘앙스가 크지 않습니다. 이 헤더는 사용 또는 사용 중지되어 있으며, 애플리케이션은 이유에 관계없이 해당 설정에 따라 적절한 환경을 제공해야 하는 부담을 지닙니다.

예를 들어 일부 사용자는 연결 상태가 좋지 않은 상황에서도 앱 콘텐츠나 기능이 손실될 것으로 의심되면 데이터 절약 모드를 허용하지 않을 수 있습니다. 반대로 일부 사용자는 연결 상태가 좋을 때도 페이지를 최대한 작고 단순하게 유지하기 위해 이 기능을 사용할 수도 있습니다. 명시적인 사용자 작업을 통해 달리 명확히 표시할 때까지 앱에서 사용자가 제한 없는 완전한 환경을 원한다고 가정하는 것이 가장 좋습니다.

데이터 및 비용이 제한된 사용자의 사용자 환경을 개선하기 위해 사이트 소유자 및 웹 개발자로서 콘텐츠 관리 책임을 맡아야 합니다.

Save-Data에 관한 자세한 내용과 훌륭한 실제 예는 사용자 지원 Save Data을 참고하세요.