연결 상태가 나쁘거나 불안정한 경우 앱이나 사이트의 사용 느낌이 어떤지를 파악하여 이에 따라 빌드하는 것이 중요합니다. 다양한 도구가 도움이 될 수 있습니다.
낮은 대역폭 및 높은 지연 시간으로 테스트
휴대기기에서 웹을 경험하는 사용자의 비중이 점점 증가하고 있습니다. 심지어는 가정에서도 많은 사람들이 자유롭게 이동하면서 사용하기 위해 고정 광대역 사용을 중지하고 있습니다.
이러한 상황에서는 연결 상태가 나쁘거나 불안정한 경우 앱이나 사이트의 사용 느낌이 어떤지를 파악하는 것이 중요합니다. 다양한 소프트웨어 도구를 사용하면 낮은 대역폭과 긴 지연 시간을 에뮬레이션하고 시뮬레이션할 수 있습니다.
네트워크 제한 에뮬레이션
사이트를 빌드하거나 업데이트할 때에는 다양한 연결 조건에서 적합한 성능을 확인해야 합니다. 여러 도구가 유용할 수 있습니다.
브라우저 도구
Chrome DevTools를 사용하면 Network 패널의 사전 설정 또는 맞춤 설정을 사용하여 다양한 업로드/다운로드 속도 및 왕복 시간으로 사이트를 테스트할 수 있습니다. 기본사항을 알아보려면 네트워크 성능 분석 시작하기를 참고하세요.
시스템 도구
Network Link Conditioner는 Xcode용 Hardware IO Tools를 설치한 경우 Mac에서 사용할 수 있는 기본 설정 패널입니다.
기기 에뮬레이션
Android Emulator를 사용하면 Android에서 앱(웹 브라우저 및 하이브리드 웹 앱 포함)을 실행하는 동안 다양한 네트워크 조건을 시뮬레이션할 수 있습니다.
iPhone의 경우 Network Link Conditioner를 사용하여 손상된 네트워크 조건을 시뮬레이션할 수 있습니다(위 참조).
다양한 위치 및 네트워크에서 테스트
연결 성능은 서버 위치와 네트워크 유형에 따라 달라집니다.
WebPagetest는 다양한 네트워크 및 호스트 위치를 사용하여 사이트에 대해 여러 가지 성능 테스트를 실행할 수 있는 온라인 서비스입니다. 예를 들어 인도에 있는 서버에서 2G 네트워크를 통해 사이트를 시험해 보거나 미국 내 도시에서 케이블을 통해 사이트를 시험해 볼 수 있습니다.
위치를 선택하고, 고급 설정에서 연결 유형을 선택합니다. 스크립트(예: 사이트에 로그인)를 사용하거나 RESTful API를 사용하여 테스트를 자동화할 수도 있습니다. 이렇게 하면 연결 테스트를 빌드 프로세스 또는 성능 로깅에 포함할 수 있습니다.
Fiddler는 GeoEdge를 통한 전역 프록시를 지원하며, 사용자 지정 규칙을 사용하여 모뎀 속도를 시뮬레이션할 수 있습니다.
손상된 네트워크에서 테스트
소프트웨어 및 하드웨어 프록시를 사용하면 대역폭 제한, 패킷 지연, 무작위 패킷 손실과 같은 문제가 있는 모바일 네트워크 조건을 에뮬레이션할 수 있습니다. 공유된 프록시나 손상된 네트워크에서는 개발자 팀이 자신의 워크플로에 실제 네트워크 테스트를 통합할 수 있습니다.
Facebook의 Augmented Traffic Control(ATC)은 BSD 라이선스가 적용된 일련의 애플리케이션으로서 트래픽을 형성하고 손상된 네트워크 조건을 에뮬레이션할 수 있습니다.
Facebook은 2G 사용자의 제품 사용 방식을 이해하기 위해 2G 화요일을 실시하기도 했습니다. 화요일마다 직원에게 2G 연결을 시뮬레이션하는 옵션을 제공하는 팝업이 표시됩니다.
Charles HTTP/HTTPS 프록시를 사용하여 대역폭 및 지연 시간을 조정할 수 있습니다. Charles는 상용 소프트웨어이지만, 무료 체험판을 사용할 수 있습니다.
Charles에 대한 자세한 내용은 codewithchris.com에서 확인할 수 있습니다.
불안정한 연결 및 'lie-fi' 처리
lie-fi란?
lie-fi라는 용어는 최소한 2008년(휴대전화가 이렇게 보였던 때)부터 존재해 왔으며, 보이는 것과 다른 연결 상태를 나타냅니다. 브라우저는 어떠한 이유에서든 연결이 되지 않았는데 연결이 된 것처럼 동작합니다.
연결 상태를 잘못 해석할 경우 브라우저(또는 JavaScript)가 작업을 중단하고 실용적인 대안을 선택하는 대신 리소스를 계속 가져오려고 하므로 형편 없는 환경을 초래할 수 있습니다. lie-fi는 실제로 오프라인보다 안 좋을 수 있습니다. 최소한 기기가 확실히 오프라인인 경우 자바스크립트는 적절한 회피 조치를 수행할 수 있습니다.
점점 더 많은 사람들이 모바일로 전환하여 고정 광대역 환경에서 이탈하고 있으므로 lie-fi는 더 큰 문제가 될 가능성이 큽니다. 최근 미국 인구조사 데이터에 따르면 고정 광대역 환경에서 이탈하는 추세가 나타났습니다. 다음 차트에서는 2015년도 가정에서의 모바일 인터넷 사용을 2013년과 비교하여 보여줍니다.
제한 시간을 사용하여 간헐적인 연결 처리
과거에는 간헐적인 연결을 테스트하는 데 XHR을 사용하는 해킹 방법이 사용되었지만 서비스 워커를 사용하면 보다 안정적인 방법으로 네트워크 시간 제한을 설정할 수 있습니다. Workbox를 사용하여 단 몇 줄의 코드만으로 이를 실행할 수 있습니다.
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Workbox에 대한 자세한 내용은 Workbox: 유연한 PWA 라이브러리라는 제목으로 진행된 제프 포스닉의 Chrome Dev Summit 강연을 참고하세요.
Fetch API용 제한 시간 기능도 개발 중이며 Streams API는 콘텐츠 전송을 최적화하고 획일적인 요청을 피하는 데 도움이 됩니다. Jake Archibald는 Supercharging page load에서 lie-fi를 해결하는 방법에 대해 자세히 설명합니다.