모바일

모바일 친화적인 웹사이트 구축을 위한 5가지 규칙

Galen M. Gruman | InfoWorld 2011.03.10
아이패드나 아이폰, 모토로라 줌, 아트릭스, 블랙베리 토치 같은 모바일 장비를 이용해 웹사이트를 방문하기란 참 짜증나는 일이다. 그리고 데스크톱에 맞춰진 사이트들을 검색하는 것도 쉽지 않다. 그렇다고 지나치게 단순화되어, 원래 사이트 가치가 없어져버린 웹사이트로 연결되는 건 더욱 달갑지 않다. 이런 일들은 너무나도 자주 일어난다.
 
하지만 사실은 그럴 이유가 없다. 첫 번째 시나리오가 발생하는 이유는 모바일 장치의 작은 화면에 맞춰 자동으로 웹사이트를 보여주는 아주 단순한 웹 탬플릿 기술을 활용하지 않기 때문이다. 그리고 두 번째 시나리오는 웹사이트가 본질적으로는 웹 페이지를 간소화하거나 RSS 피드를 가져다 사용하는 모바일화 서비스를 도입한 다음, 거의 모든 모바일 디바이스에서 이용할 수 있는 WAP 호환 버전의 사이트를 생성하기 때문이다.
 
WAP 방식에는 문제가 있다. 웹에 접속할 수 있도록 되어 있지 않은 구식 휴대폰을 지원하기 위해, 많은 경우 링크와 같은 기본 내용을 간소화시키는 식으로 최소한의 공통분모에 맞춰져 있기 때문이다. 대부분의 노키아 휴대폰이나 볼드 이전에 나온 블랙베리 등, 이들 모바일 장비로 인터넷을 이용하는 비중은 전체의 0.5%에 불과하다.
 
따라서 iOS나 안드로이드, 블랙베리 OS 5 이후 버전, 윈도우 모바일, 윈도우 폰, 웹 OS , 그리고 노키아의 심비안(Symbian)을 희생시켜 가면서까지 구식 휴대폰에 맞춰 최적화를 하는 것은 어리석은 일이다.
 
방법은 간단하다. 한마디로 어리석은 일을 하지 않으면 된다. 대신 지금부터 소개할 5가지 규칙을 웹사이트에 적용해, 갈수록 늘어나고 있는 모바일 웹 사용자들을 효과적으로 다뤄야 한다.
 
1. 웹사이트에 접속하는 장비를 감지한다
아마도 인터넷 익스플로러의 수많은 이상 현상을 감지하기 위해, 온페이지(on-page) 자바스크립트나 서버 수준의 아파치 스크립트를 이용해 브라우저를 감지하고 있을 것이다. 이런 사용자 에이전트를 이용해 모바일 장비를 감지한다. 이와 관련해서는 자이트락스(Zytrax)의 툴이 업데이트도 자주 되고 포괄적인 사용자 에이전트를 제공해 유용하다.
 
팁 : 모토로라 모빌리티의 줌 태블릿은 스스로를 안드로이드 디바이스로 분류한다. 따라서 주의하지 않는다면, 이를 스마트폰으로 처리해 화면을 제공할 수도 있다. 이는 줌 사용자들에게는 아주 중요한 부분이다. 또 브라우저 창 크기를 감지하고, 이 정보를 이용해 안드로이드 스마트폰과 태블릿을 구별할 수 있도록 해야 한다. 그러나 아이패드의 경우에는 이런 고려를 할 필요가 없다. 다른 iOS 장치와는 사용자 에이전트가 다르기 때문이다.
 
2. 웹 페이지를 분해한다
웹 페이지에 접속하는 모바일 디바이스를 감지하고 나면, 페이지를 적절하게 표현해야 한다. 이를 위해 가장 먼저 할 일은 DIV를 이용해 페이지들을 컴포넌트로 설계 구축하는 것이다. 1024X768 해상도에 맞춰진 웹 페이지를 320X480의 모바일 장비를 통해 그대로 보여줄 수는 없다.
 
