블로그에 반응형 스킨을 사용하고 있다면 한 번쯤 구글 개발자 도구의 휴대기기 친화성 테스트를 해봤을 겁니다. 이 테스트가 중요한 이유는 알고 계실테지요. 구글은 스마트폰 환경에 최적화된 블로그 또는 문서가, 그렇지 않은 문서보다 모바일 검색시 상위 노출될 확률이 높다고 밝혔습니다. 그래서 모바일 유입이 많은 블로그는 반응형 스킨으로 바꾸는 게 좋죠.
근데 자기 블로그 기본 주소를 넣어서 테스트할 때는 "좋습니다" 라고 나오다가 어떤 페이지에선 빨간불이 뜨는 경우가 있습니다. 구글 웹마스터 도구, 서치 콘솔에서도 오류 항목에 잡히게 되고요. 블로그 개장 초기에는 margin값이 부족한가 싶어 값을 늘여도 봤지만, 똑같더군요. 그래서 티스토리는 원래 그런가보다 하고 지냈습니다.
휴대기기 친화적 오류 원인을 찾다
그러다 얼마전 원흉을 찾았습니다. 후_후 구글 서치 콘솔에는 휴대기기 친화적이 아닌 페이지의 오류를 모아서 보여주는 기능이 있습니다. 아래 스샷처럼요. - 구글 웹마스터 도구 페이지
▲ 모바일 사용 편의성 항목에 어떤 오류인지 힌트가 주어집니다.
1. 플래시 사용: 이건 워드프레스라면 모를까 티스토리는 사용자 설정이 불가능하니 패스
2. 터치 요소가 너무 가까움: 이것도 과거에 충분히 만져본 것이므로 패스
3. 콘텐츠의 크기가 표시 영역에 맞지 않음: 여기서 뭔가 있겠다 싶더군요. 그래서 이 오류 항목을 클릭해보니 10개의 관련 페이지가 나왔습니다.
그리고 해당 페이지를 점검해본 결과, 일정한 규칙을 발견했습니다. 그건 바로 빨깐불이 뜨는 페이지는 "표"가 삽입돼 있다는 것! 이 표가 PC에서 테스트할 때는 괜찮은데, 실기 스마트폰으로 볼 때 화면을 삐져나가 오류로 잡혔던 것입니다.
반응형 스킨을 위한 표 수정 방법
해당 게시물의 표를 수정해야 합니다. 에디터로 들어가 HTML을 누르면..
이렇게 소스보기 화면이 나옵니다. 여기서 표의 첫머리 부분을 찾아서 "첫 번째 width 값"만 지워줍니다. 이렇게 하면 반응형 스킨에서 표가 잘리지 않고 페이지에 표시됩니다. *주의: 잦은 글 수정은 네이버에서 순위 하락 위험이 있습니다.
수정을 마치고 다시 테스트를 해봤습니다. 총 10개의 오류 페이지 중 8개 글에서 표를 수정했더니 파란불이 뜨더군요. ^^ 여러분도 반응형 스킨의 버튼 배치에 문제가 없다면, 파란불 통과 표시가 나올 겁니다. 다만 이 방법으로도 제 블로그의 2번 글과 115번 글은 도저희 안되더군요. 즉 만능은 아니라는 것이죠. 하지만 여러분의 블로그를 모바일 친화적으로 만드는데 알 수 없는 오류를 겪던 분이라면, 이 글이 조금이나마 참고서가 되리라 생각합니다. :)