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

'악마를 보았다'구글에서 온 메일

블로그를 운영 중이라면

구글에서 보내오는 메일에

심장이 덜컥 내려 앉는 경험을

하시는 분들이 많으실 것으로 안다.

 

나도 매일 아침 잠에서 깨면

습관적으로 핸드폰에서

메일확인을 하는데

G 메일의 마크가 보이면

이번엔 또 무슨일일까

메일을 열어보기도 전에

걱정부터 앞선다.

 

그러던 중 오늘은

모바일 사용 편의성에 문제가

있다는 메일을 받았는데

내용은 다음과 같다.

해결 방법 찾아 삼만리

부랴부랴 파란색 버튼을 눌러보니

메일에서 확인한 내용으로 확인된

문제점 두 가지가 떡 하니 보여졌고

표시된 문제점을 하나씩 눌러서

자세히 들어가 보면

도대체 이건 무슨 내용이고

해결방법은 무엇인가를 찾아보려고

큰 제목 밑에있는 '자세히 알아보기'를

클릭해 보았더니 다음과 같이

구글의 안내 페이지가 나왔다. 

음..대충 이게 무슨 문제인지는 알겠는데

정말 말그대로 '안내' 또는 '설명' 일 뿐

해결방법은 내가 직접 찾아야 하는 상황.

검색에 돌입했다.

 

아니나 다를까 나와 같은 문제를 먼저

겪었던 사람들이 친절하게

이런 문제가 발생 된 이유와

해결 방법을 올려주었다.

해결방법, 넘나 간단한 것!

그 중에서 발견한 'TAG 페이지 문제'

태그 페이지란 구글에서

내 글이 검색이 용이하도록

해시태그를 걸어 놓은 페이지를

말하는데 아무래도 내가

해시태그를 너무 빼곡하게

작성해서 구글에서는

'모바일 사용자들이

보기에 불편할 것이다'

라고 생각한듯 하다.

 

그래서 이 문제를 해결하기 위한

키워드는 바로바로

'line-height'

스킨 편집에서 글자 사이 간격을

늘려주는 것으로 해결 할 수 있었는데

방법은 다음과 같다.

 

우선 블로그 관리페이지로 가서

스킨편집-html편집-CSS 

순으로 들어간다.

그 다음에 Ctrl+F를 눌러

line-height를 검색 하면

헷갈리는 html코드들 속에서

한줄기 빛과 같이 오렌지색으로

검색어가 표시된다.

여기에서 옆에있는 숫자 1.25에 주목한다.

1.25를 2~2.5로 늘려주면 되는데

나는 단순하게 1을 늘려 2.25로

변경하고 적용을 눌러 저장했다.

 

앞서 구글에서 문제점을

확인하면서 보았던 내용 중

'사이트의 오류를 해결하고

다시 크롤링을 하도록 요청하라'는

설명이 있었기에 다시 메일로 돌아가서

파란 버튼을 눌러

구글 서치콘솔 페이지로 이동 후

 

문제점 안내 페이지로 돌아가서

이번에는 자세히 보기가 아닌

하단에 있는 문제가 있는 페이지의

URL을 클릭해 보았다.

그랬더니 화면이 옆으로 밀리면서

아래와 같은 화면이 나타난다.

여기서 실제 페이지 테스트를 눌러보았다.

그랬더니 뭔가 테스트하는 화면으로 넘어갔는데

일정 시간이 지나자

빨간색 '악마의 눈빛'이 아닌

마음이 편해지는 '그린 라이트가'

보여졌다.

사실 구글 서칠 콘솔에는

바로 반영 되지 않는다.

아직까지 '유효성 검사'로

돌입 된 상태라 사이트에는 

문제가 있는 것처럼 표시된다.

유효성 검사는 며칠이

소요 될 수 있다고 나오는데

나는 우선 새로 크롤링을 요청해서

모바일 친화성 문제가

해결 되었는지를 확인한 것이다.

 

블로그를 하면서 정말 평생

해 볼일이 없을 것 같았던

html코드 편집부터

다양한 상황을 겪으면서,

 

그때 그때 해결만하고

끝낼 것이 아니라

나를 위해 그리고 이런 문제로

절망에 빠져있을

나와 같은 사람들을 위해

해결 방법에 대한 기록을

남겨야 겠다고 생각해서

오늘의 포스팅을 해 보았다.

 

아직도 왕초보 블로거이지만

자포자기 하지 않고

하나 하나 해결하면서

내가 정해 놓은 시간까지

후회 없이 노력해 보겠다고 

다짐하며 오늘의 포스팅을

마친다.