미디어 쿼리는 화면을 본다, Container Queries는 자리를 본다
지금까지의 반응형 웹사이트는 한 가지 기준에 의존했다. 바로 뷰포트 너비다. 모바일과 PC를 768px, 1024px 같은 화면 폭으로 갈라놓는 방식이다. 그런데 같은 카드 컴포넌트라도 본문 한가운데에 놓일 때와 좁은 사이드바에 놓일 때, 또는 모달 안에 들어갈 때 각각 다르게 보여야 한다. 화면 전체 폭은 같아도 컴포넌트가 차지한 자리의 폭이 다르기 때문이다.
Container Queries는 이 어긋남을 정면으로 푼다. 컴포넌트가 자기가 들어 있는 부모 컨테이너의 너비를 직접 측정하고, 그 폭에 따라 레이아웃을 바꾼다. 화면이 아니라 자리를 본다.
같은 컴포넌트가 자리에 따라 달라져야 하는 순간들
- 제품 카드: 메인 4열 그리드에서는 세로형, 사이드바에서는 가로형, 모달 안에서는 큼직한 단일 형태로 보여야 자연스럽다.
- 블로그 미리보기: 본문 폭이 넓을 땐 썸네일과 본문을 좌우로, 좁을 땐 위아래로 쌓아야 한다.
- 대시보드 위젯: 같은 차트 위젯이 1열에 놓이면 큰 숫자를, 4열에 놓이면 작은 라벨을 보여줘야 정보 밀도가 맞는다.
- 관리자 테이블: 좁은 폭에서는 카드 형태로, 넓은 폭에서는 풀 테이블로 자동 전환되어야 모바일에서도 읽힌다.
지금까지는 이런 차이를 자바스크립트로 부모 폭을 측정하거나, 화면 폭을 기준으로 어림짐작해서 처리해 왔다. Container Queries는 그 책임을 CSS에 넘긴다.
@container 한 줄로 시작한다 — 기본 사용법
사용법은 두 단계뿐이다. 먼저 부모 요소를 컨테이너로 선언한다.
.card-wrapper { container-type: inline-size; container-name: card; }
그리고 자식 요소에서 컨테이너 폭을 기준으로 스타일을 분기한다.
@container card (min-width: 480px) { .card { display: flex; } }
이제 같은 .card가 어디에 놓이든, 부모의 폭이 480px 이상이면 가로형으로, 그 미만이면 세로형으로 자동으로 바뀐다. 미디어 쿼리에서 가정하던 디바이스별 분기점 없이도 컴포넌트가 스스로 판단한다.
호환성과 도입 전략 — 2026년 기준
Container Queries는 2023년 말에 모든 메이저 브라우저에 들어왔고, 2026년 현재 글로벌 사용자 95% 이상이 지원하는 환경을 갖추고 있다. 새로 만드는 웹사이트라면 미디어 쿼리와 함께 자연스럽게 섞어 쓸 수 있고, 기존 사이트라면 디자인 시스템의 카드·배너·리스트 컴포넌트부터 점진적으로 옮기는 전략이 안전하다.
특히 디자인 시스템을 갖추고 있거나 동일한 컴포넌트를 여러 화면에 재사용하는 서비스일수록 효과가 크다. 한 번 잘 짜둔 컴포넌트가 새 페이지에 그대로 떨어져도 깨지지 않기 때문이다. 디자이너는 컴포넌트별 사양을 한 벌만 정리하면 되고, 개발자는 페이지마다 예외 분기를 만들 필요가 없어진다.
화면이 아니라 컴포넌트가 반응형의 단위가 되는 시대
반응형이라는 개념이 처음 등장했을 때 우리는 사이트 전체를 모바일·태블릿·PC라는 세 칸짜리 서랍에 넣어두었다. 하지만 실제 사용자가 보는 것은 사이트 전체가 아니라 그 안의 작은 컴포넌트들이다. Container Queries는 반응형의 단위를 화면에서 컴포넌트로 옮긴다.
CYAN은 새로 만드는 웹사이트의 디자인 시스템을 처음부터 컨테이너 쿼리 기반으로 설계한다. 같은 카드 컴포넌트가 메인, 사이드바, 모달 어디에 가져다 놓여도 알아서 맞는 모양으로 떨어진다. 한 번 만든 컴포넌트가 새로운 페이지에서도 오래 살아남는 사이트, 그것이 우리가 추구하는 반응형이다.