“User-Agent”, 내가 크롬을 쓰는지 서버는 어떻게 알까?

들어가며

웹사이트를 이용하다 보면 신기한 일이 있다.

같은 주소로 접속했는데 어떤 브라우저에서는 화면이 다르게 나오고, 모바일로 접속하면 모바일 전용 화면이 나타난다.

서버는 내가 어떤 브라우저를 사용하는지 어떻게 알고 있는 걸까?

이때 등장하는 것이 바로 User-Agent, 흔히 UA라고 부르는 값이다.

개발자 도구를 열고 Network 탭을 살펴보면 우리가 웹사이트에 요청을 보낼 때 브라우저가 서버로 여러 가지 정보를 함께 전달하고 있다는 것을 확인할 수 있다.

그중에서도 User-Agent는 브라우저와 운영체제, 그리고 브라우저의 종류와 관련된 정보를 서버에 전달하는 대표적인 HTTP 요청 헤더다.

User-Agent란 무엇일까?

User-Agent는 쉽게 말하면 “나는 이런 환경에서 웹사이트에 접속하고 있습니다”라고 서버에 알려주는 정보라고 생각하면 된다.

예를 들어 HTTP 요청에는 다음과 같은 형태의 헤더가 포함될 수 있다.

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/140.0.0.0 Safari/537.36

처음 보면 굉장히 복잡해 보인다.

Mozilla, AppleWebKit, Chrome, Safari가 한꺼번에 들어 있기 때문이다.

그런데 이 문자열은 브라우저가 서버와 통신할 때 사용하는 일종의 식별 정보라고 보면 된다.

다만 여기서 주의할 점이 있다.

User-Agent 문자열에 들어 있는 이름을 그대로 믿어서 브라우저를 완벽하게 식별할 수 있는 것은 아니다.

User-Agent는 오랜 웹 브라우저 역사 속에서 호환성을 위해 여러 가지 문자열이 함께 들어가게 되었고, 현재는 브라우저 식별만을 목적으로 사용하기에는 한계가 있다.

개발자 도구에서는 어디에서 확인할까?

Chrome 개발자 도구를 열고 Network 탭으로 이동한다.

페이지를 새로고침하면 여러 HTTP 요청이 나타난다.

여기서 HTML 문서나 API 요청 등을 하나 클릭한 다음 Headers 영역을 살펴보자.

그러면 Request Headers에서 다음과 같은 항목을 찾을 수 있다.

Request Headers

User-Agent:
Mozilla/5.0 ...

즉, 브라우저가 서버에 요청을 보낼 때 어떤 User-Agent를 전달했는지 직접 확인할 수 있다.

이 방법은 User-Agent를 공부할 때 가장 확실하다.

코드를 보고 추측하는 것보다 실제로 브라우저가 전송한 HTTP 요청을 확인하는 것이 훨씬 이해하기 쉽기 때문이다.

User-Agent에는 어떤 정보가 들어 있을까?

User-Agent 문자열은 브라우저마다 조금씩 다르지만 일반적으로 운영체제와 브라우저 엔진, 브라우저 종류 등에 관한 정보가 포함될 수 있다.

예를 들어 다음과 같은 문자열이 있다고 해보자.

Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/140.0.0.0 Safari/537.36

여기에는 대략적으로

Windows
64비트 환경
WebKit 계열 호환 정보
Chrome
Safari 호환 정보

등을 나타내는 문자열이 섞여 있다.

여기서 재미있는 부분은 Chrome을 사용하고 있는데도 Safari라는 문자열이 함께 들어간다는 것이다.

처음 보면 이상하게 느껴진다.

“나는 Chrome인데 왜 Safari가 들어 있지?”

이것은 브라우저가 서로의 호환성을 위해 역사적으로 여러 토큰을 포함해온 것과 관련이 있다.

그래서 User-Agent 문자열을 단순하게

Chrome이면 Chrome만 표시
Safari면 Safari만 표시

라고 생각하면 안 된다.

User-Agent는 어디에 사용될까?

가장 대표적인 용도 중 하나가 브라우저나 디바이스 환경에 따른 처리다.

예를 들어 서버가 모바일과 데스크톱 사용자에게 다른 페이지를 제공해야 하는 경우 User-Agent 같은 정보를 참고할 수 있다.

브라우저 요청
      ↓
User-Agent 확인
      ↓
환경 판단
      ↓
