반응형 웹 디자인(RWD)은 좋은 사용성을 보장하면서 모든 화면 크기와 해상도에서 잘 렌더링되는 웹 페이지를 만드는 웹 디자인 접근법이다.

또한 멀티 디바이스를 지원하는 웹 설계 방법이다.

2010년 Ethan Marcotte가 만든 반응형 디자인이란 용어는 fluid grid, fluid image, media query를 사용하여 설명된다.

당시 권장 사항은 media query로 breakpoints를 만들어서 각각에 대해 float 레이아웃을 만드는 것이었다.

fluid image는 컨테이너의 너비를 초과하지 않도록 max-width 프로퍼티의 값을 100% 로 설정했다.

모던 CSS 레이아웃 방법은 기본적으로 반응형이며 Marcotte의 기사가 출판된 후로 반응형이 높은 사이트를 더 쉽게 설계할 수 있도록 웹 플렛폼에 많은 기능이 내장되어 있다.

Media Queries

Media query를 사용하면 사용자의 화면의 너비 또는 해상도를 테스트하고 CSS를 선택적으로 적용하여 사용자의 필요에 맞게 페이지를 스타일링 할 수 있다.

스타일시트에 여러 media query를 추가하여 전체 레이아웃 또는 일부를 다양한 화면 크기에 맞게 조정할 수 있다.

media query가 적용되어 레이아웃이 변하는 지점을 breakpoint라 부른다.

media query를 사용할 때 일반적인 방법은 좁은 화면 장치를 위한 1 컬럼 레이아웃을 만든 다음 더 넓은 화면 장치를 위한 다중 컬럼 레이아웃으로 확장하는 것이다.

이런한 디자인을 mobile first 디자인이라 부른다.

breakpoint를 사용하는 경우, media query의 breakpoint를 정의할 때 absolute units 보다는 relative units을 사용하는 것이 더 모범적이며 권장된다.

media query 는 RWD에 도움이 될 수 있지만, 필수 사항은 아니다.

flexible grid, relative units, min/max-value 만을 이용해도 충분히 RWD를 만들 수 있다.

Responsive layout technologies

RWD는 flexible grid를 기반으로 구축되므로 픽셀 단위의 레이아웃으로 모든 장치에 대해서 사이징할 필요가 없다.

flexible grid를 사용하여 기능을 변경하거나 breakpoint를 추가하고 content가 잘못 표시되기 시작하는 지점에서 설계를 변경할 수 있다.

앞서 배운 Multiple-column layout, Flex box, Gird 는 기본적으로 반응형 레이아웃이다.

이 레이아웃들은 개발자가 flexible grid를 만든다고 가정하고 flexible 레이아웃을 위해 더 쉬운 방법들을 제공한다.

Responsive images

미디어가 반응형 컨테이너보다 커지지 않도록 하기 위해 다음과 같은 방법을 사용한다.

img,
picture,
video {
  max-width: 100%;
}

만약 컨테이너의 크기에 비해 원본 이미지가 크다면 필요없이 큰 이미지를 다운로드하게 되므로 대역폭을 낭비하게 되므로 주의한다.

<picture> 엘리먼트와 <img> 엘리먼트의 srcset 및 size 어트리뷰트를 사용한다면 브라우저는 각 장치에 가장 적합한 이미지를 선택하여 사용자가 사용중인 장치에 적합한 이미지를 다운로드 하도록 한다.

max-width 와 함께 <picture> 엘리먼트를 사용하면 사이징을 위한 미디어 쿼리를 할 필요가 없다.

Responsive typography

미디어 쿼리를 페이지 레이아웃 변경으로만 제한할 필요가 없다.

다른 화면 크기에서 더 매력적인 화면을 구성하기 위해 폰트 크기 변경과 같이 엘리먼트를 조정하는데 사용할 수도 있다.

또한 vw 단위를 사용하여 미디어 쿼리 없이 뷰포트에 따라 반응하도록 설정할 수 있다.

h1 {
  font-size: 6vw;
}

하지만 위의 코드에 문제점은 사용자가 텍스트 집합을 확대/축소할 수 없다는 점이다.

이 텍스트는 항상 뷰포트의 크기와 관련이 있기 때문이다.

따라서 뷰포트 단위만 사용하여 텍스트 크기를 설정하면 안된다.

해결책으로는 calc() 함수를 사용하는 것이다.

h1 {
  font-size: calc(1.5rem + 3vw);
}

The viewport meta tag

보통 반응형 페이지의 HTML 코드를 보면 다음과 같은 코드가 보인다.

<meta name="viewport" content="width=device-width,initial-scale=1" />

이 뷰포트 메타태그는 모바일 브라우저에게 뷰포트의 너비를 divice width로 설정하고 문서를 100% 크기로 확대하여 모바일 최적화 크기로 문서를 표시해야 한다고 알려준다.

왜 이것이 필요하냐면 모바일 브라우저는 자신의 뷰포트 너비에 대해 거짓을 말하는 경우가 있기 때문이다.

width=device-width 를 설정하면 모바일 디바이스의 기본 width를 오버라이딩 한다.

애플의 기본값인 width=980px을 실제 디바이스의 width로 오버라이딩 하는 것처럼 말이다.

이 작업을 하지 않으면 breakpoint 및 미디어 쿼리를 사용한 반응형 설계가 제대로 동작하지 않을 수 있다.

480px 너비를 가진 디바이스가 980px 너비라고 잘못 말하는 경우 480px 뷰포트 너비 이하에서 동작하는 레이아웃이 있음에도 불구 하고 그 레이아웃을 볼 수 없다.

따라서 항상 위의 메타태그를 문서의 head 부분에 포함시켜야 한다.

[참고] : MDN