반응형 웹(1)
오늘날 우리는 다양한 기기와 해상도를 통해 웹문서를 열람하고 있다. 따라서 웹문서를 만드는 사람이라면 누구나 특정 기기나 브라우어제 국한되지 않고 다양한 환경에서 동일한 경험을 제공할 수 있는 웹 문서를 만들어야 한다는 요구를 피해갈 수 없게 되었다.
이것을 '반응형 웹' 이라고 부르기로 했다. 반응형 웹이 무엇인지 알아보자.
반응형 웹
반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻한다. 스마트 모바일 기기의 등장으로, 데스크톱 화면을 위해 존재했던 웹문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 URL을 제공하는 방법이 주로 사용되었다.
모바일 환경과의 격리가 성공적으로 정착한 사례도 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계를 들어낼 수밖에 없다.
기기에 최적화된 콘텐츠를 계속해서 생산해내는 것은 현실적으로 어렵기 때문에, 사용하는 기기에 적절하게 맞춰지는 사이트를 개발하는 것이 바람직하다.
즉 반응형 웹사이트를 만드는 것이 좋다. 그리고 반응형 웹사이트에서 가장 핵심이 되는 키워드는 바로 '가변성'이다.
뷰포트 (viewport)
뷰포트란 현재 화면에 보여지고 있는 영역을 의미한다. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다. 아래 그림은 HTML 문서를 각각 PC와 모바일로 확인한 결과이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// 뷰포트가 존재한다.
// width = 기기의 넓이로 하고, 초기 스케일을 잡겠다.
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
이렇게 뷰포트가 존재하는데 해당 meta 태그를 삭제하고 모바일 크기로 html 문서를 조회해보자
32px정도 되어야 하는 <h1> 태그의 크기가 작아진 것을 확인할 수 있다. 이런 이유는 모바일과 데스크톱의 화면 비율이 다르기 때문이다.
그렇다면 <meta> 태그가 있으면 어떻게 될까?
위와 같이 데스크탑과 동일하게 보이는 것을 확인할 수 있다.
따라서 기기에 따라 다른 화면 크기에 대응하기 위해, 웹문서에 viewport 속성에 대한 마크업을 추가해야 한다.