적절한 응답 제공

과거에는 User-Agent를 이용한 브라우저 판별이 상당히 흔했다.

하지만 요즘 웹 개발에서는 단순히 User-Agent 문자열을 검색해서 기능을 분기하는 방식을 무조건 사용하는 것은 권장되지 않는다.

브라우저마다 User-Agent 문자열이 복잡하고, 브라우저 버전이 바뀌면 문자열도 달라질 수 있기 때문이다.

가능하다면 기능 자체를 확인하는 Feature Detection 방식이 더 적절한 경우가 많다.

User-Agent와 모바일 접속

개발자 도구에서 User-Agent를 살펴보다 보면 모바일 브라우저의 User-Agent도 궁금해진다.

Chrome DevTools에서는 Device Toolbar를 이용해 모바일 환경을 테스트할 수 있다.

상단의 모바일 기기 모양 아이콘을 클릭하거나 단축키를 이용해 Device Mode를 활성화할 수 있다.

그 상태에서 페이지를 다시 요청하면 모바일 환경에 맞는 요청이 발생한다.

이때 Network 탭의 Request Headers를 확인하면 User-Agent와 관련된 값도 달라질 수 있다.

하지만 최근 Chrome에서는 여기서 한 가지 더 알아둘 필요가 있다.

바로 User-Agent Client Hints다.

User-Agent Client Hints란?

User-Agent 문자열을 하나의 긴 문자열로 전달하는 기존 방식에는 여러 문제가 있었다.

브라우저와 운영체제에 관한 정보가 한꺼번에 들어 있기 때문에 필요한 것보다 많은 정보가 노출될 수 있고, 브라우저가 제공하는 정보가 점점 복잡해지면서 User-Agent 문자열을 파싱하는 것도 쉽지 않았다.

그래서 등장한 것이 User-Agent Client Hints, 줄여서 UA-CH다.

브라우저가 서버에 필요한 정보를 Client Hints 형태의 HTTP 헤더로 전달할 수 있도록 하는 방식이다.

대표적인 예로 다음과 같은 헤더를 볼 수 있다.

Sec-CH-UA: "Chromium";v="140", "Google Chrome";v="140"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "Windows"

이러한 정보는 User-Agent 문자열과는 별도의 Client Hints 체계로 제공된다.

개발자 도구에서 Sec-CH-UA도 확인해보자

Network에서 요청 하나를 클릭하고 Request Headers를 살펴보면 환경에 따라 다음과 같은 Sec-CH-UA 계열 헤더를 볼 수 있다.

Sec-CH-UA
Sec-CH-UA-Mobile
Sec-CH-UA-Platform

이 부분을 보면 User-Agent가 단순히 하나의 문자열로 끝나는 것이 아니라는 것을 알 수 있다.

예전에는

User-Agent

하나를 분석하는 것이 중요했다면,

최근 브라우저 환경에서는

User-Agent
        +
User-Agent Client Hints

를 함께 이해하는 것이 좋다.

서버는 User-Agent를 마음대로 믿어도 될까?

여기서 개발할 때 상당히 중요한 부분이 있다.

User-Agent는 보안 인증 정보가 아니다.

클라이언트가 보내는 HTTP 헤더이기 때문에 서버가 User-Agent 값을 절대적으로 신뢰해서는 안 된다.

예를 들어 User-Agent 문자열이

Chrome

이라고 해서 실제 사용자가 반드시 Chrome 브라우저를 사용하고 있다고 100% 보장되는 것은 아니다.

따라서

User-Agent
→ 브라우저 환경을 참고하는 정보

정도로 이해하는 것이 좋다.

인증이나 권한 확인처럼 보안상 중요한 판단을 User-Agent 하나에 의존해서는 안 된다.

User-Agent를 이용한 브라우저 판별의 한계

개발을 하다 보면 이런 코드를 본 적이 있을 수도 있다.

if (navigator.userAgent.includes("Chrome")) {
  // Chrome 처리
}

간단하게는 작동할 수 있다.

하지만 실제 서비스에서 브라우저별 기능을 구분하는 목적으로 User-Agent 문자열만 계속 파싱하는 방식은 문제가 생기기 쉽다.

브라우저마다 문자열 구조가 다르고, 호환성을 위한 토큰도 포함되어 있기 때문이다.

예를 들어 Chrome User-Agent에 Safari가 포함되어 있다고 해서 Safari라고 판단하면 잘못된 결과가 나온다.

