JavaScript로 브라우저 종류·IE 버전 체크하기 – userAgent 완벽 정리

FRONTEND / LEGACY SUPPORT

JavaScript로 브라우저 종류 & IE 버전 체크하기 (userAgent 활용)

레거시 웹 프로젝트 유지보수를 위한 필수 가이드. navigator.userAgent를 분석하여 IE 버전별 분기 처리와 최신 브라우저를 구분하는 JavaScript 실무 코드를 정리했습니다.

📑 목차

• 1. 브라우저 & IE 버전 체크 함수 전체 코드
• 2. IE 버전 체크 로직 자세히 보기
• 3. 크롬, 파이어폭스 등 다른 브라우저 구분
• 4. 사용 예시: 브라우저에 따라 코드 분기 처리
• 5. userAgent 기반 브라우저 체크 시 주의사항
• 6. 정리

1. 브라우저 & IE 버전 체크 함수 전체 코드

먼저, 사용자 브라우저를 문자열로 반환하는 함수를 하나로 정리해보겠습니다. 이 함수는 IE, Chrome, Firefox 등 다양한 브라우저 환경을 식별하는 데 사용됩니다.

function getBrowserName() {
  var _ua = navigator.userAgent;
  var rv = -1;

  // -------------------------
  // 1) IE 11, 10, 9, 8 체크 (Trident 기반)
  // -------------------------
  var trident = _ua.match(/Trident\/(\d\.\d)/i);
  if (trident !== null) {
    if (trident[1] === "7.0") return "IE11";
    if (trident[1] === "6.0") return "IE10";
    if (trident[1] === "5.0") return "IE9";
    if (trident[1] === "4.0") return "IE8";
  }

  // -------------------------
  // 2) IE 7 체크
  // -------------------------
  if (navigator.appName === "Microsoft Internet Explorer") {
    return "IE7";
  }

  // -------------------------
  // 3) 그 외 브라우저 (Chrome, Firefox, Safari 등)
  // -------------------------
  var agt = _ua.toLowerCase();

  if (agt.indexOf("chrome") !== -1) return "Chrome";
  if (agt.indexOf("opera") !== -1) return "Opera";
  if (agt.indexOf("staroffice") !== -1) return "Star Office";
  if (agt.indexOf("webtv") !== -1) return "WebTV";
  if (agt.indexOf("beonex") !== -1) return "Beonex";
  if (agt.indexOf("chimera") !== -1) return "Chimera";
  if (agt.indexOf("netpositive") !== -1) return "NetPositive";
  if (agt.indexOf("phoenix") !== -1) return "Phoenix";
  if (agt.indexOf("firefox") !== -1) return "Firefox";
  if (agt.indexOf("safari") !== -1) return "Safari";
  if (agt.indexOf("skipstone") !== -1) return "SkipStone";
  if (agt.indexOf("netscape") !== -1) return "Netscape";
  if (agt.indexOf("mozilla/5.0") !== -1) return "Mozilla";

  // 매칭되는 것이 없을 경우
  return "Unknown";
}

위 함수는 getBrowserName()을 호출하면 "IE11", "Chrome", "Firefox" 같은 문자열을 반환합니다.

2. IE 버전 체크 로직 자세히 보기

2-1. Trident 엔진으로 IE 8 ~ 11 구분

IE 8 이상 버전에서는 Trident 렌더링 엔진 버전으로 실제 IE 버전을 구분할 수 있습니다.

• Trident/7.0 → IE11
• Trident/6.0 → IE10
• Trident/5.0 → IE9
• Trident/4.0 → IE8

코드에서는 다음과 같이 정규식을 이용해 Trident 버전을 추출합니다.

var trident = _ua.match(/Trident\/(\d\.\d)/i);
if (trident !== null) {
  if (trident[1] === "7.0") return "IE11";
  if (trident[1] === "6.0") return "IE10";
  if (trident[1] === "5.0") return "IE9";
  if (trident[1] === "4.0") return "IE8";
}

