워드프레스 GeneratePress 테마: 모바일 사용 편의성 문제

워드프레스나 티스토리 등 블로그를 운영하는 경우 구글 서치 콘솔의 모바일 사용 편의성 섹션에 모바일 사용 편의성(모바일 미지원 페이지) 경고가 표시되는 경우가 있습니다. 이 블로그에는 GeneratePress 테마가 설치되어 있는데, 글 하나에서 이러한 오류가 발생했지만 검토를 요청하니 에러가 사라졌습니다.

워드프레스 GeneratePress 테마: 모바일 사용 편의성 문제

검토를 요청해도 에러가 사라지지 않으면 해당 문제를 파악하여 시정해 주어야 합니다. GeneratePress 테마를 사용하는 경우에 해결 방법에 대하여 살펴보시겠습니다. 다른 테마에서도 비슷한 방법으로 해결이 가능할 것입니다.

워드프레스 GeneratePress 테마: 모바일 사용 편의성 문제

모바일 사용 편의성 문제가 나타나는 경우 보통 다음 두 가지 에러가 표시될 것입니다.

  • 텍스트가 너무 작아 읽을 수 없음
  • 클릭할 수 있는 요소가 서로 너무 가까움

이 경고가 표시되면 모바일에서 해당 페이지나 포스트를 살펴보면서 위의 두 가지 문제의 원인이 될 만한 곳을 찾도록 합니다.

텍스트가 너무 작아서 모바일에서 읽기에 힘든 부분이 있나요? 그런 부분이 있다면 해당 텍스트 크기를 늘리면 문제가 해결될 것입니다.

클릭할 수 있는 요소가 너무 가까우면 방문자가 링크를 잘못 클릭할 수 있습니다. 이 부분도 텍스트 크기가 너무 작은 것과 연관이 있을 수도 있습니다. 예를 들어, 여러 개의 링크로 되어 있는 부분의 텍스트 크기가 너무 작을 경우가 여기에 해당합니다.

이외에도 행간(Line-height)이 너무 좁다면 행간을 늘리는 것을 고려할 수 있습니다.

GeneratePress 테마에서 개별 글(포스트)에 태그와 카테고리를 표시한다면 태그와 카테고리 글자 크기가 너무 작을 수 있습니다.

워드프레스 GeneratePress 테마 카테고리 태그 글자가 너무 작음

위의 표시된 부분인데요. 모바일에서 보면 실제로 글자가 너무 작습니다. 이 경우 두 가지 방법을 생각할 수 있습니다.

  1. 카테고리와 태그 항목을 표시하지 않음
  2. 카테고리, 태그 항목의 글자를 키움

GeneratePress 유료 버전을 사용하는 경우 워드프레스 관리자 알림판 » 외모 » 사용자 정의하기 » Layout » Blog » Content 섹션 » Single 탭에서 Display post categoriesDisplay post tags 항목의 선택을 해제합니다.

워드프레스 GeneratePress 테마: 모바일 사용 편의성 문제 2

위의 방법으로 작동하지 않거나 무료 버전을 사용하는 경우에는 다음 CSS 코드를 사용하여 숨길 수 있습니다.

/* 싱글 포스트 카테고리, 태그 숨기기 */
/* Hide post categories and post tags in WordPress GeneratePress theme */

@media (max-width: 768px) {
.single .entry-meta, .single .entry-meta a {
     display:none;
}
}

태그와 카테고리를 유지하고 싶은 경우 글자 크기를 키울 수 있습니다. 예시:

/* 모바일 기기에서 싱글 포스트 카테고리, 태그 텍스트 크기 조정하기  */
/* Adjust the text size of post categories and post tags in mobile devices */

@media (max-width: 768px) {
.single .entry-meta, .single .entry-meta a {
     font-size: .90rem; /* 적절히 조정 */
}
}

상기 코드들은 CSS 미디어 쿼리를 사용하여 모바일 기기 해상도에만 적용되도록 했습니다.

어쩌면 사용자 정의하기의 Typography 섹션에서 이러한 항목들의 글자 크기를 조정하는 옵션이 있을 수도 있습니다. 만약 타이포그래피 설정에서 조정이 가능하다면 직접 텍스트 사이즈를 지정하시기 바랍니다.

기본적인 CSS는 그리 어렵지 않고 익히는 데 시간이 많이 소요되지 않으므로, 잠시 시간을 투자하여 CSS를 배우시면 이런 미세 조정을 하는 데 많은 도움이 될 것입니다.

카테고리, 태그 항목들의 글자 크기를 키워도 해결이 안 되면, 모바일에서 카테고리와 태그 항목을 숨기면 많은 경우 모바일 편의성 문제가 해결될 것입니다.

마치며

이상으로 워드프레스 GeneratePress 테마에서 모바일 사용 편의성 문제가 발생하는 경우 대처하는 방법에 대하여 살펴보았습니다. 제너레이트프레스 테마에서 태그와 카테고리 메타 정보를 표시하도록 설정한 경우 글자 크기를 늘리거나 카테고리와 태그를 제거하면 문제가 해결될 가능성이 높을 것입니다.

모바일 사용 편의성 문제는 SEO에 영향을 미칠 수 있으므로 원인을 파악하여 조치를 취해 보시기 바랍니다.

참고


4개 댓글

  1. 무료 버전인 외모 > 사용자 정의하기 > 추가 CSS에 코드를 추가하세요.
    >여기에 추가해도 그래로인데 코드가 틀린거 아닐까요?

    1. 이 블로그에 현재 위에 제시된 코드가 사용되고 있습니다. 잘 안 되는 경우
      1) 캐시 플러그인의 캐시를 삭제하시고 브라우저 캐시도 삭제해보세요.
      클라우드웨이즈의 경우 서버 캐시도 삭제하세요: https://avada.tistory.com/2947

      2) 그래도 안 된다면 요소 검사를 실시하여 정확한 코드를 확인해보시기 바랍니다.
      CSS는 어렵지 않습니다. 단순히 코드 문제가 아니라, 해당 코드를 어떻게 찾는지에 대해 익혀보시기 바랍니다.

      다음 글을 참고해보세요:

      https://cafe.naver.com/wphomepage/16730

  2. 블로그 유용한 정보 잘 봤습니다.
    무료버전 이용자는 추가 css에 넣었는데 동일한 현상인데
    css 어디에 넣어야하나여?

댓글 남기기

* 이메일 주소는 공개되지 않습니다.