노트북 크롬 Responsive 모드인데도 모바일로 인식되는 이유 !

토스터 작업 중 모바일에서만 문제가 있어서 모바일일 시 잠시 기능을 막기로 결정했다.

그리고 모바일 디바이스인지 확인하려고 아래처럼 간단한 훅을 만들었다.

 

const useIsMobileDevice = () =>
  useMemo(() => /Mobi|Android|iPhone|iPod/i.test(navigator.userAgent), []);

 

이 훅은 navigator.userAgent에 Mobi, Android, iPhone 등이 포함되어 있는지를 기준으로 모바일 여부를 판단한다. 이 훅을 사용하자 모바일에서는 숨기고 싶은 기능이 잘 숨겨졌다.

 

그런데 이상하게도 노트북에서 크롬 개발자 도구의 Responsive 모드로 돌리기만 해도 모바일로 인식되었다. 분명 화면 사이즈만 조금 줄였을 뿐인데도 말이다.

 

---

문제 상황

1. 크롬 DevTools에서 "Responsive" 모드로 전환
2. 모바일 디바이스는 선택하지 않고, 그냥 화면 사이즈만 줄임
3. navigator.userAgent를 찍어보니...

Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Mobile Safari/537.36

 

응..? Android? Mobile??

 

내가 선택한 건 "Responsive" 모드였는데, 왜 userAgent가 Android 기기처럼 되어 있는 거지?

심지어 난 맥북인디요

---

원인: DevTools는 디바이스 상태를 기억하고 적용한다

 

크롬의 Responsive 모드는 단순한 화면 크기 조절만 하는 게 아니다.

이전에 선택했던 디바이스 (예: Nexus 5)를 기억하고 userAgent까지 그대로 유지하는 경우가 있다.

 

게다가 DevTools 하단의 Sensors 탭에서는 Location override 같은 건 바로 보이지만, 정작 중요한 User agent override는 보이지 않는 경우도 있다.

 

---

해결 방법

1. 현재 userAgent 확인

console.log(navigator.userAgent);

 

이걸로 내가 의도하지 않게 모바일 userAgent가 적용되어 있는지 확인 가능하다.

2.  User agent  설정을 다시 노출시키기

1. DevTools 열기 (F12)
2. 오른쪽 상단 ⋮ → More tools → Network conditions 클릭
3. 아래쪽 패널에 User agent 항목이 생긴다
4. Use browser default 체크박스를 활성화하여 모바일 userAgent를 무시할 수 있다
   
   

3.   User agent  강제 설정

혹시 이미 Use browser default 가 활성화 되어있다면 체크박스를 크고 강제로 세팅을 줄 수 있다.

• 선택지 중 원하는 세팅 클릭

 

4. 시크릿 모드에서 테스트

브라우저 캐시나 상태가 꼬였을 경우, 시크릿 창에서 새로 테스트하면 깔끔하게 확인 가능하다.

---

🙌 마무리! 

이번 경험을 통해, 크롬 DevTools는 생각보다 똑똑하게, 때로는 교묘하게 동작한다는 걸 배웠다. 사실 이런 기능이 있는지도 이번에 알게 되었다.

 

Responsive 모드라고 해서 무조건 데스크탑 userAgent인 건 아니라는 점을 꼭 기억해 두자!!