웹사이트에서 최신 첨단 기능을 사용하고 있다면, 일부 브라우저(특히 인터넷 익스플로러처럼 구형이거나 레거시에 해당하는 브라우저)와 호환되지 않을 수 있습니다. 다행히 JavaScript를 활용하면 사이트 방문자가 어떤 브라우저를 사용하는지 감지할 수 있고, 이를 바탕으로 해당 브라우저와 호환되는 버전의 웹사이트로 방문자를 리디렉션할 수 있습니다.
Chrome을 사용하지 않는 사용자 리디렉션하기
예를 들어 웹사이트의 최신 버전이 현재 Chrome 브라우저에서만 100% 정상 작동한다고 가정해 보겠습니다. 방문자가 버그 없는 경험을 하도록 보장하려면, Chrome을 사용하지 않는 모든 방문자를 다른 버전의 웹사이트로 안내하는 것이 좋습니다.
웹사이트의 <head> 섹션에 아래 코드를 추가하세요. 외부 .js 파일로 분리해도 무방합니다:
if (!!window.chrome) {
window.location = "https://yourdomain.com"
} else {
window.location = "https://yourdomain.com/legacy-version"
}방문자가 왜 리디렉션되는지 간단히 설명해 주고, 플랫폼의 최상의 경험을 원한다면 Chrome 브라우저 사용을 권장하는 메시지를 함께 보여주는 것도 좋은 방법입니다:
if (!!window.chrome) {
window.location = "https://yourdomain.com"
alert("You’re using Chrome")
} else {
alert(
"Our apologies, at the moment you have to use Chrome to use the latest version of our website. You’ll be redirected to our legacy website (don’t worry it works just fine!)."
)
window.location = "https://yourdomain.com/legacy-site"
}이제 Chrome을 사용하지 않는 모든 사용자는 코드에서 지정한 window.location 값으로 자동 리디렉션됩니다.
정상적으로 작동하는지 확인하려면 CodePen 예제를 Chrome에서 먼저 열어본 뒤, Firefox나 Opera 등 다른 브라우저에서 다시 열어 결과를 비교해 보세요.
실제 서비스에 이 코드를 적용할 계획이라면, alert("You’re using Chrome") 부분은 반드시 제거하세요. 이 알림은 데모용으로만 추가된 것입니다.
이 튜토리얼의 전체 코드는 여기에서 직접 수정하며 테스트해 볼 수 있습니다.
브라우저 감지 시 유의할 점
브라우저 감지 기술은 빠르게 변화하고 발전합니다. 브라우저마다 요구되는 감지 방식이 다르며, 사용자가 노트북, 태블릿, 스마트폰 등 어떤 기기로 접속하는지도 결과에 영향을 줄 수 있습니다.
특히 위 예제에서 사용한 window.chrome 속성은 Chromium 기반 브라우저(최신 Microsoft Edge, Opera 등)에서도 존재하기 때문에, Chrome 전용 감지가 필요하다면 사용자 에이전트(user agent) 문자열 검사 등 더 정교한 방법을 함께 고려하는 것이 좋습니다.
최신 브라우저 감지 기술의 동향을 놓치지 않으려면, StackOverflow에서 활발하게 논의되고 있는 관련 스레드를 주기적으로 확인해 보는 것을 추천합니다.