[Javascript] (User Agent) 사용자가 접속한 브라우저, 기기 확인하기

프론트엔드 개발을 진행하다 보면 사용자가 데스크톱으로 접속했는지, 모바일 기기로 접속했는지,

어떤 브라우저를 사용해서 접속했는지 등을 확인하고 이에 따라 다른 UI를 제공해야 하는 경우가 있습니다.

 

이때 웹 브라우저의 User Agent를 활용하여 이를 알 수 있습니다.

| User Agent

User Agent는 사용자가 웹사이트에 접속할 때 브라우저가 서버로 보내는 문자열입니다.

이 문자열에는 브라우저의 정보, 운영 체제, 기기 정보 등이 포함되어 있어

이를 파싱 하면 사용자의 접속 환경을 알 수 있습니다.

 

자바스크립트에서는 브라우저의 navigator객체를 통하여

해당 문자열을 확인할 수 있습니다.

console.log(navigator.userAgen);

또한 기기나 브라우저로 출력되는 User Agent는 다음과 같습니다.

iOS Chrome

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/125.0.6422.80 Mobile/15E148 Safari/604.1

iOS Safari

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1

IOS Kakao

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari/604.1 KAKAOTALK/10.8.0

Android Chrome

Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36

Android Kakao

Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36 KAKAOTALK/10.8.0

이런 식으로 출력되는 문자열을 확인하고, 정규식을 검사하여

사용자가 어떤 기기의 어떤 브라우저로 접속했는지 확인할 수 있습니다.

const getDeviceType = () => {
  const userAgent = navigator.userAgent;

  // iOS 기기 판별
  if (/iPad|iPhone|iPod/.test(userAgent)) {
    if (/CriOS/.test(userAgent)) {
      return "iOS Chrome";
    } else if (/Safari/.test(userAgent) && !/CriOS/.test(userAgent)) {
      return "iOS Safari";
    } else if (/KAKAOTALK/.test(userAgent)) {
      return "iOS Kakao";
    } else {
      return "iOS";
    }
  }

  // Android 기기 판별
  if (/android/i.test(userAgent)) {
    if (/Chrome/.test(userAgent)) {
      return "Android Chrome";
    } else if (/SamsungBrowser/.test(userAgent)) {
      return "Android Samsung Browser";
    } else if (/KAKAOTALK/.test(userAgent)) {
      return "Android Kakao";
    } else {
      return "Android";
    }
  }

  // 웹 브라우저 판별
  return "Web";
};

console.log(getDeviceType());