적용버전 : XpressEngine 공통 별난 놈! 아이패드(iPad) - 플래시(Flash) 대체하기

별난 놈! 아이패드(iPad) - 플래시(Flash) 대체하기

아이패드는 모바일일까? PC일까?

iPad XE 코어는 스마트폰과 같은 모바일 기기를 위해 모바일 레이아웃을 별도로 설정하여 사용할 수 있습니다. 무선 통신을 이용하는 스마트폰의 웹브라우저는 PC와는 기능적인 면이나 화면 표시 방법에 있어서도 많은 차이점을 가지고 있는데 웹세상에서는 스마트폰 사용자들을 위해 별도의 HTML 문서를 만들어 두고 모바일용 웹브라우저가 홈페이지에 접속을 하게 되면 PC용 웹문서가 아닌 모바일 화면에 최적화된 웹문서를 찾아서 보여줍니다.

Daum(다음) 또는 Naver(네이버) 등과 같은 포털사이트도 도메인 앞에 m을 붙여서 모바일 기기를 위한 별도의 웹페이지를 만들어 두고 있답니다. 확인해 볼까요? 아래를 클릭해 보세요.

그런데 궁금한 것이 스마트폰으로 다음 또는 네이버 사이트에 접속할 때 위와 같이 m을 넣어 접속하는 사람은 한 사람도 없습니다. 그러면 어떻게 된 걸까요? 그 비밀은 웹서버 또는 웹문서 안에 접속자(사용자)가 어떤 웹브라우저를 이용하여 접속하였는지 호패(?)를 확인하는 소스를 넣어두고 모바일이면 모바일 페이지를, PC용 웹브라우저가 접속하면 기존의 웹문서를 찾아서 보여주는 것이지요. 이렇게 사용자의 소프트웨어를 식별할 수 있는 것은 웹브라우저마다 각각 호패 역할을 하는 User-Agent 값을 가지고 있기 때문입니다.

XE 코어도 xe/classes/mobile/Mobile.class.php 파일에서 $_SERVER['HTTP_USER_AGENT'] 를 이용해 (iPod|iPhone|Android|BlackBerry|SymbianOS|SCH\-M[0-9]+)를 구분하고 모바일인 경우에는 m=1 이라고 붙여 사용한답니다.

그런데 문제가 생겼습니다. 아이패드(iPad)로 홈페이지에 접속해 보니 위 그림처럼 모바일 레이아웃이 아닌 기존의 PC용 레이아웃을 그대로 표시합니다. XE에서도 iPod, iPhone은 있지만 iPad는 없습니다. 그러면 아이패드는 PC 인가요? 아이패드의 User-Agent를 확인해 볼까요?

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

분명한 것은 아이패드도 모바일(Mobile)입니다. 하지만, 화면의 크기가 1024X768의 값을 가지는 보통의 PC와 동일한 화면을 표시할 수 있기 때문에 아이패드 웹브라우저는 모바일 구분에서 제외한 것이지요. 그런데 이것이 왜 문제냐구요? 애플사(APPLE)는 아이폰, 아이패드에서 플래시를 지원하지 않기로 아주 작정을 하고 고집(?)을 부리고 있기 때문입니다. 플래시로 만든 메뉴는 어떻하지요? 상품이나 광고를 위해 넣어둔 플래시 무비는요? 모바일이면 모바일 레이아웃으로 가면 좋을텐데 그러지도 않고 아주 큰 골칫거리네요...^^


XE 코어에서 모바일 기기 추가하기

아이패드에서 플래시가 지원되지 않기 때문에 가장 쉽게 해결하는 방법은 XE 코어에서 모바일 레이아웃을 설정하여 사용하고 있는 xe/classes/mobile/Mobile.class.php 파일에서 각종 모바일 기기 및 스마트폰을 구분하는 구문에 (iPod|iPhone|iPad|Android|BlackBerry|SymbianOS|SCH\-M[0-9]+) 처럼 iPad 기기를 추가합니다. 하지만, XE 코어를 업그레이드 할 때마다 수정해야 하고, 1024X768 화면을 사용하는 아이패드에서 모바일 레이아웃은 무척 횡~하고 썰렁하게 보일 것입니다.

TIP - XE 코어 v1.5 이상의 상위 버전에서는 모바일 기기를 다음과 같이 구분합니다.
('iPod','iPhone','Android','BlackBerry','SymbianOS','Bada','Kindle','Wii','SCH-','SPH-','CANU-','Windows Phone','Windows CE','POLARIS','Palm','webOS','Dorothy Browser','IEMobile','MobileSafari','Opera Mobi','Opera Mini','MobileExplorer','Minimo','AvantGo','NetFront','Googlebot-Mobile','Nokia','LGPlayer','SonyEricsson','HTC','hp-tablet','SKT','lgtelecom','Vodafone')


XE 구문을 이용해 User Agent 구분하기

레이아웃에서 XE 구문을 이용해 User Agent의 값을 확인해 보고 iPad라는 문자가 있다면 $is_iPad 변수에 iPad 라는 문자를 담고, 출력할 내용을 조건문을 통해 구분하는 방법입니다.

1. 레이아웃(layout.html) 최 상단에 다음과 같은 구문을 추가합니다.

{@
$browser_type = getenv("HTTP_USER_AGENT");
if(preg_match("/iPad/",$browser_type)) $is_iPad="iPad";
}

Live TEST : 아이패드로 접속한 경우 iPad로 접속하였다고 출력합니다.

현재 접속 브라우저는 아이패드(iPad)가 아닙니다.


