오늘 나는 정말 당황스러운 경험을 했다. 평소처럼 window.innerWidth를 사용해서 브라우저의 너비를 측정하고, 768px 이하일 경우 isMobile = true가 되도록 코드를 짰다. 테스트도 철저하게 했다. 아이폰, 갤럭시 등 다양한 기기에서 사파리, 크롬, 브레이브 브라우저까지 돌려보면서 이상이 없음을 확인했다.

그런데…

지인이 갑자기 내 웹 애플리케이션이 갤럭시의 삼성 브라우저에서 이상하게 보인다고 알려줬다. "설마?" 싶었지만, 직접 테스트를 해보니 정말로 삼성 브라우저에서는 모바일 환경에서도 window.innerWidth < 768이 false로 나오는 이상한 상황이 발생했다.

이해할 수 없었다. 삼성 브라우저에서만 그런 것도 이상한데, PC의 크롬과 파이어폭스 브라우저에서 개발자 모드로 모바일 화면을 확인해도 false가 나오는 것을 발견했다.

문제 해결을 위한 다양한 시도

나는 즉시 다른 방법을 테스트해봤다.

1. window.innerWidth

const isMobile = window.innerWidth < 768;

✅ 일반적인 브라우저에서는 정상 작동
❌ 삼성 브라우저와 PC 크롬/파이어폭스 개발자 모드에서는 false 반환 (실패)

2. document.documentElement.clientWidth를 추가

const isMobile = (window.innerWidth || document.documentElement.clientWidth) < 768;

✅ 논리적으로 더 안전한 코드
❌ 여전히 삼성 브라우저 및 개발자 모드에서 false (실패)

3. window.matchMedia('(max-width: 767px)') 사용

const isMobile = window.matchMedia('(max-width: 767px)').matches;

✅ 모든 브라우저에서 정상 작동! (성공 🎉)

이 결과를 보고 나는 결론을 내렸다.
앞으로 모바일 여부를 판단할 때 window.matchMedia를 사용해야 한다.

왜 이런 일이 발생했을까?

솔직히 말하면, 브라우저의 내부 소스를 직접 들여다보지 않는 이상 정확한 원인을 알기는 어렵다. 하지만 추측해볼 수는 있다.

1. 삼성 브라우저의 렌더링 방식 차이
   삼성 브라우저는 크로미움(Chromium) 기반이지만, 여러 가지 커스텀 최적화가 들어가 있다. 이 과정에서 window.innerWidth 값이 일반적인 모바일 브라우저와 다르게 동작할 가능성이 있다.

2. PC의 크롬 & 파이어폭스 개발자 모드에서 발생한 이유
   개발자 모드에서 "모바일 화면 보기" 기능을 활성화하면, 브라우저는 화면 크기를 조정하는 것뿐만 아니라 내부적으로 여러 가지 설정을 변경한다. 하지만 모든 환경이 실제 모바일 기기를 100% 완벽하게 에뮬레이션하는 것은 아니다. 개발자 모드에서의 window.innerWidth 값이 실제 기기와 다르게 동작하는 이유일 수도 있다.

3. 스크롤바 포함 여부 차이
   window.innerWidth는 뷰포트의 너비를 포함하지만, document.documentElement.clientWidth는 스크롤바를 제외한 실제 콘텐츠 너비를 반환한다.
   삼성 브라우저는 혹시 내부적으로 스크롤바를 다르게 처리하는 것이 아닐까? 하지만 그 가설로는 모든 현상을 설명할 수 없었다.

결론적으로…

앞으로 모바일 여부를 체크할 때는 matchMedia를 쓰자

이 경험을 통해 window.innerWidth 같은 방법은 신뢰할 수 없다는 걸 깨달았다.
앞으로 모바일 환경을 판단할 때는 아래처럼 matchMedia를 사용하는 것이 안전하다.

const isMobile = window.matchMedia('(max-width: 767px)').matches;

📌 이 방법을 쓰면
✅ 모든 브라우저에서 정상적으로 작동한다.
✅ 개발자 모드에서도 일관된 결과를 얻을 수 있다.
✅ 삼성 브라우저 같은 특이한 환경에서도 문제없이 동작한다.

때로는 이러한 예상치 못한 버그와의 만남들이 좋은 개발자가 되어가는 과정이라고 생각한다. 아무튼 오늘은 삼성 브라우저 덕분에(?) matchMedia의 필요성을 깨달았다. 😆