컨테이너 쿼리를 미디어 쿼리처럼 쓰면 레이아웃이 깨지는 이유

홈페이지를 리뉴얼하면서 카드형 섹션이나 대시보드 위젯을 넣었는데, 화면이 넓은 데스크톱에서도 레이아웃이 어색하게 깨지는 모습을 보신 적이 있을 것입니다. 원인은 대부분 반응형 처리를 전부 미디어 쿼리 하나로 해결하려 한 데 있습니다. 미디어 쿼리는 화면 전체 너비를 기준으로 큰 틀을 잡는 도구이고, 컨테이너 쿼리는 컴포넌트가 실제로 배치된 공간을 기준으로 작동하는 도구라는 점을 구분해야 카드, 폼, 네비게이션 같은 내부 요소가 어떤 화면에서도 제자리를 잡습니다.

뷰포트 기준과 컴포넌트 기준, 반응형의 두 갈래

미디어 쿼리는 화면 전체(뷰포트) 너비를 기준으로 삼는 CSS 문법으로, 페이지 구조나 헤더, 푸터, 다크모드 같은 시스템 설정처럼 화면 전체에 적용되는 큰 틀의 레이아웃을 다루는 데 적합합니다. 반면 컨테이너 쿼리는 요소를 감싸는 부모 컨테이너의 크기를 기준으로 삼아, 카드·위젯·폼처럼 화면 안에서 자리 이동이 잦은 작은 단위의 레이아웃을 위해 만들어진 문법입니다.

두 문법은 경쟁 관계가 아니라 역할이 다른 도구입니다. 그런데 실무에서는 컨테이너 쿼리가 등장한 뒤에도 기존 미디어 쿼리 작성 습관을 그대로 옮겨 쓰는 경우가 많아, 브라우저 지원은 충분히 넓어졌는데도 실제 현장에서는 여전히 낯선 문법으로 취급받고 있습니다.

카드 컴포넌트가 깨지는 지점

1920px 너비의 데스크톱 화면이라도, 그 안에 300px짜리 그리드 셀이 여러 개 배치되어 있다면 카드 하나가 실제로 쓸 수 있는 공간은 300px에 불과합니다. 하지만 미디어 쿼리는 이 좁은 칸을 보지 못하고 화면 전체가 넓다는 이유만으로 데스크톱용 스타일을 그대로 적용해, 글자가 넘치거나 버튼이 깨지는 결과로 이어집니다. 오늘날 웹에는 수없이 다양한 화면 크기와 배치 조합이 존재하기 때문에, 몇 개의 고정 구간(breakpoint)만으로는 이런 경우를 다 막아낼 수 없습니다.

같은 카드 컴포넌트라도 사이드바 안에 들어갈 때와 메인 영역 안에 들어갈 때는 실제로 쓸 수 있는 폭이 전혀 다릅니다. 컨테이너 쿼리를 쓰면 컴포넌트가 자신이 놓인 자리의 폭만 보고 판단하기 때문에, 같은 코드 한 벌로 사이드바에서도 메인 영역에서도 깨지지 않는 카드를 만들 수 있습니다.

컨테이너 쿼리 도입을 위한 네 가지 실행

1. 컴포넌트와 페이지를 먼저 분리합니다 헤더, 푸터, 전체 레이아웃처럼 화면 전체 폭에 반응해야 하는 요소와, 카드, 폼, 네비게이션처럼 배치 위치에 따라 폭이 달라지는 요소를 목록으로 나눠 구분합니다.
2. 컨테이너를 선언합니다 반응형이 필요한 컴포넌트의 부모 요소에 container-type: inline-size 속성을 지정해, 해당 요소를 기준이 되는 컨테이너로 등록합니다.
3. @container 규칙으로 조건을 다시 씁니다 기존에 뷰포트 너비로 분기하던 스타일 중 컴포넌트 내부 스타일은 @container 규칙으로 옮겨, 부모 컨테이너 폭을 조건으로 바꿉니다.
4. 타이포그래피도 재점검합니다 사이드바나 모달처럼 좁은 영역에 들어가는 글자 크기 조절을 미디어 쿼리 대신 컨테이너 쿼리로 바꿔, 배치 위치가 달라져도 글자 크기가 맥락에 맞게 조정되도록 합니다.

미디어 쿼리를 완전히 대체한다는 오해

• 컨테이너 쿼리가 미디어 쿼리를 전면 대체한다고 오해하는 경우가 많지만, 페이지 전체 구조나 시스템 설정은 여전히 미디어 쿼리로 처리하는 편이 자연스럽습니다.
• 모든 요소에 컨테이너를 선언하면 오히려 스타일 관리가 복잡해지므로, 실제로 배치 위치에 따라 크기가 달라지는 컴포넌트에만 적용합니다.
• 기존 미디어 쿼리 코드를 한 번에 전환하려 하기보다는, 레이아웃이 자주 깨지는 컴포넌트부터 순서대로 바꿔가는 편이 안전합니다.

한 줄 정리 화면 전체는 미디어 쿼리, 화면 안의 컴포넌트는 컨테이너 쿼리로 나눠 맡기는 것이 반응형 홈페이지를 제대로 만드는 기준입니다.