[JavaScript] JavaScript로 PC/모바일 구분하기

핸드폰으로 웹페이지에 접속하면, 내 화면에 딱 맞춘 메인 페이지가 뜨는 경우가 많다.  
대표적으로 네이버를 예로 들면,  
주소창에 http://www.naver.com을 입력해도 자동으로 http://m.naver.com으로 리디렉션된다.

그리고 페이지 맨 아래 있는 “PC 버전” 버튼을 눌러야지만  
비로소 깨알 같은 글씨의 PC 페이지에 접속할 수 있다.

그런데 네이버는 어떻게 내가 모바일인지, PC인지 알아내는 걸까?

 

🛠 F12 개발자 도구로 확인해보자

 

브라우저에서 F12를 눌러 개발자 도구를 열고,  
콘솔 창에 아래를 입력해보자:
navigator

 

🧭  Navigator와 User Agent

Navigator 객체는 브라우저의 다양한 정보들을 담고 있다.
이 중 우리가 집중해야 할 부분은 바로 userAgent다.

브라우저는 서버에 요청을 보낼 때 항상
User-Agent 헤더라는 걸 같이 보낸다.
이 안에 브라우저 종류, 버전, OS 정보 등이 담겨 있다.

---

🔍  userAgent로 모바일 구분하기

 

Navigator.userAgent는 read-only 프로퍼티고 현재 브라우저의 user agent string 값을 반환한다.

이 값을 이용해서 이 브라우저가 Pc인지 Mobile인지 구분이 가능하다.

navigator.userAgent.indexOf('iPhone');
navigator.userAgent.indexOf('Android');

---

📌 indexOf로 확인하기

const user = navigator.userAgent;
let isMobile = false;

if(user.indexOf('iPhone') > -1 || user.indexOf('Android') > -1) {
	isMobile = true;
}

하지만 이 방법은 기기 종류가 많아질수록 if 조건이 뚱뚱해진다.

---

📌 정규표현식으로 간단하게

let isMobile = false;

if (/Android|iPhone/i.test(navigator.userAgent)) {
    isMobile = true;
}

• /.../i는 대소문자 구분 없이 검사하겠다는 뜻이고,
• test()는 문자열이 정규표현식을 만족하는지 확인해준다.

---

✅  최신 방법: userAgentData

 

이 객체는 구조화된 형태로 더 깔끔하게 정보 제공함.
하지만 모든 브라우저에서 지원되진 않기 때문에,
아직은 userAgent를 함께 사용하는 방식이 안전하다.

 

✍️  마무리

요즘은 대부분의 사이트가 반응형 웹을 사용해서
기기별로 별도 처리할 필요가 줄었지만,
로그인, 결제, 다운로드와 같은 일부 페이지에선
여전히 PC/Mobile 구분이 중요한 경우가 있다.

간단한 userAgent 체크로
사용자 환경에 맞는 분기 처리를 할 수 있다는 것만 기억해두면 도움이 된다!