2년 전 구글은 검색 결과에 모바일 친화적 웹사이트를 표시하는 라벨을 추가했습니다. 그 이후로 가볍고 모바일에 최적화된 웹사이트들이 검색 결과 상위를 차지해 왔죠. 최근에는 모바일 기기에서의 과도한 광고까지 제재하기 시작했고, 이제 마침내 '모바일 우선 인덱싱(mobile-first indexing)'이라는 다음 단계에 돌입했습니다. 모바일 우선 인덱싱이 본격화되면 모바일 친화적 웹사이트가 그 어느 때보다 강력하게 검색 결과를 지배하게 됩니다. 그만큼 모바일 최적화의 중요성이 그 어느 때보다 높아졌다는 뜻입니다.
이 글에서는 내 웹사이트가 모바일 친화적인지 확인하는 방법과, 워드프레스 사이트를 모바일 친화적으로 바꾸는 구체적인 방법까지 자세히 알아보겠습니다.
모바일 친화적 웹사이트의 조건이란?
2015년 4월 구글은 검색 엔진에서 모바일 친화적 웹사이트를 우선 노출하기 시작했고, 이는 웹 디자인 분야에 큰 전환점이 되었습니다. 모바일에 최적화되지 않은 사이트는 구글의 핵심 목표, 즉 사용자의 검색어에 기반해 빠르고 정확하며 접근성 높은 정보를 제공한다는 목표에 걸림돌이 되었기 때문입니다.
그렇다면 당시 구글이 해결하고자 했던 문제들은 무엇이었을까요?
- 읽기 어려운 텍스트: 확장성이 부족하면 사용자가 자연스럽게 아래로 스크롤하는 대신 좌우로 계속 화면을 넘겨가며 글을 읽어야 합니다.
- 플러그인 의존성: 플래시(Flash)와 자바(Java)는 보안 취약 등 여러 이유로 사라졌고, 모바일 미지원도 그 이유 중 하나였습니다. HTML5 등장 이전에는 동적 콘텐츠를 표시하려면 이런 플러그인에 의존해야 했지만, HTML5가 보편화되면서 플러그인은 불필요해졌고 모바일 기기에서도 지원되지 않게 되었습니다. 그 결과 구글은 검색 순위에서 이를 불이익 처리했습니다.
- 링크 간격 부족: 모바일 화면은 작기 때문에 서로 붙어 있는 링크를 누르다 보면 의도치 않게 다른 링크를 잘못 클릭하기 쉽습니다. 그래서 구글은 링크 간격을 넉넉히 둔 사이트를 선호합니다.
- 느린 로딩 속도: 마지막으로 로딩 속도입니다. 잘 최적화된 사이트라면 3G 수준의 모바일 환경에서도 빠르게 로딩되어야 합니다.
모바일 친화적 사이트를 만들고 싶다면 위 항목들을 피하는 것이 핵심입니다. 반응형 테마를 사용하면 가독성 문제를 자연스럽게 해결할 수 있고, 플러그인 남용과 링크 밀집만 피한다면 큰 어려움 없이 모바일 최적화를 달성할 수 있습니다.
워드프레스로 모바일 친화적 웹사이트 만들기
모바일 친화적 웹사이트를 만드는 가장 쉬운 방법 중 하나는 워드프레스를 활용하는 것입니다. 워드프레스는 전 세계 블로그와 뉴스 사이트에서 널리 사용되는 플랫폼으로, 다양한 커스텀 테마(기존 테마 수정은 물론 처음부터 직접 제작도 가능) 덕분에 웹 제작자에게 여전히 매력적인 선택지입니다. 수많은 워드프레스 테마가 모바일과 데스크톱 레이아웃을 모두 지원하며, 아래에서 추천 테마도 함께 소개하겠습니다.
우선 현재 사용 중인 테마가 모바일 친화적인지 확인하는 방법과, 모바일 브라우징 환경을 개선하는 방법부터 살펴보겠습니다.
내 테마는 모바일 친화적인가?
워드프레스 테마의 모바일 친화성을 확인하려면 홈페이지 URL을 구글 모바일 친화성 테스트 도구(Google Mobile-Friendly Test)에 입력해 보세요. 참고로 해당 도구는 현재 공식 지원이 종료되어, 최근에는 Google Search Console의 모바일 사용성 보고서나 PageSpeed Insights(Lighthouse)를 통해 동일하게 점검할 수 있습니다.
테스트를 통과했다면 문제없는 것입니다. 만약 통과하지 못했다면 워드프레스 사이트와 사용 중인 테마를 더 면밀히 점검해야 할 때입니다.
1단계: 워드프레스와 테마를 최신 버전으로 업데이트
당연하게 들리지만, 많은 웹마스터가 워드프레스 코어와 테마 업데이트를 놓치곤 합니다. 워드프레스 업데이트는 보통 관리자 화면 상단에 알림 배너로 표시되며, 해당 링크를 클릭해 바로 업데이트를 진행할 수 있습니다. 배너가 보이지 않는다면 '대시보드 → 업데이트'로 이동하면 됩니다.
테마를 업데이트하려면 '대시보드 → 외모 → 테마'로 이동한 뒤 '지금 업데이트'를 선택하세요. 다만 업데이트 전에 반드시 현재 테마를 백업해 두는 것이 좋습니다. 또한 차일드 테마(child theme)를 설정하지 않았다면 업데이트 과정에서 기존 커스터마이징이 모두 사라질 수 있습니다. 차일드 테마는 부모 테마의 모든 기능을 상속받는 하위 테마로, 업데이트할 때마다 수정 사항을 잃지 않고 안전하게 테마를 변경할 수 있게 해 줍니다.
업데이트를 마쳤다면 테스트 도구를 다시 실행해 보세요. 그래도 통과하지 못한다면 다음 단계로 넘어갑니다.
2단계: 문제 진단
사이트가 모바일 친화적이지 않다면 구글 도구가 원인을 알려주는 몇 가지 힌트를 제공합니다. 가장 흔한 문제는 작은 글씨 크기와 모바일 뷰포트(viewport) 미설정입니다. 글씨가 너무 작으면 사용자가 일일이 화면을 확대해야 하고, 모바일 뷰포트가 없는 페이지는 데스크톱 화면처럼 그대로 표시됩니다. 워드프레스 사이트가 모바일 친화적이지 않다면 대부분 이 두 가지가 원인입니다.
그 외에 도구가 지적할 수 있는 문제로는 느린 로딩 속도나 과도한 온페이지 플러그인이 있습니다. 자바나 플래시 같은 플러그인에 의존하지 말고, 동일한 기능이 필요하다면 HTML5로 대체하세요. 또한 화면을 가득 채우거나 팝업으로 뜨는 광고도 문제가 될 수 있습니다. 비침입형 광고만 사용하고, 워드프레스 테마에서 팝업을 허용하지 않는 것이 좋습니다.
3단계: 새 테마로 교체
아쉽게도 테마를 업데이트하고 불필요한 플러그인을 제거한 후에도 모바일 친화성 테스트를 통과하지 못한다면, 웹 디자인 전문 지식이 없는 한 기존 테마를 고치기란 쉽지 않습니다. 이 경우 가장 현실적인 선택은 모바일에 최적화된 새 테마로 교체하는 것입니다.
추천하는 워드프레스 모바일 친화적 테마
모바일 친화적 웹사이트 제작에 적합한 워드프레스 테마 몇 가지를 소개합니다. 모든 테마는 색상과 레이아웃을 자유롭게 커스터마이징해 자신만의 브랜드에 맞게 조정할 수 있습니다. 무료 테마를 중심으로 몇 가지 유료 테마도 함께 정리했습니다.
- Lola: 블로그 사이트에 적합한 무료 테마입니다. 오랜 텀블러 사용자라면 익숙하게 느껴질 디자인입니다.
- Newsmag: 매거진, 뉴스 사이트 등 격식 있는 콘텐츠 사이트를 위한 무료 테마입니다.
- Accelerate: 인기 있는 무료 워드프레스 테마로, 활용 범위가 넓지만 특히 예술 작품과 사진 중심 콘텐츠에 강점을 보입니다.
- Divi: 강력한 비주얼 에디터를 제공하는 유료 테마입니다. 코드를 다룰 필요 없이 색상과 레이아웃을 수정할 수 있어 사용이 쉽고, 다양한 콘텐츠 유형에도 유연하게 대응합니다.
- Uncode: 비주얼 에디터를 갖춘 유료 테마로, 깔끔하고 모던한 인터페이스에 초점을 맞춥니다. 다양한 화면 크기에서의 이미지 확대·축소에도 탁월합니다.
- Avada: 널리 사용되는 유료 테마로, 모든 종류의 사이트에서 활용되며 꾸준하고 잦은 업데이트가 이루어지는 것도 장점입니다.
마무리
이 글이 워드프레스로 모바일 친화적 웹사이트를 새로 만들거나, 기존 사이트의 모바일 최적화 상태를 점검하는 데 도움이 되길 바랍니다. 추천하고 싶은 테마가 있거나 같은 고민을 하고 있는 분들에게 나눌 팁이 있다면 아래 댓글로 의견을 들려주세요!