워드프레스를 서치콘솔에 연결한후 모바일 사용 편의성 오류가 2가지 발생하였습니다. 텍스트가 너무 작아 읽을 수 없음과 클릭할 수 있는 요소가 서로 너무 가까움 두가지의 문제점이 발생하였고 티스토리 블로그를 할때 문제 해결 방법으로 해보니 문제가 바로 없어지지 않아 메타태그를 수정도 같이 하였습니다.
모바일 사용 편의성 문제 해결 방법 3가지
- 텍스트가 너무 작아 읽을 수 없음 – 텍스트 크기를 키워준다.
- 클릭할 수 있는 요소가 서로 너무 가까움 – 이미지와 글자 사이 간격을 넓혀준다.
- 모바일 반응형 메타태그를 추가한다.
위의 두가지는 티스토리 블로그를 할때문제를 해결한 방법입니다. 워드프레스는 티스토리와 달라서 위의 문제 해결방법으로도 바로 해결되지가 않아서 메타태그를 수정하는것도 같이 하였습니다.
하루가 지나서 아침에 확인해보니 모바일 사용 편의성 문제가 깔끔하게 해결되어있네요.
텍스트가 너무 작아 읽을 수 없음
모바일 사용 편의성 문제중 텍스트가 너무 작아 읽을 수 없음은 텍스트 크기를 키워주면 됩니다. 저는 보통 17, 18px 정도로 키워주었습니다. 외모에서 사용자정의하기에서 폰트사이즈 변경을 하거나 로켓폰트 사용시 설정에서 로켓폰트 텍스트 크기를 크게 설정할수 있습니다.
클릭할 수 있는 요소가 서로 너무 가까움
이부분은 티스토리 블로그 사용시 글과 사진 사이에 엔터키를 두세번정도 눌러서 두세줄정도의 간격을 두었는데 워드프레스에서는 그게 되지 않네요. shift + enter 를 누르면 br태그가 생기면서 간격을 줄 수있지만 티스토리에서는 br태그를 쓰지 않았던 터라 다른 방법을 사용했습니다.
외모에서 사용자정의하기로 들어가 추가 CSS 에 아래의 코드를 넣었습니다. 이미지 위 아래에 100px 의 여백을 주는것으로 하였습니다. 이렇게 하지 않으면 이미지와 글자가 딱 붙어버리기 때문에 보기 좋을 만큼의 여백을 넣어주었습니다.
.single .wp-block-image {margin-bottom: 100px; margin-top: 100px;}
이렇게 두가지를 수정 하여도 모바일 사용 편의성이 바로 해결되지는 않았습니다. 티스토리 블로그를 할때엔 수정하고 바로 해결이 되었던것 같은데 하루가 걸리는 일인지는 모르겠습니다. 어쨋든 수정한날 바로 해결되지 않아 아래의 메타태그를 넣는 방법도 해주었습니다.
모바일 사용 편의성 반응형 메타태그 입력하기
메타태그는 외모에서 태마파일 편집기로 들어가 테마 헤더에 입력하였습니다. 아래의 코드는 모바일 기기에서 웹페이지를 반응형으로 하는데 사용됩니다.
- meta name=”viewport”
- content=”width=device-width 뷰포트의 너비를 기기의 화면 너비로 설정
- intial-scale=1 뷰포트의 초기 확대 비율을 100% 설정
- maximum-scale=1 뷰포트 최대 확대 비율을 100% 설정
- user-scalable=no 사용자 확대를 비활성화
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
여기까지 설정후 다음날 검사를 해보니 모두 통과 되었습니다. 서치콘솔에서 이제 더이상 모바일 사용 편의성에 대한 보고서 지원을 하지않는다고 하네요. 그래도 설정은 해두는 편이 좋을것 같습니다.
외모의 테마 파일 편집기가 보이지 않는다면 아래의 포스팅을 확인해주세요
테마 파일 편집기 꺼내는 방법 보기