크롬에서 더 이상 ‘유저 에이전트 스트링’을 안 쓴다는데..
얼마 전 지디넷에서 이런 기사를 봤어요.
유저 에이전트 스트링(User Agent String)은 주로 우리 웹사이트에 접속한 사용자의 환경, 그러니까 운영체제가 뭔지, 사용하는 브라우저는 뭔지 등의 정보를 담고 있는 문자열입니다. 이걸 이용해서 접속자의 환경을 파악하고 그에 맞는 콘텐츠를 제공하거나 코드를 실행하게 하는 식으로 유용하게 써왔지요~
브라우저의 개발자 도구를 열어 콘솔창에 navigator.userAgent 라고 입력하고 엔터를 쳐보면, 바로 확인할 수 있어요.
아니면 자바스크립트 코드로 이렇게 간단하게 alert을 띄워봐도 되고요.
<script>
alert(navigator.userAgent);
</script>크롬에선 이렇게↓ 나오고
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36"파이어폭스에서는 이렇게↓ 나오네요.
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:72.0) Gecko/20100101 Firefox/72.0"이걸 이용해서 간단하게 크롬인지 파이어폭스인지 알려주는 예제↓를 만들어 볼게요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>userAgent</title>
</head>
<body>
<p></p>
<script>
// 유저 에이전트 문자열을 처리하기 편하도록 모두 소문자로 변환
const useragent = navigator.userAgent.toLowerCase();
const pElem = document.querySelector('p');
let result;
if (useragent.indexOf('chrome') >= 0) {
// 'chrome'이라는 문자열이 포함되어 있는지 판별
result = '크롬임';
} else if (useragent.indexOf('firefox') >= 0) {
// 'firefox'이라는 문자열이 포함되어 있는지 판별
result = '파이어폭스임';
} else {
result = '크롬도 아니고 파이어폭스도 아님';
}
pElem.innerHTML = result;
</script>
</body>
</html>자세히 봤다면 눈치 채셨을텐데, 유저 에이전트 스트링에는 그다지 관련 없어보이는 단어들도 포함되어 있어요(예를들어 크롬에 Safari, Mozilla 등이 포함되어 있다등가).
그렇기 때문에 실제로 사용할 때는 좀 더 세심하게 다루어 주어야 하는데.. 사실 직접 다루기보다는 모더나이저(Modernizr)같은 라이브러리를 사용하는 경우가 더 많지요. 그게 편하고 더 좋으니까. 모더나이저는 사용자가 어떤 브라우저로 접속했는지를 직접 알려주지는 않지만, 보통은 그걸 알고 싶은 이유가 특정 기술의 지원 여부이기 때문에 그 목적에는 딱 부합하지요.
암튼, 뭐 앞으로는 없어질 거라니까 이제부터 굳이 유저 에이전트 스트링을 직접 사용할 일은 없겠네요~~
우리는 모더나이저같은 좋은 라이브러리를 갖다 쓰면 되는 겁니다. 모더나이저같은 훌륭한 라이브러리들은, 저런 내용들을 반영해서 알아서 지속적으로 내부가 더 견고하게 다듬어질테고요.
모더나이저가 궁금하다면 이 영상↓을 참고해 보세요.
