Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

Save-Data를 사용하여 빠르고 가벼운 애플리케이션 제공

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

가벼운 페이지의 필요성

Web Light 통계

더 빠르고 가벼운 웹페이지가 더 만족스러운 사용자 환경을 제공하고, 콘텐츠 이해도와 유지율을 높이며, 전환수와 수익을 늘린다는 점에는 모두가 동의합니다. Google 연구에 따르면 "…최적화된 페이지의 로드 속도는 원래 페이지보다 4배 빠르고 사용하는 바이트 수는 80% 적습니다. 최적화된 페이지가 로드되는 속도가 훨씬 빠르기 때문에 이러한 페이지로 유입되는 트래픽이 50% 증가했습니다."

2G 연결 수가 마침내 감소하고 있지만 2G는 2015년에도 여전히 지배적인 네트워크 기술이었습니다. 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 개발자 도구에 표시된 Save-Data 헤더 — 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 클라이언트 힌트에 공지됩니다.

레시피

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가 없을 때 로드되는 중요하지 않은 이미지와 Save-Data가 있을 때 생략되는 동일한 이미지를 비교합니다. — Save-Data가 없을 때 로드되는 중요하지 않은 이미지와 Save-Data가 있을 때 생략되는 동일한 이미지의 비교

물론 이미지를 생략하는 것만이 유일한 방법은 아닙니다. 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를 호출하지 않으므로 Fira Sans가 로드되지 않습니다. 대신 Arial이 적용됩니다. Fira Sans만큼 좋지는 않지만 데이터 요금제를 늘리려는 사용자에게는 더 적합할 수 있습니다.

요약

Save-Data 헤더에는 미묘한 차이가 없습니다. 사용 설정되거나 사용 중지되며, 이유와 관계없이 설정에 따라 적절한 환경을 제공해야 하는 부담은 애플리케이션에 있습니다.

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

사이트 소유자 및 웹 개발자로서 데이터 및 비용 제약이 있는 사용자의 사용자 환경을 개선하기 위해 콘텐츠를 관리하는 책임을 지도록 합시다.

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