7. 서버측 반응형 웹 접근방법 > 퍼블리싱강좌

퍼블리싱강좌

본 게시판은 강좌를 연재하는 회원님들을 위한 전용 게시판입니다.
강좌를 연재하시려는 경우 미리 관리자에게 알려 주십시오.
알리지 않고 등록되는 글은 팁 게시판 등으로 이동됩니다.

7. 서버측 반응형 웹 접근방법 정보

반응형웹 7. 서버측 반응형 웹 접근방법

본문

목차

  1. 왜 서버측 기술이 필요한가?
  2. Device detection (기기감지)
    1. WURFL
    2. Categorizr
  3. Feature detection (기능/특성감지)
  4. FD vs. DD
  5. 하이브리드 구현
    1. Detector
  6. 닫는글
  7. 참고문헌/자료

왜 서버측 기술이 필요한가?

반응형 웹의 대부분의 기술은, 클라이언트(브라우져)에 따라서 레이아웃과 스타일 심지어 기능까지 결정되기때문에, 대부분 CSS와 js를 이용해서 브라우져 상에서 이루어집니다. 하지만 지난강의의 반응형 이미지의 경우처럼 기기별로 적절한 화일크기의 이미지화일을 서버측에서 준비/제공해야 하는 등, 최적의 사용환경을 제공하기 위해서는 어느정도의 서버측 작업을 필요로 합니다.

비슷한 고민으로 LukeW의 Adaptation vs. Optimization 글에서도 다뤄졌고 일종의 해결책으로 RESS (Responsive Web Design + Server Side Components) 를 제안하였습니다 (글의 순서는 RESS 글이 2011년 9월, A vs. O 글이 2012년 6월 순으로 작성되었습니다). 원글에서는 데스크탑 큰 이미지와 모바일 작은 이미지 사용을 예로 들었으며, 이는 지난 강의의 서버측 반응형 이미지 기법에 해당하기도 합니다. 즉, RESS가 새로운 기법이라기보다는 ‘반응형 웹을 구현하기 위한 서버측 접근방법’을 통칭하는 것으로 볼 수 있습니다.

간단하게 RESS를 정의하면,

  1. js나 user agent 문자열등을 이용하여 웹브라우져와 클라이언트 기기의 정보를 파악하고 필요하면 쿠키등으로 서버측에 그 정보를 전달하고
  2. 이를 바탕으로 이미지를 포함한 콘텐츠, 레이아웃 등을 적절하게 제공하는 기법입니다.

대표적인 예로 사용되는 ND.edu 웹사이트의 경우, 서버측 기술을 사용하여 다음과 같은 효과를 얻었다고 합니다 (데이터/이미지 출처: A Case for RESS).

  1. Large screens: 136 requests  ❘  3.00MB
  2. Mobile phone: 23 requests  ❘  291.94KB
대형 tv 스크린과 모바일기기에서 보여지는 ND.edu 반응형 웹 사이트

이와 같은 기법을 사용하려면 브라우져와 기기의 특성을 감지하는 방법이 필요합니다. 이러한 감지는, 브라우져의 특성을 감지하는 feature detection과 기기자체를 감지하는 (그리하여 이미 축적된 기기별 특성을 이용하는) device detection 으로 나누어서 접근/구현되어 있습니다. device detection은 user agent 문자열을 이용하기에 때로는 user agent detection 이라고 하기도 합니다.

Device detection (기기감지)

브라우져가 HTTP 요청을 할때마다 보내는 user agent 문자열을 이용하여 기기/브라우져를 파악하고, 이미 구축된 프로파일 데이터베이스를 검색하여 원하는 정보를 얻는 방법입니다. 예를 들어, 제가 사용하는 Win7 64bit 구글 크롬 브라우져가 보내는 user agent는 다음과 같은 문자열입니다.

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11

눈으로 봐도, OS 정보 ( Windows NT 6.1; WOW64 )와 브라우져 정보 ( Chrome/23.0.1271.95 ) 등을 보여주고 있음을 쉽게 알 수 있습니다. 문제는 이러한 user agent 문자열이 표준화가 되어 있지 않고, 대부분의 정보는 불필요하거나 기기를 인식하는 데에 방해가 될 수 있다 (예: Safari/537.11 )는 것입니다.

