반응형 홈페이지 제작에서 가장 자주 생기는 착각은 모바일 화면만 맞추면 끝난다는 것입니다. 화면 폭은 최소 세 구간, 즉 휴대폰과 태블릿과 데스크톱에서 확인해야 하고, 그 확인은 이미 쓰고 있는 브라우저의 무료 기능만으로 대부분 끝납니다. 실제 기기 확인은 마지막에 한 번, 무료 체험 시간 안에서 하면 됩니다.

핵심 요약

• 크롬에서 Ctrl+Shift+M(맥은 Cmd+Shift+M)을 누르면 아무것도 설치하지 않고 화면 폭을 바꿔 볼 수 있습니다.
• 구글은 2023년 12월 1일 모바일 친화성 테스트 도구와 서치콘솔 모바일 사용 편의성 보고서를 종료하고 Lighthouse를 대신 쓰라고 안내했습니다.
• 한국은 데스크톱 접속 비중이 61.48%로 모바일 37.61%보다 높습니다(스탯카운터, 2026년 8월). 데스크톱 화면을 덤으로 두면 안 됩니다.
• 실기기 확인은 무료 체험 30분 안에서 첫 화면과 문의 화면만 보면 충분합니다.

모바일 비중이 높다는 말은 한국에서는 절반만 맞습니다

스탯카운터 집계(2026년 8월)로 전 세계 접속 비중은 모바일 49.36%, 데스크톱 49.11%, 태블릿 1.54%로 거의 반반입니다. 그런데 같은 기준으로 한국만 떼어 보면 데스크톱 61.48%, 모바일 37.61%, 태블릿 0.91%입니다. 국내 방문자를 상대하는 홈페이지라면 넓은 화면에서 보는 사람이 여전히 더 많다는 뜻입니다.

그래서 점검 순서가 중요합니다. 휴대폰에서만 확인하고 넘어가면 정작 방문자 절반 이상이 보는 화면을 한 번도 안 본 채 공개하게 됩니다. 반대로 데스크톱만 보고 공개하면 검색에서 들어온 사람 상당수가 글씨가 넘치는 화면을 보게 됩니다.

확인할 화면은 4가지면 충분합니다

기기 종류를 다 맞출 필요는 없습니다. 배치가 바뀌는 지점만 보면 됩니다.

1. 휴대폰 세로 — 메뉴가 접히는지, 버튼이 화면 밖으로 나가지 않는지 봅니다.
2. 휴대폰 가로 — 화면을 돌렸을 때 이미지가 너무 커져 본문을 밀어내지 않는지 봅니다.
3. 태블릿 — 표와 카드 배치가 두 칸에서 한 칸으로 넘어가는 구간입니다.
4. 노트북·데스크톱 넓은 폭 — 본문이 가운데 좁게 몰리거나 여백만 넓어지지 않는지 봅니다.

무료로 확인하는 6가지 방법

아래 여섯 가지는 성격이 다릅니다. 시뮬레이션은 무료 한도가 사실상 없고, 실제 기기는 시간이 정해져 있습니다.

확인 기준 : 2026년 9월

1. 크롬 기기 모드 — 설치 없이 폭을 바꿔 봅니다

크롬에서 Ctrl+Shift+M(맥은 Cmd+Shift+M)을 누르면 개발자도구의 기기 툴바가 켜집니다. 화면 폭을 마우스로 끌어 줄여 보면 배치가 무너지는 지점이 바로 보입니다. 화면 크기 말고도 회전, 터치 이벤트, 네트워크 속도, 위치 정보까지 흉내 낼 수 있습니다.

어떤 경우에 맞나 — 만드는 중에 수시로 확인할 때 가장 빠릅니다. 주의점은 크롬 공식 문서가 스스로 밝힌 부분입니다. 기기 모드는 근사치이며 휴대폰 CPU 구조는 노트북과 전혀 다르므로, 확실하지 않을 때는 실제 기기에서 열어 보라고 안내하고 있습니다.

2. Lighthouse — 구글이 종료한 도구의 대체품

구글은 2023년 12월 1일 모바일 친화성 테스트 도구와 API, 서치콘솔의 모바일 사용 편의성 보고서를 모두 내렸습니다. 그러면서 크롬의 Lighthouse 같은 도구가 이미 충분히 나와 있다고 밝혔습니다. 즉 지금 기준으로 모바일 화면을 점검하는 공식 경로는 Lighthouse입니다.

