Media Query(미디어쿼리)의 모든 것 – 3. 더 알아보기

글쓴이 이 상윤 날짜

Media Query 실전편과 이어집니다.

미디어 쿼리 실전편에 이어, 미디어 쿼리와 관련되어 있는 내용에 대한 설명을 작성하였습니다.

목차

  1. SCSS를 활용한 Media Query
  2. Media Query 관련 페이지 성능 관리
  3. Media Query Range

1. SCSS를 활용한 Media Query

앞선 두 관련 글에서 CSS를 사용하여 미디어 쿼리를 작성 및 활용하는 방법에 대해 알아보았습니다. 단, CSS에서 미디어 쿼리를 사용하면 작성 코드가 길어질 뿐만 아니라 코드 유지 및 관리가 어렵지만, SCSS를 사용하면 이를 보완할 수 있습니다. 이번에는 SCSS를 사용하여 미디어 쿼리 코드를 작성 및 적용하는 방법을 알아보겠습니다.

※ 기본적인 SASS 문법 및 SCSS 적용 방법은 생략하겠습니다. (또한 전체 scss파일에 대한 import가 있다고 가정하겠습니다.)

SCSS를 사용한 너비 분기

반응형 웹을 제작할 때 화면 너비를 사용하여 분기점을 나눕니다.

  
※ 예시 분기 너비

모바일태블릿데스크톱PC Wide
375px768px1024px1300px

 
이외에도 적용할 다른 값들을 변수로 선언하여 분기점을 미리 작성합니다.

// breakpoint.scss
// scss에서 변수로 해당 너비를 지정
$breakpoint-mobile: 375px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;

// custom 너비
$breakpoint-mobile-small: 320px;
$breakpoint-pcwide: 1300px;

 
변수를 지정한 후 이번에는 미디어 쿼리를 작성합니다. 미디어 쿼리 적용방식은 모바일 퍼스트를 사용하여 너비 분기를 점차 넓혀가는 방식을 사용하겠습니다.

첫 번째 방법은 변수 지정을 제외한다면 CSS와 비슷하게 작성할 수 있습니다.

// breakpoint.scss
// 모바일 퍼스트 적용, 모바일 스타일은 mixin을 사용하지 않음
// tablet
@mixin tablet {
  @media (min-width: #{$breakpoint-tablet}) {
    @content;
  }
}

// desktop
@mixin desktop {
  @media (min-width: #{$breakpoint-desktop}) {
    @content;
  }
}

 
위와 같이 breakpoint.scss를 작성하여 @import되었다면 적용방식은 아래와 같습니다.

// test.scss

// mobile
.box {
    width: 100px;
    height: 100px;
}

// tablet 
@include tablet {
    .box {
        width: 200px;
        height: 200px;
    }
}

// desktop
@include desktop {
    .box {
        width: 300px;
        height: 300px;
    }
}

 
혹은 하나의 클래스 안에서만 분기를 다루고 싶다면 아래와 같이 작성할 수 있습니다.

// test.scss
// mobile
.box {
    width: 100px;
    height: 100px;
    
    // tablet
    @include tablet {
        width: 200px;
        height: 200px;
    }
        
    // desktop
    @include desktop {
        width: 300px;
        height: 300px;
    }
}

 
아래는 이를 활용한 예시입니다. 뷰포트를 조정해보면 크기에 맞게 변하는 것을 확인할 수 있습니다.

See the Pen media query basic by WITBLOG (@witblog) on CodePen.

주의사항으로 설정한 분기점이 아닌 다른 화면 너빗값에서 박스의 스타일이 변하는 것을 확인할 수 있습니다.

이와 같은 현상은 촬영된 영상이 zoom 90%이기 때문에 발생한 이슈입니다. 다행히 디바이스모드에서만 발생하는 현상입니다.
개발자모드-> 디바이스모드-> zoom:{100%이외의 값} 을 설정했을 때 위와 같은 이슈가 발생하기 때문에 확인할 때 주의하시면 될 것 같습니다. 관련 출처

 
SCSS문법인 조건문이나 반복문, map 등을 활용하여 코드의 유연성과 재사용성을 조금 더 높이고 싶다면, 아래와 같이 사용할 수 있습니다.

// breakpoint.scss
// 분기 포인트 선언
$breakpoints: (
  mobile: 0,
  tablet: 768px,
  desktop: 1024px,
  desktop_wide: 1300px,
);

// 믹스인 작성
@mixin mediaquery($breakpoint: mobile, $map: $breakpoints) {
  @if type-of($map) == map {
    @if map-has-key($map, $breakpoint) {
      @media (min-width: #{map-get($map, $breakpoint)}) {
        @content;
      }
    }
  }
}

 
사용 예시입니다.

// test.scss

// mobile
.box {
    width: 100px;
    height: 100px;
    
    // tablet
    @include mediaquery(tablet) {
        width: 200px;
        height: 200px;
    }
        
    // desktop
    @include mediaquery(desktop) {
        width: 300px;
        height: 300px;
    }
}

See the Pen media query scss little advanced by WITBLOG (@witblog) on CodePen.

