웹 개발을 하다 보면 방문자가 어떤 브라우저를 사용 중인지, 그리고 그 버전이 몇인지 확인해야 할 때가 있습니다. JavaScript에서는 navigator 객체가 제공하는 정보를 활용하면 브라우저의 이름과 버전을 손쉽게 알아낼 수 있습니다.
브라우저 감지에 사용되는 핵심 속성
- navigator.userAgent: 브라우저가 전송하는 User-Agent 문자열로, 브라우저 종류와 렌더링 엔진 정보를 포함합니다.
- navigator.appVersion: 브라우저의 버전 및 플랫폼 관련 정보를 담고 있는 문자열입니다.
예제 코드
다음 예제는 userAgent 문자열을 분석하여 브라우저 종류를 판별하고, appVersion 값을 통해 버전 정보까지 함께 출력합니다.
<html>
<head>
<title>Browser Detection Example</title>
</head>
<body>
<script>
var userAgent = navigator.userAgent;
var opera = (userAgent.indexOf('Opera') != -1);
var ie = (userAgent.indexOf('MSIE') != -1);
var gecko = (userAgent.indexOf('Gecko') != -1);
var netscape = (userAgent.indexOf('Mozilla') != -1);
var version = navigator.appVersion;
if (opera) {
document.write("Opera 기반 브라우저");
}
else if (gecko) {
document.write("Mozilla(Gecko) 기반 브라우저");
}
else if (ie) {
document.write("IE 기반 브라우저");
}
else if (netscape) {
document.write("Netscape 기반 브라우저");
} else {
document.write("알 수 없는 브라우저");
}
// 브라우저 버전 정보 출력
document.write("<br /> 브라우저 버전 정보 : " + version);
</script>
</body>
</html>
코드 설명
navigator.userAgent 값에 특정 키워드(Opera, MSIE, Gecko, Mozilla 등)가 포함되어 있는지 indexOf() 메서드로 확인한 뒤, 조건문을 통해 해당 브라우저에 맞는 메시지를 화면에 출력합니다. 마지막 줄에서는 navigator.appVersion 값을 활용해 브라우저의 버전 정보를 추가로 표시합니다.
실행 결과 예시
구형 Internet Explorer에서 실행하면 다음과 같이 출력됩니다.
IE 기반 브라우저 브라우저 버전 정보 : 4.0 (compatible; MSIE 8.0; Windows NT 6.1)
참고 사항
최신 브라우저(Chrome, Edge, Firefox 등)의 User-Agent 문자열에는 하위 호환성을 위해 대부분 "Mozilla"와 "Gecko"라는 단어가 포함되어 있습니다. 따라서 위와 같은 단순 문자열 매칭 방식은 구형 브라우저를 감지하는 용도에만 적합하며, 최신 환경에서는 특정 API나 기능의 존재 여부를 확인하는 기능 감지(feature detection) 방식을 사용하는 것이 권장됩니다.