반응형은 눈이 아니라 숫자로 본다

상황

브라우저 창을 줄여보는 것만으로는 안 잡히는 결함이 있습니다. overflow-hidden이 걸린 요소는 부모를 넘쳐도 가로 스크롤이 안 생겨서 정상으로 보여요. 열 폭과 요소 폭을 직접 재야 드러납니다.

단계별 설명

1. 01 chrome-devtools-mcpmcp

   브레이크포인트별로 실제 폭을 잰다

   360·390·640·768·1024·1280·1440에서 getBoundingClientRect로 열 폭과 요소 폭을 비교합니다. scrollWidth만 보면 overflow-hidden에 가려진 초과분을 놓칩니다.

2. 02 a11y-debuggingskill

   터치 타깃과 대비를 함께 본다

   버튼 44px 하한과 대비 4.5:1을 같은 패스에서 확인합니다. 반응형 조정이 버튼 크기를 건드리는 경우가 많아 따로 보면 놓칩니다.

3. 03 Claude Codeagent

   수정 후 전 구간 재측정

   한 브레이크포인트를 고치면 인접 구간이 틀어집니다. 고친 지점만 보지 말고 처음 잰 표를 통째로 다시 채웁니다.