수라의 티스토리

출처 : http://m.mkexdev.net/34

얼마전 참석했던 세미나에서 뷰포트(Viewport)에 대한 언급이 잠시 있었다

모바일 웹 UI 개발시 Display 영역 조절과 관련된 기술요소인듯 하였고 자세한 설명보다는
뷰포트 메타태그 기술방식 위주의 설명이여서 완전한 개념을 파악하기는 힘들었다

뷰포트에 간략히 조사해 보았다

뷰포트가 사파리 기술?
뷰포트를 조사하다 처음 든 의문은, 이것이 애플의 (모바일) 사파리 기술인가? 하는 것이었다

대부분의 인터넷 블로그에서 뷰포트를 소개하면서 아이폰 기반 모바일 웹을 대상으로 하였고
사파리 브라우저가 인식하는 메타태그로 설명하고 있었다

또 다른 자료에서는 아이폰과 안드로이드 심지어 오페라 모바일 등 다른 브라우저에서 권장하는
뷰포트 태그를 제시하기도 하였다

뭐지.. 이거? 뷰포트 태그가 모바일 사파리가 인식하는 개념처럼 하더니 다른 브라우저에서도
인식되나보네? .. 하면서 살짝 의문이 들기 시작했다

짧은 시간 의문을 품다 문득  떠 오른 생각은 바로 웹킷(WebKit) 이었다
웹킷은 아이폰에 있는 모바일 사파리의 핵심 엔진이며 안드로이드의 브라우저 기반이기도 하다
더불어 웹킷은 다른 모바일 브라우저에서도 사용되고 있는 기술이다
웹킷과 뷰포트의 연결고리가 더 자연스럽다는 생각이 들었다

그렇다. 뷰포트 메타태그는 웹킷 기반의 모바일 브라우저에서 인식 가능한,
표시영역 제어와 관련된 기술요소 였던 것이다


뷰포트(Viewport)란?
뷰포트라는 개념자체는 모바일 웹에 국한된 것은 아니다
DirectX 나 여타 그래픽, 디자인 관련 기술에 개념적으로 사용된 용어인 듯 하다
그러나 처음 나에게는 낯선 용어였다

뷰포트를 대략 정의하자면,
컴퓨터나 휴대 단말기 등 장치에 Display 요소가 표현되는 영역을 말한다
모바일 웹의 경우 아이폰 사파리 브라우저에서 웹 페이지가 표시되는 영역으로 해석할 수 있다

다음 두 애플의 자료에서 뷰포트에 대한 상세한 내용이 제공되고 있다
Configuring the Viewport
Supported Meta Tags 


뷰포트 설정 참고
포털 등 기 개발된 모바일 웹 사이트에서 설정한 뷰포트 태그를 참고해 보자

1) m.naver.com
<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) m.daum.net
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

3) m.nate.com
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

4) m.yahoo.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

5) m.aladdin.co.kr
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

어쩜 이렇게 모두 거의 동일할까?
이것이 최적의 구성인가... ㅎㅎ

가로 너비는 장치 너비를 지정하였으며 사용자에 의해 확대/축소가 되지 않도록 설정하고
초기 스케일은 1.0 즉 확대/축소 없는, 본 크기 그대로를 지정하였다

#page {width:100%;height:100%;background-color:#666;}

@media (max-width:1024px) {
#page {background-color:#fff;}
}
@media (max-width:509px) {
#page {background-color:#ff0;}
}

@-moz-document url-prefix()
{
.class 네임
{
padding: xxx px;
}
}


ex)

@-moz-document url-prefix()
{
#recruitAll .yamada{
position:absolut;
top:파폭에서의 수치px;
left:파폭에서의 수치px}
}

<style type="text/css">
label.on{color:blue;font-weight:bold}
</style>
<script type="text/javascript">
function Set_Faq(obj){
 var Faq_dtList = document.getElementById("radioFom").getElementsByTagName("label");
 for (i=0;i<Faq_dtList.length;i++) {
  if(obj==Faq_dtList[i]){
  Faq_dtList[i].className = (Faq_dtList[i].className = "on" ? "on" : "")  
  } else {
  Faq_dtList[i].className = ""
  }
 }
}
</script>

<form id="radioFom" method="post" action="">
 <label for="aa" onclick="Set_Faq(this)" class="on"><input type="radio" id="aa" name="rdo" checked="check" />하하</label><br />
 <label for="bb" onclick="Set_Faq(this)"><input type="radio" id="bb" name="rdo" />하하</label><br />
 <label for="cc" onclick="Set_Faq(this)"><input type="radio" id="cc" name="rdo" />하하</label><br />
 <label for="dd" onclick="Set_Faq(this)"><input type="radio" id="dd" name="rdo" />하하</label><br />
</form>

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" name="viewport">

viewport 를 지정하지 않으면 980px가 된다.

user-scalable=no/yes : 사용자가 확대 축소를 허가 할지 안할지를 정한다. 

 initial-scale=1.0 : 기본 확대 배율이다. 이것을 이용하여 살짝 큰 이미지의 기본확대배율을 0.75정도로 조절하여 사용할수있음

maximum-scale=1.0 최대 확대 배율이다. 얼마까지 배율을 증가시킬수 있을껀지 결정한다.

 minimum-scale=1.0 : 최소 확대 배율이다. 얼마까지 와이드? 시킬껀지를 결정한다

모바일 웹앱 개발자가 알면좋은 43가지 UX , UI
http://www.uxbooth.com/blog/essential-controls-for-web-applications/