[블로그 성장기] 모바일 사용 편의성 문제가 감지됨_원인과 해결방안

안녕하세요 예달입니다. 구글 크롤링 과정에서 발생할 수 있는 모바일 사용 편의성 문제에 대한 원인과 해결방안에 대해 작성해보겠습니다.

시간이 지나면 작성한 글에 대해서 구글에서 알아서 색인 등록해주는 것으로 알고 있으나, 작성한 글이 구글 검색엔진에서 빠르게 검색되기위해서 직접 색인 요청을 해주시는 경우가 많을 것 같습니다. 그러다 보면 자주 아래와 같이 " 모바일 사용 편의성 문제가 감지됨 " 이라는 메일이나 메시지를 받아보신 분들 많을 것 입니다.
 
 

1. 모바일 사용 편의성이란?

여러 국가에서 스마트폰 트래픽이 데스크톱 트래픽을 넘어서고 있기 때문에 모바일 친화적인 웹사이트는 온라인 인지도를 구축하는 데 중요한 역할을 합니다. 따라서 구글에서도 모바일 친화적인 포스팅에 대해서 색인  등록되고 있습니다. 따라서 구글에서는  모바일 사용 편의성에 대한 테스트가 진행되며, 문제가 기준값을 초과하여 발생한 페이지에 대해서는 편의성 문제가 감지되었다는 결과를 보여줍니다. 
 
 

2. 발생원인

작성한 글에 대해서 색인이 생성되지 않아서 서치콘솔에서 직접 색인 신청을 위해 URL 검사를 통해 테스트를 진행을 했을 때 아래와 같은 화면을 보신적이 있을 겁니다.

 

모바일 사용 편의성 문제

 
대부분 모바일 사용 편의성에 대한 문제가 발생하였을 때 , 발생원인에 따라서 적절한 해결방안을 적용하면 금방 해결이 되었습니다. 경험적으로  " 콘텐츠 폭이 화면 폭보다 넓음", "클릭할 수 있는 요소가 서로 너무 가까움"이 주로 원인일 때가 많았습니다.  

 

모바일 사용 편의성 오류 주요 유형

 
두 가지 유형을 포함하여 발생할 수 있는 오류 유형은 다음과 같습니다. 

• 호환되지 않은 플러그인 사용 :  페이지에 대부분의 모바일 브라우저에서 지원하지 않는 Flash와 같은 플러그인이 포함되어있는 경우
• 표시 영역이 설정되지 않음 :  화면 크기에 맞게 페이지의 크기 및 배율을 조정하는 방법을 브라우저에 알리는 viewport 속성이 페이지에 정의되어있지 않는 경우
• 콘텐츠 너비가 화면 너비보다 넓음 : 페이지의 단어와 이미지를 보려면 가로 스크롤이 필요합니다. 이는  페이지가 CSS 선언에서 절댓값을 사용하거나 특정 브라우저 너비(예: 980픽셀)에서 최적의 상태로 표시되도록 설계된 이미지를 사용해야 하는 경우
• 텍스트가 너무 작아서 읽을 수 없음 : 페이지 텍스트의 상당 부분이 페이지 너비에 비해 너무 작은 경우
• 클릭할 수 있는 요소가 서로 너무 가까움 : 버튼, 탐색 링크와 같은 터치 요소가 서로 너무 가까이 있어 모바일 사용자가 원하는 요소를 손가락으로 탭할 때 바로 옆에 있는 요소도 함께 탭하기 쉬운 경우

 

 
 
3. 해결방안

주로 발생할 수 있는  " 콘텐츠 폭이 화면 폭보다 넓음", "클릭할 수 있는 요소가 서로 너무 가까움" 문제 대한 해결 방안에 대해 작성해 보겠습니다.  두 문제의 경우 모두 개별 포스팅에서 문제해결을 하거나 HTML 메타태그 수정을 통해 문제를 해결할 수 있습니다.

---

" 콘텐츠 폭이 화면 폭보다 넓음" 의 경우는 간단히 말하면 이미지 등의 크기가 너무 크거나 용량이 큰 경우에 주로 발생합니다.

1 ) HTML 태그 수정

HTML 태그를 수정하기 위하여, 내 티스토리의 "블로그 관리 - 스킨 편집 - HTML"으로 이동합니다. 그리고 HTML 코드 화면에서 찾기 기능(Ctrl + F)을 활용하여, 아래처럼 meta name 코드("viewport")를 찾은 후 아래의 수정 후와 같이 수정해주시면 됩니다. 해당 코드는 콘텐츠가 기기의 폭과 맞도록 설정하는 코드이며, 아래처럼 해당 코드를 수정하거나, 없다면 추가시켜 주시면 됩니다.

수정 전 : <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

 

수정 후 : <meta name="viewport" content="user-scalable=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height">

 

2) 개별 포스팅에서 수정 ( 1)을 수정했는데도 해결이 안되는 경우

대부분 1)의 방법으로 HTML 태그를 수정하면 해당 문제가 개선 될 것입니다. 하지만 HTML 태그를 수정했음에도 동일한 문제가 발생하는 경우에는 글 내의 이미지의 크기 및 용량을 조정해줍니다. 일반적으로 구글에서 선호하는 이미지는 가로 크기 800 미만입니다. 크기와 용량 조정을 해주었을 때도 대부분 해당 문제가 해결되었습니다.

이미지 최적화는 모바일 편의성 문제해결에도 필요하고, 구글 SEO(검색 최적화)를 위해서도 중요한 부분입니다. 이미지 최적화 방법에 대한 내용은 다음 포스팅에서 자세히 작성해보겠습니다. 
 

---

" 클릭할 수 있는 요소가 서로 너무 가까움"의 경우는 글과 이미지 등의 간격이 너무 타이트한 경우 주로 발생합니다. 

 1 ) HTML(CSS) 태그 수정

내 티스토리에서 "블로그 관리 - 스킨 편집 - HTML - CSS"로 이동합니다. 그리고 여기서도 찾기 기능(Ctrl + F) 기능으로 line-height 코드를 찾아 후  '1.25'로 설정이 되어 있는데 코드 값을 2에서 2.5 정도로 입력해 주시기 바랍니다.

수정 전 :   line-height: 1.25 / 수정 후 : line-height: 2.0

 
2) 개별 포스팅에서 수정 ( 1)을 수정했는데도 해결이 안되는 경우)

대부분 1)의 방법으로 HTML 태그를 수정하면 해당 문제가 개선 될 것입니다. 하지만 HTML 태그를 수정했음에도 동일한 문제가 발생하는 경우에는 사진 앞 뒤 그리고 글 문단 사이에 줄간격을 임의로 띄어줍니다. 해당 방법으로 했을 때도 대부분의 문제가 해결되는 것을 확인했습니다. 
 

모바일 사용 편의성 해결

 
저는 두 가지 문제에 대해서 1)의 HTML 태그 수정 후 다시 URL 검사를 해보니 모바일 사용 편의성 문제가 해결된 것을 확인 할 수 있었습니다. HTML 태그 수정을 통해서 쉽게 문제 해결을 하시기 바랍니다.
 
읽어주셔서 감사합니다. 그럼 이만 총총,,