Device detection의 최종 목표는, 어떻게든 해당 기기를 인식하고 그 기기/브라우져가 지원하는 마크업/API 등을 파악하는 것입니다. 그래야 해당 기기/브라우져에 맞는 HTML/CSS/js 를 구성해서 뿌려줄 수 있기 때문입니다. 그런데, 방금 지적한 문제점처럼, 이렇게 비표준화되고 매일매일 쏟아져나오는 수많은 기기별로 새로운 정보를 축적하는 일이 상당히 어려운 일이라는 것입니다. 그래서 오래전부터 이러한 서비스를 전문적으로 담당하는 업체/단체들이 있고 클라우드 서비스를 유료로 제공하기도 합니다.

대표적인 유료 기기 프로파일 데이터베이스로 Scientia Mobile이 관리하는 WURFL(Wireless Universal Resource FiLe)과 Device Atlas가 있습니다. 예를 들어,Device Atlas가 저장하고 있는 아이폰 프로파일 입니다.

물론 구체적인 정보는 비용을 지불한 후 볼 수 있습니다.

WURFL

유료 서비스인 클라우드기반 WURFL을 이용한 RESS 구현은 Anders M. Andersen의 Getting started with RESS 글을 참조하세요.

하지만 최신 정보가 필요하지 않다면 유료인 클라우드 WURFL 서비스를 사용할 필요는 없을것 같습니다. WURFL에서 제공하는 기기프로파일(XML)화일과 관련 php 화일들을 이용하면 어느정도는 device detection이 가능합니다. 실제로 사용하기 전에 WURFL의 라이센싱을 살펴보면 다음과 같습니다.

WURFL 라이센싱
  1. WURFL API는 AGPL (v3)을 따릅니다. 즉, WURFL을 다운로드하여 만든 어떤 코드도 오픈소스여야 합니다.
  2. WURFL XML 리파지토리 화일은 수정이 불가하며, WURFL API 만을 이용하여 접근해야 합니다.
WURFL 사용법

여기서는 구체적인 사용법 보다는 어떤 원리로 구동되는지 알아보는데에 촛점을 맞추겠습니다. 실제 사용하려는 분은, php에서의 WURFL 사용법 웹 문서를 참조하세요.

우선 다운로드한 화일에 포함되어 있는 config 화일을 적절하게 수정하고, 사용하고자 하는 php 화일에 이를 포함하고 사용하기 시작합니다.

getDeviceForHttpRequest($_SERVER);
// 얻어진 정보 중 사용하려는 정보를 수집합니다.
$is_wireless = ($device>getCapability('is_wireless_device') == 'true');
$is_smarttv = ($device>getCapability('is_smarttv') == 'true');
$is_tablet = ($device>getCapability('is_tablet') == 'true');
$is_phone = ($device>getCapability('can_assign_phone_number') == 'true');
$is_mobile_device = ($iswireless || $istablet);
// 수집된 정보에 따라서 기기를 분류합니다.
if (!$is_mobile_device) {
    if ($is_smarttv) {
        echo "This is a Smart TV";
    } else {
        echo "This is a Desktop Web Browser";
    }
} else {
    if ($is_tablet) {
        echo "This is a Tablet";
    } else if ($is_phone) {
        echo "This is a Mobile Phone";
    } else {
        echo "This is a Mobile Device";
    }
}
// 해당 기기의 특성/지원기능 등을 얻습니다.
if ($device->getCapability(‘resolution_width’) <= 480) {
    $smallScreen = true;
} else {
    $smallScreen = false;
}
?>

WURFL이 제공하는 기기별 특성/지원기능 (capability)는 약 500가지 정도가 되고 전체 목록은 http://wurfl.sourceforge.net/help_doc.php 에서 볼 수 있습니다.