Lighthouse는 성능, 접근성, 권장사항, SEO를 함께 검사합니다. 모바일 검사에서는 지연 150ms, 내려받기 1.6Mbps, 올리기 750Kbps로 네트워크를 묶고 CPU를 4배 느리게 만들어 중급 휴대폰 상황을 흉내 냅니다. 이 값이 고정이라 같은 조건으로 반복 비교할 수 있다는 점이 장점입니다.

어떤 경우에 맞나 — 공개 직전에 한 번 돌려 숫자로 남겨 둘 때 적합합니다. 주의점은 실제 통신 환경이 이보다 빠르거나 느릴 수 있어, 점수 자체보다 항목별 지적 내용을 보는 편이 낫다는 것입니다.

3. Responsive Viewer — 여러 화면을 한 번에 늘어놓습니다

크롬 확장 프로그램으로 무료 제공됩니다. 확장을 켜면 휴대폰부터 데스크톱까지 여러 폭의 화면이 한 화면에 나란히 뜨고, 스크롤과 이동이 함께 움직입니다.

어떤 경우에 맞나 — 폭을 하나씩 바꿔 보는 게 번거로울 때, 전체 페이지를 한눈에 훑기 좋습니다. 주의점은 확장 하나를 더 깔아야 한다는 점, 그리고 결국 크롬 하나로 그리기 때문에 브라우저 차이는 잡히지 않는다는 점입니다.

4. Responsively App — 무료·오픈소스 데스크톱 앱

반응형 확인 전용으로 만든 브라우저입니다. 무료이고 소스가 공개돼 있으며, 기기 프로필이 30여 종 기본으로 들어 있어 여러 화면을 동시에 띄워 놓고 클릭과 스크롤을 한 번에 따라가게 할 수 있습니다. 모든 화면을 한 번에 캡처하는 기능과, 여러 화면의 요소를 함께 들여다보는 검사 기능도 있습니다.

어떤 경우에 맞나 — 같은 사이트를 여러 번 손볼 예정이라면 저장해 둔 화면 조합을 계속 쓸 수 있어 시간이 줄어듭니다. 주의점은 앱 설치가 필요하고, 이것 역시 실제 기기가 아니라는 점입니다.

5. 브라우저스택 라이브 — 무료 체험 30분으로 실기기 확인

실제 단말과 브라우저를 원격으로 붙잡아 쓰는 서비스입니다. 무료 체험으로 웹 라이브 테스트 30분, 모바일 앱 라이브 30분, 자동화 60분, 앱 자동화 100분이 주어집니다.

어떤 경우에 맞나 — 시뮬레이션에서는 멀쩡한데 실제 휴대폰에서만 이상하다는 말을 들었을 때 원인을 확인하는 용도입니다. 주의점은 30분이 금방 사라진다는 것입니다. 들어가기 전에 확인할 페이지를 두세 개로 줄여 적어 두고 시작해야 합니다.

6. TestMu AI 라이브 테스트 — 브라우저 종류를 넓게 볼 때

기존 람다테스트가 2026년 들어 이름을 바꾼 서비스입니다. 라이브 테스트 무료 구간은 한 세션이 2분이고 월 단위로 몇 회만 주어지지만, 데스크톱 브라우저 200종 이상에 접근할 수 있습니다. 에뮬레이터 기반 앱 테스트도 2회 포함됩니다.

어떤 경우에 맞나 — 특정 구형 브라우저에서만 화면이 깨진다는 제보를 받았을 때 그 조합만 찍어서 보는 데 맞습니다. 주의점은 2분 안에 확인이 끝나야 하므로 탐색이 아니라 검증용이라는 것입니다.

화면이 깨졌을 때 먼저 볼 4가지

도구로 문제를 찾았다면 고칠 곳은 보통 아래 넷 중 하나입니다.

