자바스크립트(JavaScript)로 모바일 기기를 감지하는 방법

웹 개발을 하다 보면 접속한 사용자가 모바일 기기를 사용하는지, 아니면 데스크톱 브라우저를 사용하는지 판별해야 하는 경우가 자주 발생합니다. 자바스크립트에서는 navigator.userAgent 속성을 활용하면 브라우저의 사용자 에이전트(User Agent) 문자열을 기반으로 모바일 기기를 간단하게 감지할 수 있습니다.

모바일 기기 감지 코드 예제

var device = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },

    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad/i);
    },

    any: function() {
        return (device.Android() || device.iOS());
    }
};

코드 동작 원리

위 코드는 device라는 객체를 정의하고, 세 가지 메서드로 구성됩니다.

• Android(): userAgent 문자열에 "Android"가 포함되어 있는지 대소문자를 구분하지 않고(/i 플래그) 검사합니다.
• iOS(): userAgent 문자열에 "iPhone" 또는 "iPad"가 포함되어 있는지 검사합니다.
• any(): 안드로이드 또는 iOS 기기 중 하나라도 해당하면 true를 반환하여 모바일 여부를 최종 판별합니다.

실제 사용 예시

if (device.any()) {
    // 모바일 기기일 때 실행할 로직
    console.log("모바일 기기입니다.");
} else {
    // 데스크톱 환경일 때 실행할 로직
    console.log("데스크톱 브라우저입니다.");
}

주의 사항

userAgent 기반 감지는 구현이 간편하지만, 사용자가 브라우저 설정을 변경하거나 새로운 기기·브라우저가 출시되면 정확도가 떨어질 수 있습니다. 따라서 화면 크기에 따라 레이아웃을 조정하는 CSS 미디어 쿼리나 반응형 웹 디자인과 함께 보완적으로 사용하는 것이 좋습니다.