페이지가 모바일 친화적이지 않음 문제 해결
오늘은 구글 서치 콘솔에서 '페이지가 모바일 친화적이지 않음' 오류를 해결하는
주제로 포스팅을 진행해보도록 하겠습니다!
0. 페이지가 모바일 친화적이지 않음
어느 때와 같이 Google Serach Console에서 새로운 포스팅을 구글 검색에 등록하기 위해 URL 검사를 하던 중 모바일 편의성 (페이지가 모바일 친화적이지 않음)에 문제가 생겼다는 경고가 떴습니다. 초보 블로거인 저는 이런 버그를 접하게 된 것이 처음이었기때문에 매우 당황하였습니다.
1. 구글 검색
일단 처음 겪는 블로그 오류니까 다른 분들의 티스토리 포스팅을 찾보면서 '콘텐츠 폭이 화면 폭보다 넓음', '클릭할 수 있는 요소가 서로 너무 가까움', '텍스트가 너무 작아 읽을 수 없음' 구글 서치 콘솔에서 제시한 문제들을 찾아보았습니다. 블로그에 나와있는 문제 해결 방법, HTML과 CSS 수정도 해보았지만 모두 실패했습니다.
2. 스킨 문제
저는 아미넴님의 미넴 스킨을 사용하고 있습니다.
티스토리 무료 최강 미넴 스킨 소개 및 설치 방법
기본 제공 스킨을 나름대로 고쳐 쓰다가 만족하지 못하고 그냥 새로 만들었습니다. 여태까지 블로그를 하면서 적용한 많은 기능들을 대부분 포함하였으니 누군가에게는 상당히 유용한 스킨이
sangminem.tistory.com
혹시나 이 스킨에서 모바일 최적화에 오류가 생겨 문제가 발생한 것이 아닐까 하여 스킨을 다시 설치해보기로 결심했습니다. 일단 정식 티스토리 유저스킨 사이트에 들어가서 다른 분들의 스킨으로 변경해보았습니다.
TISTORY
나를 표현하는 블로그를 만들어보세요.
www.tistory.com
하지만 이것마저도 해결 실패했습니다.
3. 가로 스크롤 문제
반쯤 포기하고 글을 작성하려보니까 작성 칸 아래에 가로 스크롤이 생겨있다는 것을 눈치챘습니다. 원래는 왼쪽 사진처럼 없어야 되는데 말이죠...
그래서 문제가 발생하고 있다는 모바일 플랫폼으로 접속을 해보았습니다. 들어가보니 오른쪽 흰색 여백이 생겨 가로 폭이 넓어지고 글씨도 작아져서 오류의 문제점이라는 것을 이해할 수 있었습니다.
4. 임시방편
위의 문제가 제가 썼던 모든 글에서 저러는 것을 보니까 멘붕이 오더라구요. ㅠㅠ 문제점을 찾았으나 아직 해결하는 방법을 찾지 못했습니다. 그래서 여러 가지 방법을 시도해보니까 글을 전체로 선택해서 복사(Ctrl+C)하고
백스페이스(←)로 삭제하니까 가로 스크롤이 없어지더라구요! 그래서 일일이 복사하고 지우기를 반복했습니다.. ㅠㅠ
5. 문제 해결
혹시나 확장 프로그램 중 한개가 문제를 발생했을까 생각해보고 하나씩 지워보니까 이 확장 프로그램을 삭제했을 때 오류가 해결되었습니다! 이 확장 프로그램은 나중에 확장 프로그램 추천할 때 같이 추천드리려는 마우스를 올려놓으면 자동으로 번역이 되는 프로그램이었는데 아마 텍스트나 인코딩을 다른 식으로 바꿔주면서 가로 스크롤 같은 오류가 생긴 거 같습니다.
etc. 결론
지금은 다행히 오류가 모두 해결되었습니다. 초보 블로거라 모르는 거 투성이인데 새로운 글을 쓸때도 가로 스크롤이 생기니까 많이 짜증이 나더라고요... ㅡ.ㅡ 심지어 임시방편으로 포스팅 하나씩 백스페이스를 눌러서 가로 스크롤을 없앴는데 서식에 가로 스크롤이 있어서 포스팅에도 가로 스크롤이 생겨 복사하고 지우는 것을 반복하면서 변경했어야만 했습니다... 처음에는 애드센스의 가로 폭 때문에 가로 스크롤이 생기거나 HTML, CSS 문제일 줄 알았는데 확장 프로그램의 오류일지는 전혀 몰랐습니다. 저처럼 이런 버그가 생기신 분들은 혹시나 웹을 사용할 때 영향을 미치는 프로그램을 확인하시고 HTML, CSS, 애드센스 칸 등을 편집하시는 것을 추천드립니다!
이렇게 해서 마무리하도록 하겠습니다.
읽어주셔서 감사합니다. 오늘도 좋은 하루 되시고 건강하세요! See you next illusion!
