우리가 개발할 때는 보통 빠른 Wi-Fi 환경에서 작업한다. 그래서 앱이 항상 빠르게 느껴진다.

하지만 실제 고객들은 다르다. 지하철에서 LTE가 끊기는 환경, 건물 안에서 신호가 약한 환경, 혹은 단순히 느린 네트워크를 쓰는 환경에서 우리 앱을 사용한다.

고객이 느린 네트워크에서 우리 앱을 쓸 때 어떤 느낌일까?

이건 직접 체험해보는 게 가장 빠르겠다고 느꼈다.

Chrome DevTools의 Network Throttling

크롬 개발자도구에는 네트워크 속도를 인위적으로 제한하는 기능이 있다. 기본으로 제공되는 “Slow 3G”, “Fast 3G” 프리셋도 있지만, 커스텀 프로필을 만들면 더 극단적인 환경도 시뮬레이션할 수 있다.

설정 방법

  1. 크롬 개발자도구 열기 (F12 또는 Cmd + Option + I)
  2. 우측 상단 톱니바퀴 아이콘 클릭 → Settings 진입
  3. 좌측 메뉴에서 Throttling 선택
  4. Add profile 클릭 후 커스텀 프로필 생성

크롬 개발자도구 Network Throttling 설정 화면

커스텀 프로필 예시

항목 설정값 설명
Profile Name Slow 프로필 이름
Download 10 kbit/s 다운로드 속도
Upload 100 kbit/s 업로드 속도
Latency 3000 ms 지연 시간

위 설정은 극단적으로 느린 환경이다. 실제 사용 환경에 맞게 값을 조절하면 된다.

적용 방법

프로필을 만든 후, 개발자도구 Network 탭 상단의 throttling 드롭다운에서 방금 만든 프로필을 선택하면 즉시 적용된다.

이걸 왜 해야 할까

느린 네트워크에서 앱을 직접 써보면 평소에 보이지 않던 문제들이 드러난다.

  • 로딩 스피너가 없어서 먹통처럼 보이는 화면
  • API 응답 대기 중 사용자가 버튼을 중복 클릭하는 상황
  • 이미지가 늦게 뜨면서 레이아웃이 밀리는 현상
  • 타임아웃 처리가 안 되어 무한 대기하는 케이스

빠른 네트워크에서는 절대 발견할 수 없는 UX 문제들이다. 배포 전에 한 번씩 느린 네트워크로 직접 써보는 습관을 들이면, 고객이 겪는 불편을 미리 잡을 수 있다.