미디어쿼리로 반응형 웹을 만들자~

반응형 웹과 적응형 웹의 차이

반응형 웹, 반응형 웹 디자인(Responsive Web Design)은 pc, 태블릿, 모바일 등 각각의 기기별로 웹페이지가 최적화되어 보여지는 기능이다. 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때는 웹사이트의 구조를 작은 화면에 최적화된 구조로 변경하여 보여주고, 큰 화면을 가진 기기에서는 웹사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여준다. 이처럼 이용자 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹이다. 모바일 사이즈에서는 앱 설치를 권유하는 메시지를 보여주기도 한다.

이와 달리, 적응형 웹에서는 화면의 크기가 변경되어도 웹사이트가 최적화된 구조로 변경되지 않는다. 일정 크기보다 화면이 작아지면 내용이 덮여서 보이지 않게 된다. 따라서, 적응형 웹사이트를 제작할 때에는, 양쪽 여백을 두고, 핵심 내용을 가운데 1024-1280px 안에 배치한다. 가장 대중화된 화면 규격이기 때문이다.

그렇다면, 항상 반응형이 적응형보다 좋은 걸까??

그렇지 않다. 예를 들어, 적응형 웹으로 제작된 네이버는 포털 사이트 특성 상 쇼핑몰인 29cm보다 훨씬 많은 데이터를 보여주어야 하기 때문에, 화면 크기 별로 요소들의 크기와 위치를 설정하는 것이 효율적이지 않을 수 있다. 따라서 모든 페이지를 반응형으로 제작할 필요가 없고, 서비스나 각 페이지의 목적과 특성에 따라 제작해야 한다. 적응형 페이지를 만드는 것보다, 반응형 웹페이지를 만드는 데에 더 많은 시간과 소통비용이 들기 때문입니다. 화면 크기가 달라지면 요소들의 위치와 사이즈도 각각 조정되어 코드로 작성되어야 한다.

---

반응형 웹과 css 미디어쿼리

미디어쿼리란, 직접 규칙을 지정하고, 그 규칙과 브라우저 및 장치 환경이 일치하는 경우에만 css를 적용하도록 할 수 있는 방법이다. 예를 들어, 뷰포트가 480px보다 넓을 때, Wrapper라는 이름의 div 태그의 가로폭을 500px, 세로폭을 500px로 지정해주고 싶다면, 다음과 같이 작성해주면 된다.

import styled from "@emotion/styled";

const Wrapper = styled.div`
  @media (min-width: 480) {
    width: 500px;
    height: 500px;
  }
`;

이때, ‘뷰포트가 480px보다 넓을때~’와 같은 내용을 미디어 쿼리에서 말하는 규칙이라 할 수 있다. 이러한 규칙은 어떤 기준으로 정하면 될까? 예를 들어 PC, 태블릿, 모바일 이 세가지로 분류한다고 하면, 보통 가장 많이 사용하는 디바이스 종류에 따라 규칙을 정하곤 한다.

---

Critical Rendering Path

미디어쿼리를 적용할 때 고려해야 할 점이 하나 있다. 브라우저에 그림이 그려지는 방식, 즉 브라우저가 HTML, CSS, JS를 화면에 픽셀로 그려내는 일련의 단계를 고려해주어야 한다. 이 단계를 critical rendering path라고 하고, 이 CRP를 최적화하는 것은 렌더링 성능을 향상시킨다.

서버에서 데이터를 다운로드 받아 오면, html, css 준비해서 합치고, 위치를 먼저 그린 다음, 색칠을 한다. 그럼 화면에 그림이 그려지게 된다. 만일 색상만 변경되면 6번 paint/repaint 과정만 실행되지만, 위치, 사이즈, 상태가 변화하면 색상이 변하지 않더라도 5번뿐만 아니라 6번까지 순서대로 실행되기 때문에, 성능저하가 발생할 수 있다. 따라서 위치, 사이즈 등이 변경될 때는 꼭 필요한 것인지 고려하는 것이 좋다.