​​ 스킨 쿄체후 계속 늘어나는 모바일 친화성 오류

스킨 쿄체후 계속 늘어나는 모바일 친화성 오류

며칠 전 FastBoot 스킨에서 JB 스킨으로 갈아탄 뒤 올라오기 시작한 모바일 친화성 오류가 계속해서 증가하고 있습니다.

아래의 이미지는 구글 콘솔에서 스프레드시트로 오류 개수를 받아본 화면인데 스킨 교체 후 이전에 전혀 없었던 모바일 친화성 오류가 꾸준히 증가하고 있음을 보여줍니다.

 

현재의 상태는 76개의 오류를 보이고 있으며 내일이면 아마도 또 늘어나 있을 것 같습니다.

오류의 형태로 보아 개별 페이지 수정으로는 감당이 안될 것 같은데 도대체 스킨의 무엇이 문제를 일으키는 것인지 찾아내야 할 것으로 보입니다.

아래는 5월 2일 기준 구글 콘솔의 오류 출력화면입니다.

 

 

구글에서 이 오류에 대하여 언급하고 있는 주요 내용은 아래와 같습니다.

 

1. 데이터 정보

구글 콘솔 오류 표에는 최대 1,000행까지 데이터가 표시될 수 있습니다. 영향을 받은 페이지의 수가 1,000개 이상이거나, Google에서 문제를 감지하지 못했거나, 문제가 아주 최근에 발생했거나, 사용 편의성 점수 기준값을 초과한 페이지에서 문제가 발생한 경우 영향을 받은 페이지가 일부 표시되지 않을 수 있습니다.

 

보고서에는 다음 정보가 표시됩니다.

 

- 상태: 페이지는 다음 두 가지 상태로 표시됩니다.

오류: 페이지가 모바일 친화적이지 않음

유효: 페이지가 모바일 친화적임

- 페이지: 이 문제로 인해 오류 상태가 된 페이지 수입니다.

 

2. 페이지 상태에 관한 세부 정보

Google은 내부 모바일 사용 편의성 점수에 따라 페이지가 유효하거나 페이지에 오류가 있다고 표시합니다.

이 점수는 문제의 수와 상대적인 심각도에 따라 계산됩니다.

 

- 오류는 페이지가 최소 모바일 사용 편의성 수준에 미치지 못한다는 뜻입니다. 페이지가 오류 상태가 되면 이에 영향을 미치는 모든 모바일 사용 편의성 문제의 세부 정보 페이지에 표시됩니다.

- 유효 상태는 페이지가 최소 모바일 사용 편의성 수준을 충족하지만, 이 보고서에 표시된 페이지로 인해 발생하지 않은 일부 모바일 사용 편의성 문제가 있을 수도 있다는 뜻입니다. 유효한 페이지에서 모바일 사용 편의성 문제를 모두 없애고 싶다면 모바일 친화성 테스트 도구를 사용하여 테스트해야 합니다.

 

3. 오류의 영향을 받는 페이지의 수

유효한 상태에 있는 페이지는 문제의 영향을 받는 페이지 수에 포함되지 않습니다. 유효한 페이지는 문제의 영향을 받는 페이지 목록에도 표시되지 않습니다. 오류 상태인 페이지만 문제의 영향을 받는 페이지 수로 계산되며, 영향을 받는 페이지 목록에 표시됩니다.

 

페이지가 2개인 다음 시나리오를 살펴보세요.

 

1번 페이지는 A와 B 문제로 인해 영향을 받았지만 모바일 사용 편의성 점수가 유효 기준값 이상이므로 유효하다고 표시되었습니다.

B, C, D 문제로 인해 영향을 받은 2번 페이지는 모바일 사용 편의성 점수가 유효 기준값 미만이므로 오류가 있다고 표시되었습니다.

 

그러면 다음과 같이 계산됩니다.

- A 문제로 인해 영향을 받은 페이지 수는 0입니다.

- B, C, D 문제로 인해 영향을 받은 페이지 수는 1입니다.

- B 문제의 영향을 받았다고 표시되는 페이지는 2번 페이지입니다.

 

4. 문제의 우선순위 지정 및 수정

 

- 요약 보고서 페이지에서 문제는 유효성 검사 상태와 영향을 받은 페이지 수의 조합을 기준으로 정렬되며, 문제를 해결할 때는 이 기본 순서대로 하는 것이 좋습니다. 템플릿이 잘못된 경우와 같이 일반적인 원인으로 인한 오류를 먼저 해결한 다음 덜 일반적인 문제를 해결하세요.

 

- 같은 오류가 여러 번 발생한 것이 전체 오류 수 증가의 주된 원인인지 확인합니다. 즉, 표에서 문제 하나에 급격한 증가가 있는지 찾아봅니다. 오류 유형 및 디버깅 오류 급증에 관한 아래 정보를 확인하세요.

 

- 표에서 행을 선택하여 오류 세부정보 페이지를 확인합니다.

