모바일 브라우저에서 확대를 막을 수 있을까?

모바일 브라우저에서 확대를 막을 수 있을까요?

고객이 이런 질문을 한다면 한 문장으로 대답하기 어렵다. 모바일 브라우저에서 사용하는 뷰 포트의 의미를 간단하게 설명하는 것은 어렵기 때문이다. 이런 질문은 중요하다. 이 기회에 좀 더 자세한 정보를 고객에게 제공할 필요가 있다. 고객이 사용하는 브라우저에 따라서 동작이 달라질 수 있음으로 어떤 브라우저를 사용하려는지 꼭 물어보아야 한다.

안드로이드 폰이라고 가정하면 브라우저 옵션에 주의해야 한다. 안드로이드 내장 브라우저나 모바일 크롬 브라우저는 옵션으로 “화면 수동 확대”, “확대/축소 강제 사용” 이런 제목의 기능을 제공할 수 있다. 이런 옵션을 사용한다면 어느 웹 사이트라도 확대 혹은 축소를 막을 수 없다. 사용자가 이런 옵션을 사용하지 않는다는 가정하에 특정 태그를 모바일 웹 사이트에 삽입하는 방법으로 확대 축소를 막을 수 있다. 아래 코드는 한 예다.

<meta name="viewport" content="width=device-width, user-scalable=no">

모바일 브라우저는 이 내용을 읽고 확대 및 축소 기능을 제한한다. 기능 제한은 브라우저 마음임으로 지원 여부도 브라우저 별로 확인해야 한다. 모바일 브라우저를 사용하지 않고 안드로이드 웹 뷰를 사용한다면 고려 사항이 더 늘어난다. 안드로이드 웹 뷰의 설정에 따라 동작이 달라질 수 있다. 참고로 위의 코드는 뷰 포트의 가로넓이를 장치의 넓이와 맞추었다. 가장 일반적인 방법이라고 생각한다. 이 사이트를 반응형으로 만들려면 장치의 넓이를 고정해야 한다. 모바일 브라우저는 데스크톱 브라우저와 달리 윈도우 크기를 변경할 수 없기 때문이다. 뷰 포트라는 가상의 윈도우를 만들어서 이 문제를 비켜가는 것이다.

왜 이런 특별한 기능이 CSS가 아닌 HTML 파일에 위치할까? 정확한 답변을 찾기는 힘들었지만 좋은 정보는 찾을 수 있었다. 뷰 포트에 관한 내용은 현재 CSS의 명세로 표준화 진행 중이다. 물론 표준이라고 모든 브라우저가 지키고 표준이 아니라고 해서 기능을 제외한다는 의미는 아니다. 이 기능이 표준이든 아니든 브라우저마다 확인해야 한다. 대표적인 사이트에 접속하여 사용하는 meta 태그 코드를 찾아봤다.

구글

    <meta content="width=device-width,minimum-scale=1.0" name="viewport">

네이버

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

다음

    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width, target-densityDpi=medium-dpi, viewport-fit=cover">

네이버나 다음은 확대 축소를 제한하고 구글은 제한하지 않는다. 고객에게 이러한 대표적인 모바일 사이트를 보여주면서 어떤 화면을 원하는지 물어본다면 좀 더 구체적인 요구사항을 들을 수 있을 것이다. 아래 데모 사이트에서 뷰 포트의 설정 값에 따라서 어떻게 변경되어 보이는지 확인할 수 있다.

http://www.adrianworlddesign.com/Viewport-Demo/metatag

고객이나 동료로부터 위의 질문을 받았다면 아래 질문을 받을 가능성도 높다.

모바일 브라우저에서도 같은 서비스를 지원할 수 있나요?

이런 질문이 고객으로부터 오는 상황은 특별하지 않다. 이미 데스크탑 용으로 웹 서비스를 개발한 다음에 이런 질문을 받을 수 있다. 고객 입장에서는 고해상도 모바일 브라우저를 사용하면 데스크탑 웹 서비스를 그대로 모바일에서도 제공 받을 수 있다고 생각한다. 이 때, 자세한 설명이 필요하다. 세 가지가 다름으로 의사 결정이 필요하다.

첫째, 데스크톱 브라우저와 다르게 모바일 브라우저는 확대 축소라는 특별한 기능을 가지고 있다. 두 손가락으로 화면을 오므리거나 펼치면 돋보기 같은 기능이 동작하여 브라우저 화면이 커지거나 작아진다. 물론 브라우저의 종류와 만들어진 웹 사이트에 따라서 달라지긴 하지만 대략 비슷하다. 이런 기능은 브라우저 기능이어서 웹 사이트를 구성하는 HTML, CSS, 자바스크립트에서 처리하기 어렵다. 웹 사이트 화면 위에 투명한 브라우저 패널이 하나 더 있다고 상상하면 된다. 이 영역은 프로그래밍 영역이 아님으로 고객이 원하는 방법으로 처리할 수 없음을 알려주어야 한다. 모바일 브라우저의 뷰 포트 개념에 대해서 설명해 주어야 한다.

둘째, 데스크톱을 좌우로 돌릴 수 없는 것과는 다르게 모바일 브라우저가 동작하는 장치는 좌우로 돌릴 수 있다. 가로 세로가 바뀌는 기능이다. 이 경우 사용자 경험이 변경될 수 있다. 데스크톱 서비스에서 고려하지 않는 문제임으로 추가 작업이 필요하다.

셋째, 모바일 브라우저는 터치 영역이 작을 경우 강제로 터치 영역을 확대한다. 글자를 입력할 경우 커다란 소프트 키보드가 나탄 난다. 이 두 가지 특이한 점은 본래 의도했던 UX와 다르게 동작할 수 있다. 생각보다 불편함으로 대책을 세워야 한다. 키 입력의 경우 숫자 키 정도라면 10개의 버튼을 보여주는 방법도 고려할만하다.

당신의 생각이 다르다면 알려주길 바란다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.