티스토리 혹은 워드프레스 사용자가 구글 서치 콘솔에서 “클릭할 수 있는 요소가 너무 가까움” 이라는 멘트를 경험한 일이 있을 것입니다.
구체적인 뜻은 모바일에서 검색자가 사용하는 데 있어 줄 간격이 붙어 있기 때문에 광고 혹은 링크를 잘못 클릭 발생을 이를 수정하라는 의미입니다.
또한 구글에서는 이를 악용하여 광고를 실수로 누르게 하거나 올바르지 않는 링크를 누르게 하는 행위를 좋게 바라볼리 없겠지요.
따라서 CSS에서 줄 간격 설정이나 코드를 삽입하는 해결 방법 절차를 통해 복구 가능합니다.
클릭할 수 있는 요소가 너무 가까움 오류 내용
줄 간격 문제 때문에 구글 서치 콘솔에서 글을 등록하거나 메일로 이러한 오류 내용을 확인했을 것입니다. PC 화면이라면 모니터를 누를 일이 없기 때문에 관계 없지만 화면을 만지면서 조작을 해야 하는 모바일 화면에서는 문제가 다릅니다.
주로 ‘클릭할 수 없는 요소가 너무 가까움‘ 과 ‘텍스트가 너무 작아 읽을 수 없음‘이라는 이유가 같이 따라 다니게 되는데요.
제 경우는 클릭문제를 해결하니 텍스트 문제도 자연스레 사라졌습니다.
구글 고객센터 내용은 터치 영역이 손가락 끝 너비 보다 가까우면 안된다고 쓰여 있지만 현실적으로 조그마한 핸드폰 화면에 손가락 너비만큼 컨텐츠 거리를 늘리기가 쉽지 않습니다.
게다가 워드프레스의 경우는 공란 줄 바꿈을 해서 발행을 해도 빈 공란 없는 글이 나오기 때문에 고객센터 에서 설명하는 만큼 간격을 늘리는 건 불가능이라 생각합니다.
우선 최대한 클릭문제 오류 발생이 없도록 방법을 취해야 하겠지요.
사이트 줄 간격 늘려 해결하기
줄 간격을 늘리려면 기본적으로 CSS 코드 수정하는 방법을 알아야 하는데 그리 어렵지 않으므로 따라서 해결하길 바랍니다.
우선 티스토리 사용자 기준으로 말씀 드리겠습니다. 로그인 후 스킨편집 항목에서 우측 상단 CSS를 클릭합니다.
CSS 코드 화면에서 Ctrl + F 를 눌러 ‘line-height‘를 타이핑을 해서 위와 같이 body 항목 안에 있는 ‘line-height’ 찾으시면 됩니다.
‘1.25‘ 라는 숫자를 1.5 또는 1.8로 수정하여 저장하면 기존 글의 줄간격이 다소 늘어난 것이 확인됩니다. 이후 구글 서치 콘솔에서 다시 포스팅 글을 등록해보시면 클릭문제가 해결됩니다.
워드프레스는 해당 테마 CSS 항목에서 위와 같이 ‘line-height’를 기존 수치 보다 약간 높게 변경하여 적용하시면 됩니다.
여기까지가 줄간격을 수정하여 해결이 되었다면 다행이지만, 위와 같은 방법을 적용했음에도 해결이 되지 않는다면 직접 메타 태그 코드를 넣는 방법을 써야 합니다.
메타태그 수정하여 적용 하는 방법
줄간격을 수치를 수정했음에도 ‘클릭할 수 있는 요소가 너무 가까움’ 문구가 지속된다면 인위적으로 메타태그 수정을 통해 적용을 할 수 있습니다.
제 경우도 메타태그를 수정해서 해결했는데 그 이유는 이미 기존 줄간격이 넓은 스킨을 사용했기 때문에 더 간격을 늘릴 필요가 없었습니다. 따라서 메타 태그에 손을 대어 조치를 하였습니다.
<meta name="viewport" content="width=device-width, initial-scale=1" />위 HTML 코드는 사이트를 반응형으로 만들어주는 것인데 아마 티스토리와 워드프레스에 대부분 기본적으로 삽입되어 있을 것입니다.
그런데 안정적인 코드가 멀쩡한 줄간격이나 텍스트 크기를 작게 만드는 것 같습니다. 그래서 아래와 같이 코드를 수정하였습니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />첫번째 코드에 ‘maximum-scale‘과 ‘user-scalable‘을 추가 했습니다. 차이점이라면 화면 최대 크기 비율과 사용자 확대 축소 비율 항목을 넣어 텍스트 크기가 변환되지 않도록 설정한 것입니다.
코드 삽입은 <head> 내부에 있는 viewport 코드를 제거 후 두번째 viewport 코드를 삽입 후 저장하면 됩니다. 그렇다면 변화는 있었을까요?
구글 서치 콘솔에서 포스팅 글을 재등록한 결과 모바일 편의성 항목이 정상으로 돌아왔습니다. 이러한 모바일 관련한 항목에서 오류가 있으면 검색 누락 가능성이 높기 때문에 바로 조치 해주시는 것이 좋습니다.
그리고 워드프레스, 티스토리에서 테마를 바꾸시는 경우 우선적으로 해당 테마가 모바일 친화적인지 여부를 판별 후 사용하시는 것이 좋습니다.
만약 코드가 잘못된 테마라면 직접 CSS와 HTML 코드를 수정하여 사용해야 합니다.
이상 클릭할 수 있는 요소가 너무 가까움 내용에 대해 살펴 봤습니다.
네이버 블로그와는 다르게 티스토리, 워드프레스와 같은 사이트는 다양한 변수가 발생하므로 하나씩 문제점들을 해결하여 견고한 사이트를 가꾸어 나가야 합니다.