모바일 웹사이트제작시 필히 고려해야할 사항들이 몇가지 있습니다. 대표적인예로 화면 사이즈겠지요. 아무튼 제가 제작하면서 겪은 사항들을 여기에 적어봅니다. 다는 아니더라도 몇몇 적습니다.
1. 스마트폰에서 브라우징 시켰을경우 양손터치를 통해 화면의 크기가 변경되지 않아야한다.
- 일반 사이트들은 그 크기가 pc(모니터 크기) 에 맞춰 제작되었기때문에 상대적으로 작은 스마트폰디스플레이로는 감당하기 힘듭니다. 대부분 양손으로 페이지를 확대하여 사용하고 그럴때마다 늘어나는 스크롤바에 짜증에 대비하여야합니다. 이점은 meta태그로 간단히 해결됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
위 태그로 거의 모든 스마트폰 공용으로 웹페이지의 넓이가 디스플레이 크기에 맞춰집니다.
2. 스마트폰의 로테이션에 맞춰 웹페이지의 너비가 변형되어야하며 구조적으로 breaking이 일어나지 않아야한다.
- 이 문제는 제작자의 코딩실력에 달렸습니다. 정확히 말하자면 픽스된 레이아웃구조는 절대로 사용되면 안된다는 말입니다.
항상 레이아웃은 변형가능한 상태로 제공이 되야먄 합니다. 예를들면 width="100%" 가 있겟지요.
3. 안드로이드의경우 웹페이지가 브라우징된후 주소창이 사라져야한다.
- 네이버나 다음의 모바일웹사이트에 가보시면 주소창이 사라지는걸 확인할수 있습니다. 아이폰과 안드로이드를 테스트한결과
둘다 사라집니다. 하지만 개인이 지식없이 만든 페이지의 대부분은 아이폰에서는 어떨지몰라도 안드로이드쪽에서는 100% 주소창이 남아있는 결과를 초래합니다. 결국 주소창만큼 페이지가 아래로 밀리게되고 보여지는 부분은 9/10이 되겟죠. 손으로 올려보면 주소창이 사라지지만 그건 근본적인 해결방안이 아닙니다.
위 사항은 자바스크립트문으로 간단하게 처리가 됩니다.
<script type="text/javascript" language = "javascript">
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>
4. 스마트폰에 내장된 브라우저에 따른 크로스브라우징이 가능해야한다.
- 이 문제또한 위 2번사항과 같습니다. 항상 모든 문제는 프로그래머에게 달려있습니다. 딱히 답이 없습니다. 모바일용이든 일반 pc용이든 이점에 대해서는 무조건 "웹 표준을 지켜라" 라는 말밖엔 떠오르지 않습니다.
5. 스마트폰으로 접속시 해당페이지의 pc버젼판이 아닌 웹용페이지로 자동 링크되어야한다.
- 모바일 웹페이지를 만들고 난뒤 가장 중요한 일입니다. 앞으로 스마트폰이 강력한 추세일테이고 그에따른 소,중,대기업들이 자사의 웹페이지외에도 모바일용 웹페이지를 제공하여 일반인들에게 더 빠르고 쉽게 접근이 가능하도록 할것입니다. 여기서 발생하 문제가 어떻게하면 기존에 웹페이지에서 pc로 접했을때와 스마트폰으로 접했을때 보여지는 페이지를 분류하냐는 겁니다. 간단한 방법으로는 기존 웹페이지에서 스마트폰으로 링크글 거는 방법이 있지만 이것은 기존 페이지를 보고 난뒤에 접하는 문제이기때문에 결코 올바른 해결방안이 아닙니다. 이 문제또한 자바스크립트를 통해 스마트폰의 종류를 구별한다음 알맞게 페이지 브라우징 처리를 할수있습니다.
<script language="Javascript">
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++)
if(uAgent.indexOf(mobilePhones[i]) != -1)
document.location="링크될 주소";
</script>
이정도가 제가 겪은 난관이었습니다. 대다수의 문제는 금방해결했습니다. 아무래도 오픈소스다보니 여기저기 퍼져있는 코드들을 주어맞추고 이해하고 xml관련 사항도 읽어보면 금방 해결되는 문제들입니다. 하지만 제일 중요한건 스마트폰에서 볼때 웹페이지의 크기 변화입니다. 이점은 웹페이지 제작자가 가장 고려해야할 사항입니다. 수많은 스마트폰의 디스플레이액정 사이즈에 맞춰 개발해야하기때문에 절대적인 px 단위 사이즈는 적어넣지않는게 바람직하다는 제 결론입니다. 물론 이미지야 상관없겟지만 말입니다.
작성일 : 12-04-16 18:16
조회 : 2,948
