[Mobile] 모바일 웹 개발, 화면 확대 방지 viewport

2009년 말 우리나라에도 아이폰이 출시하면서 우리나라의 인터넷 환경도 많이 바뀌게 되었는데요. 비단 아이폰 뿐만아니라 아이본과 더불어 삼성의 옴니아2, 그리고 구글의 새로운 모바일 OS 안드로이드를 탑재한 폰들이 다수 나오게 되면서 2010년 상반기는 인터넷 업계에도 많은 변화가 일어난 것 같습니다. 포털에는 모바일 웹페이지와 모바일폰용 어플리케이션 개발이 당연하게 되었구요. 앞으로는 더 다양한 분야에서, 그리고 다양한 사람들이 모바일 웹페이지를 만들고 사용하게 될것입니다. 그러기 위해선 "접근성"이라는 문제가 대두되게 되는데요. 이전에 이야기하던 장애인에 국한된 접근성이 아니라, 어떤 장애가 있든지 + 어떤 환경에 있든지 정보에 접근할 수 있고 그것을 이용할 수 있어야 할 것입니다.

모바일 웹을 개발하기 위해서는 일반 컴퓨터 환경과는 약간 다르기 때문에 고려해야 할 사항들이 몇가지 있습니다. 오늘은 처음으로 모바일 웹에 대해 이야기 하고자 하는데요. 모바일 웹이 일반 웹과 다른 것 중 가장 중요한 것은 접속하는 환경적인 차이가 너무 확연하게 크다는 것입니다. 이미 웹 표준이 대두되면서 크로스브라우징 문제가 많이 있었는데요. 우리나라의 인터넷 익스플로러 기반으로 개발된 많은 웹페이지가 다른 브라우져(파이어폭스, 사파리, 크롬, 오페라 등)에서 많이 깨지게 되는 현상입니다. 그래도 그나마 그것은 비슷한 컴퓨터 환경인데 모바일 환경은 그 차원이 달라집니다. 우선 OS부터에서 매우 다양하고, 마우스가 없으며 키보드가 제한적입니다. 그리고 무엇보다 디스플레이의 해상도가 천차만별입니다. 그러한 다양한 환경을 극복하기 위해서는 일단 심플하고 어떠한 화면 해상도도 커버할 수 있는 문서를 만들어야 합니다.

오늘은 처음으로 meta 값인 viewport 를 살표보도록 합시다. 우선 시원스럽게 사용방법부터 보지요. 메타값은 head 부분에 넣는 것은 다들 아시겠죠?

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

viewport는 화면의 확대를 관리하는 것입니다. 모바일 웹브라우져는 대부분 기기의 화면이 작기 때문에 원래의 페이지를 축소해서 보여줍니다. 하지만 모바일에 최적화 된 페이지는 그럴 필요가 없겠죠? width 를 100%로 주어 어떤 해상도에서도 딱 맞춤형으로 나오는 것이 사용성이 훨씬 좋아집니다. 그러기 위해서는 화면을 확대하는 것을 방지해야 하는데요. 이것을 사용하면 가로보기로 전환시에 확대가 되는 것을 방지 합니다. 코드의 내용을 자세히 보면, initial-scale 은 처음 열렸을 때, maximum-scale 은 확대시의 최대로 확대되는 비율을 나타냅니다. 그리고 user-scalabe 을 통해서 확대를 사용할지 안할지를 결정할 수 있습니다.

보통의 아이폰 사파리의 화면입니다. viweport 를 사용하지 않을 시에는 가로보기로 전환시 화면이 확대되게 됩니다. 하지만 viewport meta 값을 적용해주게 되면 가로나 세로에서 아주 딱맞에 화면에 표현됩니다.

폰트의 크기 변화가 없고, 화면의 width 가 넓어졌기 때문에 상단에 보이는 2번째 메뉴가 한줄로 늘어서게 된것을 볼 수 있습니다. 이 것을 사용하면 좀 더 매력적인 모바일 사이트를 만들 수 있습니다.

제 생각에 지금 이슈화 되고 있는 모바일 웹은 앞으로 인터넷 환경이 나아가게 될 새로운 시작이라고 생각합니다. 지금의 스마트폰 정도에서 뿐만 아니라, 아이패드 같은 다른 차원의 모바일 기기, 그리고 TV 로 까지 많은 변화가 일어날 것입니다. PC에서만 보아왔던 인터넷은 이제 어떠한 환경에도 구애받지 않고 우리에게 다가오게 될 것입니다. 한동안 잠잠했던 인터넷 세상은 크게 변화하기 위해 꿈틀거리고 있는 것 같습니다. 아직은 하루 앞이 잘 보이지 않지만 더 좋은 세상이 올거라는 것을 믿어 의심치 않습니다. 그런 좋은 세상을 만들기 위해 바로 우리가 노력해야 하는 것이 아닐까요?