폰에서 화면이 깨지는지 확인하려고 기기를 여러 대 살 필요는 없습니다. PC 브라우저에 이미 들어 있는 기기 모드로 화면 폭을 바꿔 보는 것만으로 깨짐의 대부분이 드러나고, 남는 것은 무료 측정 도구 두 개로 확인합니다. 여기까지 전부 무료이고 따로 설치할 프로그램도 없습니다.
핵심 요약
- 브라우저 개발자도구의 기기 모드(Ctrl+Shift+M)가 가장 빠르고 돈이 들지 않는 확인 방법입니다.
- 배치가 깨지는 문제는 브라우저에서 보고, 속도와 화면 흔들림은 측정 도구에서 봅니다.
- 서치콘솔의 모바일 사용 편의성 보고서는 2023년 12월에 없어져서 지금은 다른 도구로 대체해야 합니다.
- 마지막 한 번은 실제 폰에서 열어 봐야 합니다. 브라우저가 흉내 내지 못하는 부분이 남아 있습니다.
모바일 화면을 뒤로 미루면 안 되는 이유는 단순합니다. Statista 집계 기준 2026년 2분기 전 세계 웹 트래픽의 51.48%가 태블릿을 제외한 모바일에서 발생했습니다. 방문자의 절반 이상이 사이트를 처음 만나는 자리가 폰 화면입니다.
1. 크롬 개발자도구 기기 모드
크롬을 열고 F12로 개발자도구를 띄운 뒤 Ctrl+Shift+M(맥은 Cmd+Shift+M)을 누르면 화면이 폰 크기로 바뀝니다. 기기 이름을 골라 폭을 바꿀 수도 있고, 폭을 직접 끌어서 줄여 볼 수도 있습니다.
어떤 경우에 맞나 — 만드는 중에 계속 확인해야 하는 경우입니다. 고치고 새로고침하면 바로 결과가 보이므로 왕복이 가장 짧습니다.
주의점 — 여기서 보이는 것은 화면 폭과 배치이지 실제 기기 성능이 아닙니다. PC의 처리 속도로 그려지기 때문에 폰에서 느리게 열리는 문제는 여기서 드러나지 않습니다.
2. 파이어폭스 반응형 디자인 모드
파이어폭스에도 같은 단축키 Ctrl+Shift+M으로 열리는 반응형 디자인 모드가 있습니다. 화면 폭과 함께 화면 밀도를 바꿔 볼 수 있어서, 같은 폭이라도 글자와 이미지가 더 촘촘하게 표시되는 기기를 흉내 낼 때 씁니다.
어떤 경우에 맞나 — 크롬에서는 멀쩡한데 특정 기기에서만 이상하다는 이야기를 들었을 때, 다른 엔진으로 한 번 더 확인하는 용도입니다.
주의점 — 브라우저마다 글꼴을 처리하는 방식이 조금씩 달라서 줄바꿈 위치가 크롬과 다르게 나올 수 있습니다. 이건 오류가 아니라 정상입니다.
3. 사파리 반응형 디자인 모드
맥에서는 사파리 설정에서 개발자용 메뉴를 켠 뒤 반응형 디자인 모드를 쓸 수 있습니다. 아이폰 사용자가 실제로 보게 될 화면에 가장 가깝습니다.
어떤 경우에 맞나 — 방문자 중 아이폰 비중이 높은 경우, 그리고 화면 아래쪽 버튼이 잘리는 문제를 확인해야 하는 경우입니다.
주의점 — 윈도우 PC에는 사파리가 없습니다. 맥이 없다면 이 항목은 건너뛰고, 주변 아이폰으로 직접 여는 것으로 대신하시면 됩니다.
4. PageSpeed Insights
주소를 넣으면 모바일과 데스크톱 결과를 따로 보여주는 무료 측정 도구입니다. 배치가 아니라 열리는 속도와 화면이 밀리는 정도를 숫자로 알려 줍니다.
어떤 경우에 맞나 — 화면은 잘 나오는데 폰에서 느리다는 말을 들었을 때입니다. 원인이 이미지인지, 글꼴인지, 스크립트인지까지 항목별로 나옵니다.
주의점 — 실행할 때마다 값이 조금씩 달라집니다. 한 번 돌린 점수로 판단하지 마시고 두세 번 돌려 비슷하게 나오는 구간을 보시는 편이 낫습니다.
5. Lighthouse
크롬 개발자도구 안에 들어 있는 검사 도구입니다. 개발자도구를 열고 Lighthouse 탭에서 모바일을 고른 뒤 실행하면 성능·접근성·SEO 항목을 한 번에 검사합니다. 점수는 0에서 100 사이로 나오고, 0~49는 낮음, 50~89는 개선 필요, 90~100은 좋음으로 분류됩니다.
어떤 경우에 맞나 — 아직 공개하지 않아 인터넷 주소가 없는 사이트를 검사할 때입니다. 내 PC에서 열어 둔 화면을 그대로 검사할 수 있습니다.
주의점 — 이 점수는 내 PC 성능과 그 순간의 인터넷 상태를 반영한 값입니다. 실제 방문자들이 겪는 값과는 다릅니다.
6. 실제 스마트폰
가장 정확한 도구는 손에 들고 있는 폰입니다. 사이트 주소를 문자로 자신에게 보내고 그 링크를 눌러 여는 방식이면 준비할 것이 없습니다.
어떤 경우에 맞나 — 공개 직전 마지막 확인, 그리고 실제 손가락으로 눌러야 알 수 있는 문제를 볼 때입니다.
주의점 — 만든 사람의 폰에는 캐시가 남아 이전 화면이 그대로 뜨는 경우가 있습니다. 시크릿 모드로 열거나 다른 사람 폰으로 한 번 더 확인하시는 편이 안전합니다.
브라우저 기기 모드로는 못 잡는 것 3가지
기기 모드는 화면 폭을 흉내 낼 뿐 기기 자체를 흉내 내지는 않습니다. 아래 셋은 실제 폰에서만 드러납니다.
- 손가락으로 누를 때의 정확도 — 버튼이 작거나 서로 붙어 있으면 화면상으로는 멀쩡해 보여도 실제로는 옆 버튼이 눌립니다.
- 주소창이 접히고 펴지며 생기는 높이 변화 — 화면 높이를 꽉 채우도록 만든 첫 화면이 폰에서만 잘리거나 남는 원인입니다.
- 기기에 없는 글꼴 — PC에만 설치된 글꼴을 쓰면 폰에서는 다른 글꼴로 대체되어 줄바꿈 위치가 통째로 달라집니다.
무엇을 통과해야 잘 만든 반응형인가요?
배치가 안 깨지는 것과 별개로, 아래 네 가지 숫자를 넘기면 모바일에서 문제 없다고 볼 수 있습니다. 앞의 세 항목은 구글이 정한 코어 웹 바이탈 기준으로, 전체 방문 중 상위 75%가 이 값 안에 들어오면 좋음으로 분류됩니다.
| 항목 | 좋음 기준 | 확인하는 곳 |
|---|---|---|
| 가장 큰 요소가 그려지는 시간(LCP) | 2.5초 이하 | PageSpeed Insights |
| 눌렀을 때 반응하는 시간(INP) | 200밀리초 이하 | PageSpeed Insights |
| 화면이 밀리는 정도(CLS) | 0.1 이하 | PageSpeed Insights |
| Lighthouse 성능 점수 | 90점 이상 | 크롬 개발자도구 |
확인 기준 : 2026년 9월
서치콘솔의 모바일 사용 편의성 보고서는 어디 갔나요?
없어졌습니다. 구글은 2023년 12월 1일부터 서치콘솔의 모바일 사용 편의성 보고서와 모바일 친화성 테스트 도구, 그리고 그 API를 순차적으로 중단했고 12월 4일 종료를 확인했습니다. 대신 쓸 수 있는 도구로 크롬의 Lighthouse를 안내했고, 코어 웹 바이탈 보고서는 서치콘솔에 그대로 남아 있습니다.
그래서 예전 방식대로 서치콘솔에서 모바일 항목을 찾으면 아무것도 나오지 않습니다. 지금은 위에 정리한 브라우저 도구와 측정 도구로 나눠서 봐야 합니다.
공개 전에 실제 폰으로 확인할 5가지
도구를 다 돌려 봤다면 마지막은 손으로 합니다. 이 다섯 가지만 눌러 봐도 대부분의 사고는 걸러집니다.
- 가로로 밀리는지 — 화면을 옆으로 쓸었을 때 여백이 나오면 어딘가 폭이 화면보다 넓습니다. 표나 긴 주소 문자열이 흔한 원인입니다.
- 글자 크기 — 확대하지 않고 읽을 수 있는지 봅니다. 손가락으로 벌려야 읽힌다면 그 자리는 고쳐야 합니다.
- 전화·문의 버튼 — 눌렀을 때 실제로 전화 앱이 뜨는지, 폼이 열리는지 확인합니다.
- 메뉴 — 접힌 메뉴가 열리고 닫히는지, 열린 상태에서 뒤 화면이 같이 스크롤되지는 않는지 봅니다.
- 사진이 뜨는 속도 — 첫 화면 사진이 늦게 뜨면 그 사진 용량부터 줄이는 것이 가장 효과가 큽니다.
도구로도 못 메우는 부분
확인 도구는 문제를 알려줄 뿐 고쳐 주지는 않습니다. 직접 만든 HTML이라면 알려진 문제를 고치고 다시 올리는 과정을 계속 반복해야 하고, 그때마다 어디에 올려서 실제 주소로 열어 볼지가 다시 문제가 됩니다. 폰에서 어떻게 보이는지는 결국 인터넷 주소가 있어야 제대로 확인되기 때문입니다.
아이비전트의 AI 호스팅은 이 부분을 무료 구간으로 열어 두고 있습니다. 만든 HTML·CSS·JS를 압축해 올리면 배포되고, 도메인 1개(xxx.ibigent.com 형태)가 바로 나오며 SSL도 따로 결제 없이 붙습니다. 개인 사이트나 랜딩 페이지 용도는 무료이고, 유료 기능은 14일 무료체험으로 먼저 확인하실 수 있습니다. 만든 결과를 폰에서 실제 주소로 열어 보는 데까지 비용을 들이지 않고 갈 수 있다는 뜻입니다. AI 호스팅 안내에서 조건을 확인하시면 됩니다.
확인 기준 : 2026년 9월
