워드프레스 사이트가 PC에서 모바일 버전이 표시되는 문제

워드프레스 사이트는 반응형으로 작동하여 PC와 태블릿, 모바일 등 기기 해상도에 따라 해당 기기에 맞게 레이아웃이 변합니다. 가령, PC에서는 3열로 표시되는 포스트들이 모바일에서는 1열로 표시될 수 있습니다. 매우 드물지만 워드프레스 사이트가 일부 PC에서 모바일 버전이 표시되는 문제가 나타나는 경우가 있습니다. 이 문제가 발생하는 경우 확인 사항을 살펴보도록 하겠습니다.

워드프레스 사이트가 PC에서 모바일 버전이 표시되는 문제가 발생 시 확인 사항

워드프레스 관련 네이버 카페에 뉴스페이퍼 테마로 구축한 웹사이트에서 특정 PC에서만 모바일용 웹페이지 화면이 나타나는 문제에 관한 질문이 올라와서 이 문제를 살펴본 적이 있습니다.

자주 가는 카페에서 무선 인터넷으로 연결 후, 구축해 놓은 웹사이트를 방문했는데, 데스크탑용 웹 페이지가 아닌, 모바일용 웹 페이지가 나옵니다.

이와 같은 문제는 캐시 플러그인과 관련되었을 가능성이 높습니다. WP Super Cache 포럼의 "Access it on the PC, shows a mobile page"에서 비슷한 문제를 다루고 있습니다.

문제의 원인은 플러그인에서 사용하는 모바일 감지(Mobile Detection) 기능이 너무 오래된 것이어서 일부 기기에서 모바일 기기와 PC 기기를 제대로 감지하지 못해서 발생하는 것으로 보입니다.

워드프레스 인기 캐시 플러그인인 WP Super Cache를 사용하는 경우 다음과 같이 설정하여 문제가 해결되는지 체크해보시기 바랍니다.

Advanced 탭에서...

1. Cache Delivery Method를 Export로 설정합니다. 
2. 로그인 사용자에 대한 캐싱을 비활성화로 설정합니다: Disable caching for logged in visitors. (Recommended)
3. Mischellaneous에서 Compress pages so they’re served more quickly to visitors. (Recommended)를 체크합니다.
4. Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated. (Recommended)를 체크합니다.
5. Advanced 섹션의 Mobile device support. 및 Extra home page checks 옵션을 선택합니다.

.htaccess 파일이 업데이트된다는 경고가 표시될 것입니다. 워드프레스 사이트의 퍼미션이 올바른 경우 버튼을 누르면 WP Super Cache에서 알아서 .htaccess 파일을 업데이트합니다. 퍼미션에 문제가 있는 경우에는 수동으로 업데이트해야 합니다. .htaccess 파일 수정 방법은 여기를 참고해보세요.

.htaccess 파일이 새로운 규칙으로 업데이트되었다면 캐시를 삭제하시기 바랍니다. 그러면 사이트가 정상화될 것입니다.  이와 같이 설정하면 WP Super Cache는 사이트에 각 페이지에 대하여 2가지 버전을 생성하게 됩니다: 데스크톱 버전과 모바일 버전.

캐시 플러그인 문제가 아닌 경우

WP Super Cache 플러그인이 설치되어 있지 않다면 다른 플러그인이 문제를 일으킬 수 있습니다. 모든 플러그인을 비활성화한 후에 문제가 해결되는지 체크해보시기 바랍니다.

모든 플러그인을 비활성화한 후에 사이트가 정상화되면 플러그인 중에서 문제를 일으키는 것이 있습니다. 플러그인을 하나씩 활성화하면서 충돌을 야기하는 플러그인을 찾을 수 있습니다.

Autoptimize와 같은 최적화 플러그인을 잘못 설정해서 이런 문제가 발생할 수도 있으므로 먼저는 이런 플러그인부터 체크해보세요.

그리고 일부 테마에서도 캐시 기능을 제공하기도 합니다. 테마에 캐시 기능이 있는 경우 테마의 캐싱 기능을 비활성화하여 테스트해보시기 바랍니다. 예를 들어, 베스트셀링 테마인 아바다 테마를 사용하는 경우 Avada > Performance에서 캐시와 Minify 관련 기능이 제공됩니다. 이러한 기능을 해제한 후에 문제가 해결되는지 체크해볼 수 있습니다.

주의해야 할 사항은 캐시 플러그인과 최적화 플러그인을 사용하는 경우, 기능이 중복되도록 설정해서는 안 된다는 점입니다. 속도 향상에 좋은 기능이라고 해서 중복으로 세팅하면 오히려 사이트 속도가 느려질 수 있고, 예상치 못한 오류가 발생하기도 합니다.

위의 그림은 아바다 테마의 Performance 섹션을 보여주는데요. Enable Gzip Compression이나 Combile Third Party CSS Files 옵션을 활성화할 때에는 다른 플러그인에서 이런 기능이 활성화되어 있지 않은지 확인하여 이러한 기능의 사용을 결정하시기 바랍니다. 

가령, 캐시 플러그인에서 CSS 파일을 압축하는 기능(Minify)을 활성화했다면 아바다 테마에서는 Combile Third Party CSS Files 옵션을 비활성화해야 합니다.

참고

https://avada.tistory.com/2241

워드프레스 GeneratePress 테마: 구글 페이지 스피드 인사이트 점수

https://avada.tistory.com/2513

워드프레스 사이트 속도 향상을 위한 Clearfy 플러그인 세팅 예시