웹 페이지를 만들다 보면 특정 컴포넌트가 사이드바에 있을 때와 본문에 있을 때 각각 다른 스타일을 가져야 하는 상황을 자주 마주하게 됩니다. 지금까지는 브라우저 창의 너비, 즉 뷰포트를 기준으로 미디어 쿼리를 작성하며 이 문제를 해결해 왔습니다. 그러나 이 방식은 컴포넌트가 놓이는 맥락이 복잡해질수록 코드가 비대해지고 관리가 어려워지는 한계가 있습니다.
화면 전체가 아니라 부모의 너비를 물어봐야 합니다
기존의 미디어 쿼리는 브라우저 창 전체 크기만을 기준으로 삼기 때문에 컴포넌트의 진정한 독립성을 보장하기 어렵습니다. 컴포넌트는 자신이 페이지의 어느 위치에 배치될지 스스로 알 수 없으며, 개발자는 매번 부모 요소의 크기를 계산해 미디어 쿼리를 중첩해서 작성해야 했습니다. 이는 디자인 시스템의 재사용성을 떨어뜨리는 핵심 원인입니다.
예를 들어 iPad Pro의 가로 모드는 일반 노트북의 기본 해상도와 비슷하거나 오히려 더 넓은 경우가 있습니다. 미디어 쿼리는 이 두 상황을 동일한 화면으로 인식하지만, 실제 컴포넌트가 차지하는 공간은 전혀 다를 수 있습니다. 뷰포트 숫자가 같아도 맥락이 다르다는 것, 이것이 미디어 쿼리가 근본적으로 해결할 수 없는 지점입니다.
컴포넌트가 어디에 놓이든 완벽하게 작동할 수 있을까요?
컨테이너 쿼리를 사용하면 컴포넌트가 자신이 속한 부모 요소의 크기를 감지하여 스스로 스타일을 결정합니다. 이제 컴포넌트는 뷰포트가 1200px인지 768px인지 상관하지 않습니다. 대신 '내가 담긴 상자가 400px보다 작아졌는가?'를 스스로 판단합니다. 이 작은 관점의 전환이 컴포넌트를 진정으로 독립적인 레고 블록처럼 만들어 줍니다.
이 방식은 특히 복잡한 대시보드나 다단 레이아웃을 설계할 때 효과적입니다. 메인 영역에서는 가로로 길게 펼쳐지던 카드 컴포넌트가 좁은 사이드바로 옮겨지면, 별도의 추가 코드 없이도 세로형으로 자연스럽게 변신합니다. 개발자는 컴포넌트 하나만 잘 정의해두면 어디서든 안심하고 재사용할 수 있게 됩니다.
디자인 시스템의 일관성은 여기서 결정됩니다
재사용 가능한 컴포넌트가 맥락에 따라 깨지지 않고 유지되는 것이 진정한 시스템의 가치입니다. 컨테이너 쿼리는 디자인 시스템의 구성 요소들이 외부 환경에 의존하지 않고 고유한 반응 로직을 갖게 합니다. 프로젝트 규모가 커질수록 기하급수적으로 늘어나는 CSS 유지보수 비용을 구조적으로 억제할 수 있다는 점에서, 장기적으로 설계 부채를 줄이는 데 실질적인 이점이 있습니다.
실제로 국내 웹 환경처럼 다양한 디바이스와 브라우저 파편화가 심한 곳일수록 이러한 독립적 설계는 필수적입니다. 뷰포트 기준의 미디어 쿼리 뭉치를 관리하는 대신, 컴포넌트 단위로 반응형 규칙을 세우는 것이 훨씬 경제적인 선택입니다.
모든 브라우저에서 당장 쓸 수 있는지 걱정되시나요?
컨테이너 쿼리는 2023년을 기점으로 Chrome, Safari, Firefox, Edge 모두에서 안정적으로 지원되며, 현재 글로벌 브라우저 지원율은 90%를 넘어섰습니다. '아직은 시기상조'라는 우려 때문에 도입을 미루기에는 생산성 측면에서의 이점이 너무 명확합니다. 오히려 지금이 기존의 복잡한 미디어 쿼리 체계를 정리하고 더 견고한 아키텍처로 전환할 적기입니다.
문제의 본질은 브라우저 지원 여부가 아니라, 우리가 여전히 페이지 전체를 한 번에 설계하려는 관성에 갇혀 있다는 점에 있습니다. 구조적인 설계를 고민하지 않은 채 미디어 쿼리만 덧붙이는 방식은 결국 기술 부채로 돌아옵니다.
가장 먼저 카드 컴포넌트부터 바꿔보세요
당장 모든 프로젝트를 뒤엎을 필요는 없습니다. 사이드바와 메인 콘텐츠 영역 양쪽에서 사용되는 카드 컴포넌트 하나를 골라 @container로 리팩토링해 보는 것부터 시작하십시오. 부모 요소에 container-type: inline-size를 선언하고, 내부 요소의 스타일을 컨테이너 크기에 맞춰 재정의하는 과정에서 코드가 얼마나 단순해지는지 즉각 체감하실 수 있습니다.
이후 사이드바 레이아웃이나 그리드 시스템으로 범위를 넓혀가며 재사용성을 검증해 보시기 바랍니다. 뷰포트 너비를 계산하느라 소모하던 시간이 사라졌음을 자연스럽게 깨닫게 될 것입니다. 여러분의 팀이 가진 디자인 시스템은 얼마나 독립적으로 설계되어 있나요?
화면 크기가 아니라 컴포넌트가 놓인 맥락에 집중할 때 웹 개발의 효율은 극대화됩니다.
컨테이너 쿼리는 단순한 신기술이 아니라 반응형 설계를 바라보는 패러다임의 전환이며, 이를 통해 뷰포트 중심의 관성에서 벗어나 유연하고 유지보수 가능한 컴포넌트 시스템을 구축할 수 있습니다.
지금 바로 가장 복잡한 컴포넌트 하나를 골라 부모의 크기를 물어보게 만드세요.
개념적 토대 및 참고: Josh W. Comeau (https://www.joshwcomeau.com/css/container-queries-unleashed/)
본 글은 위 원문의 핵심 개념을 바탕으로, Pivot Studio의 실무적 관점과 해석을 더해 재구성한 오리지널 콘텐츠입니다.