아이폰/모바일 기기를 감지하여 리디렉션시키는 방법

아이폰 기기를 감지하여 리디렉션시키기

방문자가 사이트를 방문하면 사용자가 접속한 기기가 모바일 기기(예: 아이폰)인지를 감지하여 다른 웹사이트로 리디렉션시키려는 경우 PHP 코드를 사용하거나 .htaccess 코드를 사용할 수 있습니다.

PHP 코드를 사용하여 아이폰 사용자를 다른 웹사이트로 이동시키기

다음과 같은 코드를 사용합니다.

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== FALSE)
{ header('Location: http://www.example.com/iphone/'); }
?>

.htaccess 코드 사용

.htaccess 파일에 다음 코드를 추가하면 아이폰으로 접속한 경우 지정한 사이트로 리디렉션시킵니다.

RewriteEngine on
RewriteCond ${HTTP_USER_AGENT} iPhone
RewriteRule .* http://www.example.com/iphone/

하위 디렉터리로 리디렉션시키려면 다음과 같은 코드를 사용합니다.

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteCond %{REQUEST_URI} !^/iphone/
RewriteRule .* /iphone/ [R]

사이트 주소가 www.mysite.com이면 아이폰 사용자는 www.mysite.com/iphone/으로 리디렉션됩니다.

모바일 기기를 감지하여 모바일 전용 사이트로 리디렉션시키기

워드프레스의 경우 "모바일 기기일 경우 모바일 버전용 페이지로 이동시키기" 글에서 설명하고 있지만 설명된 방법이 바람직하지 않다고 합니다.

여러 가지 방법으로 모바일 전용 페이지로 리디렉션시킬 수 있습니다. 예를 들어, javascript 코드를 사용하는 방법을 생각해볼 수 있습니다. 가령 해상도가 800픽셀 이하인 경우 리디렉션시키도록 할 수 있습니다.

<script type="text/javascript">
<!--
if (screen.width <= 800) {
window.location = "http://m.mysite.com";
}
//-->
</script>

하지만 위의 방법은 사용자가 자바스크립트를 비활성화하면 제대로 작동하지 않습니다. 그리고 폰의 가로 및 세로 스크린에 따라 결과가 제대로 작동하지 않을 가능성도 있습니다.

.htaccess 코드를 사용하는 방법도 있습니다.

RewriteEngine On
# Check for mime types commonly accepted by mobile devices, 모바일 기기에서 일반적으로 수용하는 mime 타입 확인
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L]
// Source: inmotionhosting.com

플러그인을 사용하여 모바일 사용자를 디리렉션시키기(워드프레스)

다른 방법으로 워드프레스에서는 플러그인을 사용해볼 수도 있습니다. 하지만 검색해보니 대부분 플러그인이 오래되었거나 평가가 그리 좋지 않은 편이네요. 예를 들어 WordPress Mobile Pack과 같은 플러그인 있습니다.

WP-Mobile-Redirect

이외에도 WP Mobile Redirect 등의 플러그인도 있습니다. 이 플러그인은 업데이트된지 1년이 넘었네요.

유료 플러그인으로는 Country and Mobile Redirect for WordPress - Professional Edition 플러그인이 하나 검색되네요. 이 플러그인은 지역(국가, 주, 도시), 언어, IP, 날짜, 브라우저, 모바일 사용자 등을 기준으로 리디렉션하거나 차단할 수 있다고 합니다. 자세한 내용은 플러그인 페이지의 설명을 참고해보시기 바랍니다.

Country and Mobile Redirect for WordPress

이외에도 다양한 방법을 인터넷에서 검색할 수 있습니다. 상황에 맞는 적절한 방법을 선택하시기 바랍니다.

 


9개 댓글

  1. 잘 지내시죠? 모바일 페이지 알아보다 보니 또 워드님 페이지네요.ㅎㅎㅎ 이 내용 쉽지 않네요. 시도 안 해보는 걸로.. ㅋ

      1. 저는 재작년만 해도 테마를 엄청 뜯어 고쳐서 사용했습니다.

        하지만 요즘에는 테마에 있는 기능을 가급적 최대한 활용하자로 바뀌었습니다. 레이아웃을 수정해야 하는 경우에도 가급적 최소화하면서 주로 CSS로 해결하는 편입니다.

        코드를 추가하고 플러그인을 설치하고 하면 사이트 속도가 느려질 수밖에 없습니다.

      2. 우와..저의 치명적인 단점인 css도 그 어떤 것도 모르는 터라 저는 그냥 테마를 활용할 뿐인데.. 뭔가 마음에 안 들때면 뚝딱 수정해볼 수 있는 능력이 부럽습니다~ 말씀해주신대로, 좋지 않다고 해서 페이지들을 그냥 현재대로만 쓰기로 했어요 ^^

  2. "검색해보니 대부분 플러그인이 오래되었거나..." - 네이버가 아닌다음에야 모바일용 페이지를 따로 구축하는거는 SEO 관점에서 자살행위라서요. ㅎㅎㅎㅎ

    1. 예. 맞는 것 같습니다. 만약 동일한 컨텐츠로 모바일용 사이트를 구축하면 컨텐츠가 중복되는 것으로 구글에서 인식하지 않을까요?
      그런데 간혹 이런 것을 원하는 분이 계시더군요.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.