구글 서치콘솔 "클릭 할 수 있는 요소가 서로 너무 가까움" 해결방법!!

 어느 날 구글 서치 콘솔에서 메일이 와 있었습니다. 저의 티스토리 블로그에서 모바일 사용 편의성 문제가 발견되었다고 합니다. 뭐지?? 모바일 사용 편의성 문제 해결하기 바로 눌러봅니다.

 

 모바일 사용 편의성> 클릭할 수 있는 요소가 서로 너무 가깝다고 합니다. 분명 띄어쓰기도 잘하고 사진과 간격도 한 칸씩 뛰었는데 무엇이 문제일까요? 글을 30개 넘도록 아무 문제없었는데 무엇이 문제일까 자세히 들여다보니 제일 밑부분에 문제의 사이트가 URL이 표시가 돼있었습니다. 

 

 제일 밑부분 URL를 마우스로 눌러주면 오른쪽에 실제 페이지 테스트가 뜨게 됩니다. 실제 페이지 테스트를 눌러주면 분석 중이라고 뜹니다. 

 

 테스트 결과 페이지가 모보일 친화적이지 않다고 합니다. 무엇이 문제일까요?? 태그 페이지에서 문제가 발생한 걸 보니 태그가 클릭할 수 있는 요소가 너무 가까워서 그런가? 하고 의심을 일단 해봅니다. 의심만 해보고 일단 추가 자료 밑에 보이는 오류 해결 방법에 대해 자세히 알아보기를 눌러서 열심히 읽어 봅니다. 

 

 클릭할 수 있는 요소가 서루 너무 가까움 

 - 이 보고서에는 버튼과 탐색 링크 등의 터치 요소가 서로 너무 가까이에 있어 모바일 사용자가 원하는 요소를 손가락으로 탭 하려고 할 때 바로 옆에 있는 요소도 함께 탭 하게 되는 사이트의 URL이 표시됩니다. 이러한 오류를 수정하려면 버튼과 탐색 링크의 크기와 공간을 모바일 방문자에게 맞게 올바르게 지정해야 합니다. 자세히 알아보려면 적절한 탭 타깃 크기 지정을 참조하세요.라고 쓰여 있습니다. 적절한 탭 타깃 크기 지정을 눌러 들어가 보았는데 한번 보아서는 조금 어렵다는 생각이 듭니다.

 

 하지만 원인은 알았으니 태그의 간격 뛰우고 가시죠!!  

 

 태그 간격 뛰우기

1. 자신의 티스토리 블로그에 들어가서 관리자 페이지에서 스킨 편집으로 들어가 줍니다. 

2. html 편집으로 들어가서 css를 눌러줍니다. 

3. line-height를 찾아줍니다. 처음에는 1.25로 되어있을 겁니다. 저는 2.5으로 바꾸어 주었습니다. 적용 누르면 끝!!

 

 간격이 많이 뛰워졌습니다. 위에 사진 참고하세요. ^^ 

 

 다시 구글 서치 콘솔로 들어가서 확인을 해봅니다. 오류가 그대로 있습니다. 오류를 클릭하여 유효성 검사 상태가 시작됨으로 바뀌었고 세부 정보를 보니 접수 중이라고 뜹니다. 그리고 바로 메일이 하나 날아오네요. 제 블로그 사이트의 모바일 사용 편의성 문제가 해결되었는지 확인 중입니다.라고 날아옵니다. 이건 좀 기다리셔야 됩니다.

 다시 구글 서치 콘솔에서 모바일 사용 편의성 상세정보 오류(클릭할 수 있는 요소가 서로 너무 가까움) 눌러줍니다. 그리고 처음 진행했던 방식대로 맨 밑부분 URL를 눌러줍니다. 그럼 실제 페이지 테스트가 나옵니다. 다시 테스트 고고!!

 

 페이지가 모바일 친화 적임이라고 뜹니다. 수정이 완료는 됐는데 구글에서는 빨리 오류 처리를 안 해주네요.. ㅜㅜ 문제가 발생하면 나의 글들이 위쪽으로 올라갈 수 없으니 문제를 바로바로 해결해주는 것이 좋답니다. 그리고 구글에서 문제의 글이 나오면 메일을 하나 보내는데 문제를 찾는데 오랜 시간이 걸리네요. 정확히 어디 부분이 문제니 고치시오. 하면 정말 좋은 텐데 말이죠..ㅜㅜ 어쨌든 자신의 글이 이때까지 많은 문제가 발생하지 않는다면 정말 다행입니다. ^^ 

 

 조금 늦게 문제가 해결되었다고 메일이 왔습니다. 앞으로도 파이팅하세요. ^^