Javascript - 디바이스 구분하기 [Mobile, PC]

 이번에는 Javascript를 통해 디바이스를 확인하는 방법을 알아보겠습니다. 일반적으로 디바이스를 구분하기 위해서는 브라우저가 가지고 있는 navigator.userAgent를 사용합니다.

 

 여기서 에이전트라는 의미는 사용자를 대신해서 웹 페이지를 보여주는 디바이스를 말하는데요. 바로 웹 페이지를 보실 때 사용하고 계신 도구를 말한다고 생각하시면 됩니다. PC를 이용해 웹 페이지를 보고 있다면 PC가 에이전트이고, 핸드폰을 통해 웹 페이지를 보고 계신다면 핸드폰이 에이전트가 됩니다.

Navigator.userAgent

navigator.userAgent

 브라우저의 콘솔 기능을 이용해 navigagor.userAgent를 출력한 내용입니다. userAgent는 브라우저 이름, 브라우저 버전, 렌더링 엔진, 렌더링 엔진 버전, OS 등 현재 사용하고 있는 디바이스를 포함해 브라우저 정보까지 포함하고 있습니다. 우리는 이 정보를 이용해 기기 혹은 브라우저마다 다른 서비스를 제공할 수 있는데요. 디바이스 마다 다른 서비스를 제공하는 것은 권장하지 않습니다.

 

 다만 디바이스의 유형인 모바일과 태블릿 혹은 데스크톱을 구분해서 사용해야 하는 경우에는 별 다른 방법이 없기 때문에 userAgent를 사용합니다.

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // 모바일인 경우
}

  이 예제 코드가 바로 userAgent를 활용해 모바일 기기를 구분하는 방법입니다. 여기서 중요한 점은 이 코드는 일반적으로 기기를 구분하는 방법 일 뿐 상황에 따라 test가 되어야 하는 대상이 추가되거나 달라질 수 있다는 부분입니다.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // 모바일인 경우
}

 함수로 형태로 만든다면 아래와 같은 코드로 만들어 볼 수 있습니다.

// 함수 형태로 형태로 만들기
const isMobile = () => {
	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}

 

 

또 다른 방법 ontouchstart

 userAgent 대신 다른 방법으로는 ontouchstart를 사용하는 방법이 있습니다. touch의 경우 사용할 수 있는 기기가 한정적이라는 점을 이용한 방법입니다. 바로 touch를 사용할 수 있다면 모바일 기기라고 판단하는 방법인 거죠

const isMobile = () => ('ontouchstart' in document.documentElement);

 이 방법 또한 터치 스크린이 되는 노트북에서는 true로 반환하는 이슈가 있어서 다음의 예제 코드 형태로 사용됩니다.

const isMobile = () => {
  try {
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;
  }
};

정리하기

 디바이스를 확인할 수 있는 방법으로 userAgent와 ontouchstart를 사용하는 방법을 알아보았습니다. 2가지의 방법 중 디바이스를 확인하는 방법으로 어떤 방법을 써야 맞을까요? 결론적으로는 개발을 하는 환경에 따라 적용되는 방법이 달라야 하니, 어떤 방법이 맞는 방법이다라고 말하기는 어렵다고 생각합니다. 즉 각자가 가진 상황에 따라 잘 맞는 방법을 쓰는 게 좋다고 생각합니다!