M.domain.access

모바일 기기에서 자동으로 m.domain.com으로 이동하려면 어떻게 해야 할까요?
모든 모바일 기기에는 User Agent 정보값이 존재합니다. 따라서 이 정보값을 이용해 그 값에 해당하는 스마트폰으로 인식시키면 바로 모바일 웹 페이지로 이동시킬 수 있습니다. 가장 일반적으로 사용하는 코드는 아래와 같습니다.

							 <?php
								$arr_browser = array("iPhone","iPdd","IEMobile","Mobile","lgtelecom","PPC");
								for($indexi - 0; $indexi<count($arr_browser); $indexi++){
									if(stropos($_SERVER['HTTP_USER_AGENT'],$arr_browser[$indexi]) == true){
										// 모바일 브라우저라면 모바일 URL로 이동
										header("Location: http://m.nate.com");
										exit;
									}
								}
							?>
						

HTML을 마크업하기 전에 PHP로 작성하는 코드 부분을 먼저 작성하면 모바일 웹으로 이동할 수 있습니다. $arr_browser = array("iPhone","iPdd","IEMobile","Mobile","lgtelecom","PPC"); 부분에서 원하는 User Agent 값을 추가하는 방식으로 이용하면 얼마든지 다양한 기기에 추가적으로 대응할 수 있습니다.



※ 추가 정보 - 모바일 웹 페이지 테스트※

User Agent Switcher

모바일 웹 서버는 각 모바일 기기마다 다른 User Agent 값을 인식하여 모바일 웹 페이지 혹은 일반 웹 페이지를 보여줄지를 결정합니다. User Agent Switcher는 모바일 웹 페이지를 파이어폭스 웹 브라어저에서 볼 수 있도록 도와주는 파이어폭스 웹 브라우저의 애드온 프로그램입니다. 이를 이용하면 모바일 기기에서만 접속할 수 있었던 모바일 웨 페이지를 파이어폭스에서 접속하여 소스 분석 및 테스트를 진행할 수 있습니다.

메뉴에서 부가기능을 선택하고 부가기능에서 "user agent switcher"를 검색하여 설치합니다.
설치후에 파이어폭스를 재시작하고 ALT키를 눌러 메뉴를 확성화 시킨후 "도구" 메뉴에서 default user agent 값을 원하는 user agent 값으로 변경하여 확인합니다.



iBBDemo2

만약 모바일 웹 페이지를 실제 서버에 저장하지 않은 상태라면 모바일 웹 페이지를 만든 후 실제로 어떻게 보일지 궁금할 수 밖에 없을 것입니다. 이를 해결하기 위해 아이폰과 아이패드 시뮬레이터를 제공해서 확인하게금 도와주는 것이 Adobe AIR 기반으로 개발된 iBBDemo2(code.google.com/p/ibbdemo2)입니다. 우선 키보드 레이아웃의 크기와 위치를 파악할 수 있어 모바일 웹 페이지를 만드는 사람에게 많은 도움을 줍니다. 또한 테스트 웹 브라우저의 형태도 아이패드, 아이폰에서 제공하는 사파리 브라우저의 형태와 같기 때문에 더욱 현식적인 테스트가 가능합니다. 또한 윕도우에서는 기본적으로 아이폰과 아이패드 시뮬레이션을 제공하는 iOS SDK를 설치할 수 없으므로 더욱 유용하게 이용할 수 있습니다.

먼저 get.adobe.com/kr/air에 접속하여 Adobe AIR 프로그램을 다운로드해 설치합니다.
Adobe AIR가 설치되었으면 code.google.com/p/ibbdemo2/downloads/detail?name=iBBDemo2.air&can=2&q에 접속하여 iBBDemo2.air를 다운로드해 설치합니다.
설치가 완료되면 바로 iBBDemo2가 실행됩니다.

iBBDemo2는 단축키를 이용해 아이폰/아이패드 시뮬레이터를 전환할 수 있습니다. 단축키는 다음과 같습니다.

  1. CTRL + 1 : 아이패드로 전환
  2. CTRL + 2 : 아이폰으로 전환
  3. CTRL + 좌/우 방향키 : 아이폰/아이패드 회전
  4. CTRL + D : 주소표시줄 토글
  5. CTRL + + :확대 보기
  6. CTRL + - :축소 보기


사파리 브라우저를 이용한 테스트

다른 애드온 프로그램을 설치하고 싶지 않을 경우에는 사파리 브라우저에서 기본적으로 제공하는 개발자용 메뉴를 이용하면 애플 제품의 각 User Agent 값을 적용해서 바로 테스트를 진행할 수 있습니다.

www.apple.com/kr/safari/download에서 사파리5 를 설치한 후 오늘쪽 위의 설정 버튼을 클릭하고 '기본 설정'을 선택합니다.
고급에서 메뉴막대에 개발자용 메뉴 보기를 체크 표시합니다.
브라우저 메뉴에서 개발자용 항목에서 사용자 에이전트를 차례대로 선택하여 여러 가지 플랫폼으로 쉽게 전환할 수 있습니다.



아이폰/아이패드 테스트

지금까지 소개한 방밥 이외에 시뮮레이터를 제공하는 웹 사이트에 접속하여 모바일 웹 페이지를 테스트해 볼 수도 있습니다. 하지만 시뮬레이터 프로그램보다는 환경이 미약하니 간단하게 테스트 용도로만 사용하세요.

  1. 아이폰용 테스트 사이트 www.testiphone.com
  2. 아이패드용 테스트 사이트 www.ipadpeek.com


자바스크립트를 이용한 테스트

모바일 웹을 실제로 테스트하기에 앞서 현재 웹 브라우저의 크기를 확인하기 위한 노하우입니다. 간단한 방법으로 어떤 브라우저든 자바스크립트 코드를 입력하여 자동으로 창을 변화시킬수 있습니다. 대부분의 모바일 사이트는 %단위로 크기를 지정하기 때문에 창 크기의 변환에 따른 테스트도 손쉽게 가능합니다. 단, 구글 크롬에서는 가능하지 않다는 단점이 있습니다.

방법은 간단합니다. 브라우저 주소창에 다음과 같이 입력하고 enter를 누르면 웹 브라우저의 크기가 해당 해상도로 자동 조정됩니다.

  1. 320×480 해상도 조정하기
    javascript:window.scrollTo(0,0);resizeTo(320, 480);

  2. 480×800 해상도 조정하기
    javascript:window.scrollTo(0,0);resizeTo(480, 800);