SCSS문법 활용에 따라 개발환경과 사용자, 서비스에 맞게 자유롭게 커스텀이 가능합니다.

2. Media Query 관련 페이지 성능 관리

미디어 쿼리를 통해 페이지의 성능을 향상할 두 가지 방법을 살펴보겠습니다.

1. 성능 팁 : 전략 – 모바일 퍼스트 vs 데스크톱 퍼스트

이미지 출처 : https://www.smartz.com/

1) 모바일 퍼스트(min-width 사용)

모바일 퍼스트 전략은 모바일 사용자의 요구를 최우선으로 생각, 스마트폰 등 가장 작은 사이즈에서의 레이아웃을 기본으로 점차 확장되어가는 형태의 CSS를 작성합니다. 해당 방식으로 CSS를 작성할 경우, 모바일환경일 때 스타일 파일이 로드되는 속도가 빠릅니다. 모바일에서 최고의 사용자 경험을 얻을 수 있습니다.

해당 전략을 고려해야 하는 대상은 아래와 같습니다.

  • 사용자의 연령이 적을 경우
  • B2C 사이트

2) 데스크톱 퍼스트(max-width 사용)

데스크톱 컴퓨터를 기반으로 디자인을 시작합니다. 그리고 반응형 디자인을 통해 점차 모바일 크기에 맞게 스타일이 조정됩니다. 해당 전략 사용 시 데스크톱에서 최고의 사용자 경험을 얻을 수 있습니다. 해당 방식으로 CSS를 작성할 경우, 데스크톱 환경일 때 스타일 파일이 로드되는 속도가 빠릅니다.

 
해당 전략을 고려해야 하는 대상은 아래와 같습니다.

  • 오래된 산업에 종사
  • 사용자의 연령이 많을 경우
  • B2B 사이트
  • 복잡한 데이터를 다루는 경우

3) 차이점

구분모바일 퍼스트데스크톱 퍼스트
대상그룹모바일 방문자
B2B		데스크톱 방문자
B2C
해상도 전환저해상도에서 고해상도
“점진적 향상”을 따름		고해상도에서 저해상도
“단계적 저하”를 따름
최고의 UX모바일데스크톱
하드웨어 액세스플래시, 카메라, 마이크 등에 쉽게 액세스장치의 다른 하드웨어에 접근 힘듬
텍스트적고, 크게많고, 작게
다운로드빠르게느리게

위의 기준 및 고객, 상품 유형 등을 고려하여 적절한 전략을 사용하는 것이 중요합니다.

번외) 모바일 퍼스트가 선호되는 이유

많은 사이트에서 모바일 퍼스트가 선호되는 이유에 대해 간단하게 알아보겠습니다.

🔸 2016년 모바일 인터넷 사용량이 데스크톱 사용량을 넘어섰습니다.

Statista에 따르면 2022년 기준 인터넷 사용자는 50억명이고, 이 중 93% 이상이 소셜 미디어 사용자로 인터넷에 접근합니다. 따라서 스타일리시하고 콘텐츠 중심의 모바일사이트를 갖는 것이 비즈니스 필수 요소로 적용되고 있습니다. 참조 : 브라우저 사용자 통계

🔸 사람들이 모바일을 통해 점점 더 많은 시간을 인터넷에 사용합니다.
🔸 SEO 최적화가 되어있습니다.

구글의 순위 지정 알고리즘이 모바일 사이트가 유리한 것으로 나타나고 있습니다. 2019년 7월 구글은 인덱싱 및 순위 지정을 모바일 우선으로 한다고 발표하였고 2022년 7월에 모든 웹사이트에 대한 모바일 우선 인덱싱으로의 대대적인 전환이 완료되었다고 하였습니다. 따라서 웹사이트 디자인 및 콘텐츠가 모바일 우선으로 디자인되어있을 경우 구글 노출에도 많이 유리합니다. 참조 : 구글 모바일 알고리즘 설명

2. 성능 팁: 더 빠른 페이지 로드 시간을 위해 미디어 속성 사용

1) CSS렌더링 차단

서버에서 웹페이지를 요청할 때 두 가지 유형의 리소스, 렌더링 차단 리소스과 비 렌더링 차단 리소스가 존재합니다. 렌더링 차단 리소스는 웹 페이지 렌더링에 필수적이므로 웹 브라우저는 렌더링 차단 리소스가 구문 분석되기 전까지 다른 리소스 처리를 중지합니다.

<link>링크를 HTML 본문에 통째로 넣는 경우, CSS다운로드에 시간이 소요되고, 다운로드가 끝날때까지 절대 렌더링이 발생하지 않습니다.

렌더링 차단 리소스가 많을 경우 브라우저에서 페이지를 렌더링 하는데 시간이 많이 소요됩니다. 따라서 큰 CSS파일을 처리할수록 더 큰 시간이 소요됩니다.

기본적으로 HTML과 CSS는 렌더링 차단 리소스로 처리됩니다. HTML은 구성되는 DOM에 필수적이고, CSS는 CSSOM에 필수적인 요소입니다.

2) 렌더링 차단을 방지하기 위해 media속성 사용