세부정보 페이지에는 영향을 받은 URL 샘플이 표시됩니다. 이 목록에는 행 1,000개만 표시될 수 있기 때문에 완전하지 않은 경우도 있어서 이 오류의 최근에 발견된 사례는 포함되지 않을 수도 있습니다.

자세히 알아보기를 선택하여 올바른 구문과 관련된 공식 문서를 받아봅니다.

표에서 영향을 받은 URL을 선택하여 모바일 사용 편의성 문제 수를 비롯하여 자세한 정보가 포함된 패널을 열고, 검사 링크를 열어 색인 생성된 페이지 버전을 기준으로 URL 검사 도구를 실행한 다음, 서비스 중인 버전 테스트 링크를 열어 이 페이지에서 모바일 친화성 테스트를 실행합니다.

오류가 서비스 중인 페이지에서 해결되었어도 수정된 이후 재크롤링되지 않은 경우에는 여전히 모바일 사용 편의성 보고서에 표시될 수 있습니다. 이 경우에는 문제의 모든 사례를 해결한 후 유효성 검사를 요청하세요.

 

- 사이트에서 문제의 모든 사례를 해결하고 수정사항을 테스트한 후 수정사항이 웹에 게시되었는지 확인합니다.

- 문제 세부 정보 페이지로 돌아가서 '확인 및 Google에 알림' 버튼을 클릭하여 확인 프로세스를 시작합니다. 이 프로세스는 즉시 완료되지 않습니다. 유효성 검사 프로세스에 관해 알아보려면 유효성 검사 정보를 참조하세요.

- 오류 수정을 계속합니다.

 

5. 디버깅 오류 급증

심각도가 바뀌는 페이지 그룹 때문에 오류가 급증한 것인지 확인합니다.

 

- 오류가 급증한 만큼 다른 상태(오류 또는 유효)에서 감소가 있었는지 확인합니다.

- 상응하는 분량의 감소가 있는 경우 두 URL이 동일한지 확인합니다.

- URL의 상태가 바뀐 경우에는 어떤 변경 사항 때문에 상태가 변경된 것인지 확인합니다.

 

사이트의 여러 페이지에서 사용하는 템플릿에 오류가 발생한 경우에 가장 일반적으로 오류가 급증합니다.

 

6. 오류


모바일 사용 편의성 보고서에 표시될 수 있는 오류의 유형은 다음과 같습니다.

- 호환되지 않는 플러그인 사용
페이지에 Flash와 같이 대부분의 모바일 브라우저에서 지원되지 않는 플러그인이 포함되어 있습니다. HTML5와 같이 널리 지원되는 최신 웹 기술을 사용하여 페이지를 다시 설계하시는 것이 좋습니다. 웹 애니메이션 가이드라인에 관해 자세히 알아보기

- 표시 영역이 설정되지 않음
화면 크기에 맞게 페이지의 크기 및 배율을 조정하는 방법을 브라우저에 알리는 viewport 속성이 페이지에 정의되어 있지 않습니다. 사이트 방문자는 대형 데스크톱 모니터부터 태블릿 및 작은 스마트폰에 이르기까지 화면 크기가 다양한 여러 기기를 사용하므로 페이지에 meta viewport 태그를 사용하여 표시 영역을 지정해야 합니다. 반응형 웹 디자인 기본사항에서 자세히 알아보기

- 표시 영역이 '기기 폭'으로 설정되어 있지 않음
페이지에 고정폭 viewport 속성이 정의되어 있어 다른 화면 크기에 맞게 페이지를 조정할 수 없습니다. 이 오류를 수정하려면 사이트의 페이지에 반응형 디자인을 도입하고 표시 영역이 기기의 너비와 배율에 적절하게 일치하도록 설정합니다. 올바르게 표시 영역을 설정하는 방법을 알아보세요.

- 콘텐츠 폭이 화면 폭보다 넓음
이 보고서에는 수평으로 스크롤해야 페이지의 글자와 이미지를 볼 수 있는 페이지가 표시됩니다. 이는 페이지가 CSS 선언에서 절댓값을 사용하거나 특정 브라우저 너비(예: 980픽셀)에서 최적의 상태로 표시되도록 설계된 이미지를 사용할 때 발생합니다. 이 오류를 수정하려면 페이지에서 CSS 요소에 관련된 너비 및 위치 값을 사용할 뿐만 아니라 이미지도 배율을 조정할 수 있어야 합니다. 표시 영역에 맞게 콘텐츠 크기 조정에 관해 자세히 알아보세요.

- 텍스트가 너무 작아 읽을 수 없음
이 보고서에서는 페이지의 글꼴 크기가 너무 작아 알아보기 어렵기 때문에 모바일 방문자가 '손가락으로 확대'해야만 읽을 수 있는 페이지를 파악합니다. 웹페이지의 표시 영역을 지정한 후 글꼴 크기를 설정하여 표시 영역 내에서 적절하게 조정합니다. 눈에 잘 들어오는 글꼴 크기 사용에서 글꼴 크기 권장사항에 관해 자세히 알아보세요.

