요즘 소상공인 홈페이지 방문자의 다수는 스마트폰으로 들어옵니다. PC 화면에서는 멀쩡해 보여도 모바일에서는 글자가 깨지거나 버튼이 눌리지 않는 경우가 의외로 많습니다. 전문가가 아니어도 스마트폰 하나로 직접 점검할 수 있는 항목들을 체크리스트로 정리했습니다.
기준 화면은 375px로 잡으세요
375px은 많이 쓰이는 스마트폰 화면 폭 기준입니다. 크롬 브라우저에서 F12를 눌러 개발자 도구를 열고 기기 모드로 375px 화면을 띄우면 실제 폰이 없어도 모바일 화면을 확인합니다. 가장 확실한 방법은 역시 본인 스마트폰으로 직접 들어가 보는 것입니다.
화면과 글자 체크리스트
- 가로 스크롤이 생기는가. 좌우로 밀리는 화면은 모바일 최적화 실패의 대표 신호입니다. 표나 큰 이미지가 원인인 경우가 많습니다.
- 본문 글자가 확대 없이 읽히는가. 손가락으로 확대해야 읽을 수 있다면 폰트가 너무 작은 것입니다.
- 이미지와 문단이 화면 폭에 맞게 줄어드는가. 잘려 보이는 사진이 없는지 확인하세요.
- 팝업이 화면 전체를 가리지는 않는가. 닫기 버튼이 잘 보이고 눌리는지도 함께 봅니다.
터치와 연락 체크리스트
- 버튼과 링크가 손가락으로 정확히 눌리는가. 터치 영역이 너무 작거나 링크끼리 붙어 있으면 오터치가 납니다.
- 전화번호를 누르면 바로 통화 화면이 뜨는가.
tel:링크가 걸려 있어야 합니다. 모바일 방문자에게는 이것이 가장 중요한 버튼입니다. - 지도, 카카오톡 채널 등 연결 버튼이 실제로 작동하는가. 만든 뒤 한 번도 안 눌러본 버튼이 의외로 많습니다.
- 메뉴(햄버거 버튼)가 열리고 닫히는가. 하위 메뉴까지 눌러보세요.
점검은 한 번으로 끝나지 않습니다
콘텐츠를 새로 올리거나 배너를 바꿀 때마다 모바일 화면은 달라질 수 있습니다. 큰 수정을 한 날에는 반드시 스마트폰으로 주요 페이지를 한 바퀴 돌아보는 습관을 들이세요. 특히 예약, 문의, 전화 같은 핵심 동선은 매번 확인하는 것이 좋습니다. 가족이나 직원에게 처음 방문한 손님처럼 사이트를 써보게 하고 어디서 막히는지 들어보는 것도 좋은 점검 방법입니다. 만든 사람 눈에는 안 보이는 문제가 남의 손가락에서는 금방 드러납니다.
스마트폰을 손에 들고
375px 기준으로 가로 스크롤과 글자 크기부터 확인하세요. 전화 연결과 버튼 터치처럼 실제 동선은 손가락으로 직접 눌러봐야 합니다. 그리고 이 점검은 콘텐츠를 바꿀 때마다 다시 해야 합니다. NOAH의 홈페이지는 반응형이 기본이라 제작 단계에서 이 항목들을 갖춘 상태로 시작합니다.