반응형 홈페이지 제작, 모바일에서 깨지는 화면 무료로 확인하는 도구 6곳

반응형으로 만들었는지 확인하겠다고 기기를 기종별로 사 모을 필요는 없습니다. 지금 쓰고 있는 브라우저 안에 확인 기능이 이미 들어 있고, 나머지는 주소만 넣으면 결과가 나오는 무료 웹 도구로 해결됩니다. 아래 6곳이면 글자가 잘리고 버튼이 밀려나는 자리를 찾는 데는 충분합니다.

핵심 요약

• 크롬과 파이어폭스는 단축키 하나로 기기 모드가 열립니다. 설치도 결제도 필요 없습니다.
• 구글의 모바일 친화성 테스트와 서치 콘솔 모바일 사용성 보고서는 2023년 12월 1일에 종료돼, 지금은 라이트하우스와 URL 검사로 대신합니다.
• 한국은 데스크톱 접속 비중이 아직 절반을 넘기 때문에, 모바일 화면만 보고 끝내면 나머지 절반을 놓치게 됩니다.

화면이 깨졌다는 건 정확히 어떤 상태인가요?

반응형이 깨지면 증상은 대개 네 가지 중 하나로 나타납니다. 이 네 가지를 미리 알고 보면 확인에 걸리는 시간이 크게 줄어듭니다.

1. 좌우로 밀리는 가로 스크롤이 생깁니다. 표나 이미지 하나가 화면보다 넓을 때 주로 생깁니다.
2. 글자가 서로 겹치거나 오른쪽이 잘려 나갑니다. 제목 글자 크기를 고정값으로 넣었을 때 자주 보입니다.
3. 버튼이나 전화번호가 화면 밖으로 밀려나 손가락으로 누를 수 없게 됩니다.
4. 이미지가 원래 크기 그대로 나와서 화면을 뚫고 나갑니다.

확인 작업은 결국 이 네 가지가 어디에서 생기는지를 찾는 일입니다. 아래 도구들은 그 자리를 빨리 보여주는 역할만 합니다.

1. 크롬 개발자도구 기기 모드

크롬에 기본으로 들어 있는 기능입니다. 확인할 페이지를 연 상태에서 Ctrl+Shift+M 을 누르면 화면이 휴대폰 크기로 바뀌고, 위쪽에서 기기와 화면 너비를 골라 바로 바꿔볼 수 있습니다.

어떤 경우에 맞나 — 방금 고친 부분을 즉시 확인할 때 가장 빠릅니다. 너비를 손으로 끌어 줄이면서 몇 픽셀에서 배치가 틀어지는지도 눈으로 잡을 수 있습니다.

주의점 — 실제 기기가 아니라 화면 크기를 흉내 내는 것이라, 기기마다 다른 글꼴 처리나 동영상 재생 문제까지는 드러나지 않습니다.

2. 파이어폭스 반응형 디자인 모드

파이어폭스에도 같은 기능이 있습니다. 윈도우와 리눅스는 Ctrl+Shift+M, 맥은 Cmd+Opt+M 입니다. 2G, 3G, 4G, 와이파이, 오프라인처럼 회선 속도를 골라 흉내 낼 수 있고, 마우스 동작을 터치 동작으로 바꿔주는 기능도 함께 들어 있습니다.

어떤 경우에 맞나 — 느린 회선에서 이미지가 늦게 뜰 때 배치가 어떻게 보이는지, 손가락으로 끄는 동작이 제대로 먹는지 확인할 때 쓰면 좋습니다.

주의점 — 브라우저 엔진이 달라서 크롬과 결과가 조금씩 다르게 나올 수 있습니다. 둘 다 보는 편이 안전합니다.

3. 페이지스피드 인사이트와 라이트하우스

주소만 넣으면 모바일과 데스크톱 결과를 따로 보여줍니다. 측정 엔진인 라이트하우스는 오픈소스이고 무료이며, 크롬 개발자도구, 명령줄, 노드 모듈, 그리고 웹 화면까지 네 곳에서 돌릴 수 있습니다. 모바일 기준 기기는 라이트하우스 10 버전부터 모토 G4 에서 모토 G 파워로 바뀌었습니다.

어떤 경우에 맞나 — 제작을 맡긴 곳에 문제를 설명해야 할 때처럼, 결과를 남에게 보여줄 근거가 필요한 경우에 적합합니다.

주의점 — 여기서 나오는 점수는 속도에 대한 점수입니다. 점수가 높아도 글자가 잘릴 수 있으니 배치 확인은 따로 해야 합니다.

4. 리스폰시블리 앱

무료 오픈소스 데스크톱 앱입니다. 여러 기기 화면을 한 창에 나란히 띄워 두고, 한쪽을 스크롤하면 나머지도 같이 움직입니다.

어떤 경우에 맞나 — 페이지가 여러 장이라 전부 훑어야 할 때 시간이 가장 많이 절약됩니다. 한 번 스크롤로 여러 너비를 동시에 보게 됩니다.

주의점 — 설치가 필요하고, 화면을 여러 개 띄우는 만큼 컴퓨터가 느려질 수 있습니다.

5. 브라우저스택 무료 반응형 체커