2-2. IE7 이하 브라우저 구분

그 이전 버전(IE7 등)은 navigator.appName 값이 Microsoft Internet Explorer 인지를 체크해서 구분합니다.

if (navigator.appName === "Microsoft Internet Explorer") {
  return "IE7";
}

현재는 IE 자체가 공식적으로 지원 종료되었지만, 레거시 사내 시스템을 유지하는 경우 이런 방식으로 분기 처리가 남아 있는 경우가 많습니다.

3. 크롬, 파이어폭스 등 다른 브라우저 구분

IE가 아닌 나머지 브라우저는 userAgent 문자열에 포함된 키워드를 이용해서 간단하게 구분합니다.

var agt = _ua.toLowerCase();

if (agt.indexOf("chrome") !== -1) return "Chrome";
if (agt.indexOf("opera") !== -1) return "Opera";
if (agt.indexOf("firefox") !== -1) return "Firefox";
if (agt.indexOf("safari") !== -1) return "Safari";
// 그 외 Star Office, WebTV, Netscape 등도 순서대로 체크

실무에서는 대부분 Chrome / Edge / Firefox / Safari 정도만 체크하면 충분하지만, 위 예제처럼 다양한 브라우저 이름을 구분하도록 확장할 수도 있습니다.

4. 사용 예시: 브라우저에 따라 코드 분기 처리

이제 실제 코드에서 브라우저 이름에 따라 분기 처리를 해보겠습니다.

var browser = getBrowserName();

if (browser.indexOf("IE") === 0) {
  // IE 전용 코드
  console.log("현재 브라우저는 Internet Explorer 계열입니다: " + browser);
  // 예: 폴리필 로딩, IE 전용 CSS 적용 등
} else if (browser === "Chrome") {
  console.log("Chrome 브라우저입니다.");
} else if (browser === "Firefox") {
  console.log("Firefox 브라우저입니다.");
} else {
  console.log("기타 브라우저: " + browser);
}

이렇게 감싸두면 프로젝트 전역에서 getBrowserName() 한 함수만 호출해 브라우저 구분을 처리할 수 있습니다.

5. userAgent 기반 브라우저 체크 시 주의사항

마지막으로, userAgent 기반 체크를 사용할 때 꼭 알아둬야 할 점들이 있습니다.

• 1) userAgent 문자열은 언제든지 변경될 수 있음
  브라우저 벤더가 정책을 바꾸면 문자열 구조가 달라질 수 있습니다.
• 2) Edge(크로미움)처럼 Chrome과 비슷한 문자열을 가지는 브라우저 존재
  요즘 브라우저들은 Chrome 토큰을 같이 포함하는 경우가 많아서 단순 포함 여부만으로는 정확한 구분이 어려울 수 있습니다.
• 3) 가능한 경우, 기능(Feature) 기반 체크를 우선
  예를 들어 fetch 지원 여부, flexbox 지원 여부를 직접 체크하는 방법이 더 안정적입니다.
• 4) 그래도 레거시 IE 분기에는 여전히 유용
  사내 레거시 프로젝트처럼 “IE만 예외 처리”해야 하는 경우, 위와 같은 IE 버전 체크 로직은 여전히 실무에서 사용됩니다.

6. 정리

• navigator.userAgent를 사용하면 브라우저 종류와 IE 버전을 어느 정도까지 구분할 수 있습니다.
• IE8 ~ IE11은 Trident 버전으로, IE7 이하는 navigator.appName으로 체크합니다.
• Chrome, Firefox, Safari 등은 userAgent 문자열에 포함된 키워드로 구분합니다.
• 신규 프로젝트에서는 가능하면 기능 감지(Feature Detection)를 우선하고, 레거시 호환용으로만 userAgent 체크를 유지하는 것을 추천합니다.

💡 Tip: 레거시 환경에서 브라우저별 버그를 잡거나, IE 전용 코드를 분리하고 싶다면 위 getBrowserName() 함수를 공통 유틸로 두고 활용해 보세요.