홈페이지에 '상품 카드' 하나를 정성껏 만들었다고 해봅시다. 넓은 본문 한복판에 놓으면 사진과 제목, 설명이 나란히 붙어 보기 좋습니다. 그런데 똑같은 카드를 좁은 사이드바에 끼워 넣으면 사진은 찌그러지고 제목은 두 글자마다 줄바꿈이 되어 뭉개집니다. 요소는 그대로인데 자리가 바뀌자 무너진 겁니다.
미디어 쿼리는 '화면 전체'만 잰다
지난 15년 동안 반응형 웹의 기준은 미디어 쿼리(media query)였습니다. '화면 너비가 768px보다 좁으면 이렇게, 넓으면 저렇게' 하는 식이죠. 문제는 미디어 쿼리가 재는 것이 오직 브라우저 창 전체의 크기라는 데 있습니다. 화면은 넓어도 그 안에서 요소가 놓인 칸은 좁을 수 있습니다. PC 화면이 아무리 커도, 카드가 들어간 사이드바가 200px이라면 카드는 좁은 곳에 있는 겁니다. 하지만 미디어 쿼리는 '화면이 넓으니 카드도 넓게'라고만 판단해, 좁은 칸에 넓은 레이아웃을 억지로 밀어 넣습니다.
컨테이너 쿼리는 '제가 놓인 그릇'을 본다
컨테이너 쿼리(@container)는 기준을 통째로 바꿉니다. 화면 전체가 아니라 그 요소를 담고 있는 부모(컨테이너)의 너비를 보고 모양을 정합니다. 부모에게 '너는 크기를 재는 그릇이다'라고 표시해 두면, 그 안의 카드는 이렇게 판단합니다. '내가 담긴 칸이 400px보다 넓으면 사진과 글을 나란히, 좁으면 위아래로 쌓자.' 같은 카드를 본문에 넣으면 가로로 펼쳐지고, 사이드바에 넣으면 알아서 세로로 접힙니다. 코드를 두 벌 만들 필요 없이, 한 번 만든 요소가 어디에 놓이든 제 그릇을 보고 스스로 맞추는 것입니다.
작은 회사 웹사이트엔 무엇이 달라지나
작은 회사 홈페이지는 같은 부품을 여러 자리에서 재사용하는 경우가 많습니다. 상품 카드, 후기 박스, 공지 배너 같은 것들이죠. 지금까지는 '메인에 넣을 때', '목록에 넣을 때', '사이드바에 넣을 때'를 각각 화면 크기로 나눠 예외를 붙여야 했고, 그 예외가 쌓일수록 유지보수는 어려워졌습니다. 컨테이너 쿼리를 쓰면 부품 하나가 자기 규칙을 스스로 갖게 되어, 어느 페이지 어느 칸에 갖다 놓아도 깨지지 않습니다. 새 페이지를 만들 때 기존 부품을 그대로 옮겨 붙여도 안심할 수 있다는 뜻입니다.
지금 바로 써도 되나
결론부터 말하면 이미 실무에서 쓸 수 있습니다. 컨테이너 쿼리는 2023년 이후 크롬, 사파리, 엣지, 파이어폭스 등 주요 브라우저 최신 버전에 모두 들어와 있어, 오늘의 방문자 대부분이 별문제 없이 봅니다. 다만 아주 오래된 브라우저를 쓰는 손님도 있으니, '컨테이너 쿼리가 안 먹혀도 최소한 세로로 쌓여 읽을 수는 있게' 기본 모양을 먼저 잡아 두는 것이 안전합니다. 새 기능을 얹되, 안 되는 환경에서도 무너지지 않게 바닥을 까는 이 순서가 핵심입니다.
화면이 아니라 자리를 기준으로
반응형의 무게 중심이 '화면 크기'에서 '요소가 놓인 자리'로 옮겨가고 있습니다. 이제는 부품 하나하나가 제 그릇을 살펴 스스로 모양을 정하는 시대입니다. 이런 최신 CSS 설계를 실제 작은 회사 홈페이지에 어떻게 녹여야 유지보수가 쉬운지 고민된다면, 부품 단위로 튼튼하게 사이트를 짓는 일은 CYAN 에이전시가 늘 하는 일입니다. 새 기능을 좇기보다, 어디에 놓아도 깨지지 않는 구조를 함께 설계해 드립니다.
