스마트폰으로 접속했는데 PC 화면이 뜬다면?
우리가 스마트폰으로 특정 웹사이트 주소를 입력하고 들어갔을 때, 알아서 모바일 전용 페이지(보통 주소창 앞에 'm.'이 붙거나 '/mobile' 경로로 이동)로 연결되는 것을 자주 경험하셨을 겁니다. 반대로 PC에서 접속하면 큼직한 PC용 웹 화면이 나타나죠.
만약 모바일 기기로 접속했는데 글씨가 깨알 같은 PC용 화면이 그대로 노출된다면, 사용자는 큰 불편함을 느끼고 바로 사이트를 이탈해 버릴 것입니다. 최근에는 반응형 웹(Responsive Web)을 사용하여 하나의 화면으로 처리하는 경우도 많지만, 여전히 규모가 큰 서비스나 복잡한 그룹웨어 같은 시스템에서는 PC용 페이지와 모바일용 페이지를 완전히 분리하여 개발하는 경우가 많습니다.
그렇다면 웹 브라우저는 사용자가 지금 들고 있는 기기가 컴퓨터인지, 스마트폰인지 어떻게 알고 길을 안내해 주는 걸까요? 오늘은 자바스크립트(JavaScript)의 navigator.userAgent 객체를 활용하여 사용자의 접속 기기를 파악하고, 그에 맞는 알맞은 페이지로 자동 리다이렉트(Redirect) 시키는 방법에 대해 상세히 알아보겠습니다.
1. 사용자의 기기 정보를 가져오는 마법: User-Agent
웹 브라우저로 사이트에 접속할 때, 브라우저는 서버에 자신의 신분증 같은 정보를 몰래 넘겨줍니다. 이것을 **'User-Agent(유저 에이전트)'**라고 부릅니다. 이 정보 안에는 현재 사용 중인 운영체제(Windows, Mac, iOS, Android 등)와 브라우저 종류(Chrome, Safari 등)가 텍스트 형태로 길게 적혀 있습니다.
우리는 자바스크립트를 이용해 이 텍스트를 읽어온 뒤, 그 안에 'iPhone'이나 'Android' 같은 단어가 포함되어 있는지를 검사하여 모바일 기기 여부를 판단할 수 있습니다.
2. 기기 판별 및 리다이렉트 구현 코드
아래는 JSP 파일의 <head> 태그 영역에 삽입하여, 페이지가 로드되자마자 즉시 접속 기기를 검사하고 페이지를 이동시키는 핵심 자바스크립트 코드입니다.
| <script type="text/javascript"> // 1. 사용자의 User-Agent 정보를 가져와서 모두 소문자로 변환합니다. var agent = navigator.userAgent.toLowerCase(); // (참고) 서버명을 가져오는 JSP 표현식 (필요에 따라 활용) var servername = "${pageContext.request.serverName}"; // 2. 정규식을 사용하여 모바일 기기 키워드가 있는지 검사합니다. if (/iphone/.test(agent) || /ipod/.test(agent) || /ipad/.test(agent) || /android/.test(agent) || /blackberry/.test(agent)) { // 모바일 기기일 경우 처리할 로직 // 예: 모바일 전용 오피스 페이지로 이동 location.replace('/moffice'); } else { // 모바일 기기가 아닐 경우 (PC 등) 처리할 로직 // 예: PC용 일반 오피스 페이지로 이동 location.replace('/office'); } </script> |
3. 핵심 코드 상세 분석
위 코드에서 반드시 짚고 넘어가야 할 중요한 포인트 두 가지를 설명해 드리겠습니다.
첫째, 정규 표현식(Regular Expression)을 활용한 기기 검사
if문 안을 살펴보면 /iphone/.test(agent) 와 같은 형태를 볼 수 있습니다. 이는 앞서 소문자로 변환해 둔 User-Agent 문자열 안에 'iphone', 'ipad', 'android' 등의 모바일 기기 고유 단어들이 포함되어 있는지 검사하는 정규식 메서드입니다. 조건문 중 하나라도 참(true)이면 해당 기기를 모바일로 간주하게 됩니다.
둘째, location.href 가 아닌 location.replace()를 사용하는 이유 (⭐️매우 중요)
자바스크립트에서 페이지를 이동시킬 때 가장 흔히 쓰는 속성은 location.href = "이동할 주소" 입니다. 하지만 이 리다이렉트 로직에서는 반드시 location.replace()를 사용해야 합니다.
location.href는 브라우저의 '방문 기록(History)'에 현재 페이지를 남기면서 이동합니다. 이렇게 되면 사용자가 모바일 페이지로 넘어간 뒤 '뒤로 가기' 버튼을 눌렀을 때, 다시 이 리다이렉트 페이지로 오게 되고, 스크립트가 또 실행되어 다시 모바일 페이지로 강제 이동되는 '무한 루프(뒤로 가기 불가)' 현상에 빠지게 됩니다.
반면, **location.replace()**는 현재 페이지를 방문 기록에 남기지 않고 완전히 새로운 페이지로 '덮어씌워' 버립니다. 따라서 뒤로 가기 버튼을 눌러도 리다이렉트 되기 이전의 다른 사이트로 정상적으로 돌아갈 수 있어 사용자 경험(UX) 측면에서 훨씬 안전합니다.
4. 추가 팁: 서버 사이드(Server-Side) 리다이렉트와의 차이점
지금 우리가 작성한 코드는 사용자의 브라우저(클라이언트)가 코드를 다운로드한 직후에 실행되는 '클라이언트 사이드' 리다이렉트 방식입니다. 구현이 매우 직관적이고 쉽다는 장점이 있습니다.
하지만 사용자가 브라우저 설정에서 자바스크립트 실행을 차단해 두었다면 이 코드는 작동하지 않습니다. 따라서 더 완벽하고 검색 엔진 최적화(SEO)에 유리한 리다이렉트를 원하신다면, 자바 단(Controller나 Filter 등 서버 사이드)에서 접속 요청(Request) 헤더의 User-Agent를 파악하여 HTTP 상태 코드 301이나 302를 통해 서버에서 직접 방향을 틀어주는 방식을 병행하는 것이 좋습니다.
'프로그래밍&DB' 카테고리의 다른 글
| [JavaScript/자바스크립트] 상황별 페이지 새로고침 완벽 정리 (현재창, 부모창, 프레임, 지연 새로고침) (8) | 2026.04.14 |
|---|---|
| [Oracle/오라클] 특정 계정의 모든 테이블 조회 권한(SELECT) 한 번에 일괄 부여하기 (9) | 2026.04.13 |
| 오라클(Oracle) UPDATE/DELETE 실수 복구하는 방법: 시간을 되돌리는 Flashback Query 완벽 가이드 (0) | 2026.04.08 |
| 자바 class파일 버젼 확인 (0) | 2026.04.08 |
| [자바/Java] 형변환 완벽 정리: String을 int로, int를 String으로 변환하는 방법 (0) | 2026.04.08 |