모바일에서만 화면이 깨질 때 원인 찾기

컴퓨터에서는 멀쩡한데 휴대폰에서만 화면이 깨진다면 대개 폭을 숫자로 고정한 요소 하나 때문입니다. 좌우로 밀리는지부터 보고, 밀린다면 화면보다 넓은 요소를 찾아 최대 폭을 100%로 바꾸면 끝나는 경우가 많습니다. 아래는 그 요소를 찾아내는 순서입니다.

어떤 모양으로 깨져 있나요

깨지는 모양이 원인을 거의 알려 줍니다. 휴대폰으로 열어 놓고 아래 표에서 해당하는 줄을 찾습니다. 여러 줄에 해당하면 위쪽 줄부터 잡습니다.

증상	대체로 이런 원인	먼저 볼 곳
화면이 좌우로 밀린다	화면보다 넓은 요소가 하나 있습니다	표·이미지·붙여 넣은 코드
전체가 축소돼 글자가 아주 작다	화면 폭 설정이 빠졌습니다	페이지 맨 위 설정 한 줄
글자가 상자 밖으로 넘친다	상자 높이를 숫자로 고정했습니다	버튼·카드 안의 글자
이미지가 잘리거나 늘어난다	가로세로를 따로 지정했습니다	이미지 크기 설정
버튼이 안 눌린다	영역이 작거나 위에 투명한 층이 있습니다	버튼 크기와 겹친 요소
맨 아래가 잘린다	화면 높이를 100%로 고정했습니다	첫 화면 높이
메뉴가 안 열린다	마우스를 올려야 열리게 되어 있습니다	상단 메뉴 동작

화면 폭 설정 — 휴대폰에 이 페이지를 화면 폭에 맞춰 그리라고 알려 주는 한 줄입니다. 이 줄이 없으면 휴대폰은 넓은 화면 기준으로 그린 뒤 통째로 줄여 보여 줍니다. 글자가 전부 작아 보이면 이 줄부터 봅니다.

범인 요소는 어떻게 찾나요

좌우로 밀리는 증상이 가장 흔하고 찾기도 쉽습니다. 화면 전체가 밀리는 것처럼 보여도 범인은 대개 요소 하나입니다.

순서	하는 일
1	실제 휴대폰으로 엽니다 — 컴퓨터에서 창을 줄인 것과 다릅니다
2	브라우저 개발자 도구의 기기 화면 보기로 폭 360px·390px·430px 에서 봅니다
3	밀리는 페이지에서 위에서부터 한 화면씩 내려가며 어디부터 밀리는지 찾습니다
4	의심되는 요소를 개발자 도구에서 잠시 숨겨 봅니다. 밀림이 사라지면 그 요소입니다
5	페이지 주소·기기·폭·증상을 한 줄로 적어 둡니다

기기마다 화면 폭이 다르므로 위 세 폭은 자주 쓰이는 값일 뿐입니다. 고친 뒤에는 실제 기기 두 대에서 한 번 더 봅니다. 가로로 돌린 상태도 한 번 봅니다 — 세로에서만 확인하고 넘기면 가로에서 다시 밀리는 일이 잦습니다.

깨진 화면을 남에게 알릴 때는 캡처 한 장에 페이지 주소·기기 이름·화면 폭을 함께 적습니다. 그림만 보내면 받는 쪽에서 어느 폭에서 그렇게 되는지 몰라 재현하지 못합니다. 세 줄이면 바로 같은 화면을 볼 수 있습니다.

원인은 어떤 순서로 좁히나요

흔한 순서대로 놓았습니다. 고치는 일은 대부분 값 하나를 바꾸는 수준입니다.

원인	확인 방법	고치는 법
이미지 폭을 숫자로 고정	좁은 화면에서 이미지가 화면 밖으로 나갑니다	최대 폭을 100%로 두어 화면에 맞춰 줄어들게 합니다
표가 화면보다 넓음	칸이 많은 표가 있는 페이지에서만 밀립니다	표를 감싸는 상자에 가로 스크롤을 줍니다
붙여 넣은 외부 코드	지도·영상·게시판이 있는 자리에서 밀립니다	감싸는 상자를 두고 폭을 100%로 맞춥니다
화면 폭 설정 누락	모든 페이지가 통째로 작아 보입니다	페이지 맨 위 설정 한 줄을 넣습니다
여백을 큰 숫자로 고정	좁은 화면에서 내용이 들어갈 자리가 없습니다	여백을 화면 폭에 비례한 값으로 바꿉니다
띄어쓰기 없는 긴 문자열	주소나 영문 단어가 상자를 밀고 나갑니다	줄바꿈이 되도록 설정합니다
마우스를 올려야 열리는 메뉴	손가락으로는 아무 반응이 없습니다	눌러서 열리도록 바꿉니다

버튼이 안 눌리는 증상은 폭 문제가 아닙니다. 손가락으로 누르는 자리는 가로세로 44px 안팎은 되어야 합니다. 글자만 작게 두고 그 글자만 눌리게 해 두면 손가락이 빗나갑니다. 눌리는 영역을 글자보다 넓게 잡고, 버튼끼리 8px 이상 띄웁니다. 기기와 화면 밀도에 따라 체감이 다르니 실제 기기에서 한 번 눌러 봅니다.

고쳤는지 어떻게 확인하나요

고친 뒤에는 브라우저에 남은 옛 화면을 비우고 다시 엽니다. 안 비우면 고치기 전 화면이 그대로 보여 안 고쳐진 줄 알게 됩니다.

확인은 다섯 줄이면 됩니다. 좁은 폭에서 좌우로 밀리지 않는가 · 글자가 상자 안에 들어가는가 · 이미지 비율이 맞는가 · 버튼이 손가락으로 눌리는가 · 가로로 돌려도 같은가. 페이지 하나에 2분이면 끝납니다.

확인할 상태도 정해 둡니다. 로그인 전과 후, 목록과 상세, 장바구니가 비었을 때와 담겼을 때는 화면에 들어가는 요소가 다릅니다. 한 상태에서만 보고 넘기면 다른 상태에서 같은 증상이 남아 있습니다.

다시 안 깨지게 무엇을 정해 두나요

새 페이지는 좁은 폭부터 만들고 넓은 화면을 나중에 맞춥니다. 순서를 반대로 하면 좁은 화면에서 밀리는 요소가 매번 새로 생깁니다.

외부에서 코드를 받아 붙일 때는 감싸는 상자를 먼저 만들고 그 안에 넣는 것을 규칙으로 둡니다. 이미지는 올리기 전에 폭을 맞춰 내보냅니다. 페이지를 추가하면 발행 전에 좁은 폭 하나만이라도 눌러 보는 것을 절차에 넣습니다.

글을 쓰는 사람에게도 규칙 한 줄이 필요합니다. 본문에 표를 넣을 때는 칸 수를 넷 이하로 두고, 긴 주소는 글자로 감싸 넣습니다. 화면이 밀리는 원인의 상당수가 본문에 붙여 넣은 표와 주소에서 나옵니다.

오늘 할 일

휴대폰으로 홈페이지 첫 화면을 열고 손가락으로 좌우로 밀어 봅니다. 밀리면 위에서부터 내려가며 어느 자리에서 밀리는지 찾아 페이지 주소와 위치를 적습니다. 밀리지 않으면 표나 지도가 들어간 페이지에서 같은 것을 해 봅니다 — 그런 페이지에서 가장 자주 나옵니다.