데스크톱에서 멀쩡하던 화면이 폰에서 깨지는지는, 기기를 여러 대 사거나 유료 검사 서비스를 결제하지 않아도 확인할 수 있습니다. 지금 쓰는 브라우저 안에 기기 모드가 이미 들어 있고, 크롬 기준 Ctrl+Shift+M(맥은 Cmd+Shift+M) 한 번으로 열립니다. 여기에 무료 도구 두어 개만 더하면 반응형 홈페이지 제작 뒤의 점검은 대부분 끝납니다.
핵심 요약
- 반응형 점검의 첫 단계는 브라우저에 내장된 기기 모드이며, 따로 설치할 것이 없습니다.
- 구글의 모바일 친화성 테스트와 서치콘솔 모바일 사용 편의성 보고서는 2023년 12월 1일자로 종료되어, 지금은 크롬에 들어 있는 Lighthouse 가 그 자리를 대신합니다.
- 기기 이름별로 화면을 다 맞추기보다, 가로 스크롤이 생기는 지점을 찾아 없애는 편이 빠릅니다.
- 마지막 확인은 실제 폰에서 한 번 해야 합니다. 흉내 낸 화면은 터치 간격과 폰트 렌더링까지 재현하지 못합니다.
만든 뒤에 따로 확인해야 하는 이유
2026년 2분기 기준 전 세계 웹 트래픽의 51.48%가 모바일(태블릿 제외)에서 발생했습니다(Statista 집계). 제작할 때는 큰 화면으로 작업하지만, 실제로 그 페이지를 보는 절반 이상은 손바닥만 한 화면으로 본다는 뜻입니다.
점검 도구 사정도 한 번 바뀌었습니다. 구글은 서치콘솔의 모바일 사용 편의성 보고서와 모바일 친화성 테스트 도구, 그리고 관련 API 를 2023년 12월 1일자로 종료했고, 대신 크롬에 들어 있는 Lighthouse 를 안내했습니다. 오래된 안내 글에 적힌 모바일 친화성 테스트 주소를 눌러도 열리지 않는 이유가 이것입니다.
폰에서 화면이 깨질 때 가장 흔한 자리 4가지
원인 대부분은 아래 네 곳 중 하나입니다. 도구를 열기 전에 이 네 곳부터 떠올려 보면 찾는 시간이 줄어듭니다.
- 가로 폭이 고정된 요소 - 폭을 픽셀로 못 박아 둔 영역이 화면보다 넓어지면 페이지 전체에 가로 스크롤이 생깁니다.
- 표 - 칸이 4개 이상인 표는 좁은 화면에서 가장 먼저 밀려납니다.
- 큰 이미지 - 원본 크기 그대로 올린 사진은 폭도 넘치고 로딩도 늦습니다.
- 버튼과 링크 간격 - 데스크톱에서 적당해 보이던 간격이 손가락으로는 눌리지 않습니다.
무료 점검 수단 한눈에 보기
| 수단 | 어디서 실행 | 비용·설치 | 주로 잡히는 문제 |
|---|---|---|---|
| 브라우저 기기 모드 | 크롬 개발자도구 | 무료, 설치 0개(단축키 Ctrl+Shift+M) | 레이아웃 깨짐, 가로 스크롤 |
| Lighthouse | 크롬 개발자도구 탭 | 무료, 설치 0개(모바일·데스크톱 2가지 모드) | 성능·접근성 점수 |
| PageSpeed Insights | 웹 주소(pagespeed.web.dev) | 무료, 설치 0개 | 모바일 로딩 속도 |
| Responsively App | 설치형 앱(윈도·맥·리눅스 3종) | 무료 오픈소스(AGPL-3.0) | 여러 화면 폭 동시 비교 |
| 실제 기기 | 갖고 있는 폰 1대 | 추가 비용 0원 | 터치 간격, 실제 폰트 |
확인 기준 : 2026년 8월
1. 브라우저 기기 모드
크롬 개발자도구를 연 뒤 Ctrl+Shift+M(맥은 Cmd+Shift+M)을 누르면 화면이 기기 모드로 바뀝니다. 미리 등록된 기기 목록에서 고르거나, 폭을 직접 숫자로 입력해 원하는 지점을 볼 수 있습니다. 도구 메뉴에서 미디어 쿼리 표시를 켜면 화면이 바뀌는 경계가 눈금으로 보입니다.
어떤 경우에 맞나 - 무엇이 어디서 깨지는지 처음 찾을 때. 파이어폭스와 엣지에도 같은 성격의 기기 모드가 있어 브라우저를 가리지 않습니다.
주의점 - 화면 크기와 터치 입력을 흉내 낼 뿐이라, 실제 폰의 주소창 높이나 폰트 차이까지는 알 수 없습니다.
2. Lighthouse
크롬 개발자도구 안의 Lighthouse 탭에서 모바일과 데스크톱 중 하나를 고르고 분석을 실행하면 됩니다. 모바일로 돌리면 중급 기기(Moto G4)와 모바일 네트워크 조건을 가정해 측정합니다. 구글이 종료된 모바일 친화성 테스트의 대체 수단으로 안내한 것이 이 도구입니다.
어떤 경우에 맞나 - 화면 배치는 괜찮은데 폰에서 유독 느릴 때. 어떤 항목이 점수를 깎았는지 목록으로 나옵니다.
주의점 - 같은 페이지를 여러 번 돌려도 점수가 조금씩 달라집니다. 점수 자체보다 반복해서 지적되는 항목을 보시면 됩니다.
3. PageSpeed Insights
주소창에 페이지 주소만 넣으면 되는 웹 도구라 설치가 필요 없습니다. Lighthouse 와 같은 측정을 서버에서 대신 돌려 주고, 조건이 맞는 사이트는 실제 사용자 데이터도 함께 보여 줍니다.
어떤 경우에 맞나 - 내 컴퓨터 사양이나 인터넷 속도의 영향 없이, 남이 보는 조건에 가깝게 확인하고 싶을 때.
주의점 - 공개된 주소만 검사할 수 있습니다. 아직 공개하지 않은 작업용 주소는 이 도구로 볼 수 없습니다.
4. Responsively App
여러 화면 크기를 한 화면에 나란히 띄워 주는 무료 오픈소스 앱입니다(AGPL-3.0). 윈도·맥·리눅스 3종을 지원하고, 한쪽에서 스크롤하거나 링크를 누르면 나머지 화면이 같이 움직입니다. 전체 페이지 스크린샷도 한 번에 받을 수 있습니다.
어떤 경우에 맞나 - 페이지 수가 많아 폭을 바꿔 가며 하나씩 확인하기가 번거로울 때.
주의점 - 설치가 필요한 프로그램입니다. 페이지가 서너 개뿐이라면 브라우저 기기 모드로 충분합니다.
5. 갖고 있는 실제 폰
추가 비용 없이 가장 정확한 확인 수단은 이미 손에 있는 폰입니다. 흉내 낸 화면에서는 멀쩡하던 버튼 간격이나 글자 크기가 실제 기기에서는 달라 보이는 경우가 있습니다.
어떤 경우에 맞나 - 공개 직전 마지막 확인. 한 대만 있어도 충분합니다.
주의점 - 내 폰 한 대로는 다른 화면 비율까지 알 수 없습니다. 앞의 도구들로 폭을 훑은 뒤 마지막에 실물로 확인하는 순서가 좋습니다.
6. 빌더와 호스팅 쪽에서 제공하는 미리보기
빌더로 만든 사이트라면 편집 화면 안에 이미 모바일 미리보기가 있는 경우가 많습니다. 아이비전트도 템플릿 갤러리에서 화면 폭에 따라 배치가 바뀌는 형태를 미리 보고 고를 수 있고, 무료 도구 메뉴의 웹사이트 상태 점검으로 주소가 실제로 열리는지부터 확인할 수 있습니다. 순서로 보면 주소가 열리는지, 화면이 깨지지 않는지, 속도가 괜찮은지가 각각 다른 확인입니다.
어떤 경우에 맞나 - 직접 코드를 손대지 않고 만든 사이트에서, 수정과 확인을 한 곳에서 끝내고 싶을 때.
주의점 - 편집 화면 미리보기는 편집 도구 안에서의 모습이라, 공개된 주소를 실제 폰으로 한 번 더 여는 과정을 생략하지 않는 편이 좋습니다.
구글 모바일 친화성 테스트는 왜 안 열리나요?
2023년 12월 1일자로 종료되었기 때문입니다. 서치콘솔의 모바일 사용 편의성 보고서와 모바일 친화성 테스트 도구, 테스트 API 가 함께 정리되었고, 구글은 그 대체 수단으로 크롬에 포함된 Lighthouse 를 안내했습니다. 지금은 Lighthouse 또는 PageSpeed Insights 로 같은 성격의 확인을 하시면 됩니다.
화면 크기를 몇 개나 맞춰야 하나요?
기기 이름 단위로 다 맞출 필요는 없습니다. 좁은 폰, 태블릿, 노트북 정도의 세 구간에서 가로 스크롤이 생기지 않고 글이 읽히는지만 확인하면 대부분의 기기가 함께 해결됩니다. 기기 목록을 하나씩 다 여는 방식은 시간만 쓰고 같은 문제를 반복해서 보게 됩니다.
반응형이면 모바일 전용 주소를 따로 만들어야 하나요?
아닙니다. 반응형은 주소 하나로 두고 화면 폭에 따라 배치만 바꾸는 방식입니다. 주소를 나누면 같은 내용을 두 곳에서 관리해야 하고, 링크를 공유할 때도 어느 쪽 주소인지 신경 써야 합니다.
공개 전 점검 순서 5단계
- 공개된 주소로 페이지가 실제로 열리는지 확인합니다.
- 브라우저 기기 모드에서 폭을 좁혀 가며 가로 스크롤이 생기는 지점을 찾습니다.
- 넘치는 요소(표, 큰 이미지, 폭이 고정된 영역)를 하나씩 정리합니다.
- Lighthouse 또는 PageSpeed Insights 를 모바일 기준으로 한 번 돌립니다.
- 마지막으로 실제 폰에서 주요 페이지 두세 개를 직접 눌러 봅니다.
정리하자면
반응형 홈페이지 제작에서 돈이 드는 부분은 점검이 아니라 수정입니다. 확인 자체는 브라우저에 들어 있는 기능과 무료 도구만으로 충분하고, 문제를 어디서 발견했는지만 정확히 적어 두면 고치는 일도 훨씬 짧아집니다. 아직 올려 둘 곳이 없다면 아이비전트 AI 호스팅의 14일 무료체험으로 xxx.ibigent.com 형태의 주소 1개를 받아 무료 SSL이 붙은 상태로 먼저 올려 두고, 위 순서대로 점검해 보셔도 됩니다.
확인 기준 : 2026년 8월
