특정 하드웨어 및 네트워크 제약 조건에 맞게 사이트를 최적화하여 모든 사용자에게 최상의 환경을 제공하는 방법을 알아보세요.
기기 기능과 네트워크 연결은 매우 다양합니다. 고급형 기기에서 사용자에게 즐거움을 주는 사이트는 저사양 기기에서 사용 불가능할 수 있습니다. 빠른 네트워크에서 원활하게 로드되는 사이트는 느린 네트워크에서는 중단될 수 있습니다. 모든 사용자가 웹사이트 속도가 느릴 수 있으므로 '일률적인' 솔루션을 개발하는 것이 항상 효과가 있는 것은 아닙니다.
Chrome Dev Summit 강연에서 Google의 애디 오스마니와 Facebook의 네이트 슐로스가 이 문제에 대한 해결책을 모색했습니다. 이 솔루션은 다양한 사용자 제약 조건에 더 잘 부합하는 페이지를 제공하기 위한 패턴입니다. 이를 적응형 로드라고 합니다.
적응형 로드란 무엇인가요?
적응형 로드에는 네트워크 및 하드웨어 제약 조건에 따라 사용자마다 다른 환경을 제공하는 것이 포함됩니다. 구체적으로는 다음과 같습니다.
모든 사용자를 위한 빠른 코어 환경 (저사양 기기 포함)
사용자의 네트워크와 하드웨어가 처리할 수 있는 경우 고급 전용 기능을 점진적으로 추가합니다.
특정 하드웨어 및 네트워크 제약 조건에 맞게 최적화하여 모든 사용자가 기기에서 최상의 환경을 경험할 수 있도록 합니다. 사용자의 제약사항에 맞게 환경을 맞춤설정하는 작업에는 다음이 포함될 수 있습니다.
느린 네트워크에서 저화질 이미지와 동영상 게재
저사양 기기에서 애니메이션의 프레임 속도를 제한합니다.
저사양 기기에서 계산 비용이 많이 드는 작업 방지
속도가 느린 기기에서 타사 스크립트를 차단합니다.
속도가 빠른 CPU에서만 상호작용을 위해 중요하지 않은 JavaScript를 로드합니다.
브라우저 지원 및 적응형 로드 구현 방법
자동 조절 로드에 사용할 수 있는 신호는 다음과 같습니다. 각 신호에 대한 브라우저 지원도 포함됩니다.
Navigator.deviceMemory
navigator.deviceMemory 속성은 저사양 기기에서 메모리 소비를 줄이는 데 사용됩니다.
Navigator.hardwareConcurrency
navigator.hardwareConcurrency 속성은 CPU 코어 수입니다. 이는 비용이 많이 드는 JavaScript 실행을 제한하고 기기에서 이를 제대로 처리할 수 없을 때 CPU 집약적인 로직을 줄이는 데 사용됩니다.
NetworkInformation.effectiveType
navigator.connection.effectiveType 속성은 대역폭 사용을 줄이기 위해 데이터 전송을 미세 조정하는 데 사용됩니다.
NetworkInformation.saveData
navigator.connection.saveData 속성은 사용자의 데이터 절약 모드 환경설정을 활용하는 데 사용됩니다.
사용자에게 제공할 항목을 결정하는 곳은 클라이언트와 서버입니다. 클라이언트에는 위에서 언급한 JavaScript API가 있습니다. 서버에서 클라이언트 힌트를 사용하여 사용자의 기기 기능과 사용자가 연결된 네트워크에 관한 정보를 얻을 수 있습니다.
React의 적응형 로드
React Adaptive Loading Hooks & Utilities는 저사양 기기에 맞게 사이트를 더 쉽게 조정할 수 있는 React 생태계를 위한 모음입니다. 다음과 같은 항목이 포함됩니다.
네트워크 상태 (
slow-2g,2g,3g또는4g)에 따라 조정하기 위한useNetworkStatus()후크.사용자의 데이터 절약 모드 기본 설정에 따라 조정하는
useSaveData()후크사용자 기기의 논리 CPU 프로세서 코어 수에 따라 조정하기 위한
useHardwareConcurrency()후크입니다.사용자의 기기 메모리(RAM)에 따라 조정하는
useMemoryStatus()후크.
각 후크는 초깃값을 설정하기 위한 선택적 인수를 허용합니다. 이 옵션은 사용자의 브라우저가 관련 API를 지원하지 않는 경우와 클라이언트 힌트 데이터를 사용하여 서버에 초깃값을 설정할 수 있는 서버 측 렌더링에 유용합니다. 예를 들어 useNetworkStatus() 후크는 서버 측 렌더링에 클라이언트 힌트에서 전달된 초기 값을 사용할 수 있으며, 클라이언트에서 실행될 때 네트워크 유효 유형이 변경되면 자체적으로 업데이트할 수 있습니다.
React 적응형 로드 후크 및 유틸리티는 웹 플랫폼 API(네트워크 정보, 기기 메모리, 하드웨어 동시 실행)를 사용하여 구현됩니다. 동일한 API를 사용하여 Angular, Vue 등의 다른 프레임워크 및 라이브러리에 적응형 로드 개념을 적용할 수 있습니다.
적응형 로드의 작동 방식
이 섹션에서는 적응형 로드를 사용하는 방법과 Facebook, eBay, Tinder와 같은 사이트의 실제 예를 살펴봅니다.
반응 영화 데모에서는 네트워크 상태에 따라 미디어 제공을 조정하는 방법을 보여줍니다. 포스터, 요약, 출연진 목록을 표시하는 영화를 탐색하기 위한 애플리케이션입니다. 사용자의 효과적인 연결 유형에 따라 빠른 연결에는 고품질 포스터를, 느린 연결에는 낮은 품질의 포스터를 게재합니다.
트위터에는 데이터 절약 모드가 있어 데이터 사용량을 줄일 수 있습니다. 이 모드에서 미리보기 이미지는 저해상도로 로드되고 큰 이미지는 미리보기를 탭할 때만 로드됩니다. 이 옵션을 사용 설정하면 iOS 및 Android 사용자는 이미지에서 50% 의 데이터 사용량을, 웹 사용자는 80%의 데이터 사용량을 절약할 수 있습니다. 다음은 데이터 저장 후크를 사용하여 Twitter 타임라인을 복제하는 React 데모입니다. DevTools Network 패널을 열고 데이터 저장이 사용 중지된 상태와 사용 설정한 경우에 스크롤할 때 전송되는 데이터 양의 차이를 확인하세요.
eBay는 사용자의 하드웨어 또는 네트워크 조건에서 지원되지 않는 경우 확대/축소와 같은 기능을 조건부로 사용 설정하거나 사용 중지합니다. 이는 적응형 코드 분할 및 코드 로드를 통해 달성할 수 있습니다. 이 방법은 상호작용이 많은 구성요소를 조건부로 로드하거나 고급형 기기에서 컴퓨팅 작업이 많은 작업을 실행하는 동시에 속도가 느린 기기의 사용자에게 이러한 스크립트를 전송하지 않는 방법입니다. 16분의 동영상을 확인해 보세요. 데모 eBay 제품 페이지에서 애디가 React.lazy() 및 Suspense로 구현된 이 패턴을 보여줍니다.
Tinder는 사용자에게 빠른 환경을 제공하기 위해 웹 및 라이트 앱에서 다양한 적응형 로드 패턴을 사용하고 있습니다. 사용자가 느린 네트워크를 사용하거나 데이터 절약 모드를 사용 설정한 경우 동영상 자동재생을 사용 중지하고 경로 미리 가져오기를 제한하며 캐러셀에서 다음 이미지를 로드하는 것을 사용자가 스와이프할 때 이미지를 한 번에 하나씩 로드하도록 제한합니다. 이러한 최적화를 구현한 후 인도네시아와 같은 국가에서 평균 스와이프 수가 크게 개선되었습니다.
Facebook의 적응형 로드
적응형 로드에서 발생하는 한 가지 문제는 사용 가능한 신호를 기반으로 기기를 고급 및 보급형 클래스로 그룹화하는 것입니다. 휴대기기에서는 user-agent (UA) 문자열이 Facebook이 기기 특성에 대해 공개적으로 사용 가능한 데이터를 사용하여 휴대기기를 클래스로 그룹화할 수 있도록 하는 기기 이름을 제공합니다. 하지만 데스크톱 기기에서는 UA가 제공하는 관련 정보는 기기의 운영체제뿐입니다.
데스크톱 기기를 그룹화하기 위해 Facebook은 운영체제, CPU 코어 (navigator.hardwareConcurrency의 경우), RAM 메모리(navigator.deviceMemory)에 관한 데이터를 성능 모니터링에 로깅합니다. 다양한 유형의 하드웨어와 성능 간의 관계를 살펴보면서 기기를 5가지 카테고리로 분류했습니다. 성능 모니터링에 통합된 하드웨어 클래스를 통해 기기에 따라 Facebook 제품을 사용하는 방식을 더 완전하게 파악하고 회귀를 보다 쉽게 식별할 수 있습니다.
24분에 나오는 동영상을 확인하세요. 네이트는 Facebook이 기기 그룹화에 접근하고 애니메이션에 적응형 로드를 사용하는 방법과 JavaScript를 로드하는 방법을 설명합니다.
적응형 로드 자세히 알아보기
적응형 로드의 핵심은 포용성을 염두에 두고 사이트를 디자인하는 것입니다. 모든 사용자에게 적합한 핵심 환경을 빌드한 다음 메모리, CPU 또는 네트워크가 빠른 경우 더 멋진 기능을 제공하는 기능을 전환하거나 레이어링하세요. 적응형 로드에 관해 자세히 알아보려면 제공되는 데모를 확인하고 Chrome Dev Summit 대담을 시청하세요.