이렇게 완벽에 가까운 정보를 제공받을 수 있음에도 불구하고,

  1. user agent 문자열이 계속 추가되어 축적된 충분한 정보가 없을 수 있고,
  2. user agent 자체를 속일 수 있고,
  3. 가장 중요하게는 실제로 보여질 화면의 정보는 다를 수도 (예, TV와 연결된 안드로이드 폰)

있기 때문에 다음 절에서 알아 볼 feature detection이 필요합니다.

Categorizr

WURFL보다 훨씬 간단하게, 기기의 종류를 분류해주는 코드로 Categorizr가 있습니다. 공개된 WURFL의 정보와 개인적으로 수집/분류한 약 110,000개의 user agent 문자열을 mobile, tablet, tv, desktop의 네개 분류로 나누어줍니다.



This device is a mobile

This device is tablet
This device is a desktop
This device is a TV

Feature detection (기능/특성감지)

우리말로는 ‘기능/특성 감지’ 정도이겠지만, 기기 감지(device detection)과 혼동되기 쉽기 때문에, 이를 분류하기 위하여 영문 그대로 feature detection 또는 줄여서 FD 라고 부르기로 합니다.

FD은 브라우져에 로딩된 js에 의해서 브라우져의 특성들을 감지하는 과정을 거칩니다. 이러한 접근방법의 대표적인 라이브러리로, HTML5 마크업과 API 여부를 판단하는 Modernizr를 들 수 있습니다. 예를 들어, 브라우져가 JSON을 지원하는지는 다음 코드로 알아볼 수 있습니다.

return !!window.JSON;

이러한 방법은 user agent 문자열을 이용하는 Device detection과는 달리 브라우져가 제공하는 feature를 직접 js로 체크하고 쿠키를 이용하여 서버측에 전달합니다. 대표적인 방법으로 modernizr-server 가 있습니다.

