브라우저명과 모바일·PC 브라우저 확인

원래 글은 navigator.userAgent를 읽어 브라우저 이름과 모바일 여부를 화면에 출력하는 예제였다. 아래 사진은 2016년 당시 여러 브라우저에서 확인한 결과다. 현재 브라우저의 UA 문자열은 다를 수 있으므로 사진의 분류 결과를 최신 브라우저의 보장된 동작으로 받아들이면 안 된다.

이전 코드에서 잘못 분류될 수 있는 이유

• indexOf("iPhone") > 0은 문자열이 맨 앞(index 0)에 있으면 놓친다. 문자열 포함 여부는 includes()나 정규식으로 확인한다.
• iPot은 iPod의 오타다. 태블릿이나 데스크톱 모드의 UA는 이런 단어 목록만으로 일관되게 분류하기 어렵다.
• Chrome UA에는 Safari가 들어갈 수 있고 Edge·Opera UA에는 Chrome 문자열이 들어갈 수 있다. 검사 순서에 따라 브라우저 이름이 바뀐다.
• document.write()는 페이지가 로드된 뒤 호출하면 문서를 지우는 등 예상하기 어려운 동작을 할 수 있다. 화면의 기존 요소에 textContent를 설정한다.

MDN의 UA 판별 가이드는 UA를 기능 지원 여부의 근거로 사용하지 말고 실제 기능을 검사하라고 권한다. document.write() 문서도 새 코드에서 사용을 피하도록 안내한다.

화면에 진단용 정보를 표시하는 예시

다음 코드는 UA를 추정용 정보로만 사용한다. 모바일이 아니라고 판정한 결과를 곧바로 “PC”라고 부르지 않는다. 모바일 기기가 데스크톱 UA를 보낼 수도 있기 때문이다.

<p id="browser-name"></p>
<p id="device-hint"></p>

<script>
  function guessBrowser(ua) {
    if (/Edg\//.test(ua)) return 'Edge';
    if (/OPR\//.test(ua)) return 'Opera';
    if (/Firefox\//.test(ua)) return 'Firefox';
    if (/Chromium\//.test(ua)) return 'Chromium';
    if (/Chrome\//.test(ua)) return 'Chrome';
    if (/Safari\//.test(ua)) return 'Safari';
    return '알 수 없음';
  }

  const ua = navigator.userAgent;
  const mobileHint = navigator.userAgentData?.mobile
    ?? /Android|iPhone|iPod/i.test(ua);

  document.getElementById('browser-name').textContent =
    `브라우저 추정: ${guessBrowser(ua)}`;
  document.getElementById('device-hint').textContent = mobileHint
    ? '모바일 환경으로 추정됩니다.'
    : '모바일 여부를 확인할 수 없거나 다른 환경입니다.';
</script>

navigator.userAgentData도 모든 브라우저에서 쓸 수 있는 표준적인 장치 판별 수단은 아니다. 지원되지 않으면 예시처럼 UA 문자열을 참고할 수 있지만, 그 결과는 계속 추정이다. MDN의 NavigatorUAData 문서에서 지원 상태와 제공 값을 확인할 수 있다.

화면 너비에 맞춘 배치가 목적이라면 브라우저 이름을 추측하지 말고 CSS 미디어 쿼리를 사용한다. 특정 API가 필요한 경우에는 예를 들어 'share' in navigator처럼 그 기능 자체를 검사한다.

.layout { display: grid; grid-template-columns: 16rem 1fr; }
@media (max-width: 640px) {
  .layout { grid-template-columns: 1fr; }
}

당시 확인한 화면

당시 네이버 브라우저가 알 수 없음으로 표시됐던 것은 UA 문자열 목록에 해당 브라우저의 판별 규칙이 없었기 때문이다. 이 예시는 목록을 계속 늘리는 방식의 한계를 보여준다.