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

데이브 개시
데이브 개시
일리야 그리고릭
일리야 그리고릭

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

가벼운 페이지의 필요성

Weblight 통계

웹페이지가 더 빠르고 가벼울수록 사용자 만족도가 높아지고, 콘텐츠 이해도와 유지율이 개선되며, 전환수와 수익이 늘어난다는 점에는 누구나 동의합니다. Google 연구에 따르면 '최적화된 페이지는 원본 페이지보다 4배 빠르게 로드되고 사용하는 바이트 수는 80% 적습니다. 이러한 페이지의 로드 속도가 훨씬 빨라 해당 페이지로 유입되는 트래픽이 50% 증가했습니다."

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

이는 페이지 최적화를 위한 강력한 인수입니다.

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

Save-Data 요청 헤더

상당히 간단한 기법 중 하나는 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.
  }
}

connection 객체는 Chrome, Android용 Chrome, 삼성 인터넷 브라우저에서만 구현되는 Network Information API를 나타내므로 navigator 객체 내에 존재하는지 확인하는 것이 중요합니다. 여기서 navigator.connection.saveDatatrue와 같은지 확인하기만 하면 해당 조건에서 모든 데이터 저장 작업을 구현할 수 있습니다.

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

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

구현 도움말 및 권장사항

  1. Save-Data를 사용할 때는 이를 지원하는 UI 기기를 제공하고 사용자가 환경 간에 쉽게 전환할 수 있도록 합니다. 예:
    • 사용자에게 Save-Data가 지원된다고 알리고 사용하도록 권장합니다.
    • 사용자가 적절한 메시지와 직관적인 사용/사용 중지 버튼 또는 체크박스를 사용하여 모드를 식별하고 선택할 수 있도록 합니다.
    • 데이터 절약 모드가 선택되면 데이터 절약 모드를 사용 중지하고 원하는 경우 전체 환경으로 되돌릴 수 있는 쉽고 명확한 방법을 공지하고 제공합니다.
  2. 경량 애플리케이션은 비교적 작은 애플리케이션이 아니라는 점을 기억하세요. 중요한 기능이나 데이터를 생략하지 않고 관련 비용과 사용자 환경을 더 잘 인지할 뿐입니다. 예를 들면 다음과 같습니다.
    • 사진 갤러리 애플리케이션은 더 낮은 해상도의 미리보기를 제공하거나 코드 사용량이 적은 캐러셀 메커니즘을 사용할 수 있습니다.
    • 검색 애플리케이션은 한 번에 더 적은 결과를 반환하거나, 미디어가 많은 결과의 수를 제한하거나, 페이지를 렌더링하는 데 필요한 종속 항목 수를 줄일 수 있습니다.
    • 뉴스 중심 사이트의 경우 표시되는 기사의 수가 적거나 인기가 낮은 카테고리를 생략하거나 미디어 미리보기를 더 작게 제공할 수 있습니다.
  3. Save-Data 요청 헤더를 확인하는 서버 로직을 제공하고 사용 설정된 경우 더 가벼운 대체 페이지 응답을 제공하는 것이 좋습니다(예: 필요한 리소스 및 종속 항목 수 줄이기, 더 적극적인 리소스 압축 적용 등).
    • Save-Data 헤더를 기반으로 대체 응답을 제공하는 경우 Vary 목록(Vary: Save-Data)에 추가하여 업스트림 캐시에 Save-Data 요청 헤더가 있는 경우에만 이 버전을 캐시하고 제공해야 한다고 알려야 합니다. 자세한 내용은 캐시와의 상호작용에 관한 권장사항을 참조하세요.
  4. 서비스 워커를 사용하는 경우 애플리케이션은 Save-Data 요청 헤더가 있는지 확인하거나 navigator.connection.saveData 속성 값을 확인하여 데이터 저장 옵션이 사용 설정된 시점을 감지할 수 있습니다. 사용 설정한 경우 더 적은 바이트를 가져오도록 요청을 다시 작성할 수 있는지 아니면 이미 가져온 응답을 사용할 수 있는지 고려하세요.
  5. 사용자의 연결 유형 및 기술에 대한 정보와 같은 다른 신호로 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 수퍼전역 배열에 저장됩니다. 즉, 다음과 같이 $_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)용 이미지와 고해상도 화면용 2배(2x) 이미지 (예: Retina 디스플레이) 이러한 고해상도 화면 클래스는 꼭 고급형 기기에만 국한되지 않으며 점점 더 보편화되고 있습니다. 더 가벼운 애플리케이션 환경이 선호되는 경우에는 큰 변형 (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 FontsFira 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을 참고하세요.