따라서 요소들을 DIV로 만든 후, 장치별로 화면을 표현할 수 있도록 해야 한다. 이는 자동으로 맞춰지는 웹사이트를 만들 때 가장 핵심이 되는 부분이다.
 
팁 : 페이지 폭과 테이블 폭 등을 정할 때 절대값을 사용하지 않는다. 대신 가능하다면 비율(%)을 이용한다. 이렇게 하면 모바일 장비의 화면보다 큰 요소를 만들지 않게 된다(큰 엘리먼트를 줄인 후, 여기에 맞춰 페이지를 축소하게 된다). 단 이미지와 같은 임베디드 객체는 예외이다. 크기를 줄이고 싶을 수도 있는데, 이때는 폭이나 높이에 절대값을 주면 된다.
 
3. 레이아웃 시나리오를 마련하고, AJAX와 CSS를 이용해 프로그램을 한다
디자인 기술이 필요한 부분이 있다. 어떤 방식으로 일반적인 브라우저 창에서 페이지를 보이게 할지 파악할 필요가 있다. 신경 쓸 크기는 사실상 3개 정도에 불과하다.
 
- 스마트폰은 320이나 480 픽셀이다. 이는 수직이나 수평화면 중 무엇을 최적화할지에 달려 있다. 개인적으로는 320의 수직 폭으로 최적화 할 것을 권한다.
- 태블릿은 768이나 1024 픽셀이다. 이 경우 수평폭을 기준으로 1024 픽셀에 최적화하는 것이 좋다.
- 데스크탑 브라우저의 경우, 1024 픽셀일 확률이 높다. 특히 가장 보편화된 17인치 모니터를 기준으로 사이트를 디자인하고 있다면 말이다.
 
스마트폰과 태블릿 화면 크기에 있어, 작은 차이는 걱정하지 않아도 된다. 이 3가지 크기가 전반적으로 들어 맞기 때문이다. 모토로로의 줌 같은 와이드스크린 태블릿에 최적화하기를 원한다면, 이런 사이즈에 1280 픽셀을 추가한다.
 
이제 3가지(또는 4가지) 레이아웃 시나리오별로 결정할 차례다. 경우에 따라서는 스마트폰용으로는 너무 복잡하게 보이지 않도록, 페이지의 특정 요소를 빼기로 결정을 내릴 수도 있다. 대신 제거한 요소의 일부를 링크를 통해 새로운 페이지로 연결할 수도 있다. 또는 모바일 사용자들은 이를 보지 못하도록 할 수도 있다.
 
또 다른 경우에는, 컴포넌트들을 옮기게 된다. 스마트폰에 최적화하기 위해, 하나의 칼럼에 이들 컴포넌트를 수직으로 쌓거나, 태블릿이나 데스크톱에 최적화하기 위해, 보다 전통적인 수평 컬럼을 유지하거나 하는 식이다.
 
다음으로는, 보여주지 않기로 결정한 DIV를 숨기고, 필요하다면 버전을 대체하고, 해당 장비의 종류별로 적합한 레이아웃 매개변수를 적용하면서 CSS를 생성한다. 자바스크립트를 이용해 모바일 장비를 감지한 후, 장비별로 적합한 CSS를 불러내는 것이다. 대안으로, 아파치 스크립트를 이용해 모바일 장비를 감지한 후, 해당 페이지로 다시 연결할 수도 있다.
 
이런 접근법은 각 장비별로 관리와 보고를 위해 별개의 페이지를 유지해야 한다는 것을 의미한다. 그러나 자바스크립트의 오버헤드와 한 페이지에 모든 내용을 집어넣는 데서 오는 복잡성을 피할 수 있다. 또 자바스크립트나 PHP 코드를 이용해 CSS가 처리하지 않는 레이아웃 수정을 할 수 있다.
 

회사명 : 한국IDG | 제호: ITWorld | 주소 : 서울시 중구 세종대로 23, 4층 우)04512
| 등록번호 : 서울 아00743 등록발행일자 : 2009년 01월 19일

발행인 : 박형미 | 편집인 : 박재곤 | 청소년보호책임자 : 한정규
| 사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.