반응형 웹 작업 시 미디어 쿼리 최소화 방법

반응형 웹 디자인이란?

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 하나의 HTML로 특정 디스플레이에 최적화된 환경을 제공한다.

반응형 웹에서 필수적인 개념은 모바일 퍼스트(mobile first) 인데, PC보다 모바일 기기를 먼저 디자인하는 기법이다. 이 주제에 대해선 다음에 자세히 다뤄볼 예정이다.

미디어 쿼리

뷰포트 크기에 따라 서로 다른 레이아웃을 만들 수 있기 때문에 웹 디자인의 핵심 부분이다. 미디어 쿼리는 스크린 해상도 크기에 따라 CSS 스타일을 적용하도록 분기 처리해주는 모듈이다.

1. 화면 너비에 따른 스타일 변경

/* 768px 이하의 화면에 대한 스타일 */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 992px 이상의 화면에 대한 스타일 */
@media screen and (min-width: 992px) {
  body {
    font-size: 16px;
  }
}

화면 너비에 따라 body 요소의 글꼴 크기를 조정하는 예시. 화면이 768px 이하일 때는 글꼴 크기가 14px로 설정되고, 992px 이상일 때는 16px로 설정된다.

2. 디바이스 종류에 따른 스타일 변경

/* 휴대폰에 대한 스타일 */
@media screen and (max-width: 480px) {
  .menu {
    display: none;
  }
}

/* 태블릿에 대한 스타일 */
@media screen and (min-width: 481px) and (max-width: 1024px) {
  .menu {
    font-size: 18px;
  }
}

/* 데스크톱에 대한 스타일 */
@media screen and (min-width: 1025px) {
  .menu {
    font-size: 20px;
  }
}

디바이스 종류에 따라 메뉴의 표시 여부와 글꼴 크기를 조정하는 예시. 화면이 480px 이하일 때는 메뉴가 숨겨지고, 481px에서 1024px 사이의 화면일 때는 글꼴 크기가 18px로 설정되며, 1025px 이상의 화면일 때는 글꼴 크기가 20px로 설정된다.

미디어 쿼리 최소화 하는 방법

미디어 쿼리는 웹 페이지를 다양한 화면 크기와 장치에 맞게 조정하는 데 사용되는 강력한 모듈이지만 최대한 간단하고 효율적으로 사용하는 것이 중요하다.

1. 미디어 쿼리 그룹화

/* 768px 이하의 화면에 대한 스타일 */
@media screen and (max-width: 768px) {
  .menu {
    display: none;
  }
  .header {
    background-color: #f1f1f1;
  }
}

/* 768px 이상 1024px 이하의 화면에 대한 스타일 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .menu {
    font-size: 16px;
  }
  .header {
    background-color: #ccc;
  }
}

/* 1024px 이상의 화면에 대한 스타일 */
@media screen and (min-width: 1025px) {
  .menu {
    font-size: 20px;
  }
  .header {
    background-color: #999;
  }
}

첫 번째 미디어 쿼리는 768px 이하의 화면에 적용되며, .menu은 숨겨지고 .header의 배경색은 #f1f1f1로 설정된다.

두 번째 미디어 쿼리는 768px 이상 1024px 이하의 화면에 적용되며, .menu의 글꼴 크기는 16px로 설정되고 .header의 배경색은 #ccc로 설정된다.

마지막 미디어 쿼리는 1024px 이상의 화면에 적용되며, .menu의 글꼴 크기는 20px로 설정되고 .header의 배경색은 #999로 설정된다.

여러 미디어 쿼리를 하나로 그룹화 하는 것은 가독성이 높고 유지보수를 쉽게 하는데에 도움이 된다. 중복 코드를 줄일 수 있고 변경이 필요한 경우 한 곳에서 수정할 수 있기 때문이다.

2. 상대길이 단위 사용
상대길이 단위는 em rem vw vh 등이 있는데 em과 rem 에 대해서 설명한다.

• em
  요소의 글꼴 크기에 상대적인 단위이다. 부모 요소의 글꼴 크기에 비례하여 크기가 조정된다.
• rem (root em)
  root = 최상위 요소 = html의 글꼴 크기에 상대적인 단위이다. 페이지 전체에서 일관된 상대적인 크기를 가진다.

@media screen and (max-width: 768px) {
  body {
    font-size: 0.875rem; /* 0.875rem은 14px에 해당 */
  }
}

@media screen and (min-width: 769px) {
  body {
    font-size: 1rem; /* 1rem은 16px에 해당 */
  }
}

• 주의사항
  부모 요소의 글꼴 크기에 영향을 받기 때문에, 예기치 않은 변경이 발생될 수 있다. 따라서 상대길이 단위를 적용할 요소를 신중히 선택해야 하며 font-size 외에도 다른 속성에도 사용될 수 있는데, 이 때도 동일한 주의사항을 유지해야 한다.

3. 가변 그리드(Fluid Grid)
행과 열을 가진 격자 구조로 구성되어 있는 레이아웃이다. % 기반으로 열의 너비를 설정하여 레이아웃을 구성하고, 화면 크기가 변경되면 열의 너비가 자동으로 조정된다.

/* 유동 그리드 열 설정 */
.grid {
  display: flex;
  flex-wrap: wrap;
}

.col {
  width: 100%; /* 기본적으로 모든 열이 100% 너비를 가지도록 설정 */
}

@media screen and (min-width: 768px) {
  .col {
    width: 50%; /* 중간 크기 화면에서는 열이 50% 너비를 가지도록 설정 */
  }
}

@media screen and (min-width: 1024px) {
  .col {
    width: 33.33%; /* 큰 화면에서는 열이 33.33% 너비를 가지도록 설정 */
  }
}

.grid 클래스를 사용하여 그리드 컨테이너를 정의하고, .col 클래스를 사용하여 열을 정의한다. 미디어 쿼리를 사용하여 화면 크기에 따라 열의 너비를 조정하고 필요한 대로 재배치한다.
유동 그리드를 사용하면 미디어 쿼리를 최소화할 수 있다. 대부분의 레이아웃 조정은 백분율(%) 기반으로 자동으로 이루어지므로 추가적인 미디어 쿼리를 사용할 필요가 줄어들기도 한다.

참고자료

https://www.nextree.co.kr/p8622/
https://velog.io/@offdutybyblo/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-3.-Fluid-Grid
https://www.w3schools.com/html/html_responsive.asp