클릭할 수 있는 요소가 서로 너무 가까움 해결 방법

며칠 전 구글 서치 콘솔에서 날아온 메일 한통 새로운 모바일 사용 편의성 문제가 발견됨 내가 뭘 잘못한 거지 생각을 해봤는데 전혀 알지 못했습니다. 제가 티 블로그를 시작한 게 얼마 안 돼서 전혀 파악할 수 없었습니다. 여러 블로거 분들의 글을 살펴보니 html이 나와서 이거 해결하려면 시간 좀 걸리겠네 했는데 아녔습니다. 그냥 사진만 보고 따라 하시면 됩니다. 

모바일 편의성 문제가 중요한 이유는 요즘 pc검색량 보다 모바일 검색량이 월등하게 높기 때문에 문제를 반듯이 해결하고 넘어가는 게 좋습니다. 그만 뒀을때 발생하는 문제는 색인이 누락되진 않지만 검색순위에서 뒤로 밀리게 되니 바로 오류를 해결하시는 게 좋습니다. 

 

 

문제 세부 정보 보기를 눌렀더니 아래 창이 나옵니다. 

 

클릭할 수 있는 요소가 서로 너무 가까움 화살표에 있는 세부 정보 보기 클릭해서 이동해 줍니다. 

 

저에 문제 글은 000.tistory.com/tag 여서 화살표에 있는 주소를 우클릭해서 활성 창을 열었습니다. 

 

 

그럼 우측에 활성 창이 새로 열립니다. 여기서 실제 페이지 테스트 눌러봤더니 

아래와 같이 모바일 친환경 테스트 창이 열리면서 시간이 몇 초 정도 걸립니다. 

 

 

그럼 페이지가 모바일 친화 적이지 않다는 메시지가 나올 겁니다. 저는 일단 수정을 한 상태이기 때문에 페이지가 모바일 친화 적임이라는 메시지가 나왔습니다. 일단 여기서부터 시작이라고 보시면 됩니다. 

 

 

일단 문제가 돼서 날아온 게시물 000.tistory.com/tag를 주소창에 입력 한 뒤에 이동해줍니다. 

 

 

위에 같은 창이 열리는데 꼭 tag 페이지뿐만 아니라 문제가 되는 게시물에 메시지가 오면 우선 게시물 주소를 주소창에 입력하신 뒤에 똑같이 따라 하시면 됩니다. 

 

처음에 할 건 F12를 눌러 관리자 창으로 이동합니다. 화살표 위에 보면 큰 네모 안에 작은 네모가 들어가 있는 모양이 있는데 이걸 한번 눌러 줍니다. 

 

 

그럼 아래와 같이 모바일 화면으로 나타나는 걸 볼 수 있습니다. 새로 고침 하고 나오시면 됩니다. 

 

 

우선 나온 다음에 구글 서치 콘솔로 다시 들어가 모바일 사용 편의성에서 새로운 유효성 검사 시작 눌러 주시면 해결 메일을 받으실 수 있습니다. 

우선 오류를 해결하지 않으면 구글 광고로 인한 겹치는 문제는 잘 인식하지 못하게 되고 위에서 언급한 페이지가 모바일 친화적이라고 표시 된다고 합니다. 모바일 친화성 테스트를 맹신하지 마시고 chrome 브라우저를 이용해 직접 스마트폰 크기별로 가로 스크롤이 생기는지 겹치는 영역이 없는지 하나하나 확인해서 수정해 주는 게 좋다고 합니다. 

 

여기서 잠깐! 왜 이런 문제가 발생하는지 검색해 봤는데 스킨을 변경하면서 생기는 문제일 수 있다고 나옵니다. 저는 네이버 블로그를 십수 년 넘게 사용해 오면서 스킨을 변경해도 한번도 문제가 없었기에 티블로그에서도 문제가 생길 수 없다는 생각을 하고 있었는데 이번에 오류가 난 걸 보고 많은 것을 느낄 수 있었습니다. 물론 귀찮은 일인건 맞지만 문제가 생길때 마다 하나하나 해결해 나가는 재미도 쏠쏠하다는 걸 알았습니다.