Responsive design, Ethan Marcotte가 만든 2010년 한 글

한 줄로

2010년 5월 25일, A List Apart에 올라온 글 한 편이 웹 디자인의 모든 것을 다시 정의했습니다.

어디서 왔나

2010년 5월 25일, 보스턴 출신 웹 디자이너 에단 마콧(Ethan Marcotte)이 디자인 매거진 A List Apart에 한 편의 에세이를 올렸습니다. 제목은 "Responsive Web Design".

마콧이 풀고 싶었던 문제: 당시 모바일 웹의 표준은 별도의 모바일 사이트(m.example.com)를 만드는 것이었습니다. 데스크탑용 디자인과 모바일용 디자인이 완전히 분리됐습니다. 유지보수가 두 배.

마콧은 건축에서 비유를 빌렸습니다. 19세기 건축가들은 "반응형 건축(responsive architecture)". 환경에 따라 형태가 변하는 건물. 을 시도했습니다. 그가 제안한 웹 디자인도 같은 발상이었습니다.

하나의 사이트가 화면 크기에 따라 자동으로 레이아웃을 재구성. 핵심 도구 3가지:

Fluid grid: 픽셀 대신 %로 너비 지정.
Flexible images: max-width: 100%로 이미지가 컨테이너에 맞춤.
Media query: CSS3의 @media screen and (max-width: 768px)로 화면 크기별 스타일.

이 글은 곧 폭발했습니다. 2011년 마콧은 같은 제목의 책을 출간했고, 2012년에는 모든 신규 웹사이트의 사실상 표준이 됐습니다. "모바일 퍼스트" 라는 후속 개념도 같은 흐름입니다.

지금 우리가 쓰는 방식

모바일 우선 설계: 작은 화면 기준으로 먼저 디자인하고, 큰 화면으로 확장.
브레이크포인트: 보통 320 / 768 / 1024 / 1440px.
Container queries (2022 표준화): 화면이 아니라 컨테이너 크기에 따라 반응. 진정한 컴포넌트 단위 반응형.
Fluid typography: clamp() 함수로 화면 크기에 따라 폰트가 부드럽게 변합니다.

바이브 메이커가 챙길 한 가지

반응형 디자인의 진짜 교훈은 "하나의 디자인이 여러 환경에 맞춰진다"가 아닙니다. "디자인이 다양한 사용 맥락을 가정하고 만들어진다"입니다. 모바일 사용자는 한 손, 낮은 대역폭, 짧은 집중 시간을 가집니다. 단순히 레이아웃을 좁히는 게 아니라, 그 맥락에 맞는 우선순위로 콘텐츠를 재배치하는 것이 진짜 반응형입니다.

관련

Mobile-first · Media query · Container queries