userAgent란?
다들 userAgent가 무엇인지 알고 계시나요?
userAgent는 간단히 말하자면 사용자가 사용하고 있는 OS 종류와 버전, 웹 브라우저의 정보 등을 담고 있는 일종의 자기소개 같은 개념입니다.
기본적으로 HTTP 헤더에 포함되며, 자바스크립트의 navigator.userAgent 속성으로도 접근할 수 있습니다.
그럼 이러한 userAgent는 왜 만들어졌고 어떻게 사용될까요?
userAgent는 웹 브라우저별로 맞춤화된 서비스를 제공하기 위해 만들어졌습니다.
특정 브라우저에서만 제공하는 기능이 있는 경우, 서버에서는 userAgent를 읽어서 분기 처리를 해줍니다.
혹은 로그를 남길 때 사용자가 어느 기기, 어떤 환경에서 접근했는지 정보를 얻어낼 때도 사용할 수 있습니다.
userAgent는 왜 이렇게 복잡할까?
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
여기서 문제! 이 userAgent는 어떤 브라우저의 userAgent 일까요?
정답은 크롬입니다. 근데 왜 크롬 브라우저 userAgent에 Mozilla도 써 있고 AppleWebKit, Chrome, Safari도 들어있을까요?
한 눈에 보기에도 쓸데없어 보이는 정보가 너무 많습니다.
userAgent는 왜 이렇게 복잡한 걸까요?
길어진 이유와 브라우저의 역사
userAgent가 복잡해진 이유를 알기 위해서는 브라우저의 역사를 함께 알아봐야 합니다.
초기 웹 브라우저 Mosaic의 등장
초기 인터넷 환경에서는 지금처럼 웹 브라우저가 다양하지 않았습니다.
1993년, 초기 웹 브라우저인 Mosaic가 등장하면서 브라우저에 userAgent라는 개념이 생겼습니다.
Mosaic만 존재하던 시절의 userAgent는 브라우저명/버전으로만 이루어져 있는 간결한 형태였습니다.
NCSA Mosaic/3.0
NetScape의 등장
1994년, NetScape 브라우저가 출시됩니다.
NetScape의 초기 이름은 Mozilla였고, Mosaic Killer라는 뜻을 담고 있습니다.
혐오성이 짙은 이름 때문인지 나중에 NetScape라는 이름으로 변경되었습니다.
NetScape의 userAgent는 Mosaic와 유사하지만 브라우저명/버전뿐만 아니라 OS 및 암호화 관련 정보가 추가되었습니다.
Mozilla/5.0 (Windows; U; Win 9x 4.90; SG; rv:1.9.2.4)
브라우저명은 변경되었지만 그대로 Mozilla라는 이름을 사용하고 있습니다.
그리고 Netscape부터 Mosaic에서 제공하지 않던 frame 태그를 지원하기 시작합니다.
frame 태그는 iframe의 조상님으로, 현재 HTML5에서는 지원되지 않습니다.
Netscape의 점유율이 폭발적으로 높았기 때문에, 웹 서버들은 userAgent 스니핑을 통해 userAgent 내에 Mozilla라는 문자열이 들어가면 NetScape 브라우저로 인식하여 이 경우에만 프레임을 지원하도록 페이지를 만들어 제공하기 시작했습니다.
Internet Explorer 출시와 복잡해지는 userAgent
1995년, 프레임을 지원하는 새로운 브라우저인 Internet Explorer가 출시되었습니다.
위에서 설명드렸듯이 이 시절에는 Netscape 브라우저의 점유율이 절대적이었기 때문에, 많은 웹 서버들이 userAgent를 스니핑하여 Netscape 브라우저인 경우에만 frame 태그를 지원했습니다.
IE가 프레임을 제공하기 위해서는 많은 웹 서버들에게 자신들의 브라우저도 프레임을 지원하고 있다고 알려주고, 웹 서버가 IE로 접속했을 때도 프레임을 지원하도록 코드를 수정해야 하는데, 듣기만 해도 굉장히 오래 걸릴 것 같죠?
결국 IE는 빠른 출시를 위해 userAgent 앞에 Mozilla/버전명을 붙이면서 NetScape 브라우저인 척을 하게 됩니다.
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0)
이 시기를 시작으로 userAgent가 점점 복잡해지기 시작하며, 이 Mozilla/5.0은 브라우저 기능 호환을 위해 현재까지도 남아있게 되었습니다.
Netscape → Gecko, Firefox의 등장
Microsoft는 windows에 IE를 끼워넣기 시작하면서 빠른 속도로 점유율을 높였습니다.
그렇게 피튀기는 점유율 경쟁 끝에, IE가 100%에 가까운 점유율을 차지하게 되면서 NetScape 브라우저는 망하게 됩니다.
이후 NetScape 개발자들은 NetScape의 브라우저 렌더링 엔진인 Gecko를 오픈소스로 발표합니다.
또한, Netscape 브라우저는 이후에 Firefox라는 이름으로 다시 태어납니다.
Mozilla/5.0(Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0
이 때부터 기존 userAgent 뒤에 새로운 정보가 추가되는데요,
Gecko 엔진을 사용했으니 Gecko/버전명이 추가되고, Firefox/버전명도 추가되었습니다.
역시 Firefox도 Mozilla 브라우저인 척을 하기 위해 userAgent 앞에 Mozilla/5.0라는 문자열을 사용합니다.
멋있지만 힘이 없는 Opera의 등장
이 시기에 Opera가 등장합니다.
Opera는 이전 브라우저들처럼 Mozilla를 흉내내는 패러다임을 따르지 않고 자체적인 userAgent를 만들었습니다.
Opera/9.51 (Windows NT 5.1; U; en)
이대로만 진행됐으면 좋았겠지만 역시나 브라우저 호환 문제에 부딪칩니다.
결국 Opera 9버전부터 기존 userAgent, Firefox, IE 중 사용자가 흉내내고 싶은 브라우저를 선택할 수 있는 메뉴를 제공하게 되었습니다.
Opera/9.51 (Windows NT 5.1; U; en) // 기존
Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.51 // Firefox
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.51 // IE
이 선택 메뉴가 궁금해서 Opera를 설치해봤는데, 아쉽게도 지금은 해당 메뉴가 사라지고 대신 Chrome처럼 개발자 도구에서 userAgent를 수정할 수 있는 기능으로 대체되었습니다.
Konqueror 브라우저와 KHTML 엔진의 등장
시간이 흐르면서 Gecko 엔진으로 만들어진 다양한 브라우저들이 등장합니다.
이 시점인 1996년에 리눅스 기반의 KHTML 엔진을 사용한 Konqueror 브라우저가 등장합니다.
(정복자라는 뜻의 Conqueror에서 따옴)
KHTML 엔진도 IE와 비슷한 문제에 직면하는데, Gecko 엔진이 절대적인 상황에서 웹 서버들이 자신들의 엔진을 지원할 수 있도록 해야 했습니다.
결국 Gecko와 비슷한 엔진이다~ 라는 의미로 like Gecko라는 문자열을 붙이게 됩니다.
Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)
KHTML 기반의 Webkit 엔진과 Safari의 등장
드디어 2003년, Apple에서 Webkit 엔진 기반의 Safari를 출시합니다.
Webkit 엔진은 앞서 설명드린 KHTML 엔진 기반으로 만들어졌고, 애플이 여러 기능들을 추가하면서 별도의 엔진으로 분리되었습니다.
여기서도 앞서 발생한 지원을 어떻게 할 것인가? 에 대한 문제에 직면했고, 결국 또 userAgent에 AppleWebKit/버전명 정보가 추가되면서 더 길어지고 말았습니다.
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko) Safari/125.1
Chrome을 포함한 모던 브라우저들의 등장
2008년 이후, Chrome을 포함한 많은 모던 브라우저들이 출시됩니다.
Chrome은 Safari와 비슷했고, Safari에 최적화된 페이지들을 제공하기 위해 Safari인 척을 하기로 결심합니다.
그래서 결국 Gecko를 흉내내는 KHTML을 흉내내는 AppleWebkit을 사용하는 Mozilla를 흉내내는 Safari를 흉내내는 크롬 브라우저의 userAgent가 완성되었습니다.
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
더 끔찍한 사실은 Chrome 이후에 나온 크로미움 기반 브라우저인 Edge, Whale, 삼성 브라우저는 Chrome의 userAgent에 더해서 자신들의 브라우저명/버전명이 추가됩니다.
| 브라우저명 | userAgent |
| 삼성 브라우저 | Mozilla/5.0 (Linux; Android 12; SAMSUNG SM-G977N) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/22.0 Chrome/111.0.5563.116 Mobile Safari/537.36 |
| Edge | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.67 |
| Whale | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Whale/3.22.205.18 Safari/537.36 |
앞으로 엣지나 웨일 기반 브라우저가 나오면 더 길어질 수도 있겠죠?
역사 요약
이 기나긴 역사를 요약하면 다음과 같습니다.
- IE가 먼저 Netscape(Mozilla)인 척을 합니다.
- Firefox도 따라서 Mozilla인 척을 합니다.
- KHTML 엔진은 Gecko인 척을 합니다.
- KHTML 엔진 기반인 Webkit 엔진도 Gecko인 척을 합니다.
- 이후 출시된 브라우저들이 모두 Mozilla인 척을 합니다.
- Chrome이 safari인 척을 합니다.
- 크로미움 기반 브라우저들이 Chrome인 척을 합니다.
참고 링크
웹 브라우저 속 숨겨진 중요 기능, 사용자 에이전트(User Agent)란? - wishket
사용자 에이전트 (User Agent)란, 우리가 사용하는 웹 브라우저 속에 숨겨진 중요한 기능 중 하나를 말합니다. 간단히 말해 내가 어떤 OS를 쓰고 있고, 버전은 어떤 버전인지 웹 브라우저의 정보는
blog.wishket.com
브라우저의 사용자 에이전트는 왜 이렇게 복잡하게 생겼을까? - 재그지그의 개발 블로그
브라우저의 사용자 에이전트(User Agent)에 얽힌 역사적인 이야기를 이해하기 쉽게 정리해봅니다.
wormwlrm.github.io
WebAIM: History of the browser user-agent string
In the beginning there was NCSA Mosaic, and Mosaic called itself NCSA_Mosaic/2.0 (Windows 3.1), and Mosaic displayed pictures along with text, and there was much rejoicing. And behold, then came a new web browser known as “Mozilla”, being short for “
webaim.org
History of User Agent Header in Http Requests
The user-agent is a line of text for identifying the browser you are using, its version number and some system details such as operating…
medium.com
'Frontend' 카테고리의 다른 글
| Next.js - Warning: Prop `...` did not match 이슈 해결 (1) | 2023.11.27 |
|---|
