방망이 깎는 코모

반응형 디자인 / 미디어 쿼리를 최소로 잡는 방법 본문

개념정리

반응형 디자인 / 미디어 쿼리를 최소로 잡는 방법

코모@kosmosticlay 2023. 12. 28. 05:28

미디어 쿼리를 통한 반응형 디자인

미디어쿼리(media query)는 브라우저 및 장치 환경이 일치하는 경우에만 특정 CSS를 적용할 수 있게 하는 기능이다. 주로 뷰포트의 크기나 orientation(세로모드/가로모드)등의 레이아웃 변화를 적용할 때 많이 쓰인다. 하지만 반응형 디자인을 위해서는 중요한 도구임에도 불구하고, 과도하게 남용할 경우 오히려 코드의 복잡성을 증가시켜 로딩 시간 및 렌더링 성능을 저하시킬 수 있다. 또한 다양한 기기, 화면 크기, 해상도 등에 일일히 대응하는 것이 어렵기 때문에 코드가 복잡해져서 유지보수가 어려워지거나, 다양한 화면에 대한 유연성 및 호환성까지 떨어질 수도 있다.

 

따라서 미디어 쿼리는 주요 브레이크 포인트에서만 적용하고, 다음과 같은 방법들을 함께 사용하여 가능한 미디어 쿼리의 사용을 최소화해야 코드의 유지보수, 성능, 사용자 경험 등 다양한 측면에서 효과적일 수 있다.

보완 방법 1. 유연한 레이아웃 설계

%단위를 사용하여 컨테이너와 요소의 너비를 지정함으로써 뷰포트의 크기에 따라 요소들이 스케일링 될 수 있도록 유동적인 그리드 시스템을 적용한다. margin, padding등의 속성들도 %, em등 상대적인 단위로 설정하여 박스 모델을 최적화 할 수 있다.

/* 뷰포트의 크기에 따라 컨테이너/컬럼의 크기가 조정 */
.container {
  width: 80%;
  margin: 0 auto;
}
.column {
  float: left;
  width: 50%;
}

보완 방법 2. 상대적 단위 사용

  • rem 단위 사용 : rem 단위는 루트 요소 <html>의 폰트 크기에 상대적인 값이다. 따라서 사용자가 전체 페이지의 폰트 크기를 변경해도, 해당 크기에 맞춰 관련 요소들의 크기도 일관적인 비율로 조정될 수 있게 한다.
  • 뷰포트 단위 사용 : 뷰포트의 너비(vw)나 높이(vh)의 백분율로 크기를 정의함으로써 화면 크기에 따라 요소의 크기가 동적으로 변하게 한다.
/* rem 단위 사용 */
html {
  font-size: 16px;
}
h1 {
  font-size: 2.5rem; /* 40px */
}
p {
  font-size: 1rem; /* 16px */
}

/* 뷰포트 단위(vw, vh) 사용 */
.header {
  width: 100vw;
  height: 50vh;
}

보완 방법 3. CSS 함수 사용

  • calc() 함수 사용 : width: calc(100% - 20px); 과 같은 방식으로 다양한 단위를 결합하여 계산식의 형태로 사용할 수 있다. rem 단위는 루트 요소 <html>의 폰트 크기에 상대적인 값이다. 따라서 사용자가 전체 페이지의 폰트 크기를 변경해도, 해당 크기에 맞춰 관련 요소들의 크기도 일관적인 비율로 조정될 수 있게 한다.
  • 뷰포트 단위 사용 : 뷰포트의 너비(vw)나 높이(vh)의 백분율로 크기를 정의함으로써 화면 크기에 따라 요소의 크기가 동적으로 변하게 한다.
/* calc()함수를 이용한 계산식을 통해 모든 요소가 서로 상대적인 크기를 갖게됨 */
.sidebar {
  width: calc(25% - 20px);
}
.main-content {
  width: calc(75% - 20px);
}

보완 방법 4. 주요 브레이크 포인트에서만 미디어 쿼리 지정

