오늘날 웹에 연결할 수 있는 기기의 기능은 그 어느 때보다도 광범위합니다. 고급형 데스크톱 컴퓨터에 제공되는 동일한 웹 애플리케이션을 저전력 스마트폰, 시계 또는 태블릿에도 제공할 수 있으며, 모든 기기에서 원활하게 작동하는 매력적인 환경을 만드는 것은 매우 어려울 수 있습니다.
Device Memory API는 웹 개발자가 최신 기기 환경을 처리하는 데 도움이 되는 새로운 웹 플랫폼 기능입니다. navigator 객체 navigator.deviceMemory에 읽기 전용 속성을 추가합니다. 이 속성은 기기의 RAM 크기(GB)를 가장 가까운 2의 거듭제곱으로 반내림하여 반환합니다. API에는 동일한 값을 보고하는 클라이언트 힌트 헤더, Device-Memory도 있습니다.
개발자는 Device Memory API를 사용하여 다음 두 가지 주요 작업을 수행할 수 있습니다.
- 반환된 기기 메모리 값에 따라 제공할 리소스에 관한 런타임 결정을 내립니다 (예: 메모리가 부족한 기기의 사용자에게 '라이트' 버전의 앱 제공).
- 이 값을 분석 서비스에 보고하면 기기 메모리가 사용자 행동, 전환 또는 비즈니스에 중요한 기타 측정항목과 어떤 관련이 있는지 더 잘 이해할 수 있습니다.
기기 메모리에 따라 동적으로 콘텐츠 맞춤설정
자체 웹 서버를 실행 중이고 리소스를 제공하는 로직을 수정할 수 있는 경우 Device-Memory 클라이언트 힌트 헤더가 포함된 요청에 조건부로 응답할 수 있습니다.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
이 기법을 사용하면 하나 이상의 애플리케이션 스크립트를 만들고 Device-Memory 헤더에 설정된 값에 따라 조건부로 클라이언트의 요청에 응답할 수 있습니다. 이러한 버전은 완전히 다른 코드를 포함할 필요가 없습니다 (유지관리가 더 어려움). 대부분의 경우 '라이트' 버전은 비용이 많이 들고 사용자 환경에 중요하지 않은 기능만 제외합니다.
클라이언트 힌트 헤더 사용
Device-Memory 헤더를 사용 설정하려면 문서의 <head>에 클라이언트 힌트 <meta> 태그를 추가하세요.
<meta http-equiv="Accept-CH" content="Device-Memory">
또는 서버의 Accept-CH 응답 헤더에 '기기 메모리'를 포함합니다.
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
이렇게 하면 현재 페이지의 모든 하위 리소스 요청과 함께 Device-Memory 헤더를 전송하도록 브라우저에 지시합니다.
즉, 웹사이트에 위 옵션 중 하나를 구현한 후 사용자가 RAM이 0.5GB인 기기를 방문하면 이 페이지의 모든 이미지, CSS, JavaScript 요청에 값이 '0.5'로 설정된 Device-Memory 헤더가 포함되므로 서버는 필요에 따라 이러한 요청에 응답할 수 있습니다.
예를 들어 다음 Express 경로는 Device-Memory 헤더가 설정되어 있고 값이 1 미만인 경우 '라이트' 버전의 스크립트를 제공합니다. 브라우저에서 Device-Memory 헤더를 지원하지 않거나 값이 1 이상인 경우 'full' 버전을 제공합니다.
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
JavaScript API 사용
경우에 따라 (예: 정적 파일 서버 또는 CDN) HTTP 헤더를 기반으로 한 요청에 조건부로 응답할 수 없습니다. 이러한 경우 JavaScript API를 사용하여 JavaScript 코드에서 조건부 요청을 수행할 수 있습니다.
다음 로직은 클라이언트 측 로직에서 스크립트 URL을 동적으로 결정한다는 점을 제외하면 위의 익스프레스 경로와 유사합니다.
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
기기 기능에 따라 동일한 구성요소의 여러 버전을 조건부로 제공하는 것도 좋은 전략이지만, 구성요소를 전혀 제공하지 않는 것이 더 좋은 전략일 수도 있습니다.
많은 경우 구성요소가 순전히 향상되는 것입니다. 사용 환경에 멋진 감각을 더해주지만 앱의 핵심 기능에는 필요하지 않습니다. 이러한 경우에는 처음부터 그러한 구성요소를 로드하지 않는 것이 좋습니다. 사용자 환경을 개선하려는 구성요소로 인해 앱이 느려지거나 응답하지 않는 경우 앱의 목표가 달성되지 않은 것입니다.
사용자 환경에 영향을 미치는 결정을 내리는 경우 그 영향을 측정하는 것이 중요합니다. 또한 현재 앱의 성능을 명확하게 파악하는 것이 중요합니다.
현재 앱 버전에서 기기 메모리가 사용자 행동과 어떤 상관관계가 있는지 이해하면 어떤 조치를 취해야 하는지 더 잘 파악할 수 있으며 향후 변경사항의 성공 여부를 측정할 수 있는 기준을 얻을 수 있습니다.
애널리틱스로 기기 메모리 추적하기
Device Memory API는 새로운 기능이며 대부분의 분석 제공자는 기본적으로 이를 추적하지 않습니다. 다행히 대부분의 분석 서비스 제공업체에서는 맞춤 데이터를 추적하는 방법을 제공합니다 (예: Google 애널리틱스에 맞춤 측정기준이라는 기능이 있음). 이 방법을 사용하면 사용자 기기의 기기 메모리를 추적할 수 있습니다.
맞춤 기기 메모리 측정기준 사용
Google 애널리틱스에서 맞춤 측정기준을 사용하려면 두 단계를 거쳐야 합니다.
- Google 애널리틱스에서 맞춤 측정기준을 설정합니다.
- 추적 코드를 방금 만든 맞춤 측정기준의 기기 메모리 값
set으로 업데이트합니다.
맞춤 측정기준을 만들 때는 이름을 '기기 메모리'로 지정하고 '세션' 범위를 선택합니다. 이 값은 사용자의 탐색 세션 동안 변경되지 않으므로 다음과 같이 합니다.
그런 다음 추적 코드를 업데이트합니다. 예를 들면 다음과 같습니다. Device Memory API를 지원하지 않는 브라우저의 경우 측정기준 값이 '(not set)'이 됩니다.
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
기기 메모리 데이터 보고
추적기 객체에서 기기 메모리 측정기준이 set가 되면 Google 애널리틱스로 전송하는 모든 데이터에 이 값이 포함됩니다.
이렇게 하면 원하는 측정항목 (예: 페이지 로드 시간, 목표 달성률 등)을 기기 메모리별로 분석하여 상관관계가 있는지 확인할 수 있습니다.
기기 메모리는 기본 제공 측정기준이 아닌 맞춤 측정기준이므로 표준 보고서에는 표시되지 않습니다. 이 데이터에 액세스하려면 맞춤 보고서를 생성해야 합니다. 예를 들어 기기 메모리별로 로드 시간을 비교하는 맞춤 보고서의 구성은 다음과 같을 수 있습니다.
그리고 생성되는 보고서는 다음과 같습니다.
기기 메모리 데이터를 수집하고 메모리 스펙트럼의 모든 범위에서 사용자가 애플리케이션을 어떻게 경험하는지에 관한 기준을 확보했다면 위 섹션에 설명된 기법을 사용하여 다양한 사용자에게 다른 리소스를 제공하는 실험을 진행할 수 있습니다. 그런 다음 결과를 보고 개선 여부를 확인할 수 있습니다.
요약
이 게시물에서는 Device Memory API를 사용하여 사용자 기기의 기능에 맞게 애플리케이션을 조정하는 방법을 설명하고 이러한 사용자가 앱을 경험하는 방식을 측정하는 방법을 보여줍니다.
이 게시물에서는 Device Memory API를 중점적으로 다루지만 여기서 설명하는 대부분의 기법은 기기 기능이나 네트워크 상태를 보고하는 모든 API에 적용할 수 있습니다.
기기 환경이 계속 넓어짐에 따라 웹 개발자가 자신의 경험에 영향을 미치는 결정을 내릴 때 사용자의 전체 스펙트럼을 고려하는 것이 그 어느 때보다 중요해졌습니다.