홈페이지는 PC에서 멀쩡한데 휴대폰으로 열면 글씨가 작고 버튼이 겹칩니다. 손님 대부분이 휴대폰으로 들어오니 이건 그냥 넘길 문제가 아닙니다. 이 글은 반응형 웹이 깨질 때 확인할 네 곳을 순서대로 보여 드립니다. 개발을 몰라도 눈으로 찾을 수 있는 것만 담았습니다.
반응형 웹이 깨졌다는 건 무슨 뜻인가요
반응형 웹은 화면 크기에 맞춰 배치가 알아서 바뀌는 방식을 말합니다.
옷이 아니라 고무줄 바지라고 생각하시면 쉽습니다. 허리에 맞춰 늘어나야 하는데, 한 군데가 박혀 있으면 그 부분만 튀어나옵니다.
깨졌다는 말은 그 튀어나온 한 군데를 뜻합니다. 홈페이지 전체가 잘못된 경우는 드뭅니다.
알아두면 좋은 용어
| 용어 | 쉬운 뜻 | 비유·예시 |
|---|---|---|
| 반응형 | 화면 크기에 맞춰 배치가 자동으로 바뀌는 것 | 허리에 맞춰 늘어나는 고무줄 바지 |
| 가로 스크롤 | 화면을 좌우로 밀어야 내용이 보이는 상태 | 신문이 책상보다 넓어 접어 보는 일 |
| 모바일 미리보기 | 편집 화면에서 휴대폰 모습을 확인하는 기능 | 옷 입기 전 거울 |
한 줄 정리: 깨졌다는 것은 대개 한 군데가 고정돼 있다는 뜻입니다.
확인 1. 휴대폰에서 글자와 버튼이 누를 만한 크기인가요
가장 먼저 볼 곳은 본문 글자 크기와 버튼의 여유 공간입니다.
휴대폰에서 본문 글씨를 읽으려고 손가락으로 화면을 벌려야 하면 작은 것입니다. 버튼도 마찬가지입니다. 옆 버튼과 붙어 있으면 잘못 눌립니다.
특히 전화 걸기, 예약, 지도 보기처럼 중요한 버튼부터 봅니다. 이 버튼들이 눌리지 않으면 홈페이지가 예쁜 것은 의미가 없습니다.
예를 들어, 테이블 8개인 동네 파스타집이 있습니다. 첫 화면 전화 버튼이 메뉴 글자와 겹쳐 있으면 예약 전화가 그냥 사라집니다.
한 줄 정리: 확대하지 않고 읽히고, 한 번에 눌리면 통과입니다.
확인 2. 사진과 표가 화면 밖으로 나가지 않나요
사진과 표는 반응형 웹이 가장 자주 깨지는 두 가지 요소입니다.
사진은 가로 크기가 숫자로 박혀 있으면 작은 화면에서 잘립니다. 표는 열이 많을 때 폭이 줄지 않아 밖으로 밀립니다.
표가 많은 페이지라면 열을 줄이는 쪽이 빠릅니다. 가격표는 항목과 금액 두 열로도 충분한 경우가 많습니다.
한눈에 보기
| 증상 | 어디를 보면 되나요 | 오늘 할 수 있는 조치 |
|---|---|---|
| 사진이 한쪽만 잘려 보임 | 사진 크기가 숫자로 고정됐는지 | 가로가 화면에 맞게 줄어드는 사진으로 교체 |
| 표가 화면 밖으로 밀림 | 열 개수가 4개를 넘는지 | 열을 2~3개로 줄이거나 목록으로 바꾸기 |
| 글자가 잘려 두 줄로 겹침 | 버튼·제목의 글자 크기 | 문구를 짧게 줄이기 |
| 여백이 한쪽만 넓음 | 좌우 여백이 숫자로 박혔는지 | 여백을 비율로 바꿔 달라고 요청 |
한 줄 정리: 사진은 폭이 줄어드는지, 표는 열이 몇 개인지만 보면 됩니다.
확인 3. 가로로 밀리는 스크롤이 생기지 않나요
휴대폰에서 화면을 좌우로 밀 수 있다면 어딘가 화면보다 넓은 요소가 있습니다.
위아래 스크롤은 정상입니다. 좌우로 밀리는 것은 정상이 아닙니다.
찾는 방법은 단순합니다. 위에서 아래로 천천히 내리면서, 좌우로 밀리는 구간이 어디서 시작되는지 기억해 두세요. 그 구간 바로 위에 있는 요소가 원인인 경우가 많습니다.
한 줄 정리: 좌우로 밀리는 첫 지점을 찾으면 원인의 절반은 찾은 것입니다.
확인 4. 피그마 시안과 실제 화면이 같은가요
시안에서 멀쩡했는데 실제 화면이 다르면 기준 화면 폭이 다를 때가 많습니다.
피그마 시안은 보통 특정 화면 폭을 기준으로 그립니다. 그 폭보다 좁은 휴대폰에서는 배치가 달라집니다.
그래서 시안을 받을 때 모바일 화면도 함께 있는지 확인하세요. PC 시안만 받으면 모바일은 만드는 쪽 판단에 맡겨집니다.
잇다웹은 개발 전에 피그마 시안을 보여 드리고, 반응형과 SSL 인증서를 기본으로 포함합니다. 포함 범위는 무료 제공 서비스 페이지에서 확인하실 수 있습니다.
한 줄 정리: 시안을 받을 때 모바일 화면까지 같이 달라고 하세요.
윅스·워드프레스로 직접 만들었다면 이 설정을 보세요
직접 만드는 도구에서는 PC 화면과 모바일 화면이 따로 저장되는 경우가 있습니다.
윅스 공식 안내에는 모바일 편집기에서 한 디자인 변경이 PC 화면에는 반영되지 않는다고 적혀 있습니다. 2026년 9월 공식 지원 문서 기준입니다. (윅스 모바일 편집기 안내)
워드프레스는 쓰는 테마와 편집 도구에 따라 설정 위치가 다릅니다. 그래서 각 서비스 공식 안내에서 모바일 화면 설정이 어디에 있는지 먼저 찾아보세요.
정리하면 이렇습니다. PC에서 고쳤는데 휴대폰이 그대로라면, 도구를 잘못 쓴 것이 아니라 모바일 쪽을 아직 안 고친 것일 수 있습니다.
한 줄 정리: 도구가 화면을 나눠 저장하는지 먼저 확인하면 헛수고를 줄입니다.
오늘 할 수 있는 실행 체크리스트
10분이면 네 곳을 전부 눈으로 확인할 수 있습니다.
- □ 내 휴대폰으로 첫 화면부터 문의 화면까지 한 번 내려 보기
- □ 화면을 확대하지 않고 본문이 읽히는지 확인하기
- □ 전화·예약·지도 버튼을 실제로 한 번씩 눌러 보기
- □ 좌우로 밀리는 구간이 있는지 천천히 내리며 찾기
- □ 화면이 작은 기기와 큰 기기에서 같은 페이지를 열어 비교하기
- □ 깨진 화면을 캡처해 페이지 이름과 함께 모아 두기
한 줄 정리: 캡처와 페이지 이름만 모아 두면 수정 요청이 훨씬 빨라집니다.
자주 묻는 질문
반응형 웹과 모바일 전용 홈페이지는 뭐가 다른가요
반응형은 하나의 홈페이지가 화면 크기에 맞춰 바뀌는 방식입니다. 모바일 전용은 주소나 화면을 따로 두는 방식입니다. 반응형은 한 곳만 고치면 세 화면에 반영되니 관리가 쉽습니다. 잇다웹은 PC·태블릿·휴대폰 반응형을 기본으로 포함합니다.
휴대폰에서만 글자가 작게 보이는데 왜 그런가요
본문 글자 크기가 숫자로 고정됐을 때 가장 많이 생깁니다. 화면은 좁아졌는데 글자만 그대로라 상대적으로 작아 보입니다. 확대 없이 읽히는지를 기준으로 삼으시면 됩니다.
표가 화면 밖으로 나가면 어떻게 고치나요
열 개수를 줄이는 것이 가장 빠릅니다. 열이 4개를 넘으면 좁은 화면에서 거의 밀려 나갑니다. 가격표는 항목과 금액 두 열로 줄이고, 설명은 표 밖 문단으로 빼세요.
우리 홈페이지가 반응형인지 어떻게 확인하나요
PC 브라우저 창의 오른쪽 끝을 잡고 폭을 천천히 줄여 보세요. 줄이는 동안 배치가 단계적으로 바뀌면 반응형입니다. 글자만 작아지고 배치가 그대로면 반응형이 아닐 수 있습니다. 업종별 예시는 웹사이트 템플릿 보기에서 확인해 보세요.
한 줄 정리: 글자 크기, 사진 폭, 표 열 수, 좌우 스크롤 이 네 가지가 점검 순서입니다.
깨진 화면을 캡처해 두셨다면 무료 견적 상담에 페이지 이름과 함께 보내 주세요. 어디를 고쳐야 하는지부터 알려 드립니다.
사진: Unsplash (photo-1654555023156-0a1c9cdf1130, photo-1781440056484-32e9c477a95c, photo-1765648580808-76d75e4f3833)