스마트폰 2천만명 시대인 지금은 모바일 웹사이트 코딩은 일반 웹사이트 코딩만큼 하게 되는것 같은데요. 최근 1,2년 사이 웹을 이용할 수 있는 다양한 모바일 기기가 등장하면서 미디어 쿼리를 이용해 다양한 해상도에 반응하는 웹을 구현하는 기술인 반응형 웹까지 만들어지게 되었습니다.

모바일 코딩은 html5와 css3까지 다양하게 사용할 수 있어서 재미있는것 같습니다.

하지만 모바일 웹사이트 코딩을 처음 접하시는 분들은 일반 웹사이트 코딩과 조금은 다른 부분 때문에 난관에 봉착할 때가 있을 것 입니다. 맑은커뮤니케이션에서 조금이나마 도움이 될 수 있기를 기대하면서 기본적인것 부터 정리 해보려구요.

1. 화면 회전시 폰트사이즈 고정

   body {-webkit-text-size-adjust:none}
   

   페이지가 랜더링될 때 모바일 사파리는 텍스트의 크기를 자동으로 조절하는데, 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수 있습니다. css의 body에 적어주면 해결됩니다.
   • auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절
   • none : 폰트사이즈 고정
   • n% : 폰트사이즈를 지정된사이즈로 변경
2. -webkit-text-size-adjust의 3가지 속성
3. 모바일 웹페이지를 가로크기에 맞추기
   스마트폰에서 랜더링 시켰을경우 터치를 통한 화면의 크기가 변경되지 않아야 하는데, 일반 웹사이트들은 그 크기가 pc에 맞게 제작되었기 때문에 상대적으로 작은 모바일디스플레이로는 감당하기 힘들게 됩니다. 이럴 때 위의 메타태그로 디스플레이 크기에 맞춰질 것입니다.
   • width=device-width : 플랫폼 가로 크기에 맞춤
   • initial-scale : 확대비율
   • maximum-scale : 최대확대비율
   • minimum-scale=1.0 : 최소축소비율
   • user-scalable : 사용자에 의한 화면확대 가능여부 (yes / no)
4. 웹페이지가 브라우징된 후 주소창을 사라지게 합니다.

   window.addEventListener('load', function() {
   	setTimeout(scrollTo, 0, 0, 1);
   }, false);
   

5. 스마트폰으로 접속시 해당 모바일 웹페이지로 자동 링크됩니다.

   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++) pre !="-1)" document.location="링크될 주소" ; < if(uagent.indexof(mobilephones[i])>
   </mobilephones.length;i++)>

6. 페이지의 전체 백그라운드이미지를 넣을 경우, background-size를 사용합니다. 이 경우는 이미지가 늘어나거나 해도 시각적으로 무리가 없어야 할 것같습니다. 그라데이션등이 있는 bg는 늘어나면 보기 안좋더라구요~

   body {background:url(bg.png) repeat 0 0;
   background-size:100% 100%;}
   

7. 이미지를 해상도에 맞게 조절하고 싶을 경우에는 max-width를 사용합니다.

   h1 {width:auto;} 
   h1 img {max-width:100%;}
   

8. width값이 100%인 경우 border 값을 넣으면 가로스크롤이 생겨 버리니 조심해야겠죠.
9. select, input등에 원치않는 그라데이션과 라운드가 처리되어 있는데, 이 form 요소의 기본속성을 초기화하는 방법입니다.

                       
   border-radius:0px 0px; /* 아이폰의 input 라운드 초기화 */
   -webkit-appearance:none; /* form 요소의 디바이스 기반 스타일 초기화 */
   