$value) {
       print "
$feature: "; print_r($value); } ?>

The server knows:
canvas: 1
canvastext: 1
geolocation: 1
crosswindowmessaging: 1
websqldatabase: 1
indexeddb: 0
hashchange: 1
...

Modernizr가 제공하는 feature 목록은 해당 웹페이지에서 확인할 수 있습니다.

또한 이러한 라이브러리를 사용하지 않더라도, 간단하게 브라우져 정보를 쿠키형태로 서버에서 접근할 수 있도록 할 수도 있습니다. (출처: Getting started with RESS)


FD vs. DD

그렇다면 이 두가지를 어떻게 사용해야 할까요? Anders M.Andersen의 글 Device detection vs. Feature detection 에서 다음과 같이 정리하고 있습니다.

Use feature detection to find if a device supports a feature, and then use device detection to remove false positives.
Feature detection을 이용하여 대상기기가 특정 기능을 지원하는지 감지하고, 그리고나서 Device detection을 통해서, 잘못 감지된 오류를 최소화 합니다.

Device detection vs. Feature detection, Anders M.Andersen

그의 글에서 사용한 ‘잘못 감지된 오류’의 예로, Modernizr가 CSS 애니메이션이 가능하다고 감지했으나 실제로는 작동하지 않거나 속도가 너무 느려서 실제 사용할 수 없는 경우등이었습니다.

하이브리드 구현

위와 같이 feature detection과 device detection/profiling 을 같이 구현한 대표적인 경우가 yiibu의 profile 라이브러리와 Dave Olsen의 Detector 가 있습니다. profile이 지금은 유지관리되고 있지 않기에, Detector가 거의 유일한 구현입니다.

Detector

Detector는, ua-parser-php가 user agent 문자열에서 (기기)정보를 얻고, Modernizr에서 얻어진 HTML5/CSS3 지원가능 여부를 기록하여 서버측에서 사용할 수 있도록 제공합니다. 예를 들어 브라우져가 svg를 지원하는지 아니면 canvas를 지원하는지를 다음과 같은 코드로 서버측에서 알아볼 수 있고, 그에 따라서 적절한 마크업/js 를 제공할 수 있습니다.

require_once("/path/to/Detector/lib/Detector.php");

// your script

if ($ua->svg) {
   ...
} elseif ($ua->canvas) {
   ...
}

구체적인 사용법은, ua-parser-php가 제공하는 다음과 같은 interfaceModernizr가 제공하는 feature 목록을 참조하세요.

require("UAParser.php");
$ua = UA::parse();

print $ua->family;         // Chrome (can also use $ua->browser)
print $ua->major;          // 16
print $ua->minor;          // 0
print $ua->patch;          // 912 (can also use $ua->build)
print $ua->browserFull;    // Chrome 16.0.912
print $ua->version;        // 16.0.912

print $ua->os;             // Mac OS X
print $ua->osMajor;        // 10
print $ua->osMinor;        // 6
print $ua->osPatch;        // 8 (can also use $ua->osBuild)
print $ua->osFull;         // Mac OS X 10.6.8
print $ua->osVersion;      // 10.6.8

print $ua->full;           // Chrome 16.0.912/Mac OS X 10.6.8

// in select cases the device information will also be captured

print $ua->device;         // Palm Pixi
print $ua->deviceMajor;    // 1
print $ua->deviceMinor;    // 0
print $ua->deviceFull;     // Palm Pixi 1.0
print $ua->deviceVersion;  // 1.0

// some other generic boolean options

print $ua->isMobile;       // true or false
print $ua->isMobileDevice; // true or false
print $ua->isTablet;       // true or false
print $ua->isSpider;       // true or false
print $ua->isComputer;     // true or false
print $ua->isUIWebview;    // true or false, iOS-only

닫는글

사실 RESS 또는 하이브리드 반응형 웹은, 반응형 웹 진영에서 아직도 많은 논쟁의 대상이 되고 있습니다. 서버측에서 모바일용 마크업/스타일을 별도로 만든다면, 모바일 웹사이트를 따로 만드는 것과 무슨 차이가 있는가 하는 생각도 들 수 있습니다.

하지만, 모바일 웹사이트를 완전히 별도로 만드는 것과는 달리, 해당 기기/브라우져의 특성/지원기능에 따라서 적절하게 ‘반응’하는 웹 콘텐츠/레이아웃/스타일/기능을 제공할 수 있다면, 그것이야 말로 진정한 반응형 웹이 아닐까하는 생각도 해봅니다. 결국, 반응형 웹을 구현하는 여러분들의 선택에 달려있을것 같습니다.

참고문헌/자료

  1. Luke Wroblewski, RESS (Responsive Web Design + Server Side Components), lukew.com, 2011
  2. Luke Wroblewski,  Adaptation vs. Optimization, lukew.com, 2012
  3. Tim Kadlec, Implementing Responsive Design,  ISBN-13: 978-03218216832012, 2012
  4. Anders M. Andersen, Getting started with RESS, .net magazine, 2012
  5. WURFL
  6. Categorizer
  7. Modernizr
  8. modernizr-server
  9. Anders M.Andersen, Device detection vs. Feature detection, andmag.se, 2011
  10. yiibu, profile
  11. Detector
추천6

댓글 전체

감사합니다. :)
반응형 웹 도입여부는 여러가지 사항을 고려해서 결정해야 하겠죠.
무엇보다도 모바일 사이트에서 보여줘얄 할 내용과 기능이, 데탑버전과 완전히 다르다면, 하지않는 것이 더 나을 수도 있겠죠.
코드 하이라이트를 거치면서  php 코드가 많이 달라져 보입니다.
정확 코드는 강좌 원본 구글 문서나, 해당 출처를 참조하세요.
2일에 걸쳐 끝까지 잘 읽었습니다. 곧있으면 반응형웹 프로젝트를 시작할 예정인데 정말 많은 도움이 되었습니다. 한번 더 정독하고 프로젝트 설계에 들어갈 생각입니다. :)
전체 277
퍼블리싱강좌 내용 검색

회원로그인

진행중 포인트경매

  1. [잔액관리형] 아웃백디지털상품권 10만원권 3장

    참여10 회 시작19.12.06 00:03 종료19.12.11 00:03

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT