2026 원격 Mac 프론트 릴리스 검수:
CSS Container Queries·@layer — Safari vs Chromium 대조표·배포 전 3단계
대상: 원격 Mac에서 컴포넌트·사이트를 내며 컨테이너 쿼리와 @layer(Tailwind·토큰·위젯)를 쓰는 팀. Chromium 우선 개발 시 캐스케이드 이슈가 늦게 드러납니다. 이 글은 릴리스 검수용 렌즈입니다. 홈·블로그 목록·Web 배포 전 스모크, Vite·Webpack+Safari, Playwright·Safari와 연계하세요.
01 컨테이너 쿼리·레이어가 릴리스를 막는 지점
컨테이너 쿼리는 컴포넌트 박스 기준 브레이크포인트로 상태가 급증합니다. 중첩·스크롤·size vs inline-size는 overflow·내재 크기에서 엔진별로 미세하게 다릅니다. @layer는 표준은 맞지만 비레이어가 이기는 규칙 때문에, 청크·벤더 CSS 순서만 바뀌어도 Safari와 Chromium이 다른 승자를 고릅니다.
원격 Mac에서는 playwright-webkit ≠ 사용자 Safari, CI Chromium ≠ WebKit 레이아웃 검증입니다. 엔진 최소 버전을 고정하고 양쪽 시각 결과를 비교하세요.
02 대조표 — 검수 관점 요약
릴리스 검수에서 손으로 확인할 포인트만 모았습니다. 최소 브라우저가 에버그린 Safari·Chromium일 때 기준입니다.
| 주제 | Chromium(Chrome·Edge) | Safari(WebKit) |
|---|---|---|
컨테이너 쿼리 단위 (cqw, cqh, cqi, cqb, cqmin, cqmax) |
DevTools로 활성 컨테이너 확인 용이. vw/vh 혼용은 팀 규율 이슈가 더 흔함. |
overflow: auto 부모 아래 중첩 컨테이너는 플렉스·그리드에서 별도 리사이즈 테스트. |
container-type: size vs inline-size |
size에서 높이 기여 누락이 흔한 실수. |
스펙 동일. size 화면은 세로도 줄여 검증. |
@layer 캐스케이드·비레이어 규칙 |
Layers 패널 유리. 동적 import로 레이어 순서 뒤집힘 가능. | 캐스케이드는 표준 준수. 번들·미니파이 순서 차이 → 계산된 스타일로 비교. |
@import + 레이어 |
늦은 @import가 레이어를 덮는지 네트워크로 확인. |
크리티컬 인라인만 넣으며 레이어 래퍼를 빼면 비레이어가 이김. |
| Shadow DOM·constructable stylesheet | 섀도 내 컨테이너 쿼리는 호스트 컨테인먼트 규칙. | 페이지 레이어 + 섀도 CSS를 함께 쓰는 커스텀 엘리먼트 1개를 RC에 포함. |
| 자동화 신호 | CI 기본 축. WebKit 미세 레이아웃과는 다름. | RC는 원격 Mac Safari. DOM 테스트는 Vitest·WebKit 매트릭스로 환경 고정. |
03 배포 전 3단계 체크리스트
- 엔진 타깃 고정: 원격 Mac·실기기 최소 Safari·Chromium을 문서화하고, CI 풀 버전이 낮으면 승격 실패(UA·태그 컨테이너 등).
- 컨테인먼트·레이어 실사:
@container템플릿을 사이드바·대시보드·모바일 폭에서 리사이즈.@layer는 양 엔진 계산된 스타일로 버튼·모달·임베드 확인. - WebKit 증빙: 원격 Mac Safari에서 스테이징 스크린샷·짧은 녹화를 티켓에 첨부. Chromium만으로는 닫지 않기.
배포 전 스모크와 같은 아티팩트 폴더에 CSS 산출물을 모읍니다.
04 구조화 데이터 제안(SEO·GEO)
<head>에 BlogPosting·BreadcrumbList·HowTo·FAQPage(@graph)를 넣었습니다. 추가로 TechArticle 또는 Article+about는 허브 재배포용으로 검토하세요. 리치 결과 테스트로 검증하고 FAQ 엔티티 URL 중복은 피합니다.
05 FAQ
컨테이너 쿼리 구현이 엔진마다 다른가요?
표준은 동일합니다. 차이는 주로 레이아웃 맥락(중첩·overflow·높이)에서 납니다.
@layer가 Chrome만 맞는 이유는?
비레이어 승리·청크별 레이어 중복·벤더 비레이어 CSS가 흔한 원인입니다. 계산된 스타일을 비교하세요.
Playwright WebKit만으로 충분한가요?
회귀 볼륨에는 유효하나 실제 Safari 패스를 RC에 남기는 편이 안전합니다.
06 요약
① CI·단말 최소 Safari·Chromium 버전 고정. ② 실제 템플릿에서 컨테이너 리사이즈 + @layer 승자를 계산된 스타일로 확인. ③ 원격 Mac Safari 스크린샷·녹화를 릴리스 티켓에 첨부.
CI Chromium 옆에서 진짜 Safari 돌리기
사용자와 같은 WebKit에서 컨테이너·레이어를 검증하세요. 플랜 선택 후 SSH·화면 공유, 릴리스마다 Safari 증빙을 첨부합니다.
홈 · 구매 · 요금 · 도움말 · 블로그 · Web 스모크(배포 전) · Vite·Webpack + Safari