"반응형 웹 설계 는 웹 페이지가 모든 화면 크기와 해상도에서 잘 렌더링되도록 하면서도 사용성을 보장하는 웹 디자인 접근 방식입니다. 멀티 디바이스 웹을 위한 디자인 방식입니다."
MDN(한국어 문서)에서 소개하는 반응형 디자인에 대한 정의이다.
🤔개념
미디어 쿼리
미디어 쿼리(media query)를 사용하면 화면의 특정 너비 또는 해상도보다 큰지(또는 작은지)와 같은 특정 조건에 따라 CSS를 선택적으로 적용할 수 있다.
- 기본 사용법
웹 페이지가 화면 미디어로 표시되고 있고, 뷰포트의 너비가 80rem 이상인 경우에만 container 클래스를 가진 태그에 해당 css를 적용한다.@media screen and (min-width: 80rem) { .container { margin: 1em 2em; } }
breakpoints
이미지 최적화 수행 시 익히 들어봤던 개념인데, 이미지를 다양한 디바이스에 맞게 리사이징해주는 과정에서 이 분기점을 사용해서 이미지의 너비X높이 를 결정했었다. breakpoints(분기점)이란 '미디어 쿼리에서 레이아웃이 변경되는 지점'을 의미한다. 위 예제에서 breakpoints는 80rem 이다.
모바일 우선 디자인
미디어 쿼리를 사용할 때 일반적인 접근 방식은 화면이 좁은 디바이스(예: 휴대폰)를 위해 간단한 단일 열 레이아웃을 만든 다음 화면이 더 넓은지 확인하고 화면 너비가 충분하다고 판단되면 다중 열 레이아웃을 구현하는 것이다. [출처: MDN]
아무래도 서비스 개발 시 모바일에도 제공할 것을 고려한다면, 데스크탑 화면과 같이 많은 구성 요소가 필요한 큰 화면보다 모바일의 작은 화면부터 개발하는 것이 개발 효율이 높을 것 같다는 생각이 든다.
뷰포트 메타 태그
React로 프로젝트를 개발하면, index.html의 <head> 태그 내에 기본적으로 존재하는 다음과 같은 <meta> 태그를 본 적이 있을 것인데, 이는 모바일 브라우저로 하여금 뷰포트 너비를 기기 너비와 동일하게 설정하게 하는 것이다.
<meta name="viewport" content="width=device-width,initial-scale=1" />
😎실습
Next.js 와 Tailwind CSS(v4)에 반응형 디자인 적용하기
Tailwind CSS v4부터는 tailwind.confing 파일이 따로 필요없고, global 파일에서 작업하면 된다.
Tailwind CSS에서 지정해놓은 스타일을 오버라이딩, 즉 덮어쓰려면 @theme에 initial 값을 부여하면 된다. 기본적으로 제공하는 반응형 디자인에 사용되는 breakpoints를 커스텀할 것이므로, 다음과 같이 선언한다.
알아보기 쉬운 변수명으로 breakpoints를 재정의한다.
사용하는 곳에서는 다음과 같이 조건: 스타일링 의 형식으로 사용하면 되겠다.
이렇게 사용자 지정 변수로 반응형을 적용하면, 'lg가 어느 너비부터였지?'라고 고민할 필요없이 변수를 통해 대략적으로 유추가 가능해진다. 결국 유지보수에 유리해질 것이다.
