User-Agent 값을 이용한 Web Flow 분기 처리

프로젝트 수행 중 모바일 기기 접속에 대한 처리를 요청 받았습니다.

 

다행히(?) 모바일 기기는 안드로이드 기기로 제한되어 조금은 수월하게 작업을 할 수 있었습니다.

 

처음 요청을 받고 고민했던 방법은 두 가지 였습니다.

 

1. 웹서버에서 처리

2. 서블릿(Filter, Interceptor)에서 처리

 

그러다가 현재 Welcome File을 사용하지 않는 걸 확인했고 index.jsp에서 처리하기로 했습니다.

 

웹서버의 경우 지식도 없을 뿐더러 설정을 위해선 CSR 요청이 필요해서 접었고,

 

서블릿의 경우 정해진 mapping rule에 대해선 모두 처리가 되는데,

 

현재 프로젝트는 navigation으로 구분이 되고 있어 굳이 항상 체크를 할 필요가 없고 처음 화면만 분기되면 되는 케이스라

 

이 방법을 선택하게 되었습니다.

 

참고 사이트 : http://husk.tistory.com/38

 

위 사이트를 보면 아시겠지만 굉장히 다양한 디바이스를 고민해야 할거 같습니다만,

 

현재 프로젝트는 안드로이드 기기만을 대상으로 한다고 요구사항을 명확히 해주셔서.. 꽤나 심플해 졌습니다.

 

var userAgent      = "<%=request.getHeader("User-Agent").toLowerCase()%>";
var paramName      = "<%=request.getParameterNames().nextElement()%>";
var reqURL         = "<%=request.getRequestURL()%>";
var mobileURL      = "m.xxx.com";
// var mobileKeyWords = new Array("iPhone", "iPod", "BlackBerry", "Android", "Windows CE", "LG", "MOT", "SAMSUNG", "SonyEricsson");
// 모바일 대상 추가시 아래 mobileKeyWords에 추가하면 됩니다
var mobileKeyWords = new Array("android", "lg");
var isMobile       = false;

if( reqURL.match(mobileURL) ) {
  location.href = "모바일 메인페이지";
} else {
  for( var word in mobileKeyWords ){
      if( userAgent.match(mobileKeyWords[word]) != null ){
      isMobile = true;
          break;
      }
  }
  
  if( paramName == "mobile" ) {
    isMobile = false;
  }
  
  if( isMobile ) {
    location.href = "모바일 메인페이지";
  } else {
    location.href = "웹 메인페이지";
  }
}

 

참고 사이트에서는 navigator 객체를 사용했지만, IE8과 크롬 테스트 결과 값이 달라 request를 사용하도록 수정했습니다.

 

 

그리고 아직 모바일 기기로 접근할 수 있는 환경이 되지 않아 테스트도 문제가 되었습니다.

 

자료를 찾다가 크롬의 plug-in으로 User-Agent 값을 바꿀 수 있다는 내용을 확인해서 바로 검색에 들어갔습니다.

 

 

크롬 웹 스토어에서 'user agent'로 검색을 하시면

 

 

'User-Agent Switcher'란 녀석이 보입니다. 이 plug-in을 설치해 주시면

 

 

기본적으로 제공하는 User-Agent 값을 선택해서 변경하거나 아래쪽에 직접 입력해서 변경할 수 있습니다.

 

크롬 좋네요.. ^^

 

혹시 제가 생각 못했던 부분이 있었다면 피드백 부탁드립니다. ^^