HTML 페이지가 휴대폰에서 제대로 보이는지 확인하는 법
Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기
노트북에서는 멀쩡하던 페이지가 휴대폰에서는 엉망이 되는 일이 흔합니다. 글자가 깨알만 하게 줄어들거나, 손가락으로 밀면 화면 전체가 옆으로 흔들리거나, 사진 한 장이 오른쪽 끝을 뚫고 나갑니다. 원인은 대부분 몇 가지로 정해져 있어서, HTML 파일 하나라면 15분 정도면 모두 점검할 수 있습니다.
뷰포트 태그와 "작게 줄어든 화면"
휴대폰으로 열었을 때 PC 화면을 멀리서 찍은 사진처럼 보이고, 두 손가락으로 확대해야 글을 읽을 수 있다면 거의 틀림없이 뷰포트 태그가 빠진 경우입니다. 이 태그가 없으면 휴대폰 브라우저는 페이지가 폭 980픽셀 정도의 화면용이라고 가정하고, 그 폭으로 그린 다음 통째로 축소해서 보여 줍니다.
<head> 안에 다음 한 줄을 넣으면 해결됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1">넣기 전에 이미 있는지부터 확인합니다. Finipage에서는 HTML 소스 보기로 viewport가 있는지 볼 수 있지만, 이 화면은 보기 전용입니다. 태그를 넣으려면 메모장이나 VS Code로 파일을 열고 <meta charset> 줄 아래에 붙여 넣은 뒤 저장합니다. user-scalable=no나 maximum-scale=1처럼 확대를 막는 값은 넣지 마십시오. 시력이 약한 방문자가 글을 키워 볼 수 없게 됩니다.
화면이 옆으로 밀릴 때 범인 찾기
뷰포트 태그가 있는데도 화면이 좌우로 움직인다면 페이지 안의 무언가가 화면보다 넓습니다. 자주 나오는 원인은 이렇습니다.
width: 1200px처럼 폭이 픽셀로 고정된 박스, 섹션, 표- 크기 제한이 없는 큰 이미지 (다음 항목에서 다룹니다)
- 태그에
width="800"이 박혀 있는 유튜브 영상이나 지도 - 띄어쓰기 없이 길게 이어지는 URL 같은 글자
어느 요소인지 찾으려면 PC의 Chrome이나 Edge에서 페이지를 열고 F12를 누른 다음, Console 탭에 아래 코드를 붙여 넣습니다.
document.querySelectorAll('*').forEach(el => {
if (el.scrollWidth > document.documentElement.clientWidth) console.log(el);
});창보다 넓은 요소가 모두 출력됩니다. 대개 목록 아래쪽에 있는 요소가 진짜 원인이고, 위쪽은 그 요소를 품느라 같이 넓어진 부모입니다. 출력된 항목에 마우스를 올리면 페이지에서 해당 요소가 강조됩니다.
범인을 찾았으면 픽셀 폭을 고집하지 않게 바꿉니다. Finipage에서는 상단에서 미리보기를 모바일(390px) 폭으로 바꾸고, 그 요소를 클릭한 뒤 오른쪽 속성 패널의 크기에서 폭을 100%나 auto로 고칩니다. 텍스트 편집기로 고친다면 width: 1200px를 max-width: 1200px; width: 100%로 바꿉니다. PC에서는 원래 폭을 유지하고 좁은 화면에서는 줄어듭니다.
폭이 넘치는 이미지
이미지는 따로 정해 주지 않으면 원본 픽셀 크기 그대로 표시됩니다. 폭 2000픽셀 사진이 390픽셀 화면에 들어오면 레이아웃이 옆으로 밀립니다. 템플릿 대부분에는 아래 규칙이 들어 있으니, 없다면 스타일시트에 추가합니다.
img { max-width: 100%; height: auto; }CSS이므로 텍스트 편집기가 필요합니다. 문제 되는 이미지가 한두 장뿐이라면 Finipage에서 이미지를 선택하고 폭을 100%, 높이를 auto로 맞춰도 됩니다. 비율이 찌그러지지 않은 채 감싸는 영역에 맞게 들어갑니다.
글자 크기와 누르는 영역
본문 글자가 16px보다 작으면 휴대폰을 평소 거리에서 들고 읽기 어렵습니다. 아이폰에는 이유가 하나 더 있습니다. 입력칸의 글자가 16px보다 작으면 사파리가 입력칸을 누르는 순간 화면을 확대하고, 입력이 끝나도 확대된 채로 남습니다.
버튼과 링크에는 손가락이 들어갈 자리가 필요합니다. 애플의 휴먼 인터페이스 가이드라인은 최소 44×44pt, 구글의 머티리얼 디자인은 48×48을 권장하고, 웹 접근성 기준인 WCAG 2.2는 AA 등급의 최소치로 24×24 CSS 픽셀(또는 그만큼의 주변 간격)을 둡니다. 문장 속 글자 링크는 괜찮지만, 작은 아이콘 링크가 틈 없이 붙어 있으면 엉뚱한 것을 누르게 됩니다.
둘 다 Finipage의 모바일 미리보기를 보면서 고칠 수 있습니다. 글자를 선택해 크기를 키우고, 버튼을 선택해 안쪽 여백(padding)을 상하좌우로 늘리면 버튼이 커집니다. 버튼끼리 붙어 있다면 바깥 여백(margin)을 줍니다. 바꾼 값은 모든 화면 폭에 적용되므로 데스크톱 미리보기에서도 한 번 확인합니다.
긴 단어와 URL, 그리고 한글 줄바꿈
브라우저는 영문을 띄어쓰기 자리에서 줄바꿈합니다. 긴 이메일 주소, 문단에 그대로 붙여 넣은 URL, 띄어쓰기 없는 제품 코드는 줄을 바꿀 곳이 없어 화면 밖으로 튀어나가고 가로 스크롤을 만듭니다. CSS로는 이렇게 막습니다.
p, li, td { overflow-wrap: anywhere; }한글 페이지라면 word-break: keep-all도 함께 검토해 볼 만합니다. 기본 설정에서는 한글이 음절 단위로 끊겨 "서비/스"처럼 단어 중간에서 줄이 넘어가는데, 이 값을 주면 어절 단위로 줄이 바뀝니다. CSS를 고칠 수 없다면 내용을 바꾸는 방법도 있습니다. 긴 URL 대신 "가격표 보기" 같은 짧은 링크 글자를 쓰고, 전체 주소는 링크 안에만 둡니다.
미디어 쿼리가 필요한 경우
요소 하나의 폭만 바꿔서는 해결되지 않는 레이아웃도 있습니다. PC에서 가로로 나란히 놓인 카드 세 장을 휴대폰에서는 세로로 쌓아야 한다면, 특정 화면 폭 이하에서만 적용되는 CSS 묶음인 미디어 쿼리가 필요합니다.
@media (max-width: 600px) {
.cards { flex-direction: column; }
}Finipage에는 소스를 직접 편집하거나 미디어 쿼리를 작성하는 기능이 없으므로 이런 작업은 텍스트 편집기에서 합니다. 구조를 바꾸는 작업은 VS Code나 메모장으로 한 번 해 두고, 문구·색·간격은 화면을 보며 고치는 식으로 나누면 편합니다.
점검 순서: 개발자 도구, 그다음 실제 휴대폰
Chrome과 Edge에는 기기 모드가 있습니다. F12를 누른 뒤 Ctrl+Shift+M을 누르고, 위쪽 목록에서 기종을 고르거나 360, 390 같은 폭을 직접 입력합니다. Firefox는 반응형 디자인 모드라는 이름으로 같은 단축키를 씁니다. 넘치는 요소를 찾기에는 빠르지만, 화면 폭과 사용자 에이전트만 바꿀 뿐 렌더링 엔진은 PC 브라우저 그대로라 사파리에서만 생기는 문제는 보여 주지 못합니다.
마무리 전에는 꼭 실제 휴대폰으로 열어 보십시오. 키보드가 입력칸을 가리는지, 손에 들었을 때 글씨가 작게 느껴지는지는 실제 기기에서만 알 수 있습니다. 가장 간단한 방법은 페이지를 온라인에 올리고 휴대폰에서 주소를 여는 것입니다. 올릴 곳은 HTML 페이지를 인터넷에 올리는 방법에 정리했습니다. 고칠 때마다 저장한 파일을 같은 곳에 다시 올리고 휴대폰에서 새로 고침합니다.
공개 직전 최종 점검 중이라면 랜딩 페이지 공개 전 체크리스트에서 나머지 항목도 확인하십시오.
내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.