화면이 깨져 보일 때 — 30초로 «어느 쪽»인지 가르는 법
화면이 깨져 보일 때, 고칠 수 있는 것과 고칠 수 없는 것이 있습니다. 먼저 어느 쪽인지 가르는 편이 빠릅니다.
30초로 갈립니다
브라우저를 시크릿 창으로 열고 같은 주소를 보세요. 그리고 휴대폰으로도 한 번 보세요.
- 시크릿 창에서 멀쩡하다 → 사이트가 아니라 내 브라우저 문제입니다. 아래 1번
- 휴대폰에서만 깨진다 → 반응형 문제입니다. 아래 3번
- 어디서 봐도 깨진다 → 사이트 쪽입니다. 아래 2번
1
내 브라우저만 깨져 보일 때
브라우저가 예전 디자인 파일을 들고 있는 것입니다. 사이트를 고쳤는데 화면이 안 바뀌는 것도 같은 이유입니다.
강제 새로고침으로 대개 풀립니다.
윈도우 Ctrl + F5 (또는 Ctrl + Shift + R)
맥 Cmd + Shift + R그래도 그대로면 캐시 플러그인이 옛 화면을 내보내고 있는 것입니다. 관리자에서 캐시 비우기를 한 번 누르시면 됩니다.
광고
2
어디서 봐도 깨질 때 — 대개 «세 가지» 중 하나입니다
글자만 세로로 늘어서 있거나, 색이 사라졌거나, 이미지가 안 뜨는 모양이면 디자인 파일이 안 실린 것입니다.
| 이런 모양이면 | 이런 원인입니다 |
|---|---|
| 글자만 남고 모양이 전부 사라짐 | CSS 파일이 안 실렸습니다. 플러그인 충돌이나 캐시 플러그인의 「합치기」 기능이 흔한 원인입니다 |
| 일부 이미지·글꼴만 안 뜸 | 주소창 자물쇠를 보세요. 자물쇠가 풀려 있으면 https 페이지가 http 자원을 부르는 경우입니다 |
| 메뉴·슬라이더 한 곳만 어긋남 | 그 기능을 만드는 플러그인이나 테마입니다. 최근에 업데이트했다면 거기부터 보세요 |
캐시 플러그인의 「합치기」를 먼저 꺼 보세요
속도를 올리려고 CSS·JS 를 한 파일로 합치는 기능이 있는데, 이게 화면을 깨뜨리는 일이 자주 있습니다. 그 기능만 끄고 캐시를 비우면 돌아오는 경우가 많습니다. 플러그인 자체를 지우지 마세요 — 기능 하나만 끄면 됩니다.
3
휴대폰에서만 깨질 때
방문자의 절반 이상이 휴대폰으로 봅니다. 그래서 이건 「나중에」로 미룰 자리가 아닙니다.
- 가로로 넘쳐서 좌우로 밀린다 → 어느 한 요소가 화면보다 넓습니다. 표·지도·유튜브가 흔한 범인입니다
- 글자가 너무 작다 → 본문은 16px 아래로 내려가지 않는 것이 안전합니다. 그 아래면 아이폰이 확대해 버립니다
- 버튼이 안 눌린다 → 손가락으로 누르려면 44px 정도는 되어야 합니다
여기서부터는 고치면 다른 데가 깨질 수 있습니다
반응형은 한 자리를 고치면 다른 폭에서 어긋나는 일이 흔합니다. CSS 를 직접 손대실 거라면 고치기 전에 그 파일을 한 벌 받아 두세요.
어디가 원인인지 모르겠으면
주소만 알려주시면 저희가 읽어서 어느 파일이 안 실렸는지 찾아 드립니다. 화면 깨짐은 바깥에서 봐도 상당 부분 갈라집니다.
- 진단은 무료이고, 사이트는 어떤 것도 바뀌지 않습니다
- 원인이 하나로 좁혀지면 스탠다드(39,000원), 여러 개가 얽혀 있으면 디럭스입니다
- 맡기시면 진단 뒤 영업일 1일 안에 끝나고, PC·휴대폰을 같이 확인해 드립니다
광고
직접 하기 어려우신가요?
읽으신 내용대로 저희가 대신 해 드립니다. 무엇이 필요한지부터 함께 정해요.
