개발자도구 스로틀링 설정 방법, 느린 인터넷 환경 테스트

개발자도구에는 다양한 기능이 있다. 모두 사용할 줄 알면 좋겠지만, 기능이 많아서 쉽지는 않다. 그 중에 유용한 도구들을 익혀두고 잘 사용하면 소프트웨어 테스트 업무를 할 때 유용할 수 있다. 오늘은 개발자도구의 네트워크 탭에서 스로틀링을 설정하는 방법을 알아보려고 한다. 스로틀링 설정을 통해 우리는 느린 인터넷 환경(네트워크 접속 지연)을 테스트할 수 있다. 

 

Throttling?

 

기능을 사용하기 전에 스로틀링의 뜻을 알고 싶어서 네이버 사전에 검색을 해보았다. 사전적 의미는 '조이다', '조절하다'의 뜻을 가진다. 목을 조른다는 뜻도 있다.

 

목을 졸라 죽이다..

 

 

---

 

 

 

 

네트워크에서의 Throttling

네트워크에서 스로틀링이라는 것은 '대역폭 제한','대역폭 조절'을 뜻한다. 대역폭 제한 또는 대역폭 조절, 대역 제한(Bandwidth throttling)은 인터넷 서비스 공급자가 의도적으로 서비스를 느리게 만드는 것을 의미한다. 대역폭 제한을 하는 것으로 네트워크의 과부하를 막을 수 있고, 네트워크 트래픽을 규제할 수 있다.

 

 

 

---

 

개발자 도구에서 Throttling 메뉴의 위치

 

개발자 도구 > Network 탭 바로 아래를 보면 스로틀링을 조절할 수 있는 부분이 있다. 처음에는 No Throttling으로 설정 되어있다.

초기 설정 화면

 

 

 

해당 부분을 누르면 아래와 같은 옵션 목록이 노출된다. Fast 3G, Slow 3G, Offline 으로 설정이 가능하고, 커스텀을 사용하여 원하는 대역폭을 설정할 수도 있다. 다른 옵션들은 잘 사용하지 않고, Slow 3G 옵션만 사용해도 원하는 테스트를 진행할 수 있다.

 

다양한 옵션들

 

 

 

---

 

느린 인터넷 환경 테스트의 필요성

SW 기반 서비스는 개발하거나 테스트할때, 다양항 사용자의 인터넷 환경이 고려되어야 한다. 실제로 개발하는 개발자와 QA의 네트워크는 항상 빠른 경우가 대부분이다. 하지만 해당 서비스를 사용하는 어떤 사용자는 느린 네트워크환경에서 서비스를 사용하고 있을 수도 있다. 이렇게 느린 네트워크 환경에서 서비스를 사용하는 사용자는 모든 리소스가 로딩 완료될 때까지, 흰색 빈화면만 보면서 기다려야한다. 이런 부분에 대한 유저 사용성을 높이지 않으면 사용자의 이탈로 이어진다.

대부분의 서비스는 이런 부분을 개선하기 위해, 로딩스피너나 프로그래스바 등을 노출해서 데이터가 로딩되고 있다는 것을 사용자에게 보여준다. 

 

 

로딩인디케이터

 

해당 케이스를 테스트하기 위해 개발자나 QA가 일부러 데이터가 느린 곳으로 가서 테스트를 진행할 수는 없다. 그래서 스로틀링을 걸어서 테스트한다. Slow 3G 옵션을 줘서 테스트하면 쉽게 테스트할 수 있다. 개발자 도구 > Network 탭 > Throttling 부분에서 Slow 3G 옵션을 줘서 테이지를 로딩해 보자.

 

자주 사용하는 옵션

 

 

 

유튜브에서 동영상의 로딩이 느린 경우에 나타나는 로딩인디케이터도 가지고 와 봤다. 이렇게 로딩 화면이 노출되면, 사용자도 어느정도 시간을 가지고 대기할 수 있게 된다. 로딩 환경 개선은 사용성의 부분에서 품질을 높이기 위해 꼭 필요한 기능이라고 생각한다.

 

 

 

 

 

---

함께 보면 좋은 글

개발자 도구로 웹 사이트 HTML 구조 보는 방법

 

개발자도구 Block request URL 사용하기