오늘날, 웹 서핑을 하기 위한 다양한 수단이 존재한다. 때문에, 과거와는 달리 그 크기가 제각각이며, 이에 따라 웹 개발자들도 다양한 기기에서 동등한 콘텐츠를 제공하기 위해 노력하고 있다. 이와 관련한 개념이 반응형 웹 이다.
반응형 웹은 그 이름과 같이 다양한 기기에서 웹 사이트에 접근한 사용자에게 적합한 화면을 보여주는 웹이다. 때문에, 기존의 고정되어 있는 웹과 다르게 몇가지 속성을 다르게 설정해야 하는데, 이때 가장 많이 사용되는 것이 미디어 쿼리 이다.
미디어 쿼리란?
미디어 쿼리는 CSS3 명세에서 처음으로 등장한 기능으로, CSS3 이전에는 각 기기별로 별개의 웹사이트를 제작하는 경우가 많았으나, 해당 기능으로 인해 사용자의 화면 크기, 해상도, 방향 등을 감지하여 stylesheet를 동적으로 변경할 수 있게 되었다.
@media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}예제를 살펴보면, @media 뒤에 미디어 유형과 미디어 특성 이 작성된 것을 알 수 있다. 미디어 유형과 미디어 특성에 대한 값들은 여기를 참고하자.
위와 같이 미디어쿼리를 이용하여, 디바이스의 크기(위의 예제에서는 최소 너비값)에 대한 스타일 값을 지정해줄 수 있기 때문에, 다양한 기기에 대응하는 반응협 웹을 만들 수 있다.
하지만, 양지가 있으면 음지도 있듯이, 미디어 쿼리의 부작용도 존재한다.
미디어 쿼리의 단점
로딩시간
미디어 쿼리가 작동하는 방법은 브라우저의 렌더링 후에 일어나기 때문에, 초기 로딩 시간이 오래 걸릴 수 있어서, 사용자 경험을 저하시킬 수 있음
유지보수
미디어 쿼리가 매우 상세하게 작성되었다면, 점차 서비스해야 할 플랫폼이 늘어났을 때, 이를 유지보수하기가 어려움
성능저하
미디어 쿼리를 잘못 적용한 경우, 불필요한 스타일시트가 로드되거나 혹은 필요없는 DOM 요소가 생성될 수 있음
브라우저 호환성
일부 브라우저는 미디어 쿼리를 지원하지 않을 수도 있음. 물론 IE 지원도 종료되었고, 사실 지원되지 않는 브라우저는 극히 소수일 것으로 예상되지만, 미디어 쿼리 문법 중에서 비교적 최근에 생성된 range syntax의 경우 지원되지 않는 브라우저가 존재함
미디어 쿼리 최소화하기
앞서 언급한 미디어 쿼리로 인한 문제점이 없지 않기 때문에, 미디어 쿼리만으로 모든 반응형 디자인을 구성하기 보단 몇가지 방법들과 혼용하는 것이 좋을 것 같다.
가장 쉽게 시도해볼 수 있는 것은 흔히 사용하는 px 단위 대신에 상대 길이 단위인 rem 으로 요소의 스타일을 정의하는 것이다.
상대 길이 단위인 rem 은 root em의 줄임말로, 브라우저의 기본 폰트 크기를 root로 잡고 이에 대응되는 단위이다. 즉, 브라우저의 기본 폰트 크기가 만약 16px이라면, 1rem은 16px이 된다.
만약, 미디어 쿼리를 px 단위로만 사용하게 된다면, px 은 고정된 크기를 가지는 단위이기 때문에, 다양한 해상도에 따라 그에 맞는 미디어쿼리를 각각 작성해야 한다. 따라서, 코드가 길어지게 되고, 이에 따라 유지 보수도 어려워진다.
하지만, rem 은 말 그대로 상대적인 길이이기 때문에, 해상도에 따라 다르게 작성할 필요가 없어지며, px 만 사용한 경우와 비교하여 상대적으로 적은 코드량으로 작성이 가능해지고, 점차 서비스할 플랫폼이 늘어난다고 하더라도 유지보수가 용이하므로, 미디어 쿼리를 최소화 하기 위한 방법으로 사용된다.
Reference
