모바일에서 방문자가 금방 나간다면
핵심 요약
모바일에서 방문자가 금방 나간다고 디자인을 다시 만들 일은 아닙니다. 자기 휴대폰으로 사이트를 열어 첫 화면부터 아래로 내려가 보면 어디서 막히는지 드러납니다. 확대하지 않고 글이 읽히는지, 엄지로 눌러 한 번에 들어가는지를 차례로 봅니다. 위가 막혀 있으면 아래쪽을 다듬어도 그 화면까지 내려오는 사람이 적습니다.
핵심 포인트
- 입력 폼은 직접 끝까지 채워 보내 보십시오. 키보드가 입력 칸을 가리는 것은 눌러 봐야 압니다.
- 본문 글자를 길게 눌러 드래그해 보십시오. 선택되지 않으면 이미지 한 장으로 만든 페이지이고, 그 안의 글자는 검색엔진이 읽지 못합니다.
- 고칠 곳을 찾았는데 수치를 댈 수 없어도 괜찮습니다. 그 화면을 캡처해 점검표의 어느 줄인지와 페이지 주소, 확인한 기기와 날짜를 적어 개발사에 보내면 됩니다.
목차 (6)
모바일에서 방문자가 금방 나간다면 디자인부터 손대기 전에 자기 휴대폰으로 사이트를 열어 봅니다. 아래로 내려가며 볼 여섯 항목은 전부 코드를 열지 않고 손에 든 휴대폰만으로 확인됩니다. 볼 페이지는 홈과 문의·예약처럼 연락으로 이어지는 화면까지고, 한 페이지라도 걸리면 그 항목은 통과가 아닙니다.
먼저 3줄로 답합니다.
- 순서는 휴대폰을 켠 그대로 위에서 아래로입니다. 첫 화면, 글자, 누르는 것을 지나 전화·오시는길 버튼 자리를 보고, 마지막에 긴 이미지 페이지와 입력 폼으로 내려갑니다.
- 재야 할 숫자는 없습니다. 손가락으로 해 보고 되는지 안 되는지만 가리면 됩니다.
- 특히 불리한 것은 긴 이미지 한 장으로 만든 페이지와 항목이 많은 입력 폼입니다. 화면만 넘겨 보면 지나치기 쉬워서, 글자를 드래그해 보고 폼을 직접 보내 보기 전까지는 드러나지 않습니다.
첫 화면에서 무엇을 하는 곳인지 보이는가
모바일 첫 화면에는 무엇을 하는 곳인지와 다음에 누를 것이 함께 보여야 합니다. 손을 대기 전에 화면을 그대로 캡처해, 이름과 한 줄 설명, 다음에 누를 버튼이 그 안에 들어 있는지 봅니다.
확대하지 않고 읽히는가, 손가락으로 잘못 눌리지 않는가
본문은 확대하지 않고 읽혀야 하고, 누르는 것은 한 번에 눌려야 합니다. 세 가지를 차례로 봅니다.
- 글자 크기와 줄 간격 — 두 손가락으로 벌리지 않은 채 한 문단을 끝까지 읽어 봅니다. 중간에 확대했다면 글자가 작거나 줄이 서로 붙어 있는 쪽입니다.
- 누르는 것의 크기와 간격 — 엄지로 메뉴, 버튼, 목록 제목을 차례로 눌러 봅니다. 옆 항목이 눌리거나 두 번 눌러야 들어가면 크기나 간격이 좁은 쪽입니다.
- 행동 버튼 자리는 첫 화면이나 한 손으로 들었을 때 엄지가 닿는 화면 아래쪽에 있는지 봅니다. 전화나 오시는길이 스크롤을 끝까지 내린 페이지 맨 끝에만 있으면 거기까지 내려온 사람만 쓰게 됩니다.
페이지가 긴 이미지 한 장인가, 폼 항목이 몇 개인가
긴 이미지 한 장으로 만든 페이지와 항목이 많은 입력 폼은 모바일에서 특히 불리합니다.
이미지로 만든 페이지는 본문 글자를 길게 눌러 드래그해 선택해 보면 알 수 있습니다. 선택이 되지 않으면 같은 방법을 다른 페이지에서도 해 봅니다. 그 페이지만 안 되면 이미지로 만든 쪽이고, 어디서도 안 되면 복사 방지가 걸린 쪽일 수 있습니다. 이미지 안의 글자는 검색엔진이 본문으로 읽지 못해 홈페이지 SEO 점검 항목 다수가 비어 있는 상태가 됩니다.
입력 폼은 직접 처음부터 끝까지 채워 보내 봅니다. 보낸 문의는 담당 직원에게 실제 알림으로 갈 수 있어, 내용을 적는 칸에 테스트라고 남겨 두면 실제 문의로 오인되지 않습니다. 키보드가 올라올 때 입력 중인 칸이 가려지는지, 전화번호 칸에서 숫자 키패드가 바로 뜨는지, 문의를 받는 데 당장 필요하지 않은 칸이 섞여 있는지를 봅니다. 주소·생년월일·상세 사연 같은 칸이 그 예입니다.
모바일 홈페이지 이탈 점검표
| 보는 것 | 확인 방법 | 통과로 보는 상태 |
|---|---|---|
| 첫 화면 | 스크롤 전 화면을 캡처한다 | 이름과 한 줄 설명, 다음에 누를 버튼이 캡처 안에 있다 |
| 글자와 줄 간격 | 확대하지 않고 한 문단을 읽는다 | 끝까지 확대 없이 읽힌다 |
| 누르는 것 | 엄지로 메뉴·버튼을 차례로 누른다 | 한 번에 눌리고 옆 항목이 눌리지 않는다 |
| 행동 버튼 | 전화·오시는길을 어디서 누를 수 있는지 찾는다 | 첫 화면이나 엄지가 닿는 화면 아래쪽에서 바로 눌린다 |
| 이미지로 만든 페이지 | 본문 글자를 드래그해 선택한다 | 본문 글자가 선택되고 복사된다 |
| 입력 폼 | 직접 끝까지 채워 보낸다 | 키보드가 입력 칸을 가리지 않고, 전화번호 칸에서 숫자 키패드가 뜨고, 문의를 받는 데 당장 필요하지 않은 칸이 없다 |
통과가 아닌 줄은 그 화면을 캡처해, 점검표의 어느 줄인지와 함께 사이트를 만든 개발사에 전달합니다. 그 페이지 주소와 확인한 기기·날짜를 함께 적습니다. 수치는 필요하지 않고, 확대해야 읽혔다처럼 캡처에 남지 않는 것만 한 줄로 덧붙입니다. 개발사와 연락이 닿지 않으면 같은 캡처를 와커스에 보내 주셔도 됩니다.
자주 묻는 질문
반응형으로 만들었으면 모바일 점검은 건너뛰어도 되나요?
반응형은 화면 폭에 맞춰 배치가 바뀌는 구조일 뿐, 손에 맞는 상태까지 보장하지 않습니다. 글자 크기, 누르는 간격, 행동 버튼 자리는 배치와 별개로 정해지는 값입니다.
PC 브라우저의 모바일 보기로 확인해도 되나요?
배치와 글자 크기는 PC 모바일 보기로 확인되지만, 손가락으로 눌렀을 때 옆 항목이 눌리는지와 키보드가 입력 칸을 가리는지는 마우스로 재현되지 않습니다. 누르기와 폼은 실제 기기에서 확인합니다.
고칠 항목이 여러 개면 무엇부터 고치나요?
위쪽 항목부터 고칩니다. 첫 화면과 읽힘이 막혀 있으면 아래쪽을 다듬어도 그 화면까지 내려오는 사람이 적어, 개선한 자리가 눈에 닿지 않습니다.
와커스는 기기에서 눌러 보고 나눕니다
와커스는 모바일 점검을 담당자가 먼저 휴대폰으로 확인할 수 있는 범위와 코드를 봐야 하는 범위로 나눕니다. 앞서 다룬 모바일 점검 6항목은 앞쪽이고, 화면이 뜨는 시점이나 이미지 처리처럼 구조에 걸린 항목은 구조를 바꿀 때 달라지는 것에서 다룹니다.
점검 결과는 사이트마다 다르고, 같은 항목을 고쳐도 변화 폭은 유입 경로와 업종에 따라 달라집니다. 머무는 시간이나 문의 수가 반드시 달라진다고 말하기는 어렵습니다. 어느 자리에서 막혔는지 캡처 몇 장만 보내 주시면 먼저 볼 순서를 정리해 드립니다.
문의: 와커스에 문의하기 · 대표 전화 070-4288-0067
함께 읽으면 좋은 글
자주 묻는 질문
Q. 반응형으로 만들었으면 모바일 점검은 건너뛰어도 되나요?
A. 반응형은 화면 폭에 맞춰 배치가 바뀌는 구조일 뿐, 손에 맞는 상태까지 보장하지 않습니다. 글자 크기, 누르는 간격, 행동 버튼 자리는 배치와 별개로 정해지는 값입니다.
Q. PC 브라우저의 모바일 보기로 확인해도 되나요?
A. 배치와 글자 크기는 PC 모바일 보기로 확인되지만, 손가락으로 눌렀을 때 옆 항목이 눌리는지와 키보드가 입력 칸을 가리는지는 마우스로 재현되지 않습니다. 누르기와 폼은 실제 기기에서 확인합니다.
Q. 고칠 항목이 여러 개면 무엇부터 고치나요?
A. 위쪽 항목부터 고칩니다. 첫 화면과 읽힘이 막혀 있으면 아래쪽을 다듬어도 그 화면까지 내려오는 사람이 적어, 개선한 자리가 눈에 닿지 않습니다.
