반응형 웹 디자인
오직 PC, 노트북을 통해서 웹 페이지에 접속했던 2000년대와 달리 2010년도 이후에는 스마트폰, 태블릿 등의 다양한 기기로 웹 페이지에 접속하는 빈도가 늘고 있습니다. 13인치 15인치로 규격화된 PC, 노트북과는 다르게 모바일 기기는 종류도 다양하고 그 만큼 제각기 다른 화면 크기를 가지고 있습니다.
이런 상황에서 오직 PC 브라우저만 생각하고 만든 웹 페이지를 모바일에서 접속할 경우 글씨가 매우 작거나, 종횡비가 맞지 않는 등 여러 불편한 점이 생깁니다. 그래서 모바일 기기가 등장하는 시점에 맞춰서 웹 개발자들은 여러 화면에 맞는 웹 페이지들을 만들어내기 시작했습니다.
하지만 이 방법도 오래가지 못했는데, 화면 크기가 제각각인 모바일 기기마다 웹 페이지를 따로 만들어 준다는 것은 굉장히 비효율적인 작업이었기 때문입니다. 그래서 기존 웹 사이트의 내용을 다양한 화면 크기에 맞게 표시할 수 있는 기술이 등장했는데 그 기술이 바로 반응형 웹 디자인입니다.
뷰포트
반응형 웹 디자인을 다루는데 알아야하는 지식으로는 뷰포트(Viewport)가 있습니다. 뷰포트는 사용자에게 보여지는 웹 페이지의 영역을 의미합니다. 우리가 PC 브라우저로 웹 페이지에 접속했을 때 보이는 공간이 뷰포트이고, 모바일로 접속했을 때 보여지는 공간도 뷰포트입니다.
PC 브라우저 기준으로 설계된 웹 페이지를 모바일 기기에서 보려고 하면 기존 뷰포트의 크기 때문에 기존 페이지의 요소들이 매우 작게 보입니다. 왜냐하면 PC 브라우저의 뷰포트 크기는 width가 자유롭지만, 모바일 브라우저는 웹킷(webkit)에 의해 980px로 고정되어 있습니다. 따라서 width가 980px가 아닌 페이지를 모바일에서 보여주려고 하면 과하게 확대되거나 축소되는 등의 문제가 발생합니다.
따라서 모바일 기기를 고려한 웹 페이지를 설계하기 위해서는 뷰포트에 대해 알고있어야 합니다.
뷰포트 지정하기
뷰포트는 html의 <meta>태그에서 지정할 수 있습니다. <meta>태그는 예전에 언급했었는데요. 페이지에 대한 정보를 담는 태그입니다. 이 태그는 <head>태그 사이에 삽입되며 다음과 같이 사용해서 <meta>태그로 뷰포트를 지정할 수 있습니다.
<meta name='viewport' content='속성=값', ...>content속성에 뷰포트와 관련한 속성을 넣게 되는데, 뷰포트의 속성은 다음과 같습니다.
| 속성 | 설명 | 값 |
|---|---|---|
| width | 뷰포트의 너비 | device-width 또는 크기 |
| height | 뷰포트의 높이 | device-height 또는 크기 |
| user-scalable | 확대/축소의 가능 여부 | yes or no |
| initial-scale | 초기 확대/축소 값 | 1 ~ 10 |
일반적으로 뷰포트는 다음과 같이 많이 사용합니다. 그동안 html을 실습하면 무조건 이 코드가 들어갔었는데, 이제는 이 태그가 무슨 의미인지 알 수 있게 되었습니다.
너비를 기기의 너비로 설정하고, 초기 배율을 1배율로 지정한다는 의미의 메타 태그입니다.
<meta name='viewport' content='width=device-width, initial-scale=1.0'>추가적으로 viewport가 지정된 <meta>태그는 PC 브라우저에서 인식을 하지 못합니다.
