사이트를 만드는 사람은 큰 모니터 앞에 앉아 있고, 방문자는 손에 든 화면으로 봅니다. 이 차이 때문에 생기는 문제들은 대체로 고장처럼 보이지 않습니다. 화면은 열리고 글자도 보입니다. 다만 읽기가 조금 불편하고, 버튼이 조금 누르기 어렵고, 그래서 조용히 나갑니다.
먼저 확인할 것은 우리 사이트 방문자의 실제 비율입니다. 일반론을 믿지 말고 자기 사이트의 수치를 보세요 — 분석 도구의 기기별 보고서에 나옵니다. 대부분의 검색 유입 사업에서 이 숫자는 생각보다 모바일 쪽으로 기울어 있습니다.
가장 먼저 볼 다섯 가지
휴대폰을 하나 들고 자기 사이트를 처음 오는 사람처럼 돌아봅니다. 순서대로 확인합니다.
가로 스크롤은 가장 흔하고 가장 티가 안 나는 문제입니다. 원인은 대개 폭이 고정된 요소 하나입니다 — 넓은 표, 큰 이미지, 잘리지 않는 긴 주소 문자열 같은 것들이죠. 하나만 있어도 페이지 전체가 옆으로 밀립니다.
터치 대상도 마우스로는 알 수 없습니다. 링크가 서로 붙어 있으면 손가락으로는 옆 것이 눌립니다. 특히 푸터의 링크 목록과 메뉴 항목 사이 간격을 확인하세요.
화면 크기 말고도 다른 것
모바일은 작은 데스크톱이 아닙니다. 회선과 상황이 다릅니다.
그래서 이미지 용량이 모바일에서 훨씬 크게 체감됩니다. 데스크톱에서 눈치채지 못한 큰 사진 한 장이 모바일에서는 첫 화면이 늦게 뜨는 원인이 됩니다 — 이 주제는 다음 회차에서 따로 다룹니다.
또 하나, 팝업을 조심하세요. 데스크톱에서 화면 일부만 덮던 팝업이 모바일에서는 화면 전체를 덮습니다. 닫기 버튼이 화면 밖으로 나가 있으면 방문자는 뒤로가기 말고 할 수 있는 일이 없습니다.
브라우저 도구로 하는 확인
휴대폰이 늘 손에 있지는 않으니 브라우저의 기기 모드도 함께 씁니다. 개발자 도구를 열고 모바일 크기로 바꾸면 대부분의 배치 문제가 그대로 드러납니다.
다만 기기 모드가 알려주지 않는 것이 있습니다. 실제 터치 감각, 실제 회선 속도, 그리고 밝은 야외에서의 가독성입니다. 그래서 오픈 전에 한 번은 실제 기기로 봅니다.
모바일 속도와 관련한 글은 성능 최적화 아카이브에 있고, 색과 글자 크기를 전역에서 정하는 앞 회차는 색과 폰트에서 다뤘습니다. 모바일에서 특히 느리다면 최적화 지원 사업이 측정과 개선을 함께 진행합니다.
다음 회차
모바일에서 가장 무거운 것은 대개 사진입니다. 다음 회차는 사진을 올리기 전에 하는 30초 — 크기 · 포맷 · 파일명입니다.