[JavaScript] 자바스크립트 브라우저 종류 체크 (User-Agent) - 레거시부터 동작 원리까지

웹 프론트엔드 개발을 하다 보면 접속한 사용자가 어떤 브라우저(크롬, 사파리, 엣지, 파이어폭스 등)를 사용하고 있는지 파악해야 할 때가 있습니다. 브라우저마다 지원하는 CSS 속성이나 자바스크립트 엔진(V8, WebKit 등)의 특성이 미세하게 다르기 때문에, 특정 브라우저에서만 발생하는 버그를 잡거나 안내 팝업을 띄우기 위해서죠.

과거 인터넷 익스플로러(IE)가 웹 표준을 흩트려 놓던 시절에는 이 브라우저 판별 로직이 선택이 아닌 필수였습니다. 오늘은 자바스크립트의 navigator.userAgent 객체를 활용하여 사용자의 브라우저를 체크하는 고전적이고 확실한 로직의 원리를 상세히 뜯어보고자 합니다.

---

1. 핵심 원리: User-Agent 문자열 분석하기
웹 브라우저가 서버에 접속할 때는 "나는 윈도우 운영체제를 쓰는 크롬 브라우저야"라는 신분증 같은 문자열을 몰래 함께 보냅니다. 이를 User-Agent(유저 에이전트)라고 부릅니다.

자바스크립트에서는 navigator.userAgent 명령어를 통해 이 문자열을 가져올 수 있습니다. 가져온 문자열 안에 'chrome', 'safari', 'msie' 같은 특정 브라우저의 고유 단어가 포함되어 있는지를 indexOf() 메서드로 찾아내어 브라우저 종류를 판별하는 것이 핵심 원리입니다.

---

2. 브라우저 판별 자바스크립트 코드 (IE 6~8 포함 레거시 지원)
아래는 과거 웹 호환성을 맞추기 위해 실무에서 널리 사용되었던 브라우저 체크 스크립트입니다.

// 브라우저 User-Agent 문자열을 소문자로 변환하여 저장 var Browser = {     a: navigator.userAgent.toLowerCase() }; Browser = {     // IE 고유의 조건부 컴파일(Conditional Compilation)을 이용한 IE 판별법     ie : /*@cc_on true || @*/ false,           // User-Agent 문자열에 해당 브라우저 이름이 포함되어 있는지 확인 (-1이 아니면 포함됨)     ie6 : Browser.a.indexOf('msie 6') != -1,     ie7 : Browser.a.indexOf('msie 7') != -1,     ie8 : Browser.a.indexOf('msie 8') != -1,          opera : !!window.opera,     safari : Browser.a.indexOf('safari') != -1,     safari3 : Browser.a.indexOf('applewebkit/5') != -1,     mac : Browser.a.indexOf('mac') != -1,     chrome : Browser.a.indexOf('chrome') != -1,     firefox : Browser.a.indexOf('firefox') != -1 }; // 판별된 브라우저 결과에 따라 알림창(alert)을 띄우는 함수 function whatKindOfBrowser() {     if (Browser.chrome) {         alert("It is chrome browser");     } else if (Browser.ie6) {         alert("It is ie6 browser");     } else if (Browser.ie7) {         alert("It is ie7 browser");     } else if (Browser.ie8) {         alert("It is ie8 browser");     } else if (Browser.opera) {         alert("It is opera browser");     } else if (Browser.safari) {         alert("It is safari browser");     } else if (Browser.safari3) {         alert("It is safari3 browser");     } else if (Browser.mac) {         alert("It is mac browser");     } else if (Browser.firefox) {         alert("It is firefox browser");     } else {         alert("It is maybe ie");     } }

 

코드 상세 분석 및 특징
toLowerCase(): 대소문자가 섞여 들어오는 변수를 막기 위해 모든 문자열을 소문자로 통일하여 검사의 정확도를 높였습니다.

indexOf() != -1: 해당 문자열을 찾지 못하면 -1을 반환하는 특성을 이용해, 브라우저 키워드가 문자열 내에 존재하는지(true/false)를 판단합니다.

/*@cc_on true || @*/ false: 과거 IE에서만 동작했던 '조건부 컴파일' 주석을 활용한 아주 고전적이고 기발한 IE 판별 해킹 기법입니다. 다른 브라우저는 단순 주석으로 무시하지만, IE는 이를 해석하여 true를 반환합니다.

(HTML 본문에 <input type="button" value="브라우저 체크" onclick="whatKindOfBrowser();" /> 형태로 버튼을 만들어 클릭 이벤트를 통해 테스트할 수 있습니다.)

---

3. 현대 웹 환경에서의 주의사항 (User-Agent의 함정)
위와 같은 User-Agent 기반의 판별법(User-Agent Sniffing)은 오랫동안 사랑받았지만, 최신 웹 개발 트렌드에서는 주의해서 사용해야 합니다.  

가장 큰 이유는 브라우저들이 자신의 정체를 속이기 시작했기 때문입니다. 예를 들어, 구글 크롬 브라우저의 User-Agent를 찍어보면 자기 자신을 'Chrome'이라고도 하지만, 호환성을 위해 'Mozilla', 'AppleWebKit', 심지어 'Safari'라는 단어까지 모두 포함해서 서버에 전송합니다.  

따라서 if-else 문으로 분기 처리를 할 때 검사하는 순서가 매우 중요합니다. 크롬보다 엣지(Edg)나 오페라(OPR)를 먼저 검사해야 다른 브라우저로 오인하는 논리적 오류를 막을 수 있습니다.