- 클릭할 수 있는 요소가 서로 너무 가까움
이 보고서에는 버튼과 탐색 링크 등의 터치 요소가 서로 너무 가까이에 있어 모바일 사용자가 원하는 요소를 손가락으로 탭 하려고 할 때 바로 옆에 있는 요소도 함께 탭 하게 되는 사이트의 URL이 표시됩니다. 이러한 오류를 수정하려면 버튼과 탐색 링크의 크기와 공간을 모바일 방문자에게 맞게 올바르게 지정해야 합니다. 

 

7. 유효성 검사

사이트의 오류를 수정한 후 Google에 수정한 페이지를 다시 크롤링하도록 요청하세요. 아래 섹션을 펼쳐 세부 정보를 확인하시기 바랍니다.

 

8. 오류의 해결을 위해 무엇을 해야 할까?

이상의 7번 항목까지가 구글에서 모바일 친화성 오류에 관하여 언급한 주요 내용입니다.

그렇다면, 내가 이 문제를 해결하기 위해 어디부터 손대야 할까요?

차근차근 하나씩 검토해 보기로 하였습니다.

 

- 클릭할 수 있는 요소가 너무 가까움 오류와 관련하여는 뷰포트가 메타태그로 헤드 영역에 표시되어 있는지 부터 살펴보았습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 메타태그는 서로 다른 기기에서 기기의 뷰포트 크기에 맞게 100% 출력되게 조절하라는 명령어입니다.

티스토리 헤드 영역을 살펴보니 이상 없이 잘 들어가 있었습니다. 뷰포트의 문제는 아닌 것 같았습니다.

 

- 구글 콘솔에서 오류에 관하여 엑셀로 내보내기를 받아 테이블 탭을 보니 구글에서 우선순위를 메긴 페이지들이 보였습니다.

특이점은 대부분의 페이지들이 구에디터로 작성되었던 페이지라는 것 그리고 스킨 변경 후 모든 문제들이 보고되었다는 점에서 초점을 두고 공략해야 할 것 같습니다.

엑셀에서 가장 상위에 있던 313번 페이지를 먼저 검토해 보았습니다.

 

최상위 검토 필요 에러 페이지

 

그리고 생각되는 모든 것에 손을 대보았습니다.

 

첫 번째 수정사항은 신에디터로 변경하는 과정에서 발견하여 삭제했습니다.

구에디터로 작성된 문장이므로 신에디터로 변환했습니다. 구에디터로 불러와진 화면에서 html 보기 탭을 클릭하면 새로운 에디터에서 다시 편집하겠냐고 물어봅니다. 이때 예를 눌러주면 변환됩니다.

변환하자 이상한 점이 들어오더군요.

 

삽입했던 광고 코드가 일반 영역으로 노출되어 보이고 있었습니다.

이건 분명히 잘못된 것인데 말이죠. 

 

기본 모드에서 돌출된 html 코드

구에디터를 신버전 에디터로 변환해서 편집하기를 누르면 기존에 수동으로 삽입했던 광고 코드는 고유 번호가 풀어져 버리고 광고 코드의 앞과 뒤만 노출 되었습니다.

문제의 소지로 의심될 만한 모든 것을 제거하려고 하므로 아예 수동 코드 앞뒤만 남아 있는 것까지 깨끗하게 삭제하였습니다.

 

잘못 삽입한 구글 광고 코드

두 번째 수정사항으로 삽입된 이미지의 크기들을 모두 조금 줄여주었습니다. 이 부분은 의심이 가지는 않지만 원인을 찾아야 하기에 모든 이미지 크기를 기존의 가로 800에서 가로 600으로 줄였습니다.

 

세 번째 수정사항으로 태그 중 띄어쓰기가 되어 있거나 너무 긴 태그들은 모두 삭제하고 짧은 태그들만 남겨 두었습니다.

 

네 번째 구에디터에서 작성되었던 글을 신에디터에서 불러오니 유튜브 삽입 부분이 좌측 정렬되어 있었습니다.

 

티스토리에서 좌측정렬된 유튜브

html 모드에서 해당 코드를 다음과 같이 수정해 주었습니다.

이 부분도 에러의 원인이라고 보기는 힘들지만 수정해주고 넘어갔습니다.

<변경전>
< style="text-align: center;">

<변경후>
<align="center">

변경된 코드 이미지는 아래와 같습니다.

 

수정된 유튜브 정렬 코드

코드를 변경하고 기본 모드에서 아래와 같이 정상적으로 중앙 정렬됨을 확인하였습니다.

 

더 이상은 의심이 가는 요소를 찾기 힘들어 마지막으로 맞춤법 검사를 해주고 재발행하여 주었습니다.

일단, 이런 식으로 문제 되는 실제 발행 페이지는 모두 검토해 볼 생각이지만 엑셀로 받아본 구글 콘솔의 보고서에서는 오류 페이지 목록에 tag페이지라던가 심지어는 방명록 페이지까지 있어 참 머리가 복잡해집니다.

 

오류를 계속해서 수정해 나가면서 특이상황이 있을 경우 포스팅할 생각입니다.

 

댓글

Designed by JB FACTORY