같은 상품 카드를 하나 잘 만들어 뒀다. 넓은 본문 한가운데선 사진과 제목, 설명, 버튼이 가로로 나란히 놓여 시원하게 보인다. 그런데 그 카드를 그대로 좁은 사이드바에 옮겨 넣는 순간, 글자가 사진을 밀어내고 버튼은 두 줄로 접히며 레이아웃이 와르르 무너진다. 카드가 잘못한 게 아니다. 카드가 늘 '화면 전체 너비'만 보고 자신을 바꿔 왔기 때문이다.
미디어 쿼리는 '화면'은 알아도 '자리'는 모른다
지난 10년간 반응형의 기준은 늘 미디어 쿼리(@media)였다. 화면 너비가 768px보다 넓으면 이렇게, 좁으면 저렇게. 문제는 이 기준이 언제나 화면(뷰포트) 전체라는 데 있다. 같은 데스크톱 화면 안에서도 본문은 900px, 사이드바는 280px로 자리마다 폭이 천차만별인데, 미디어 쿼리는 그 차이를 구분하지 못한다. 그래서 개발자는 카드를 '본문용'과 '사이드바용'으로 따로 만들거나, 자바스크립트로 폭을 재서 클래스를 붙였다 뗐다 해 왔다.
컨테이너 쿼리는 '내가 놓인 상자'를 본다
컨테이너 쿼리(@container)는 기준을 화면에서 요소가 담긴 부모 상자로 옮긴다. 부모에 container-type: inline-size를 지정해 '측정 대상'으로 선언해 두면, 그 안의 자식은 화면이 아니라 자기가 놓인 상자의 너비를 보고 스스로 레이아웃을 바꾼다. 카드 하나를 딱 한 벌만 만들어 두면, 넓은 본문에선 가로형으로, 좁은 사이드바에선 세로형으로 알아서 접힌다. 컴포넌트가 '어디에 놓일지' 미리 몰라도 되는 셈이다.
실무에서 이렇게 달라진다
- 컴포넌트 재사용성: 같은 카드와 배너, 목록을 본문이든 사이드바든 팝업이든 대시보드든 어디에 넣어도 자리에 맞춰 알아서 정렬된다. 상황별 복제본을 만들 필요가 없다.
- 유지보수 비용 절감: 손볼 곳이 한 벌뿐이라, 디자인을 바꿔도 모든 위치에 한 번에 반영된다.
- 자바스크립트 감소: 폭을 측정하고 클래스를 갈아 끼우던 코드를 CSS 몇 줄이 대신한다. 그만큼 페이지가 가볍고 빨라진다.
- 디자인 시스템과의 궁합: 재사용 컴포넌트로 화면을 조립하는 요즘 개발 방식과 정확히 맞아떨어진다.
도입 전 알아둘 점
컨테이너 쿼리는 2023년 크롬과 사파리, 파이어폭스 등 주요 브라우저에 모두 안착해, 지금은 실무에 써도 좋은 성숙 단계에 들어섰다. 다만 아주 오래된 브라우저까지 지원해야 한다면, 기본 레이아웃을 먼저 세워 두고 컨테이너 쿼리를 '더 나은 경우'로 얹는 점진적 향상 방식이 안전하다. 또 모든 요소에 남발하기보다, 여러 자리에 재사용되는 카드나 위젯 같은 컴포넌트에 집중해서 쓰는 편이 관리하기 좋다.
결국 중요한 건 '어디에 놓아도 안 깨지는' 화면
손님은 컨테이너 쿼리가 뭔지 모른다. 다만 휴대폰에서도, 넓은 모니터에서도 카드가 반듯하게 정렬된 화면을 보며 '여기 잘 만들었네'라고 느낄 뿐이다. 그 인상은 결국 문의와 매출로 이어진다. CYAN 에이전시는 이런 최신 CSS 기술을 작은 회사 웹사이트에 맞게 적용해, 어느 화면에서 열어도 깔끔하게 맞춰지는 홈페이지를 만든다. 새 홈페이지를 준비하거나 기존 사이트가 자꾸 깨져 고민이라면, 화면 어디에 무엇을 놓아도 흐트러지지 않는 구조부터 함께 살펴보자.