CSS파일을 호출하는 <link> 태그에 media속성을 추가하면 CSS가 렌더링 차단 리소스에서 비 렌더링 차단 리소스로 전환하여 중요한 렌더링 경로를 단축할 수 있는 효과를 가지고 있습니다. media속성은 CSS미디어 쿼리에 해당하는 HTML로 생각할 수 있고, CSS 미디어 쿼리와 동일한 값을 사용 할 수 있습니다.

 
미디어 쿼리를 사용했을 때 어떻게 더 빠르게 페이지를 로드할 수 있는지 아래의 예시를 통해 확인해 보겠습니다.

<!-- 예시 css파일 및 용량 -->
<link href="style.css" rel="stylesheet">  // 1KB
<link href="pc.css" rel="stylesheet">     // 100KB
<link href="tablet.css" rel="stylesheet"> // 100KB
<link href="mobile.css" rel="stylesheet"> // 100KB

일반적인 경우, 데스크톱, 모바일, 태블릿을 모두 고려한 CSS파일이 있다고 할 때, style.css, tablet.css, mobile.css, pc.css모두 다운로드를 해야합니다. 따라서 301kb를 다운로드하는동안 렌더링이 차단됩니다.

<!-- 미디어 쿼리 사용 -->
<link href="style.css" rel="stylesheet">    // 1kb
<link href="pc.css" rel="stylesheet" media="screen and (min-width: 1024px)">    // 100kb
<link href="tablet.css" rel="stylesheet" media="screen and (min-width: 768px) and (max-width:1023px)">  // 100kb
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 767px)"> //100kb

 
예시에서 해당 스타일들에 대해 미디어 쿼리를 적용하였습니다. PC환경 에서 처음 로드될 때 style.css와 pc.css는 미디어 쿼리의 조건에 맞기 때문에 렌더링 차단 리소스로 처리됩니다. 조건에 맞지 않는 그 외의 스타일은 비 렌더링 차단 리소스로 처리됩니다. 따라서, style.css와 pc.css가 다운로드 및 파싱 되는 동안만 Rendering이 차단됩니다.

tablet.css와 mobile.css는 비 렌더링 차단 리소스로 처리되어 렌더링에 영향을 주지 않습니다. 따라서 style.css와 pc.css의 용량인 101kb를 다운로드 하는 동안만 렌더링이 차단되기 때문에 페이지 로드 속도가 줄어듭니다.

3. Media Query Range

크롬 104버전에서 미디어 쿼리 range기능이 추가되었습니다.

미디어 쿼리의 범위를 지정할 때 min-width나 max-width를 사용하는 것이 아니라, 부등호(>,<, >=,<=)를 사용하여 편리하게 미디어 쿼리의 범위를 지정할 수 있게 되었습니다.

일반적으로 사용하는 미디어 쿼리는 다음과 같습니다.

@media (min-width: 400px) {
    @content
}

 
미디어 쿼리 range기능을 도입하면 해당 쿼리를 아래와 같이 적을 수 있습니다.

@media (width >= 400px) {
    @content
}

새로운 구문을 사용하면 시각적으로 의미를 보다 명확하게 확인할 수 있고 쿼리의 범위가 겹치지 않도록 작성할 수 있습니다.

Browser Support

일부 웹브라우저에서는 아직 사용이 불가능합니다.

참고사이트

1. 성능 팁 : 전략 – 모바일 퍼스트 vs 데스크톱 퍼스트

2. 성능 팁: 더 빠른 페이지 로드 시간을 위해 미디어 속성 사용

카테고리: Research
태그:

0개의 댓글

답글 남기기

아바타 플레이스홀더

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

관련 글

Research

[CSS애니메이션] clip-path animation

[CSS애니메이션] clip-path animation 이 글에서는 clip-path 설정에 대해 설명하고, clip-path 애니메이션을 학습하며 만들고 싶었던 간단한 애니메이션 예제들을 소개하겠습니다. clip-path clip-path는 요소의 어느 영역을 표시할지 설정하는 CSS 속성입니다. 설정된 영역 내부는 표시되고 외부는 숨겨집니다.clip-path는 다양한 모양을 지정할 수 있으며, 더보기…

Research

CSS anchor positioning 소개 및 활용

CSS anchor positioning 소개 및 활용 새로운 CSS Anchor position 속성으로 보다 더 편하게 앵커와 요소의 위치를 지정할 수 있습니다.이 글에서는 기능 소개와 활용 예제, 다양한 fallbacks 기능을 정리하였습니다.  🔍 CSS anchor positioning이란? 기존 position 속성은 상속관계에 더보기…

Research

scrollbar-gutter 와 classic scrollbar 대응하기

아래 사진처럼 스크롤이 없는 페이지에서 스크롤이 발생하는 페이지로 이동 시, 생긴 스크롤로 인해 UI 위치가 변하는 이슈를 겪어본 적 있으신가요? 어떻게 보면 당연한 거 아닌가 싶기도 하지만, 꼼꼼한 디자이너님의 경우 위치가 변하지 않도록 수정해달라 요청이 더보기…