반응형 웹사이트를 만들 때 우리는 늘 '화면 너비'를 기준으로 삼아 왔습니다. 화면이 768px보다 좁으면 메뉴를 접고, 1024px보다 넓으면 카드를 3열로 펼치는 식이죠. 그런데 막상 운영을 시작하면 이상한 일이 벌어집니다. 메인에서 멀쩡하던 상품 카드를 좁은 사이드바에 똑같이 넣었더니 글자가 겹치고 버튼이 삐져나옵니다. 화면은 넓은데 카드가 놓인 '공간'은 좁기 때문입니다. 이 오래된 어긋남을 해결하는 것이 바로 컨테이너 쿼리(Container Queries)입니다.
왜 미디어 쿼리만으로는 부족한가
미디어 쿼리는 항상 브라우저 화면(뷰포트) 전체의 크기만 봅니다. 하지만 실제 웹사이트의 부품들은 저마다 다른 폭의 영역에 놓입니다. 같은 '상품 카드'라도 넓은 본문에 놓일 때와 좁은 사이드바에 놓일 때, 모바일 단독 화면에 놓일 때가 전부 다릅니다. 화면 크기 하나로 모든 위치의 모양을 맞추려다 보면, 결국 위치마다 별도의 CSS를 덕지덕지 덧붙이게 됩니다. 부품이 늘어날수록 관리가 불가능해지는 구조입니다.
컨테이너 쿼리는 무엇이 다른가
컨테이너 쿼리는 기준을 화면에서 '그 부품을 감싼 부모 영역'으로 바꿉니다. 부모 요소에 기준점을 지정해두면, 자식 부품은 화면이 아니라 자기가 실제로 들어앉은 칸의 너비를 보고 모양을 스스로 결정합니다.
부모에 container-type: inline-size 를 주고, 자식은 @container (min-width: 400px) 안에서 레이아웃을 바꾼다 — 핵심은 이 두 줄입니다.
이렇게 하면 카드 하나가 똑똑해집니다. 넓은 칸에 들어가면 사진과 글을 좌우로 펼치고, 좁은 칸에 들어가면 위아래로 쌓습니다. 같은 코드, 같은 부품인데 놓이는 자리에 따라 알아서 달라집니다. 화면 크기를 신경 쓸 필요가 없어집니다.
작은 회사 웹사이트에 주는 실질적 이득
- 한 번 만든 부품을 어디에나 재사용: 상품 카드, 후기 박스, 공지 배너를 메인·목록·사이드바 어디에 넣어도 깨지지 않습니다.
- 유지보수 비용 절감: 위치마다 예외 CSS를 만들 필요가 없어, 수정할 때 한 곳만 고치면 됩니다.
- 디자인 일관성: 같은 부품이 어디서든 같은 규칙으로 변형되니, 페이지마다 미묘하게 다른 어색함이 사라집니다.
- 리뉴얼이 쉬워짐: 나중에 레이아웃을 2열에서 3열로 바꿔도, 부품들이 새 칸 폭에 맞춰 스스로 적응합니다.
도입할 때 알아둘 점
컨테이너 쿼리는 2023년 이후 크롬·사파리·파이어폭스 최신 버전에서 모두 지원되어, 지금은 안심하고 쓸 수 있는 표준 기능입니다. 다만 아주 오래된 브라우저를 쓰는 고객이 많은 업종이라면, 컨테이너 쿼리가 적용되지 않아도 기본 레이아웃은 멀쩡히 보이도록 '쌓인 형태'를 기본값으로 두는 점진적 적용 방식을 권합니다. 모든 부품에 무리하게 적용하기보다, 여러 위치에 재사용되는 핵심 부품부터 적용하는 것이 효율적입니다.
정리
반응형의 기준을 '화면 전체'에서 '부품이 놓인 자리'로 옮기는 것 — 이 작은 발상의 전환이 웹사이트를 훨씬 단단하고 고치기 쉬운 구조로 만듭니다. CYAN은 이렇게 부품 단위로 견고하게 설계된 웹사이트를 지향합니다. 화면 크기마다 깨지는 페이지 때문에 고민이라면, 부품의 기준부터 다시 세워보시길 권합니다.