웹 개발을 하다 보면 사용자가 모바일 기기로 접속했는지 여부에 따라 다른 동작을 처리해야 하는 경우가 자주 있습니다. 이번 글에서는 JavaScript의 navigator.userAgent 속성과 정규식(Regular Expression)을 활용해 모바일 브라우저를 간단하게 감지하는 방법을 알아보겠습니다.
핵심 원리
브라우저는 자신의 정보를 담고 있는 userAgent 문자열을 제공합니다. 이 문자열에 'iPhone', 'iPad', 'iPod', 'Android' 같은 모바일 기기 키워드가 포함되어 있는지 정규식으로 검사하면 해당 기기가 모바일인지 판별할 수 있습니다.
예제 코드
다음은 버튼을 클릭했을 때 현재 접속 환경이 모바일 기기인지 확인하여 결과를 화면에 표시하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Detecting a mobile browser</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to see if it is a mobile device or not</h3>
<script>
let fillEle = document.querySelector(".sample");
let date = new Date();
let primitiveDef = date[Symbol.toPrimitive]("default");
let primitiveNum = date[Symbol.toPrimitive]("number");
document.querySelector(".Btn").addEventListener("click", () => {
var checkMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (checkMobile) {
fillEle.innerHTML = "This is a mobile device";
}
else fillEle.innerHTML = "This is not a mobile device";
});
</script>
</body>
</html>코드 설명
핵심 로직은 다음 한 줄입니다.
var checkMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
- navigator.userAgent: 현재 브라우저의 사용자 에이전트 정보를 담은 문자열을 반환합니다.
- /iPhone|iPad|iPod|Android/i: 대소문자 구분 없이(i 플래그) iPhone, iPad, iPod, Android 중 하나라도 포함되는지 검사하는 정규식입니다.
- .test(): userAgent 문자열에서 패턴과 일치하는 부분이 있으면 true, 없으면 false를 반환합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 접속 중인 기기가 모바일인지 아닌지 결과가 표시됩니다.
참고 사항
userAgent 기반 감지는 간편하지만, 일부 브라우저나 기기에서는 userAgent 문자열이 위조되거나 예상과 다르게 표시될 수 있다는 점을 유의해야 합니다. 더 안정적인 판별이 필요하다면 화면 크기(window.innerWidth)나 CSS 미디어 쿼리, 최신 방식인 User-Agent Client Hints API 등을 함께 활용하는 것이 좋습니다.