미디어쿼리를 최소화하여 반응형 작업하기

 

 

 

미디어쿼리를 최소화하고 반응형 작업을 수행하면, 코드의 가독성과 유지보수성을 향상시키며, 웹 페이지의 성능을 개선할 수 있다. 미디어쿼리를 최소화하는 방법은 어떤 것들이 있을까?

 

 

1. grid와 flex 사용

위와 같은 레이아웃 기술을 사용하면 미디어 쿼리를 사용하지 않고도 유연한 레이아웃을 만들 수 있다.

 

2. mobile first 구성

모바일 퍼스트(mobile first)란 사용자 경험(UX)을 디자인 할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것이다. 루크 로블르스키(Luke Wroblewski)가 최초로 주장한 철학이자 전략이며, 반응형 웹  디자인을 기반으로 한 개념이다.

초기 스타일링을 모바일에 맞추고 큰 화면에 추가적인 스타일을 적용하면, 모바일 기기에서는 불필요한 미디어 쿼리를 사용하지 않아도 되므로 성능이 향상된다.

 

3. 가변 단위 사용

상대 길이(rem, em, vw, vh 등)를 사용하면, 화면의 크기에 따라 사이즈가 조절되기 때문에 미디어 쿼리를 최소화 할 수 있다.

 

4. 컴파일러, 전처리기 사용

Sass나 Less와 같은 도구를 사용하여 미디어 쿼리를 변수로 정의하고, 해당 변수를 기반으로 미디어 쿼리를 생성한다. 이를 통해 중복되는 미디어 쿼리를 줄이고, 코드를 보다 관리하기 쉽게 만들 수 있다.