정적 랜딩이나 디자인 시스템 카드를 배포하는 팀은 뷰포트만 본 @media에 자주 속습니다. 전체 화면에선 멀쩡해 보여도 좁은 사이드바나 2열 그리드 트랙에 넣으면 깨집니다. 2026년에는 CSS 컨테이너 쿼리(@container)로 각 컴포넌트가 자신의 부모 박스에 반응하게 만드세요. Safari 우선 사인오프라면 Chrome만으로는 부족하고, 실제 macOS Safari에서 확인해야 합니다. 이 글은 @container를 쓸 타이밍, @media와의 차이, 클라우드 Mac 워크플로에 끼워 넣는 방법을 정리합니다. STP와 안정판 Safari 글과 함께 읽으면 채널 선택이 맞춰집니다.
컴포넌트 브레이크포인트와 뷰포트
전통적인 반응형은 “모바일은 좁고 데스크톱은 넓다”는 가정에 기대지만, 같은 요금 카드가 1200px 히어로와 360px 미리보기에 동시에 올라가면 뷰포트 규칙이 거짓말을 합니다. 컨테이너 쿼리는 “부모 래퍼가 28rem 미만이면 CTA를 제목 아래로 쌓는다”처럼 컴포넌트 언어로 CSS를 씁니다.
WebKit은 flex·grid 가장자리와 글꼴 메트릭에서 Chromium과 차이가 남습니다. 컨테이너 쿼리는 그 차이를 없애지 않지만 “사이드바인데 데스크톱 브레이크포인트가 적용되는” 오버플로를 줄입니다. Vite 7과 Tailwind v4를 쓰면 바깥 그리드는 뷰포트, 안쪽 카드는 @container로 역할을 나누는 편이 충돌이 적습니다.
2026년에 쓰는 문법
.card-wrap {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 32rem) {
.card { flex-direction: row; }
}container-name은 중첩이 깊은 문서 페이지에서 특히 유용합니다. 높이까지 조건에 넣을 때만 container-type: size를 쓰고, 높이 없이 size만 주면 쿼리가 안 걸리는 흔한 실수를 피하세요.
유틸리티 중심 코드베이스는 사이드바·모달 내부부터 컨테이너 쿼리로 옮기고 헤더/푸터는 @media에 두는 이전 패턴이 현실적입니다. 스타일 가이드에 어떤 Figma 프레임이 어떤 쿼리에 대응하는지 적어두면 마감 직전 뷰포트 규칙이 되돌아오는 일을 막을 수 있습니다.
Safari 지원과 사실
- Safari 16.0(2022년 9월, iOS 16·Ventura)부터 크기 컨테이너 쿼리가 안정 채널에 포함되어 2026년 신규 호환 매트릭스에 넣기에 충분합니다.
cqw등 단위 실험에는 STP도 쓸 수 있지만 고객 사인오프는 안정판을 기준으로 합니다.- 순수 정적 호스팅에서는 JS 폴리필이 무겁기 때문에 오래된 임베디드 WebView에는 단순 1열 폴백이 현실적입니다.
결정표: @container vs @media
| 시나리오 | 선호 | 이유 |
|---|---|---|
| 루트 글자 크기·페이지 여백 | @media | 가독은 뷰포트가 지배. |
| 그리드 안 재사용 카드 | @container | 너비는 트랙 폭을 따름. |
| 인쇄 | @media print | 인쇄는 별도 축. |
| 고정 높이 대시보드 타일 | @container + size | 가로·세로 모두 디자인에 포함. |
| 풀블리드 히어로 | 하이브리드 | 외곽은 뷰포트, 내부 프로모는 컨테이너. |
정적 사이트와 빌드 도구
Eleventy·Hugo 출력 CSS에 그대로 @container를 넣을 수 있고 PostCSS 8.4 이후는 통과만 합니다. 레이아웃 비용은 컨테이너 수에 따라 달라지며, 값싼 iPhone에서 극단적으로 많으면 수 ms 차이가 날 수 있으나 일반 마케팅 사이트에서 20~40개 수준은 M 시리즈 Mac 샘플링에서 오차 수준입니다. 긴 스크롤 목록은 먼저 가상화를 검토하세요.
접근성: 브레이크포인트 전환 후 VoiceOver로 포커스 순서를 다시 확인하세요. 컨테이너 쿼리는 키보드 테스트를 생략할 명분이 아닙니다.
분기마다 스타일 가이드를 검토해 신규 컴포넌트가 어떤 쿼리 종류에 속하는지 갱신하면 디자인·구현 어긋남이 쌓이지 않습니다.
팀이 여러 시간대에 흩어져 있다면 클라우드 Mac 계정과 녹화 링크를 릴리스 체크리스트에 넣어 동일한 검증 환경을 공유하세요. 주요 컴포넌트마다 360px·480px·640px 등 폭별 캡처 표를 유지하면 디자이너와 엔지니어의 기대치를 맞추기 쉽습니다.
렌탈 Mac mini QA
SSH/VNC로 macOS에 들어가 Safari 반응형 모드와 Web Inspector로 컴포넌트 영역 너비를 바꾸세요. 브라우저 바깥 틀만 움직이면 잘못된 안심이 됩니다. 1440×900과 390×844 녹화를 회귀 자산으로 두면 diff 리뷰가 빠릅니다.
CI가 Chromium만 돌 때 클라우드 실기 Safari가 “출하 직전 마지막 WebKit”이 됩니다. Apple Silicon Mac mini는 저전력·저소음으로 상시 검증 박스에 적합합니다.
Apple Silicon Mac mini는 네이티브 macOS·Safari·색 관리를 그대로 써서 Linux 헤드리스만으로는 놓치기 쉬운 CSS 차이를 잡기 좋습니다. MacHTML은 SSH/VNC가 포함된 물리 Mac mini 렌탈을 제공해 캠페인 단위로 켰다가 검증 후 줄이는 탄력 운영이 가능합니다. 단기 프로젝트에 워크스테이션을 새로 살 필요가 없습니다.
FAQ
컨테이너 쿼리가 미디어 쿼리를 대체하나요?
아닙니다. 페이지 타이포와 글로벌 내비는 @media가 적합합니다. 같은 카드가 320px 사이드바와 720px 메인에 들어갈 때 @container가 유리합니다.
Safari는 언제부터 @container를 지원하나요?
Safari 16.0 이후입니다. Safari 15를 대상으로 한다면 점진적 향상으로 flex 등 단순 폴백을 두세요.
container-type은 inline-size와 size 중 무엇?
대부분의 정적 레이아웃은 inline-size면 충분합니다. 높이도 조건에 넣는 대시보드 타일 등에서는 size와 명시적 높이가 필요합니다.
Safari에서 컨테이너 쿼리를 사인오프하고 싶다면
Apple Silicon Mac mini를 렌탈해 실제 WebKit 검증. SSH/VNC 포함.