10. html5의 form 요소의 type속성(http://biew.co.kr/18 참고)을 이용한 상황에 맞는 아이폰 자판 레이이웃을 호출할 수 있습니다. (아이폰의 경우입니다.)
    html5의 새로운 input 속성인 입력값을 설명해주는 placeholder 속성도 활용할 수 있습니다. 이는 웹접근성 지침(http://biew.co.kr/17 참고)에도 표기되어있으며 웹접근성을 높일 수 있습니다.

네이티브 앱

iOS의 개발 언어인 Object-C 또는 안드로이드는 Java를 이용한 이클립스에서 작성된 특정 플랫폼에서만 작동되는 앱을 말합니다.
네이티브 앱의 장점으로는 특정 플랫폼에 함께 탑재되어 있는 다른 어플리케이션과의 인터페이스나 API의 사용이 가능하여 어플리케이션 간의 확장성이 용이하고 UI 구성요소가 대부분 패키지화 또는 라이브러리 형식으로 기본 제공되기 때문에 빠른 로딩 속도가 장점입니다.
단점으로는 특정 플랫폼에서만 작동되기 때문에 제한적인 환경을 가지고 있고, 업데이트는 앱스토어를 통해서 받기 때문에 앱스토어를 열기 전까지는 업데이트를 할 수 없는 것이 단점입니다. 또한 안드로이드의 경우는 회사마다 device의 환경이 다르기 때문에 개발의 어려움이 많습니다.

모바일 웹

웹페이지를 작업할 때 사용하는 HTML5, CSS, JavaScript 등을 활용하여 작성된 브라우저에서 동작되는 화면을 말합니다. 따라서 브라우저의 환경적인 특성을 제외하고는 대부분 모든 브라우저에서 볼 수 있는 장점이 있습니다. 개발 시 화면 체크를 바로바로 확인할 수 있고, 바로 변경 및 수정이 가능하기 때문에 즉각적인 대응이 가능한 장점이 있습니다. 그리고, 기존의 웹 개발방식과 동일하기 때문에 개발 비용을 절감할 수 있는 장점도 가지고 있습니다. 단점은, 모바일에서 사용되는 API의 활용이 불가능하다는 것과 UI의 구성요소를 실시간으로 로딩하므로, 처리속도가 느리다는 점과 인터넷이나 WiFi의 연결 상태에 따라 영향을 받는다는 단점이 있습니다.

하이브리드 앱

하이브리드 앱의 경우에는 용어의 정의가 모호한 부분이 있지만, 대체적으로 모바일 앱과 유사한 점이 있습니다.
네이티브 앱과 동일한 환경을 가지고 있지만, 부분적으로 HTML, CSS로 작성된 앱을 말합니다. 인터넷 환경과 WiFi 환경에 따른 영향에도 유연하고, 모바일 앱보다는 빠른 로딩 속도와 스마트폰에서 바로 실행이 가능하다는 장점이 있습니다. 네이티브 앱의 개발보다 하이브리드 앱의 개발 비용이 상대적으로 절감할 수 있는 개발 형태라고 볼 수 있습니다.
단점으로는 네이티브 앱과 마찮가지로 앱스토어를 통해서 업데이트 및 업그레이드를 해야 하는 단점이 있습니다.
하이브리드 앱의 개발이 네이티브 앱과 모바일앱의 장, 단점을 적절히 활용하여 개발할 수 있는 형태라고 볼 수 있습니다.

현재 개발 추세는 하이브리드 앱의 개발이라 할 수 있습니다.
화면 안에서의 네비게이션 시스템이나, 중요한 Key 역활을 하는 부분을 제외하고 일반적인 정보를 대부분 모바일 웹으로 개발하는게 전반적인 내용에서 볼 때 단점보다는 장점이 많다는데 있습니다.
Cross Flatform이나 web 서비스 매쉬업을 지원하는 유일한 대안이라고 볼 수 있고, 모바일 웹에 있어서 절대적인 지원을 받고 있는 HTML5가 있기 때문에 가능한 것 입니다.
전반적인 개발 비용을 절감할 수 있고, 개발 인력의 수급, 개발 기간, 확장성을 고려할 수 있다는 점 역시 간과할 수 없는 부분이기도 합니다.

자료 : http://kimdirector.tistory.com/