휴대폰에서 웹사이트를 열어보고, 노트북에서 열어보고, TV에서 열어보세요. 세 기기 모두에서 화면을 확대하거나 눈을 찡그리지 않고도 보기 좋다면 반응형 디자인으로 제작된 웹사이트입니다. 반응형 디자인이란 하나의 코드베이스로 레이아웃, 이미지, 글꼴을 어떤 화면에 표시되든 자동으로 조정하는 방식을 말합니다.

에단 마르코트는 모바일 브라우징이 폭발적으로 증가하던 2010년에 이 용어를 만들었습니다. 당시 디자이너들은 모든 기기에 맞춰 별도의 사이트를 구축할지, 아니면 기기에 따라 유연하게 변하는 하나의 사이트를 구축할지 선택해야 했습니다. 결국 반응형 디자인이 선택되었습니다. 반응형 디자인의 핵심 도구는 유동적인 그리드, 유연한 이미지, 그리고 미디어 쿼리입니다. 미디어 쿼리는 브라우저에 뷰포트의 너비를 묻고, 그 답변에 따라 다른 CSS 규칙을 적용합니다.

반응형 디자인을 만드는 요소는 무엇일까요?

• 고정된 픽셀 대신 백분율을 사용하는 유동적인 그리드
• 컨테이너 내에서 크기가 조절되는 유연한 이미지
• 화면 크기에 따라 브레이크포인트를 적용하는 미디어 쿼리
• 모바일 레이아웃에서 터치에 최적화된 타겟

목표는 단순히 작은 화면에 콘텐츠를 맞추는 것이 아닙니다. 모든 환경에서 가독성, 계층 구조, 사용성을 유지하는 것입니다. 데스크톱의 3단 레이아웃이 휴대폰에서는 1단으로 축소될 수 있고, 전체 탐색 모음 대신 햄버거 메뉴가 사용될 수 있습니다. 훌륭한 반응형 디자인은 마치 웹사이트가 처음부터 사용자의 기기에 맞춰 디자인된 것처럼 자연스럽게 느껴집니다.