Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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 객체가 있는지 확인하는 것은 중요합니다. connection 객체는 Chrome, Android용 Chrome, Samsung 인터넷 브라우저에서만 구현되는 네트워크 정보 API를 나타내기 때문입니다. 여기에서 navigator.connection.saveData이 true과 같은지 확인하기만 하면 되고, 이 조건에서 데이터 저장 작업을 구현할 수 있습니다.

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

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

구현 도움말 및 권장사항

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

레시피

Save-Data를 통해 달성할 수 있는 것은 사용자가 생각해 낼 수 있는 것에만 국한됩니다. 가능한 작업을 파악할 수 있도록 몇 가지 사용 사례를 살펴보겠습니다. 이 문서를 읽으면서 다른 사용 사례를 떠올릴 수도 있으니 자유롭게 실험해 보고 무엇이 가능한지 확인해 보세요.

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

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

서버 측 코드에서 Save-Data 헤더를 감지하는 구체적인 문법은 사용된 언어에 따라 다르지만 기본 개념은 모든 애플리케이션 백엔드에서 동일해야 합니다. 예를 들어 PHP에서 요청 헤더는 HTTP_로 시작하는 색인의 $_SERVER 슈퍼 전역 배열에 저장됩니다. 따라서 다음과 같이 $_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)입니다. 이 클래스의 고해상도 화면은 고급 기기에만 국한되지 않으며 점점 더 일반화되고 있습니다. 더 가벼운 애플리케이션 환경이 선호되는 경우 더 큰 (2x) 변형 대신 낮은 해상도 (1x) 이미지를 이러한 화면에 전송하는 것이 현명할 수 있습니다. 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할 수 있도록 지원을 참고하세요.