2. 레이아웃(layout.html)에서 플래시가 삽입 되어 있는 엘리먼트에 XE 템플릿 조건문을 이용해 플래시를 대체합니다.

<!--@if($is_iPad == "iPad")-->
   <!--// 아이패드인 경우 GNB 메뉴를 표시한다.  -->
   <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
   </ul>
<!--@else-->
   <!--// 아이패드가 아닌 다른 웹브라우저는 플래시를 표시한다.  -->
   <script type="text/javascript">displayMultimedia("flash_example_03_50.swf","500","120",false);</script>
<!--@end-->

PHP를 이용해 User Agent 구분하기

레이아웃 문서에서 PHP 구문을 이용해 User Agent의 값을 확인해 보고 iPad라는 문자가 있다면 PHP IF 조건문을 이용해서 플래시를 대체하여 사용할 수 있는 내용을 바꿔 보여줄 수 있습니다. 예를 들어 메뉴를 플래시로 활용한다면 아이패드인 경우 CSS 메뉴로 대체해서 보여주고, 광고 또는 홍보를 위한 간단한 플래시 무비인 경우에는 별도의 이미지를 보여줄 수 있겠지요. 단, 호스팅 서버에서 httpd.conf 파일 설정에 AddType application/x-httpd-php .php .php3 .inc .ph .htm .html 처럼 PHP를 파싱할 수 있도록 설정(HTML 문서 안에서 PHP를 실행)되어 있어야 합니다. 대부분의 호스팅 서버에서는 이와같은 기능을 지원하고 있습니다.

1. layout.html 최 상단에 아래의 PHP 구문을 삽입합니다.

<?php
	// 여러개인 경우에는 array ("iPhone","iPod","iPad"); 이렇게 추가한다.
   $arr_browser = array ("iPad");
      // 배열의 갯수만큼 반복하면서 확인한다.
      for($indexi = 0 ; $indexi < count($arr_browser) ; $indexi++) {
         // User Agent의 값에서 iPad 라는 문자를 찾은 경우 is_iPad 변수에 iPad 라고 설정한다.
         // 여러개인 경우  변수명은 $is_iOS = "iOS"; 라고 해도 좋습니다.(아래 조건도 같이 수정해야 합니다.)   
         if(strpos($_SERVER['HTTP_USER_AGENT'],$arr_browser[$indexi]) == true){
            $is_iPad = "iPad";
         }
      }
?>

2. layout.html 문서에서 플래시가 삽입되어 있는 엘리먼트에 PHP IF 조건문을 이용해 플래시를 대체합니다.

<?php if($is_iPad == "iPad") { ?>
   // 아이패드인 경우 메뉴를 표시한다. 
   <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
   </ul>
<? }else{ ?>
   // 아이패드가 아닌 경우에는 모두 플래시를 표시한다.
   <script type="text/javascript">displayMultimedia("flash_example_03_50.swf","500","120",false);</script>
<? } ?>

Live TEST(PHP를 활용한 테스트) : 아이패드로 접속한 경우 iPad로 접속하였다고 출력합니다.

현재 접속 브라우저는 아이패드(iPad)가 아닙니다.


javascript를 이용해 User Agent 구분하기

자바스크립트를 이용하는 경우 JS 문서에서 User Agent를 구분하고 layout.html 문서에서 플래시 영역과 대체할 내용을 display 속성을 이용해 표시하거나 감추도록 설정하게 됩니다. layout.html 문서 안에서 미리 지정된 다수의 class 를 모두 찾아서 아이패드인 경우에는 숨기고 아이패드가 아닌 경우에는 출력하는 장점이 있습니다. 또한 HTML 문서 안에서 PHP 구문이 파싱되지 않는 경우 자바스크립트를 활용할 수 있습니다.

1. layout.html 문서 안에서 플래시로 출력할 엘리먼트와 플래시가 지원되지 않을 경우에 대체할 엘리먼트에 class 를 부여합니다.

<div class="flashMenu">아이패드가 아닌 경우 플래시 메뉴 보기(이곳에 플래시 소스를 삽입한다.)</div>
<div class="cssMenu">아이패드인 경우 CSS 메뉴 보기(대체 메뉴를 삽입한다.)</div>

2. 레이아웃 JS 문서의 jQuery 시작과 종료 태그 안에 User Agent 를 구분하는 스크립트와 실행문을 추가합니다.

jQuery(function($){
	// userAgent에 iPad라는 문자가 있다면 
	if (navigator.userAgent.indexOf("iPad") != -1) { 
		// iPad 설정
		// flashMenu라는 class 명을 가진 엘리먼트는 모두 표시하지 말고
		$(".flashMenu").css("display", "none");
		// cssMenu라는 class 명을 가진 엘리먼트는 모두 표시한다.
		$(".cssMenu").css("display", "block");
	// 그밖에는 모두 반대로 표시한다.	
	} else { 
		$(".flashMenu").css("display", "block");
		$(".cssMenu").css("display", "none");
	}
});

Live TEST(jQuery를 활용한 테스트) : 두 요소중 하나만 출력합니다.

아이패드가 아닌경우 class="flashMenu"를 가진 엘리먼트만 표시

아이패드인 경우 class="cssMenu"를 가진 엘리먼트만 표시


TIP - PHP 또는 자바스크립트를 이용한 플래시 대체 방법은 XE 코어를 수정하지 않고서 활용할 수 있는 좋은 방법입니다. 또한 아이패드 이외의 모바일 구분은 XE 모바일 설정을 이용하여 모바일 레이아웃으로 연결하기 때문에 여기에서는 아이패드만을 구분하여 보았습니다.