모바일 친화성

웹 페이지를 PC 화면 기준으로 만들던 시절에는 휴대폰에서 어떻게 보이는지가 나중 일이었습니다. 검색 엔진이 판정 기준을 모바일 화면으로 옮기면서 순서가 뒤집혔습니다. 봇이 작은 화면으로 읽고 그 결과로 순위를 정하니, 만드는 쪽이 보는 화면과 판정하는 화면이 달라진 것입니다.

페이지덱의 블로그가 그 상태였습니다. PC로 열면 흠이 없는데 글이 여섯 달째 2페이지에 머물렀습니다. 휴대폰으로 열어 보니 기능 비교표가 화면 폭을 넘어 가로로 밀렸고, 구독 버튼과 공유 버튼이 손가락으로 구분해 누를 수 없을 만큼 붙어 있었습니다.

검색 엔진이 사이트를 잘 읽게 만드는 테크니컬 SEO 아래에서 이 항목은 성능 갈래에 속합니다. 기술 항목 대부분은 순위 반영 방식이 공개되지 않는데, 이 갈래의 둘은 순위 규칙에 직접 들어간다고 밝혀진 몇 안 되는 자리입니다.

점검하는 것은 다섯입니다.

1. 글자 크기입니다. 확대하지 않고 읽히는지를 봅니다. 본문은 16 안팎으로 잡고, PC에서 작아 보인다고 14로 내리면 휴대폰에서 읽히지 않습니다.
2. 누를 수 있는 영역입니다. 손가락이 닿는 크기가 확보돼야 하고 붙은 두 버튼 사이에도 간격이 필요합니다. 아이콘이 16이라도 터치 타깃은 44 안팎으로 잡습니다.
3. 가로 스크롤입니다. 내용이 화면 폭을 넘지 않아야 합니다. 표와 코드 블록이 가장 자주 넘치고, 그 둘만 따로 감싸 주면 대부분 해결됩니다.
4. 내용을 덮는 창입니다. 검색으로 들어온 사람에게 즉시 뜨는 큰 팝업은 따로 감점 항목입니다. 먼저 만나는 것이 닫기 버튼이면 그 페이지는 읽히지 않은 것으로 처리됩니다.
5. 화면 크기 선언입니다. 페이지 폭을 기기 화면에 맞추라고 알리는 한 줄이 빠지면 브라우저가 PC용 폭으로 그린 화면을 통째로 축소합니다. 글자가 작아지는 원인의 대부분이 이 한 줄입니다.

구현은 화면 크기에 따라 배치가 바뀌는 반응형 디자인으로 합니다. 같은 성능 갈래의 코어 웹 바이탈과는 보는 것이 다릅니다. 이쪽은 보이고 눌리는지를, 그쪽은 얼마나 빨리 도착하는지를 봅니다.

"휴대폰으로 열어 보셨어요? 표가 화면을 넘어가서 가로로 밀려요."

PC에서만 확인하고 넘겼다는 지적입니다.

"이 팝업 검색 유입에 바로 띄우면 감점이에요. 스크롤 뒤로 미루죠."

내용을 덮는 창이 순위에 걸린다는 뜻입니다.

"뷰포트 선언이 빠져 있어서 전체가 축소돼 보입니다."

글자가 작아 보이는 원인을 한 줄에서 찾은 경우입니다.

페이지덱에서는 현우가 새 글을 올릴 때마다 휴대폰으로 한 번 열어 봅니다. 민서 시안은 처음부터 좁은 화면 기준이라 문제가 적고, 문제는 대개 글에 붙인 표에서 생깁니다.