반응형
모바일 웹사이트제작시 필히 고려해야할 사항들이 몇가지 있습니다. 대표적인예로 화면 사이즈겠지요. 아무튼 제가 제작하면서 겪은 사항들을 여기에 적어봅니다. 다는 아니더라도 몇몇 적습니다.
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" />
위 태그로 거의 모든 스마트폰 공용으로 웹페이지의 넓이가 디스플레이 크기에 맞춰집니다.
meta의 viewport는 각 디바이스에 출력할 화면 size, dpi, scale 등을 선언할 수 있는 메타입니다.
위에 말씀 하셨던 user-scale의 경우 pc용 브라우저의 확대 기능가 비슷한 기능이라고 볼수 있습니다. 디바이스가 작다 보니 확대를 해서 볼수 있게 하는 기능이라고 보시면 됩니다. 즉... 사실상 이 부분은 갑을이 갈리겠지만 user스케일이 가능하여야 접근성에 더 뛰어 날수 있겠지요~ 하지만... 국내 모바일 시장의 분위기가 앱과 같은 느낌의 웹사이트를 많이 원하다 보니 고정 스케일로 가는 경우가 많습니다.
2. 스마트폰의 로테이션에 맞춰 웹페이지의 너비가 변형되어야하며 구조적으로 breaking이 일어나지 않아야한다.
- 이 문제는 제작자의 코딩실력에 달렸습니다. 정확히 말하자면 픽스된 레이아웃구조는 절대로 사용되면 안된다는 말입니다.
항상 레이아웃은 변형가능한 상태로 제공이 되야먄 합니다. 예를들면 width="100%" 가 있겟지요.
너비 부분은 윗분 말씀 처럼 가급적 가변 사이즈로 구현 되는 것이 좋습니다 다만 또 국내 모바일 웹 실정이. 앱과 같은 이펙트를 많이 원하다 보니 고정 사이즈로 가는 경우가 많습니다( 예) 아반떼 모바일 프로모션 사이트 http://avante.hyundai.com/qr01.html )
3. 안드로이드의경우 웹페이지가 브라우징된후 주소창이 사라져야한다.
- 네이버나 다음의 모바일웹사이트에 가보시면 주소창이 사라지는걸 확인할수 있습니다. 아이폰과 안드로이드를 테스트한결과
둘다 사라집니다. 하지만 개인이 지식없이 만든 페이지의 대부분은 아이폰에서는 어떨지몰라도 안드로이드쪽에서는 100% 주소창이 남아있는 결과를 초래합니다. 결국 주소창만큼 페이지가 아래로 밀리게되고 보여지는 부분은 9/10이 되겟죠. 손으로 올려보면 주소창이 사라지지만 그건 근본적인 해결방안이 아닙니다.
위 사항은 자바스크립트문으로 간단하게 처리가 됩니다.
<script type="text/javascript" language = "javascript">
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>
브라우저에 따라 다르지만 대부분은 주소창이 남게 되어있습니다. 이를 위해서 위와 같은 스크립트를 활용하여 스크롤을 강제로 시키는 경우가 많습니다 국내 에서도 대부분은 그렇게 하고 있습니다.
위 스크립트는 크로스 브라우징이 되지 않으니 주의 바랍니다. 페이지 로드시 scrollTo(0, 0)을 해주시면 됩니다.
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>
가급적 스크립트를 활용하지 말고 서버 사이트 언어로 처리하시는게 좋습니다 : )
그리고 사용자가 pc버젼과 모바일 버젼을 선택 할 수 있게 하는 것이 좋습니다
물론 모바일기기로 접속시 1차적인 접근은 모바일사이트로 가게 하는 것도 괜찮은 방법 같습니다.
이정도가 제가 겪은 난관이었습니다. 대다수의 문제는 금방해결했습니다. 아무래도 오픈소스다보니 여기저기 퍼져있는 코드들을 주어맞추고 이해하고 xml관련 사항도 읽어보면 금방 해결되는 문제들입니다. 하지만 제일 중요한건 스마트폰에서 볼때 웹페이지의 크기 변화입니다. 이점은 웹페이지 제작자가 가장 고려해야할 사항입니다. 수많은 스마트폰의 디스플레이액정 사이즈에 맞춰 개발해야하기때문에 절대적인 px 단위 사이즈는 적어넣지않는게 바람직하다는 제 결론입니다. 물론 이미지야 상관없겟지만 말입니다.
[출처] 모바일 웹사이트 제작시 필수사항 (하드코딩하는사람들) |작성자 이상화
반응형
