홈페이지를 만들고 나서 PC로만 확인하는 분들이 많습니다. 그런데 정작 손님은 지하철에서, 길에서, 한 손으로 우리 사이트를 봅니다.
모바일 화면이 불편하면 손님은 그냥 뒤로 가기를 누릅니다. 오늘은 개발을 몰라도 직접 확인할 수 있는 점검 항목만 골라 드릴게요.
1. 글자를 확대하지 않고 읽을 수 있나요
손가락으로 화면을 벌리지 않고 그냥 읽혀야 합니다. 이게 모바일 최적화의 첫 번째 조건입니다.
PC 화면을 그대로 줄여 놓은 사이트에서 흔히 생기는 문제입니다. 글자가 개미만 해지고, 손님은 확대했다 줄였다를 반복하게 됩니다.
본문 글자는 스마트폰에서 16px 안팎이면 편안합니다. 지금 휴대폰으로 우리 사이트를 열어 확대 없이 한 문단을 읽어 보세요. 눈이 찡그려진다면 고쳐야 합니다.
2. 버튼을 한 번에 누를 수 있나요
버튼이 작으면 옆 링크가 눌립니다. 손님은 두세 번 헛눌러 보고 나갑니다.
터치 영역은 가로세로 44px 정도가 기준으로 많이 쓰입니다. 손가락 끝 넓이라고 생각하시면 됩니다. 링크끼리 너무 붙어 있어도 같은 문제가 생깁니다.
한 손으로, 엄지로만 우리 사이트를 한 바퀴 돌아 보세요. 헛눌리는 곳이 있으면 그게 고칠 자리입니다.
3. 첫 화면이 3초 안에 뜨나요
사진이 무거우면 화면이 하얗게 비어 있는 시간이 길어집니다. 손님은 그 사이에 떠납니다.
원본 사진을 그대로 올리는 것이 가장 흔한 원인입니다. 카메라에서 나온 5MB짜리 사진을 그대로 올리면, 화면에 필요한 건 그 10분의 1도 안 되는데 전부를 내려받게 됩니다.
이미지는 가로 1600px 정도로 줄여서 올리세요. 사진 여러 장을 한 화면에 깔았다면 개수도 줄이시고요. 사진 정리만 해도 속도가 눈에 띄게 좋아집니다.
4. 전화·길찾기가 한 번에 되나요
병원, 학원, 음식점처럼 방문이 중요한 업종이라면 이게 핵심입니다.
전화번호는 텍스트로만 두지 말고 누르면 바로 전화가 걸리게 만들어야 합니다. 주소도 마찬가지로 지도로 연결해 주세요. 잇다웹은 네이버·카카오 지도 연동을 무료 제공 서비스에 포함해 제공합니다.
번호를 손님이 직접 외워서 다시 입력하게 만들면, 그 사이에 마음이 바뀝니다.
5. 표와 가격표가 옆으로 잘리지 않나요
PC에서 예쁘게 만든 표는 모바일에서 자주 깨집니다. 가로로 잘려서 오른쪽 칸이 안 보이는 경우죠.
항목이 많은 표라면 모바일에서는 카드 형태로 풀어 주는 편이 낫습니다. 한 줄에 항목 이름과 값을 세로로 쌓는 방식입니다.
가격표는 특히 중요합니다. 손님이 가장 보고 싶어 하는 정보가 잘려 있으면 안 됩니다.
6. 폼 입력이 편한가요
문의 폼 칸이 많으면 모바일에서는 더 부담스럽습니다. 작은 화면에서 타이핑하는 건 생각보다 귀찮은 일이거든요.
꼭 필요한 항목만 남기세요. 이름, 연락처, 문의 내용 세 개면 대부분 충분합니다. 전화번호 칸에서는 숫자 키패드가 바로 뜨게 설정하는 것도 도움이 됩니다.
7. 가로로 눕혔을 때도 괜찮나요
의외로 자주 빠지는 점검 항목입니다. 화면을 가로로 돌렸을 때 레이아웃이 무너지는 사이트가 꽤 있습니다.
한 번만 돌려 보시면 됩니다. 메뉴가 겹치거나 이미지가 화면을 넘어가면 수정이 필요합니다.
결론: 오늘 5분이면 확인됩니다
이 7가지는 개발 지식 없이 휴대폰 하나로 다 확인할 수 있습니다. 순서대로 열어 보고 걸리는 항목만 메모해 두세요.
잇다웹에서 제작하는 홈페이지는 PC·태블릿·모바일 반응형이 기본으로 포함됩니다. 어떤 화면에서 어떻게 보이는지는 웹사이트 템플릿에서 직접 확인해 보실 수 있습니다.
자주 묻는 질문
반응형이면 모바일 최적화가 끝난 건가요
아닙니다. 반응형은 화면 크기에 맞춰 배치가 바뀌는 기술이고, 최적화는 그 화면에서 실제로 쓰기 편한가의 문제입니다. 반응형으로 만들어도 글자가 작거나 사진이 무거우면 손님은 불편함을 느낍니다.
모바일용 사이트를 따로 만들어야 하나요
따로 만들지 않으셔도 됩니다. 지금은 하나의 사이트가 화면 크기에 맞춰 바뀌는 반응형 방식이 일반적입니다. 관리할 사이트가 하나뿐이라 수정할 때도 훨씬 편합니다.
사진 용량은 어느 정도가 적당한가요
화면 전체를 덮는 큰 사진은 가로 1600px 안팎, 본문에 들어가는 사진은 그보다 작게 줄이는 것이 무난합니다. 파일 형식은 사진이면 JPG, 로고나 아이콘이면 PNG를 쓰시면 됩니다.
우리 홈페이지가 모바일에서 어떤 상태인지 점검받고 싶으시면 무료 견적 상담에 사이트 주소를 남겨 주세요. 어디부터 손보면 좋을지 정리해 드립니다.
사진: Unsplash