폰에서만 홈페이지가 깨지는 6가지 원인과 해결
데스크톱에서는 멀쩡한 화면·아이폰에서는 겹치는 글자·갤럭시에서는 옆으로 밀리는 버튼.
기기 탓이 아닙니다. 원인은 6가지 중 하나이고, 전부 코드 안에 있습니다.
이 글은 증상별 원인 진단표와 수정 방법, 점검 순서를 구체적으로 제시합니다.
⚡ 3줄 요약
- 모바일 깨짐의 원인은 대부분 6가지입니다. viewport 누락·고정 폭·큰 이미지·넓은 표·절대 위치·오래된 캐시입니다.
- 가로 스크롤의 범인은 화면보다 넓은 요소 1개입니다. 크롬 개발자 도구의 기기 모드로 10분 안에 특정할 수 있습니다.
- 수정 후에는 안드로이드·아이폰 실제 기기 2대 이상에서 확인합니다. PC 미리보기와 실제 화면은 다르게 나옵니다.
모바일에서 홈페이지가 깨지는 이유는 무엇인가요?
원인은 크게 6가지입니다. viewport 메타태그 누락, 픽셀 고정 폭, 화면보다 큰 이미지, 폭을 밀어내는 넓은 표, 절대 위치 요소, 오래된 캐시입니다. 이 6가지를 위에서부터 순서대로 점검하면 대부분 당일 안에 원인을 특정할 수 있습니다.
6가지 원인의 공통점은 화면 폭 계산입니다. PC 모니터는 폭이 1920px 안팎이지만 폰은 360~430px입니다. 코드가 특정 폭을 고정하거나 브라우저에 폭 계산 기준을 알려주지 않으면, 폰은 화면을 억지로 줄이거나 내용물을 옆으로 밀어냅니다. 같은 사이트가 PC에서는 멀쩡하고 폰에서만 깨지는 이유가 여기에 있습니다.
증상별 원인은 어떻게 찾나요?
진단표에서 빈도가 가장 높은 원인은 고정 폭과 원본 이미지 2가지입니다. 특히 표 요소는 내용이 길어지면 화면 폭을 강제로 늘리므로, 모바일에서는 표를 감싸는 영역에만 가로 스크롤을 허용하는 방식이 안전합니다. 수정을 적용한 뒤에는 폰에서 캐시를 지우고 새로고침해야 변경 전 화면이 아닌 실제 결과를 보게 됩니다.
| 증상 | 유력 원인 | 수정 방법 |
|---|---|---|
| 화면 전체가 작게 축소됨 | viewport 메타태그 누락 | head에 표준 viewport 한 줄 추가 |
| 가로 스크롤이 생김 | 픽셀 고정 폭 요소·큰 이미지 | 폭을 최대 화면 크기 이하로 제한 |
| 글자·버튼이 겹침 | 절대 위치·고정 높이 | 높이를 자동으로, 위치를 상대값으로 변경 |
| 이미지가 잘려 보임 | 원본 크기 그대로 삽입 | 이미지 가로폭을 화면 폭에 맞게 제한 |
| 수정했는데 그대로임 | 브라우저 캐시 | 캐시 삭제 후 새로고침으로 재확인 |
가로 스크롤은 왜 생기나요?
화면 폭 360px인 폰에서 어떤 요소 1개가 500px를 차지하면, 브라우저는 모자란 140px만큼 화면을 옆으로 늘립니다. 범인을 찾으려면 크롬에서 F12를 눌러 개발자 도구를 열고 기기 모드로 전환한 뒤, 화면 폭을 줄여 가며 어느 요소가 밖으로 튀어나오는지 확인합니다.
가장 흔한 범인 3가지는 픽셀로 폭을 고정한 배너, 원본 크기로 올린 이미지, 열이 많은 표입니다. 셋 다 해결 원칙은 같습니다. 요소의 가로폭이 화면 폭을 넘지 못하게 최대 폭을 제한하고, 넘칠 수밖에 없는 표는 감싸는 영역 안에서만 스크롤되게 하는 것입니다. 이 원칙 하나로 가로 스크롤의 대부분이 사라집니다.
어떤 순서로 점검하나요?
순서가 중요한 이유는 원인이 겹치기 때문입니다. viewport가 없는 상태에서 이미지부터 고치면 증상이 섞여 판단이 어려워집니다. 기준이 되는 태그를 먼저 확인하고, 폭이 큰 요소를 위에서부터 하나씩 제거해야 어느 수정이 효과를 냈는지 알 수 있습니다. 6단계 전체는 처음 하는 사장님 기준으로도 1~2시간이면 끝납니다.
- 크롬 개발자 도구(F12)를 열고 기기 모드로 전환해 폭 360px 화면을 확인합니다.
- 페이지 소스에서 viewport 메타태그가 head 안에 있는지 확인합니다.
- 픽셀 고정 폭을 쓴 요소를 찾아 최대 폭을 화면 크기 이하로 제한합니다.
- 이미지의 가로폭이 화면 폭을 넘지 않게 제한합니다.
- 표는 감싸는 영역 안에서만 가로 스크롤되게 처리합니다.
- 캐시를 삭제하고 안드로이드·아이폰 실제 기기 2대에서 재확인합니다.
그래서 지금 무엇부터 하면 되나요?
- 내 홈페이지를 안드로이드·아이폰 2대에서 직접 열어 축소·스크롤·겹침 여부를 확인합니다.
- 크롬 개발자 도구 기기 모드에서 폭 360·390·768px 3가지로 주요 페이지를 점검합니다.
- 코드 권한이 없는 임대형·외주 사이트라면 증상 캡처와 기기명·브라우저 이름을 제작사에 보내 수정을 요청합니다.
자주 묻는 질문
특정 기종에서만 깨지는 것도 고칠 수 있나요?
직접 수정할 코드 권한이 없으면 어떻게 하나요?
반응형으로 새로 만들면 비용이 얼마나 드나요?
NOAH가 이 문제를 없애는 방식
NOAH는 검증된 템플릿 구조를 사장님 브랜드에 맞춰 7일 안에 오픈하는 홈페이지 제작 서비스입니다. 모바일·태블릿 반응형이 기본 포함이라 기기별 깨짐을 오픈 전 검수 단계에서 잡고, 오픈 후에도 1년 텍스트 수정이 포함되어 깨진 문구 교체를 평균 1영업일에 반영합니다. 기본 ₩199,000이며 부가세는 별도입니다. 지금 화면이 깨져 있다면 증상 캡처만 보내 주셔도 상담에서 원인 파악까지는 무료로 도와드립니다. 상담을 받으셔도 제작을 결정하실 필요는 없어요.
무료 상담 신청 →관련 글
viewport 태그 한 줄이 없으면 모바일이 전부 축소됩니다홈페이지 로딩 1초가 늦어질 때 잃는 문의 수오픈 버튼을 누르기 전 확인해야 할 22가지클릭을 부르는 title과 description 글자수 기준참고 자료 — 구글 검색 센터 문서 · PageSpeed Insights · 이비웹 모바일 리뉴얼 가이드