javascript 브라우저 탐지

브라우저 탐지 방법은 웹 개발에서 항상 뜨거운 쟁점입니다. 이 논쟁은 특히 과거에 가장 인기 있었던 넷스케이프 내비게이터의 등장으로 더 일찌감치 시작되었습니다. 당시 넷스케이프 2.0은 다른 웹 브라우저보다 훨씬 발달하여 웹사이트가 사용자에게 정보를 보내기 전에 사용자 에이전트 문자열을 확인하는 것도 가능했습니다. 이 때문에 많은 브라우저 공급사, 특히 마이크로소프트에서는 어쩔 수 없이 당시 쓰였던 브라우저 탐지 방법에 맞춰 사용자 에이전트 문자열을 넣게 되었습니다.

 

1. 사용자 에이전트 탐지

요즘에는 클라이언트에서 브라우저를 주로 탐지하지만, 쵝에는 서버에서 사용자 에이전트 문자열을 이용하여 브라우저를 탐지했습니다. 당시에는 단지 사용자 에이전트 문자열을 기준으로 서버에서 특정 브라우저의 접속을 막아 사이트의 내용을 아예 보여주지 않았습니다.

이때 가장 큰 혜택을 본 건 넷스케이프였습니다.

 

넷스케이프는 당시 가장 성능이 뛰어난 브라우저였고 그래서 웹 사이트가 넷스케이프를 기준으로 제작되었습니다. 당시의 넷스케이프의 사용자 에이전트 문자열은 다음과 같습니다.

Mozilla/2.0 (Win95; I)

최초의 IE는 서버의 내용을 정상적으로 볼 수 있도록 넷스케이프의 사용자 에이전트 문자열을 많은 부분 따라 했습니다. 당시 사용자 에이전트 탐지는 'Mozilla'라는 단어와 슬래시로 버전을 표기했는지를 확인했기에 IE는 다음처럼 사용자 에이전트 문자열을 추가했습니다.

Mozilla/2.0 (compatible; MSIE 3.0; Windows 95)

IE의 등장으로 모든 사람이 쓰던 사용자 에이전트 문자열 탐지는 이 새로운 브라우저를 넷스케이프로 인지하게 됐습니다. 이때부터 새로운 브라우저는 기존 브라우저의 사용자 에이전트 문자열을 따라 하는 게 유행이 됐고 이 유행은 크롬까지 이어져 크롬의 사용자 에이전트 문자열은 사파리의 문자열을 포함하고 있습니다. 

 

여기서 계속 따라가 보면 사파리의 문자열은 파이어폭스의 문자열을 포함하고 파이어폭스의 문자열은 넷스케이프 문자열을 포함합니다.

 

자바스크립트의 인기가 높아지기 시작한 2005년도로 넘어가겠습니다. 서버에 전달되는 브라우저의 사용자 에이전트 문자열은 자바스크립트에서 navigator.userAgent를 통해 접근할 수 있습니다. 이때쯤부터 주로 서버에서 수행하던 사용자 에이전트 문자열 탐지가 웹 페이지의 자바스크립트로 넘어왔습니다.

예제는 다음과 같습니다.

// 나쁜 예
if(navigator.userAgent.indexOf("MSIE") > -1) {
	// IE do Something
}else{
	// not IE do Something
}

더 많은 웹사이에서 자바스크립트로 사용자 에이전트 탐지를 하게 되면서 브라우저 탐지에 실패해 문제가 발생하는 사이트가 여럿 나오기 시작했습니다. 하지만 이 문제는 거의 십 년 전에 서버에서 겪던 문제가 자바스크립트에서도 다시 발생한 것입니다.

 

가장 큰 문제는 사용자 에이전트 문자열 파싱이 어렵다는 점인데 이는 브라우저에서 호환성 보장을 위해 다른 브라우저의 사용자 에이전트 문자열을 복사한 것이 원인입니다. 새로운 브라우저가 나오면 사용자 에이전트 문자열 탐지 코드를 업데이트해야 합니다. 그런데 브라우저가 출시된 시기와 이에 맞게 수정된 코드가 반영되는 시기에 간격이 있으면 문제가 발생하여 매우 많은 사용자가 불편을 겪게 됩니다.

 

그렇다고 사용자 에이전트 문자열을 효율적으로 사용할 방법이 전혀 없는 것은 아닙니다. 자바스크립트와 서버에서 사용할 수 있게 잘 만들어진 라이브러리는 합리적인 메커니즘으로 사용자 에이전트를 탐지합니다.

하지만 이들 라이브러리도 브라우저가 계속 발전하고 새로운 브라우저가 나올 때마다 꾸준히 업데이트해야 합니다.

 

즉 장기적인 관점에서 보면 사용자 에이전트 문자열을 사용한 탐지는 유지보수 면에서 좋지 않습니다.

 

사용자 에이전트 탐지는 자바스크립트의 올바른 동작을 위해 얼쩔 수 없이 선택하는 최후의 방법 이르면 사용해야 합니다. 만약 사용자 에이전트 탐지를 사용해야 한다면 오래된 브라우저에서만 사용하도록 하는 것이 안전합니다. 예를 들어 IE8 이전 버전에서만 수행해야 하는 특수한 코드가 있다면 IE8 이전 버전만 탐지해야 하며 IE9 이상 버전은 탐지해서는 안됩니다.

if(isInternetExplorer8OrEarlier){
    //IE8 이전 버전 처리
}else{
    // 그 외 다른 브라우저에서 처리할 코드
}

IE8 이전 버전의 사용자 에이전트 문자열은 이미 정해진 것이니 예제처럼 브라우저를 탐지하면 나중에 IE25가 나온다 해도 이 코드를 추가적으로 수정하지 않고도 문제없이 사용할 수 있습니다. 하지만 IE9 이상 버전까지 탐지하도록 코드를 작성한다면 꼬박꼬박 업데이트하느라 고생하게 될지도 모릅니다.

 

그럼 이만.

끝.