모바일 화면을 위해 Viewport 사용하기
오늘은 회사에서 새로 출시한 ‘eyePoker’ 앱의 이용 약관 페이지를 만들었습니다. 정말 간단해서 일찍 끝내고, 로컬에서 확인을 해보았는데 문제가 발생했습니다. 분명 데스크탑에서는 잘 보이던 것이 모바일에서는 저런 경고를 내뿜었습니다.
아래의 사진은 로컬에서 배포 후 모바일(갤럭시 노트5)을 통해 페이지에 접속한것입니다. 왼쪽사진 하단부분에 페이지를 모바일 친화적으로 바꾸세요.라는 문구를 가진 팝업 보입니다. 즉, 제가 만든 페이지가 모바일 친화적이지 않다는 것입니다. 그럼 모바일 친화적이라는 것은 어떤 것일까? 페이지를 모바일 친화적으로 바꾸라는 팝업을 클릭하면 오른쪽 사진과 같이 모바일에서 좀 더 보기 편하게 페이지가 변경되는것을 볼 수 있습니다.
모바일 친화적
구글의 Mobile Friendly Websites 페이지에서 모바일 친화적인 사이트에 대해 설명하고 있습니다.
사이트가 모바일 친화적이라는 것은 간단하게 사용자가 모바일로 웹 페이지를 이용할 때 편하게 이용할 수 있음을 뜻합니다. 사이트의 데스크톱 버전을 휴대기기에서 보거나 사용한다면 콘텐츠를 읽기 위해 두 손가락으로 화면을 모으거나 확대할 경우가 생길 수가 있고 이는 사용 환경을 번거롭게 느끼게해 사용자가 사이트를 떠날 확률이 높기 때문에 사이트를 모바일 친화적으로 만드는것은 중요합니다.
Viewport
정의
모바일 브라우저들은 viewport 로 알려진 가상 window상에 페이지를 렌더링합니다. 즉 화면(Display) 상의 표시 영역을 뜻합니다. 모바일 Safari는 viewport meta태그를 도입해 웹 개발자들이 viewport 크기와 스케일을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대부분 모바일 브라우저들도 이를 지원합니다.
데스크탑과 모바일의 viewport는 다른점이 있습니다. 데스크탑의 viewport는 브라우저 창(visible area)의 viewport와 같고, 사용자가 브라우저 창의 크기를 조절하면서 viewport의 크기도 조절할 수 있습니다. 웹페이지가 viewport보다 크면, 스크롤을 하여 나머지 영역을 볼 수 있습니다. 반면에 모바일 viewport는 웹브라우저 창보다 크거나 작을 수 있고 상하좌우로 움직이거나, 더블탭, 줌인, 줌아웃을 통해 viewport의 배율을 변경할 수 있습니다.(크기가 아닙니다)
필요한 이유
모바일 브라우저에서 viewport가 중요한 이유는 모바일 브라우저가 웹 페이지를 브라우징 하는 특징에 있습니다. 현재 스마트폰 브라우저는 모바일 환경에서도 데스크탑 환경처럼 웹 페이지 전체를 자연스럽게 브라우징 할 수 있도록 풀브라우징을 지원합니다. 이 때문에 데스크탑에 기반하여 설계된 웹페이지를 모바일에서 보면 기본 viewport가 980px 이고, 이로 인해 내용이 작게 보입니다.(width가 980px 이상인 컨텐츠가 있다면 좌우로 스크롤 됨) 간단히 말하면 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려하니 전체적인 페이지의 배율이 조정되는것 입니다. 결과적으로 모바일 화면에 맞도록 전체적인 페이지가 축소되어 보이지만 페이지의 컨텐츠는 배율축소가 발생해 가독성이 떨어지게 됩니다. 바로 이때 viewport를 설정하면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다.
사용 방법
head 태그 사이에 다음을 코드를 입력합니다. 기본적으로 데스크탑 브라우저에서는 viewport 메타 태그를 사용하지 않아 무시합니다.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
1. viewport의 속성
- width : viewport의 가로 크기를 조정한다. 일반적인 숫자값이 들어갈 수도 있고, device-width와 같은 특정한 값을 사용할 수도 있다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다.
- height : viewport의 세로 크기를 조정한다.
- initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정한다. 값이 1일때는 CSS 픽셀과 기기 종속적인 픽셀 간의 1:1 관계를 형성한다.
- minimum-scale : viewport의 최소 배율값, 기본값은 0.25이다.
- maximum-scale : viewport의 최대 배율값, 기본값은 1.6이다.
- user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes이다.
2. 정의된 속성 값
- device-width : 기기의 가로 넓이 픽셀 값 (웹페이지의 가로(width) 값은 기기가 사용하는 가로 넓이 값(device-width) 만큼 적용하여 사용하라는 의미)
- device-height : 기기의 세로 높이 픽셀 값
3. 주의사항
- contents보다 작은 viewport width/height를 설정하면 무시된다.
- viewport에서 initial-scale을 설정하지 않고 width/height를 설정하면 전체화면이 표시된다.
- viewport에서 initial-scale도 width/height도 설정하지 않으면 width=980px/height=1091px이 된다.
- 표시영역과 contents의 크기가 일치하지 않을때 initial-scale를 설정하면, 의도하지 않은 layout이 발생한다.
적용
위의 사진은 viewport를 적용한 후의 페이지 화면입니다. viewport를 적용하니 `페이지를 모바일 친화적으로 바꾸세요.`라는 문구를 가진 팝업은 사라졌지만 처음 모바일 친화적으로 바꾸어 보았던 페이지같이 폰트는 변경되지 않았습니다. 아마 브라우저 상에서 브라우저에 내장된 폰트를 사용해서 보여주었던것 같아 폰트까지 변경하니 오른쪽 화면과 같은 결과를 얻었습니다.
반응형 웹 디자인
패블릿, 태블릿, 데스크탑, 게임콘솔, 티비, 웨어러블 기기 등등 정말 다양한 화면 크기가 있습니다. 화면 크기는 언제나 변하기 때문에 사이트는 어떤 화면 크기에도 언제나 적응 가능하도록 설계되어야 합니다. 미디어 쿼리(@media)는 장치에 따라 각기 다른 레이아웃을 만들거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹 페이지를 작성할 때 사용합니다.
부트스트랩은 CSS 미디어 쿼리를 사용해 반응형으로 휴대폰에서부터 태블릿, 데스크탑까지 적용되는 사이트를 만들 수 있도록 도와주는 HTML, CSS, JS 프레임워크입니다. 저도 여러번 간단하게 사용했던 적이 있습니다. 적절한 렌더링과 확대/축소를 위해 부트스트랩 시작 페이지에서는 다음 코드를 <head>에 추가하라고 명시합니다.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
지금까지는 이유를 알지 못하고 추가했던 메타 태그였는데 이제는 그 이유를 알 수 있습니다. width=device-width를 추가함으로써 전체적인 웹 페이지의 width가 설정되고 @media 에서 선언된 width의 범위에 따라 css가 적용되어 결과적으로 반응형 웹을 만들 수 있는것 입니다.
마무리
간단하게 사용방법만 알아보려했으나, viewport 메타 태그를 통해서 반응형 웹 디자인이 가능하다는 것을 알고 중요하다 생각해서 좀 더 공부하고 포스팅하였습니다. 한줄의 코드를 통해서 물고 물고 물어 여러가지를 다시 공부하고 더 잘 알게된것 같아 좋습니다. 저처럼 viewport 에 대해 자세히 알지 못하고 사용하셨던 분들께 도움이 되었으면 좋겠습니다.
참고 : MDN-viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법, meta viewport(메타 뷰포트 태그) 사용법