javascript로 모바일 브라우저를 감지하는 방법 (User Agent)

김민아·2023년 3월 2일

User Agent

프로젝트를 진행하다보면 모바일 웹 애플리케이션을 최적화하기 위해 엑세스 환경을 확인해야 할 때가 있다. 유저 에이전트를 확인하면 콘텐츠와 레이아웃을 사용자 디바이스에 맞게 조정하여 더 나은 사용자 경험을 제공하여 웹 사이트 성능을 향상시킬 수 있다.

유저 에이전트(User Agent)는 유저의 브라우저, 운영체제 및 디바이스를 식별하는 문자열이다. 브라우저 외에도 사용자 에이전트는 스크래핑 봇이나 다운로드 매니저 등이 될 수 있다. 이 문자열은 브라우저, 버전 번호 및 호스트 운영체제를 담는다.

미디어 쿼리? 유저 에이전트?

CSS 미디어 쿼리로 디바이스 유형에 따라 단일 사이트의 여러 스타일을 적용할 수 있다. 미디어 쿼리는 화면 너비, 디바이스, 비율에 따라 레이아웃을 조정하는데 사용되는 것이고 유저 에이전트는 장치 유형을 식별하고 감지하는데 사용한다. 미디어 쿼리도 모바일을 감지하는 방법 중 하나가 될 수 있다.

예전 프로젝트에서 모바일에서만 접근을 허용하는 애플리케이션 작업을 했을 때, 미디어 쿼리로 width와 landscape를 사용했다. 당시 클라이언트 측에서 mobile-detect라는 라이브러리를 넣어 달라고 구체적으로 전달받은 기억이 있다. 🥹

javascript로 구현하기

최근 프로젝트에서 navigator.userAgent와 라이브러리를 사용하여 앱 애플리케이션의 스플래시 화면 기능을 넣기 위해 모바일 엑세스만 허용하고 모바일 이외의 디바이스에서 접근할 때 안내 메세지를 출력했다.

✅ navigator.userAgent

간단한 방법으로 navigator.userAgent 속성을 사용하여 유저 에이전트를 확인하는 방법이 있다. 이 속성은 읽기 전용이며 현재 브라우저의 유저 에이전트를 문자열로 반환한다. 이 정보로 사용자가 모바일 장치에서 웹 사이트에 액세스하고 있는지 확인할 수 있다.

if (/Android|iPhone/i.test(navigator.userAgent)) {
  console.log("mobile")
}

if (
  navigator.userAgent.match(/iPhone/i)
) {
  console.log("iPhone")
}

if (
  navigator.userAgent.match(/Android/i)
) {
  console.log("Android")
}

// 모바일 장치인지 확인하기 -> 리다이렉트
if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
  window.location = "https://m.example.com";
}

🛑 UA spoofing

위 방법은 단순한 방법으로 유저 에이전트 속성을 쉽게 조작, 스푸핑할 수 있다. 유저 에이전트 스푸핑은 브라우저의 사용자 에이전트 문자열을 수정하여 자신의 신원을 위장하고 다른 브라우저나 장치인 것처럼 가장할 수 있는 기술이다. 액세스 제한을 우회하거나 사용자의 개인 정보 보호 또는 악의적인 목적으로 사용된다.

✅ TouchEvent

장치에 터치 스크린 유무로 모바일 사용자를 식별할 수 있다.
navigator 오브젝트의 maxTouchPoints 속성은 터치 표면(touch surface)에 터치포인트 갯수를 반환한다. 마찬가지로 GlobalEventHandlers.ontouchstart 이벤트 핸들러로 사용자가 앱과 상호작용하는 방식을 확인할 수 있다. 다만 PC에서 크롬 개발자 디바이스 모드와 같이 터치 이벤트가 있다면 제대로 작동하지 않을 수 있다.

// PC 외 모바일이 아닐 경우
console.log(navigator.maxTouchPoints) // maxTouchPoints 0
console.log('ontouchstart' in document.documentElement) // ontouchstart false

// 모바일일 경우
console.log(navigator.maxTouchPoints) // maxTouchPoints 1 (이상)
console.log('ontouchstart' in document.documentElement) // ontouchstart true

✅ Window.matchMedia('')

window 메서드의 matchMedia는 document와 일치하는 미디어 쿼리 문자열이 담긴 오브젝트 MediaQueryList를 반환한다.

예를 들면, 미디어 쿼리로 screen의 max-width가 480로 설정되었는지 확인할 수 있다.

let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

미디어 쿼리는 모바일 감지 도구가 내장되어 있다.
예를 들면,"pointer:coarse"가 참인지 확인하는 것으로 모바일인지 감지할 수 있다.

// 디바이스의 포인터가 fine인지 coarse인지 확인한다. 
let isMobile = window.matchMedia("(pointer:coarse)").matches;

// 때론 두 포인터를 모두 가진 경우 any-pointer로 확인할 수 있다. 
let isMobile = window.matchMedia("(any-pointer:coarse)").matches;