Container Query 실전 — 카드가 화면이 아니라 부모를 읽게 하기

카드는 viewport가 아니라 자신이 놓인 칸의 폭을 알아야 했다. Container Query를 쓰자 사이드바, 그리드, 모달 안에서 같은 컴포넌트가 자연스럽게 변했다.

container-type

먼저 측정 가능한 기준을 정했습니다. 감으로 빠르다거나 편하다고 말하기보다, 응답 시간, 실패율, 유지보수 비용처럼 팀이 반복해서 볼 수 있는 지표를 앞에 뒀습니다.

.card-shell { container-type: inline-size; }
@container (min-width: 420px) {
  .card { grid-template-columns: 140px 1fr; }
}

토큰과 breakpoint

작게 도입한 뒤 한 주 동안 운영 데이터를 모았습니다. 예상보다 좋았던 부분은 개발 경험이었고, 예상보다 까다로웠던 부분은 예외 상황의 디버깅이었습니다.

테스트 포인트

마지막 체크리스트는 단순합니다. 되돌릴 수 있는가, 실패를 관찰할 수 있는가, 팀원이 같은 결정을 다시 설명할 수 있는가. 이 세 가지가 통과되면 도입 리스크는 꽤 낮아집니다.