PC는 멀쩡한데 모바일에서 레이아웃이 깨질 때

이런 증상이라면

PC에서는 잘 보이는데 폰에서 보면 글자·버튼이 화면 밖으로 삐져나가거나, 가로 스크롤이 생기거나, 요소가 겹칩니다.

흔한 원인 (가능성 순)

1고정 픽셀 너비를 썼다코드

width: 600px처럼 고정값을 쓰면 화면이 좁아져도 안 줄어들어 삐져나갑니다. max-width + 100%나 반응형 단위로 바꿔야 합니다.

2한 요소가 화면보다 넓어 가로 스크롤을 만든다코드

긴 텍스트·이미지·표·코드 블록이 줄바꿈/스크롤 없이 뻗으면, 그 하나 때문에 페이지 전체에 가로 스크롤이 생깁니다.

3모바일 분기(반응형 클래스)를 안 넣었다코드

AI가 PC 기준으로만 만들고 모바일 대응(예: Tailwind의 md: 분기, 세로 쌓기)을 빠뜨리면 좁은 화면에서 무너집니다.

개발자도구에선 괜찮은데 실제 폰에선 깨져요.

주소창 높이·안전영역(노치)·실제 폰트 크기 차이 때문입니다. 마지막엔 반드시 실제 기기로 확인하는 게 좋습니다.

AI가 "반응형으로 만들었다"는데 왜 깨지나요?

AI는 흔한 화면은 대응하지만, 긴 한글 단어·특정 컴포넌트 조합 같은 edge case는 놓칩니다. 눈으로 확인해야 잡히는 영역입니다.

위를 다 해봤는데도, 또는 AI(Cursor·Claude)한테 물어봐도 계속 같은 에러라면 — 에러 로그를 붙여넣으면 60초 안에 진짜 원인을 짚어드려요.