User-Agent 값을 활용하여 모바일 구분하기

User-agent

HTTP 통신을 할 때 헤더 값에 다양한 정보들이 포함된다. 그 중 HTTP 요청을 보내는 사용자의 식별 정보를 담고 있는 항목이 있는데, 그것이 User-agent이다. 프로그램을 다운로드하려고 할 때 현재 OS에 맞는 버전의 프로그램을 추천해줄 때가 있는데 그 경우도 User-agent를 활용한 경우다.

User-agent의 형식

User-Agent : < product> / < product-version> < commnent>

< product > : product 식별자
< product-version > : product 버전 정보
< commnet > : 추가적인 product의 정보

웹 브라우저의 일반적인 User-agent 형식

User-Agent: Mozilla/5.0 (< system-information>) < platform> (< platform-details>) < extensions>

Mozilla/5.0 : 브라우저가 Mozilla와 호환된다는 것을 나타내는 일반 토큰이다.
platform; rv:geckoversion : 브라우저가 실행되고 있는 기본 platform (Windows, Max, Linux, Android, etc)과 휴대폰인지 여부를 설명한다. 만약 디바이스가 모바일 폰인 경우, Mobile 이라고 표시된다.
extensions: 해당 브라우저가 어느 extensions을 사용하고 있는지를 나타낸다. Chrome 같은 경우 추가적인 호환성을 위해 'KHTML, like Gecko' 와 'Safari' 등이 추가된다.

Mozilla 정보/버전 + 운영체제 정보 + 렌더링 엔진 정보 + 브라우저형태로 보여진다.

사용자 Desktop 환경 User-agent 알아보기

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

실제 맥북을 사용하고 있다.

Mobile로 User-agent를 확인

Mozilla/5.0 (iPhone; CPU iPhone OS 17_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Mobile/15E148 Safari/604.1

다음과 같이 나오게 된다! 실제 아이폰13을 사용하고 있다.

User-agent 변경하는 방법

브라우저에 접속 → 개발자 도구 열기 → 우측 상단의 점 3개 클릭 → 도구 더보기 → 네트워크 조건 → 브라우저 기본값 체크 박스 해제 → 원하는 User-agent 선택

사용자 환경에 따라 Mobile인경우 /mobile로 redirect

1. user-agent 값 가져오기

   const userAgent = request.headers.get("user-agent");

2. 모바일 여부 확인

   const isMobile = (userAgent) => {
     return /Mobi/i.test(userAgent);
   };

3. 모바일인 경우 /mobile로 redirect

   if (!locals.user) {
     // 로그인이 되어 있지 않은 상태에서 모바일로 접근 시 모바일 페이지로 이동
     if (isMobile) {
       redirect(302, "/mobile/login");
     }
     redirect(302, "/auth/login");
   }

참고 문헌

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent