모바일 홈페이지로 자동 이동되는 소스

출처 : http://kiss7.tistory.com/316

---

이 자동이동 코드소스는 홈페이지에 PC로 접근했는지, 홈페이지에 스마트폰 등 모바일 기기로 접근했는지를 판단하여 해당하는 페이지로 이동시켜 주는 소스입니다. (PC용 홈페이지 또는 모바일용 홈페이지로) 

PC와 모바일에 따른 홈페이지 운영 설명 

일반적으로는 (또는 과거에는) 기본 도메인으로 www.kiss7.kr이란 도메인을 가지고 있다고 할 때, 방문자가 웹브라우저에 www.kiss7.kr을 입력했다면 PC용 홈페이지로 접속시키고 m.kiss7.kr을 입력했다면 모바일 홈페이지로 자동 접속시키곤 하였습니다. 즉, 도메인의 종류에 따라 이동시켰다는 얘깁니다. 

그러나 하나의 도메인을 가지고 홈페이지를 운영하면서, 방문자가 어떤 것으로 (PC로 접속하려는 것인지 모바일 스마트폰으로 접속하려는 것인지를) 방문했는지를 스스로 탐지해서 자동으로 PC 홈페이지나 모바일 홈페이지로 다르게 이동시켜 주는 쪽으로 추세가 흐르고 있는 중입니다. 

모바일 홈페이지를 위해서 다시 도메인을 사거나, 모바일 홈페이지용 네임서버로 분리해서 운영할 필요가 없을 경우라면 하나의 도메인으로 자동 분리하여 이동시키는 방법이 효율적일 수도 있겠습니다. 

이 자동 이동 소스를 알아보고자 합니다. 

자동이동 소스에 대한 설명

웹호스팅의 루트에 있는 index파일에 이 코드를 삽입합니다. 

만약, index파일에 head파일을 따로 인클루드 시켜서 사용한다면 head부분에 삽입하는 것이 더 좋습니다. 

location 명령은 특정 페이지로 사용자가 이동되게 하라는 명령입니다. 

방문자가 접속했을 때 mobile key words를 통하여 스마트기기를 이용하여 방문했는지 알아낸 후, location 명령을 통하여 지정된 페이지로 이동하게 합니다. 

그러므로 location 명령에 적힌 이동될 주소의 HTML문서는 모바일 전용으로 만들어진 페이지여야 하겠습니다. 

물론 아니라면 이 코드를 무시하고 현재의 페이지에 접속하도록 하는 소스입니다. 

PHP 버전으로 짜인 자동이동 소스

<? php

$mobileKeyWords = array (''iPhone'', ''iPod'', ''BlackBerry'', ''Android'', ''Windows CE'', ''Windows CE;'', ''LG'', ''MOT'', ''SAMSUNG'', ''SonyEricsson'', ''Mobile'', ''Symbian'', ''Opera Mobi'', ''Opera Mini'', ''IEmobile'');

for($i = 0 ; $i < count($mobileKeyWords) ; $i++)

{

if(strpos($_SERVER[''HTTP_USER_AGENT''],$mobileKeyWords[$i]) == true)

{

header("Location: http://이동할주소");

exit;

}

}

?>

• $mobileKeyWords에 array에서 만든 변수들을 집어 넣습니다. 괄호 안에는 스마트폰 기종을 넣으면 됩니다. 
• for($i = 0 ; $i < count($mobileKeyWords) ; $i++) 괄호 안의 모바일 기종 만큼 적용해 보라는 뜻입니다. 
• strpos($_SERVER[''HTTP_USER_AGENT''] 스마트폰 기종 이름을 찾아내는 함수입니다. 
• if($mobileKeyWords[$i]) == true) 넣어놓은 변수가 있다면 
• Location: http://이동할주소" 지정해 놓은 URL주소로 페이지를 이동시키라는 명령입니다. 

 javascript 버전으로 짜인 소스

<script type="text/javascript" language="JavaScript">

var mobileKeyWords = new Array(''iPhone'', ''iPod'', ''BlackBerry'', ''Android'', ''Windows CE'', ''Windows CE;'', ''LG'', ''MOT'', ''SAMSUNG'', ''SonyEricsson'', ''Mobile'', ''Symbian'', ''Opera Mobi'', ''Opera Mini'', ''IEmobile'');

for (var word in mobileKeyWords){

if (navigator.userAgent.match(mobileKeyWords[word]) != null){

window.location.href = "이동할 주소";

break;

}

}

</script>

• $대신 var을 쓰거나, header("Location: http://이동할주소"); 대신 window.location.href = "이동할 주소";를 쓰는 등 약간의 차이가 있을 뿐 PHP문과 거의 같은 구조입니다. 

자동이동 소스 사용 방법

위의 소스를 해당 페이지의 상단에 붙여넣기 하면 됩니다. 

그래야 PC용 페이지가 모두 나타나기 전에 모바일용 페이지로 이동을 시작할 것이기 때문입니다. PC용 화면이 다 뜬 후에 모바일 홈페이지로 보내면 이런 소스를 사용할 필요가 없습니다. 링크를 누르게 해도 되기 때문입니다. 

이 방법은 사용자가 아무런 액션을 취하지 않아도 자동으로 이동시키는 것에 목적이 있습니다. 

만약, 홈페이지에 접속한 방문자의 기기가 애플의 아이폰이라면 PC용인 index.php를 보여주지 말고 index_iphone.php로 이동시켜서 보여주라고 한다면... 

<? php

$mobileKeyWords = array (''iPhone'');

for($i = 0 ; $i < count($mobileKeyWords) ; $i++)

{

if(strpos($_SERVER[''HTTP_USER_AGENT''],$mobileKeyWords[$i]) == true)

{

header("Location: http://www.kiss7.kr/index_iphone.php");

exit;

}

}

?>

처럼 입력해 주면 됩니다. 

물론, 이처럼 기종이 하나 밖에 없다면 굳이 array를 쓸 필요까지는 없긴 합니다. 

이제는 홈페이지에 접속하는 방법으로 PC를 통하기보다 모바일로 접속하는 비율이 더 높아졌다고 합니다. 

모바일로 접속을 했는데 PC버전의 홈페이지만 있다면 글자가 너무 작아져서 사용이 불편해질 것입니다. 더구나 데이터양이 모바일로 보기에는 너무 커서 속도도 느려질 것입니다. 

반대로 PC로 접속했는데 모바일 버전이 보인다면 허전한 디자인이 될 수도 있습니다. 

이를 극복하기 위해서 최근에는 반응형 홈페이지 제작방법이 점점 늘어나고 있습니다. 

같은 홈페이지만 모바일 접속이든 PC접속이든, 그에 맞게 자동으로 보여지게 하는 방법이 반응형 홈페이지입니다. 반응형 홈페이지로 제작을 한다면 자동으로 다른 페이지로 이동시킨다거나 하는 방법이 필요 없고 편리하긴 합니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)

그러나 홈페이지 운영자의 운영방법 때문에 위의 소스를 이용해서 자동으로 이동시켜주는 방법이 아주 없어지는 것은 아닙니다. 즉, 필요에 따라 소용되는 경우가 있으므로 알아두면 좋을 것입니다. 

★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^