모바일 애플리케이션 또는 웹사이트를 개발할 때, 사용자의 모바일 디바이스의 장치 정보를 확인해야 할 때가 있습니다. 예를 들어, 사용자의 기기가 안드로이드인지 아이폰인지 확인하거나, 화면 해상도, 터치 지원 여부 등의 정보를 얻을 수 있습니다.

이번 포스트에서는 자바스크립트를 사용하여 모바일 디바이스의 장치 정보를 확인하는 방법에 대해 알아보겠습니다.

1. UserAgent 확인하기

UserAgent는 웹 브라우저가 서버로 전송하는 요청 헤더 중 하나로, 클라이언트의 소프트웨어 및 하드웨어 정보를 나타내는 텍스트입니다. 이를 이용하여 사용자의 모바일 디바이스 정보를 파악할 수 있습니다.

var userAgent = navigator.userAgent;

위의 코드에서 navigator.userAgent를 사용하여 UserAgent를 확인합니다.

2. 모바일 디바이스 판별하기

UserAgent를 이용하여 모바일 디바이스인지 여부를 판별할 수 있습니다. 일반적으로, 모바일 브라우저의 UserAgent에는 “Mobile”이라는 문자열이 포함되어 있습니다.

var isMobile = /Mobile/i.test(userAgent);

위의 코드에서 정규식 /Mobile/i를 사용하여 UserAgent에 “Mobile”이라는 문자열이 포함되어 있는지 확인하여 isMobile 변수에 할당합니다.

3. 기기 종류 확인하기

UserAgent를 이용하여 기기 종류를 확인할 수 있습니다. 일반적으로, 안드로이드 기기의 UserAgent에는 “Android”라는 문자열이 포함되어 있고, 아이폰의 UserAgent에는 “iPhone”이라는 문자열이 포함되어 있습니다.

var isAndroid = /Android/i.test(userAgent);
var isiPhone = /iPhone/i.test(userAgent);

위의 코드에서 각각의 정규식 /Android/i와 /iPhone/i를 사용하여 UserAgent에 해당하는 문자열이 포함되어 있는지 확인하여 isAndroid와 isiPhone 변수에 할당합니다.

4. 기타 정보 확인하기

UserAgent를 이용하여 모바일 디바이스의 기타 정보도 확인할 수 있습니다. 예를 들어, 화면의 가로 및 세로 해상도, 터치 이벤트 지원 여부 등을 확인할 수 있습니다. 아래의 코드는 이러한 정보를 확인하는 예시입니다.

var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
var touchSupport = ('ontouchstart' in window);

위의 코드에서 window.screen.width와 window.screen.height를 사용하여 화면의 가로 및 세로 해상도를 확인하고, 'ontouchstart' in window를 사용하여 터치 이벤트 지원 여부를 확인합니다.

마무리

위에서 소개한 방법들을 활용하여 자바스크립트를 사용하여 모바일 디바이스의 장치 정보를 확인할 수 있습니다. 이를 통해 개발 중인 애플리케이션 또는 웹사이트에 모바일 특화된 기능을 추가하거나, 사용자 경험을 향상시킬 수 있습니다.

더 자세한 정보는 MDN을 참고하세요.