1. 화면 크기를 알려주는 viewport 설정이 문서 맨 위에 들어 있는지 확인합니다. 이게 빠지면 휴대폰이 데스크톱 화면을 축소해서 보여줍니다.
2. 폭을 픽셀로 고정해 둔 요소를 찾습니다. 이미지 한 장, 표 하나가 화면보다 넓으면 페이지 전체가 옆으로 밀립니다.
3. 표와 코드 블록처럼 줄바꿈이 안 되는 덩어리를 따로 처리합니다. 좌우 스크롤을 허용하는 편이 깨끗한 경우가 많습니다.
4. 버튼과 글씨 크기를 봅니다. 넓은 화면에서 적당했던 크기가 휴대폰에서는 손가락으로 누르기 어려운 크기가 됩니다.

공개 전 점검 순서 5단계

1. 크롬 기기 모드로 폭을 끌어 줄이면서 배치가 무너지는 지점을 메모합니다.
2. 메모한 지점을 고친 뒤 같은 화면을 다시 봅니다.
3. Lighthouse를 한 번 돌려 접근성과 권장사항에서 지적된 항목을 확인합니다.
4. 첫 화면과 문의 화면만 실기기 무료 체험으로 확인합니다.
5. 공개 후 자기 휴대폰으로 실제 주소를 열어 마지막으로 봅니다.

무료 도구를 고르는 기준 3가지

1. 지금 단계가 만드는 중인지 검증 단계인지 — 만드는 중이면 무료 한도가 없는 브라우저 내장 기능, 검증이면 실기기입니다.
2. 무료 한도가 시간제인지 횟수제인지 — 시간제면 확인할 페이지를 미리 정해 두어야 남는 시간이 생깁니다.
3. 결과를 기록으로 남길 수 있는지 — 캡처나 점수로 남으면 다음에 같은 조건으로 비교할 수 있습니다.

시뮬레이터 화면과 실제 휴대폰 화면이 왜 다른가요?

흉내 내는 범위가 화면 크기와 입력 방식까지이기 때문입니다. 크롬 공식 문서는 기기 모드를 모바일 경험의 1차 근사치라고 표현하면서, 휴대폰 CPU 구조가 노트북과 다르기 때문에 성능은 그대로 옮겨지지 않는다고 밝히고 있습니다. 글자 크기나 배치 문제는 시뮬레이션으로 거의 다 잡히지만, 스크롤이 끊기거나 특정 기기에서만 이미지가 안 뜨는 문제는 실제 기기에서만 재현됩니다.

반응형은 모바일 화면만 맞추면 되나요?

아닙니다. 국내 방문자를 상대한다면 데스크톱이 여전히 다수입니다(스탯카운터 2026년 8월 기준 61.48%). 휴대폰에서 잘 보이게 만든 뒤 넓은 화면에서 본문이 한 줄에 너무 길게 늘어지거나 이미지가 과도하게 커지는 경우가 흔합니다. 좁은 쪽과 넓은 쪽을 같은 비중으로 확인해야 합니다.

직접 CSS를 짜지 않는 선택지도 있습니다

화면 폭 대응을 직접 다루지 않으려면 이미 배치가 정리된 템플릿을 쓰는 방법이 있습니다. 아이비전트 빌더 호스팅은 업종·스타일별 템플릿을 골라 수정하고 그대로 공개하는 방식이며, 만든 뒤에도 다른 템플릿으로 갈아 끼울 수 있습니다. 요금제는 14일 무료체험이 있고 베이직이 월 3,300원이며, 도메인을 연결하면 SSL 인증서가 자동 발급됩니다. 자세한 내용은 https://www.ibigent.com/service/builder.html 과 https://www.ibigent.com/pricing/ 에서 확인할 수 있습니다.

다만 템플릿을 써도 점검은 필요합니다. 긴 제목을 넣거나 큰 이미지를 바꿔 끼우면 배치가 밀리기 때문에, 저장한 뒤 앞서 적은 5단계 중 1번과 5번만이라도 해 보시는 편이 좋습니다.

결론 - 실기기 확인은 마지막에 한 번이면 됩니다

무료 도구 여섯 가지 중 네 가지는 한도가 없고 두 가지는 분 단위로 끊깁니다. 한도 없는 쪽으로 배치를 다 정리한 뒤, 남은 실기기 시간은 첫 화면과 문의 화면에만 쓰는 순서가 가장 손실이 적습니다. 만드는 중에 폭을 한 번씩 줄여 보는 습관만 들여도 공개 후에 고칠 일이 크게 줄어듭니다.

확인 기준 : 2026년 9월