미디어쿼리를 사용하여 반응형 웹 만들기 Responsive Web Design
반응형 웹이란
반응형 웹 디자인은 사이트가 데스크탑에서 모바일에 이르기까지 모든 디바이스에서 최적으로 보이고 작동하도록 만드는 데 중점을 둔 웹 개발 개념이다. 대게 데스크탑, 태블릿, 모바일 각각의 디바이스에서 서비스를 문제없이 이용할 수 있는 화면을 보여주며, 뷰포트(viewport) 크기를 변경하는 경우 이에 반응하여 적절한 화면을 제공하는 디자인 접근 방식이라고 할 수 있다. 반응형 웹을 만들기 위한 기술 중 하나로 미디어쿼리가 있고, 화면 크기가 다른 디바이스의 뷰포트를 토대로 미디어 쿼리를 적용하므로 먼저 뷰포트에 대해 이해할 필요가 있다.
뷰포트
뷰포트는 현재 보고 있는 화면의 영역으로, 접속한 기기에서 보이는 실제 영역의 크기를 의미한다. HTML문서는 어떤 기기에 접속하더라도 기본으로 980px 크기를 기준으로 보여주게 설정되어 있어서 모바일처럼 해상도가 작은 디바이스로 웹페이지에 접속하게 되면 아래 그림의 왼쪽처럼 글씨가 작게 보이게 된다.
이렇듯 기기마다 해상도를 다르게 가지고 있으므로 이를 인식할 수 있도록 HTML코드로 뷰포트를 설정해 주어야 하는데 meta태그를 이용하면 뷰포트와 관련한 설정을 할 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width의 의미는 HTML문서의 너비를 디바이스의 너비로 설정하라는 뜻이다. 그렇기 때문에 뷰포트는 디바이스의 해상도를 올바르게 인식하게 된다. 뷰포트의 초기 배율을 설정하는 값으로 initial-scale=1.0이 기본값이며 100%와 같다. 1보다 작으면 축소 값, 1보다 크면 확대값으로 설정된다. meta태그의 content속성값으로 너비, 높이, 배율 설정, 축소 여부등을 설정할 수 있다.
미디어 쿼리
미디어 쿼리는 디바이스의 타입( print vs. screen)과 화면 해상도 또는 뷰포트에 따라 CSS스타일을 다르게 적용할 수 있게 한다. 미디어쿼리는 @media문법으로 시작하고 조건과 상태를 정의해 미디어쿼리문이 적용되는 기준을 만들면 된다. 보통 미디어 쿼리문의 조건을 작성할 때(media feature) 미디어 쿼리가 적용될 최소 너비(min-width)와 최대 너비(max-width)의 값을 넣어 자주 사용하는데, Desktop-first workflow(데스크탑 우선 개발)인 지, Mobile-first workflow(모바일 우선 개발)인 지에 따라 전략을 다르게 세워 개발을 할 수 있다. 참고로 데스크탑 우선 개발은 잘 쓰지 않는 표현이며, 모바일이 활성화되지 않았던 때 사용하던 방식이다.
/* Mobile-first workflow */
@media (min-width: 992px) {
/* 데스크탑에 최적화된 예외 코드 작성 */
}
/* Desktop-first workflow */
@media (max-width: 768px) {
/* 모바일에 최적화된 예외 코드 작성 */
}
미디어쿼리는 보통 CSS코드 맨 아래에 작성하는 게 일반적이다. 그 이유는 먼저 작성해 놓은 CSS코드에 재정의(overriding) 되기 때문이다. 즉, 미디어쿼리 코드를 적용할 원래의 코드보다 더 밑에 작성했을 때 미디워 쿼리에서 작성한 속성의 값이 선택된다. 그러므로 예외를 작성하는 미디어쿼리는 상단보다는 하단에 작성하는 것이 적합하고, 경우에 따라서는 본래의 속성값을 초기화하는 경우가 필요하므로 미디어 쿼리에 작성한 새로운 값이 스타일에 잘 적용되는지 살펴봐야 한다.
breakpoints
미디어쿼리를 사용하려면 media feature에 종단점(breakpoints)을 설정하여 새로운 CSS 스타일을 구현하기 위한 화면의 너비를 결정해 주어야 한다. mobile-first-workflow안에서 특정 모바일 모델에 최적화하여 디자인을 하는 경우가 아니라면 굳이 모바일 브레이크포인트는 포함하지 않고 태블릿과 데스크탑, 이렇게 2개의 브레이크포인트로 디자인 작업을 한다. 또한, 프레임워크를 사용한다면 각각의 프레임워크에서 따르는 브레이크포인트를 기준으로 반응형 웹을 디자인한다.
반응형 웹 디자인의 중요성
반응형 웹 디자인은 검색 엔진 최적화(SEO)에서도 중요한 의미를 갖는다. 웹사이트가 모바일 디바이스에서도 보이도록 최적화된다면 구글 알고리즘에 의해 우선적으로 처리된다고 한다. 이 외에도 반응형 웹 디자인은 어떤 디바이스에서도 최적화된 화면과 기능 제공하여 사용자 경험 및 사용성 개선 효과를 지속적으로 유지시킨다. 또한 동일한 HTML코드로 다양한 디바이스에 적용하면 되므로 일관성과 코드의 유지보수 편의성 측면에서 장점을 가진다.