Colin's Blog
[javascript] 자바스크립트를 이용한 모바일 디바이스의 감지 기능 개발

이번 포스트에서는 자바스크립트를 사용하여 모바일 디바이스를 감지하는 기능을 개발하는 방법에 대해 알아보겠습니다.

1. User Agent 문자열을 이용한 디바이스 감지

가장 간단한 방법은 navigator.userAgent를 사용하여 디바이스의 User Agent 문자열을 가져와서 파싱하는 것입니다. User Agent는 브라우저가 서버에게 전송하는 요청 헤더의 일부로, 사용중인 디바이스 및 브라우저에 대한 정보를 포함하고 있습니다.

var userAgent = navigator.userAgent;

1.1 User Agent 문자열 분석

분석을 위해 정규식을 사용할 수 있습니다. 종종 특정 디바이스 또는 브라우저를 인식하기 위해 정규식 패턴을 사용하는데, 다음은 몇 가지 예시입니다.

if (/iPad|iPhone|iPod/.test(userAgent)) {
  // iOS 디바이스 감지 코드
} else if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/.test(userAgent)) {
  // 안드로이드를 포함한 모바일 디바이스 감지 코드
} else if (/Chrome/.test(userAgent)) {
  // 크롬 브라우저 감지 코드
} else {
  // 기타 디바이스 감지 코드
}

User Agent를 분석하여 감지한 디바이스 또는 브라우저에 따라 원하는 동작을 수행할 수 있습니다.

2. 미디어 쿼리를 이용한 디바이스 감지

다른 방법으로는 CSS의 미디어 쿼리를 활용하여 디바이스 감지를 할 수 있습니다. window.matchMedia 메소드를 사용하여 미디어 쿼리를 실행하고, 결과 값을 확인하여 디바이스를 감지할 수 있습니다.

var isMobileDevice = window.matchMedia("(max-width: 767px)").matches;

위의 코드에서는 뷰포트 너비가 767px 이하인 경우를 모바일 디바이스로 간주합니다.

if (isMobileDevice) {
  // 모바일 디바이스 감지 코드
} else {
  // 데스크톱 디바이스 감지 코드
}

미디어 쿼리를 사용하면 유연하고 responsive한 디바이스 감지가 가능합니다.

3. 디바이스 방향 감지

모바일 디바이스의 방향을 감지하는 방법도 존재합니다. window.orientation 값을 확인하여 현재 디바이스의 방향을 알 수 있습니다. 값은 0, 90, -90, 180 등으로 반환되며, 각각은 가로, 세로, 거꾸로 세로, 거꾸로 가로의 방향을 의미합니다.

var currentOrientation = window.orientation;

switch (currentOrientation) {
  case 0:
    // 가로 방향 감지 코드
    break;
  case 90:
    // 세로 방향 감지 코드
    break;
  case -90:
    // 거꾸로 세로 방향 감지 코드
    break;
  case 180:
    // 거꾸로 가로 방향 감지 코드
    break;
}

디바이스의 방향에 따라 원하는 동작을 수행할 수 있습니다.

마무리

이번 포스트에서는 자바스크립트를 사용하여 모바일 디바이스의 감지 기능을 개발하는 방법에 대해 알아보았습니다. User Agent 문자열의 분석, 미디어 쿼리를 통한 감지, 그리고 디바이스 방향에 대한 감지 등을 배웠습니다. 다양한 디바이스에 대응하는 웹 애플리케이션을 개발할 때 이러한 디바이스 감지 기능은 매우 유용한 도구입니다.

참고 자료:

© 2018 Colin. All rights reserved.