그래서 가능하다면

브라우저 이름 확인

보다는

필요한 기능을 지원하는가?

를 확인하는 방식이 더 안정적이다.

이것이 바로 Feature Detection의 기본적인 생각이다.

개발자 도구에서 User-Agent를 확인하면 좋은 상황

User-Agent는 단순히 공부하기 위한 값만은 아니다.

실제 개발 과정에서도 꽤 유용하게 사용할 수 있다.

예를 들어 다음과 같은 문제가 발생했다고 해보자.

PC에서는 정상인데
모바일에서만 문제가 발생한다.

이때 Network 탭에서 요청을 확인하면서 브라우저 환경과 Request Headers를 살펴볼 수 있다.

또는

특정 브라우저에서만 API 응답이 다르다.

와 같은 문제가 발생했을 때도 요청 헤더와 서버 응답을 함께 확인해볼 수 있다.

특히 서버에서 User-Agent에 따라 다른 응답을 내려주는 구조라면 문제의 원인을 찾는 데 도움이 된다.

User-Agent와 IP 주소는 완전히 다르다

초보 개발자가 자주 헷갈리는 부분이 하나 더 있다.

User-Agent와 IP 주소는 서로 다른 정보다.

IP 주소
→ 네트워크에서 접속한 주소와 관련된 정보

User-Agent
→ 클라이언트가 어떤 브라우저/환경인지 나타내는 HTTP 헤더

따라서 User-Agent를 확인한다고 해서 사용자의 실제 위치나 IP 주소를 알아낼 수 있는 것은 아니다.

반대로 IP 주소만 가지고 어떤 브라우저를 사용하는지 정확하게 알 수 있는 것도 아니다.

서버에서는 여러 정보를 함께 활용할 수 있지만 각각의 정보가 의미하는 것은 다르다.

Network 탭에서 직접 확인하는 습관

User-Agent를 공부할 때 가장 추천하는 방법은 직접 Network 탭에서 요청을 발생시켜보는 것이다.

페이지를 열고

F12
↓
Network
↓
페이지 새로고침
↓
요청 선택
↓
Headers
↓
Request Headers

순서로 들어가면 된다.

그리고 다음 항목을 찾아보자.

User-Agent
Sec-CH-UA
Sec-CH-UA-Mobile
Sec-CH-UA-Platform

PC에서 확인하고 Device Toolbar를 이용해 모바일 환경에서도 확인해보면 차이를 비교하기 좋다.

이렇게 직접 비교해보면 User-Agent와 Client Hints가 왜 별도로 존재하는지도 훨씬 쉽게 이해된다.

마무리

개발자 도구에서 User-Agent를 처음 보면 단순히 긴 문자열 하나로 보인다.

하지만 이 안에는 웹 브라우저가 서버와 통신할 때 사용하는 다양한 호환성 정보가 들어 있다.

그리고 최근 웹 환경에서는 전통적인 User-Agent 문자열만 보는 것이 아니라 User-Agent Client Hints까지 함께 알아두는 것이 좋다.

핵심을 정리하면 다음과 같다.

User-Agent
→ HTTP 요청 헤더

브라우저 / 운영체제 관련 정보
→ 문자열 형태로 전달

User-Agent Client Hints
→ 브라우저 환경 정보를 별도의 헤더로 제공

주의
→ User-Agent는 보안 인증 정보가 아님

무엇보다 개발자 도구를 공부하고 있다면 직접 확인해보는 것이 가장 빠르다.

Chrome에서 Network 탭을 열고 요청 하나를 선택한 다음 Headers를 살펴보자.

처음에는 복잡해 보이는 문자열도 하나씩 뜯어보면 각각 나름의 이유가 있다는 것을 알 수 있다.

특히 “서버는 내가 어떤 브라우저를 사용하는지 어떻게 알까?”라는 궁금증이 있었다면 User-Agent부터 확인해보면 된다.

Network 탭은 단순히 API 주소를 찾는 곳이 아니다.

브라우저가 서버에 어떤 정보를 전달하고 있는지, 서버가 어떤 요청을 받고 있는지 직접 확인할 수 있는 곳이다.

그래서 개발자 도구를 제대로 익히고 싶다면 이런 HTTP 헤더 하나하나를 직접 확인해보는 것도 꽤 좋은 공부가 된다.