브라우저 안에서 흉내 내는 방식이 아니라, 클라우드에 있는 실제 기기로 열어 보여주는 도구입니다. 무료 플랜에서는 반응형 테스트를 최대 100회까지 쓸 수 있습니다.

어떤 경우에 맞나 — 특정 기종에서만 이상하게 보인다는 말을 들었을 때처럼, 흉내로는 재현이 안 되는 경우에 씁니다.

주의점 — 횟수 한도가 있고 가입이 필요합니다. 평소 확인은 브라우저 기기 모드로 하고, 이건 마지막 확인용으로 아껴 두는 편이 낫습니다.

6. 구글 서치 콘솔 URL 검사

구글이 내 페이지를 실제로 어떻게 읽고 그렸는지, 렌더링된 화면으로 보여줍니다. 예전에 쓰던 모바일 친화성 테스트와 모바일 사용성 보고서는 2023년 12월 1일에 종료됐고, 구글은 그 자리를 라이트하우스로 대신하도록 안내하고 있습니다.

어떤 경우에 맞나 — 사람 눈에는 멀쩡한데 검색 결과에서만 이상해 보일 때 확인합니다.

주의점 — 사이트 소유 확인을 먼저 마쳐야 쓸 수 있습니다. 만들자마자 바로 쓰는 도구는 아닙니다.

확인은 이 순서로 하면 됩니다

도구를 전부 돌릴 필요는 없습니다. 아래 5단계면 대부분 끝납니다.

1. 브라우저 창 너비를 손으로 천천히 줄이면서, 배치가 처음 틀어지는 지점을 찾습니다.
2. 그 지점에서 기기 모드를 켜고 가로 스크롤이 생기는지 확인합니다.
3. 가장 긴 제목과 가장 긴 문장이 있는 페이지를 골라 다시 봅니다. 깨짐은 보통 긴 글자에서 시작됩니다.
4. 전화번호, 문의 버튼, 메뉴 세 곳을 실제로 눌러봅니다. 보이는 것과 눌리는 것은 다릅니다.
5. 공개된 주소가 있다면 라이트하우스로 한 번 돌려 기록을 남겨 둡니다.

확인 기준 : 2026년 9월

모바일에서 잘 보이는 사이트와 PC에서 잘 보이는 사이트, 어느 쪽이 반응형일까요?

질문부터가 모순이 있는 질문입니다. 반응형은 둘 중 하나를 고르는 방식이 아니라, 화면 너비에 맞춰 배치가 바뀌는 구조를 말하기 때문입니다. 한쪽에서만 잘 보인다면 그건 반응형이 아니라 그 화면에 맞춰 놓은 사이트입니다.

그런데도 모바일만 확인하고 끝내는 경우가 많습니다. 숫자를 보면 이야기가 달라집니다. 스탯카운터 집계로 2026년 8월 한국의 접속 비중은 데스크톱 61.48%, 모바일 37.61% 였습니다. 세계 평균과 달리 국내는 아직 PC 쪽이 더 큽니다. 모바일만 보고 넘어가면 실제로 더 많이 들어오는 쪽을 안 보고 넘기는 셈입니다.

마치 접이식 식탁 같은 것입니다. 사람이 둘이면 접고 여섯이면 펴서 쓰는데, 접었을 때만 확인하고 폈을 때 다리가 흔들리는지 안 보는 것과 같습니다. 옷으로 바꿔 말하면, 사이즈별로 여러 벌 사는 대신 허리가 조절되는 한 벌을 고르는 쪽이 반응형입니다. 그렇다면 조절 범위 양 끝을 모두 입어봐야 합니다.

“한쪽만 확인한 사이트는 아직 반응형인지 모르는 사이트입니다.”

만드는 동안 두 화면을 같이 보려면 주소부터 필요합니다

위 도구 중 절반은 인터넷에 공개된 주소가 있어야 검사할 수 있습니다. 컴퓨터 안에 파일로만 있는 상태에서는 라이트하우스도 서치 콘솔도 쓸 수 없습니다. 그래서 확인을 제대로 하려면 임시 주소라도 먼저 만들어 두는 편이 낫습니다.

아이비전트는 가입 후 14일 무료체험 동안 xxx.ibigent.com 형태의 주소로 바로 공개할 수 있고, 무료 SSL 도 따로 결제 없이 기본으로 붙습니다. 주소가 나오면 그 시점부터 위 6곳을 모두 쓸 수 있습니다. 사이트가 실제로 응답하는지 확인하는 웹사이트 상태 점검도 무료 도구 메뉴에 들어 있습니다. 필요할 때 한 번 열어보시면 됩니다.

어디까지 확인하면 충분할까요

기기를 몇 대까지 볼 것인가로 접근하면 끝이 없습니다. 확인의 목적을 먼저 정하면 범위가 정해집니다. 문의를 받는 게 목적이면 문의 버튼과 전화번호가 모든 너비에서 눌리는지만 확실히 하면 되고, 소개가 목적이면 제목과 사진이 잘리지 않는지가 기준이 됩니다. 도구는 그 다음에 고르시면 됩니다.

확인 기준 : 2026년 9월