모든 장치와 화면 크기에 대응하는 것은 매우 어려운 일이며 오히려 일부 대응하지 못하는 상황이 발생시 사용자 경험이 크게 저하되는 문제점이 발생하기도 한다. 따라서 모바일, 태블릿, 데스크탑등 주요 브레이크 포인트에만 집중하여 미디어쿼리를 사용하는 것을 권장한다.

/* 
600px 미만 : 기본 스타일 적용
600px 이상 1024px 미만 : 첫번째 미디어쿼리 활성화
1024px 이상 : 두번째 미디어쿼리 활성화
*/
@media (min-width: 600px) {
  .container {
    width: 95%;
  }
}
@media (min-width: 1024px) {
  .container {
    width: 85%;
  }
}

보완 방법 5. '모바일 퍼스트' 접근법

'모바일 퍼스트'란 웹사이트나 애플리케이션 개발 시, 모바일에서의 사용자 경험을 우선적으로 고려하는 접근 방식이다. 실제로 큰 화면을 작게 만드는 방식보다, 작은 화면을 점차적으로 더 큰 화면에 맞게 디자인을 확장하는 방식으로 작업하면 코드의 양이 줄어드는 것을 경험할 수 있다. 특히 최근에는 데스크탑에 비해 모바일 사용자가 지속적으로 증가함에 따라 모바일 플랫폼 점유율 역시 올라가고 있다. 아래는 2023년 11월 기준으로 플랫폼 별 세계 트래픽 점유율을 보여주며, 모바일이 63.64%로 가장 높은 점유율을 갖고 있다.

 

similarweb, https://www.similarweb.com/platforms/

 

아래는 CSS의 미디어쿼리와 함께 모바일 퍼스트 접근방식을 구현한 코드다. 기본 모바일 스타일을 정의하고, 더 큰 화면에 적용될 스타일을 별도 정의하는 방식을 취하고 있다.

/* 기본 모바일 스타일 */
.container {
  width: 100%;
}

/* 데스크탑 및 태블릿을 위한 스타일 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

 

 

마치며

반응형 디자인을 위해서 미디어쿼리는 반드시 필요한 기능이다. 하지만 개인적으로 사용했을 때는 레이아웃의 변화와 함께 컨텐츠 요소들의 변화도 요구될 때 오히려 미디어 쿼리 사용으로 인해 코드가 길어지거나 가독성이 떨어지는 것을 경험한 적이 있다. 특히 상대적 단위(%, em, rem등)를 깊게 배우기 전이었기 때문에 모든 경우의 수에 적합한 요소 사이즈들을 일일히 명시하는 것이 매우 복잡하고 귀찮게 느껴졌다. 그 '모든' 경우를 만족하는 값을 찾는 것 조차도 어려웠다.

 

하지만 이번 포스팅을 작성하면서 위에서 언급한 다양한 '보완 방법'들과 함께 병행함으로써 미디어쿼리의 사용을 최소화하는 방법들을 배울 수 있었다. 먼저 우선적으로 ①상대적 단위의 사용과 ②모바일 퍼스트 접근방식을 생활화하도록 노력해서 반응형 디자인 구현에 대한 부담감을 줄어야겠다.

 

참고 문헌

1. DaleSeo, CSS 미디어 쿼리 (Media Query) 사용법 : https://www.daleseo.com/css-media-queries/

2. similarweb, Mobile. Desktop vs. Tablet Traffic Market Share : https://www.similarweb.com/platforms/

3. MIRIYA, 모바일 퍼스트 디자인에 대해 : https://miriya.net/blog/clk2idc8r000bh2m3axys9b5k

'개념정리' 카테고리의 다른 글

noreferrer, noopener, nofollow  (1) 2024.01.03
Flex와 Grid의 차이점  (0) 2024.01.03
애니메이션을 최적화 하는 방법  (2) 2023.12.27
폰트를 Preoload하는 방법  (0) 2023.12.25
크로스 브라우징(Cross Browsing) II  (0) 2023.12.25
'개념정리' Related Articles more
Comments