WordPress 사이트를 모바일 친화적으로 만드는 방법

게시 됨: 2023-02-12

모바일 친화적인 WordPress 사이트가 새로운 표준이라는 것은 비밀이 아닙니다. 그러나 이러한 사이트가 얼마나 일반적으로 보일 수 있음에도 불구하고 아름답고 반응이 빠른 사이트를 만드는 데 약간의 작업이 필요할 수 있습니다. 이 가이드는 모바일 친화적인 사이트를 갖는 것이 왜 중요한지, WordPress에서 사이트를 구축하는 방법을 이해하는 데 도움이 되며 반응형 사이트를 만드는 데 가장 적합한 도구를 소개합니다.

WordPress 사이트를 모바일 친화적으로 만들려면 다음이 필요합니다.

  1. 반응형 웹 디자인이 중요한 이유 이해
  2. Google 모바일 친화성 테스트에 응시하세요.
  3. 반응형 WordPress 테마 사용(또는 직접 생성)
  4. 모바일 친화적인 WordPress 플러그인 고려
  5. 모바일 친화적인 옵트인 사용
  6. 반응형 미디어 관점에서 생각하기
  7. 사이트 성능 우선 순위 지정

준비가 된? 다이빙하자!

1. 모바일 친화적인 사이트가 중요한 이유는 무엇입니까?

2019년 4분기 Google 검색의 61%가 휴대기기에서 발생했습니다. 즉, 인구의 절반 이상이 기존 데스크톱 기기보다 휴대전화와 태블릿으로 전환하고 있으므로 이러한 추세를 따라잡으려면 웹사이트가 모든 화면 크기에 표시될 준비가 되어 있어야 합니다. 모바일 친화적인 디자인은 긍정적인 사용자 경험을 제공하고 사용자가 이동 중에 원하는 것을 찾는 데 도움이 됩니다.

UX 외에도 사이트가 모바일 친화적이어야 하는 또 다른 중요한 이유가 있습니다. 바로 Google입니다. 2015년("Mobilegeddon"의 해)부터 Google은 "모바일 친화적"으로 간주되는 사이트에 보상을 제공하기 위해 검색 알고리즘을 대대적으로 개편했습니다. 변경 사항은 하나의 중요한 데이터 포인트로 귀결되었습니다: 귀하의 웹사이트가 반응하는지 여부입니다.

즉, 사이트가 모바일 장치에서 잘 읽히면 그렇지 않은 사이트보다 검색 결과에서 더 나은 성능을 발휘할 것입니다. 모바일 친화적인 사이트를 만들기 위한 작업을 완료했다면 정말 좋은 혜택입니다! 그러나 작은 화면에 표시하는 작업에 적합하지 않은 경우 사이트 트래픽에 해를 끼칠 수도 있습니다.

다행스럽게도 귀하의 WordPress 사이트가 아직 모바일 친화적이지 않은 경우 속도를 높이고 완벽하게 작동하는 반응형 사이트를 구축하는 데 도움이 되는 많은 도구가 있습니다. 첫 번째 단계? 현재 디자인을 벤치마킹하십시오.

2. 모바일 친화성 테스트 받기

귀하의 웹 사이트는 하나의 모바일 장치(예: 개인 휴대 전화)에서 멋지게 보일 수 있지만 실제로 반응이 좋은지 확인하려면 다양한 화면 크기에서 테스트해야 합니다. 주변에 오래된 전화기가 많이 있어도 모든 화면에서 테스트하는 데 시간이 많이 걸릴 수 있습니다.

작업을 단순화하기 위해 Google은 귀하의 사이트가 "모바일 친화적"인지 여부를 알려주는 무료 모바일 친화적 테스트 도구를 우리 모두에게 선물했습니다. 사이트의 모바일 디자인을 빠르게 평가하려면 사이트의 URL을 입력하기만 하면 됩니다. 웹사이트가 모바일 장치에 완전히 최적화되어 있으면 다음과 같은 열광적인 작은 성공 메시지를 받게 됩니다.

빨간색이 표시되면 할 일이 조금 있는 것입니다. (잠시 후에 설명하겠습니다!)

꽤 깔끔한 작은 도구죠? 글쎄요, 더 좋아집니다.

모든 개발자를 위해 Google은 자동화된 도구로 URL을 테스트할 수 있는 모바일 친화성 테스트 API도 출시했습니다. 이것의 이점은 더 많은 페이지를 빠르게 테스트할 수 있지만 항상 수동으로 브라우저 도구를 사용하지 않고도 사이트에서 가장 중요한 페이지를 모니터링할 수 있다는 것입니다. 점수!

Google의 모바일 친화적인 도구를 사용하여 사이트를 벤치마킹했다면 이제 개선을 시작할 때입니다. WordPress 테마부터 시작하겠습니다.

3. 반응형 WordPress 테마 사용(또는 생성)

최근에 새로운 WordPress 테마를 설치한 경우 이 부서에서 괜찮을 가능성이 높습니다. 하지만 테마가 한동안 사용되었다면 약간의 업데이트가 필요할 수 있습니다.

가장 먼저 해야 할 일: WordPress 버전과 현재 테마 버전을 다시 확인하세요. 보류 중인 업데이트가 있으면 업데이트부터 시작합니다. 모든 테마에 대해 말할 수는 없지만 일부 업데이트에는 모바일 친화적인 요소가 포함되어 있어 문제를 해결하기에 충분할 수 있습니다. 예를 들어 워드프레스 4.4에는 반응형 이미지를 위한 멋진 기능이 추가되었습니다(여기에서 모든 내용을 읽을 수 있습니다).

업데이트가 효과가 없다면 새로운 테마를 찾거나 직접 만드는 것을 고려해야 할 때입니다. 두 옵션을 모두 살펴보겠습니다.

최고의 모바일 친화적인 WordPress 테마

현실적으로 오늘날 많은 WordPress 테마는 반응형입니다. 테마가 모바일 친화적이지 않은 경우는 더 드뭅니다. 즉, 테마를 구입하기 전에 모든 화면 크기에서 잘 표시되는지 다시 한 번 확인하십시오. 데모 사이트를 테스트하고, 브라우저 창을 확장하고, 실제 사용자의 경험을 찾기 위해 찾을 수 있는 모든 리뷰를 읽어보세요.

당신이 보는 것에 만족한다면 그것을 위해 가십시오! 그러나 뭔가 옳지 않은 것 같으면 피하십시오. 완벽하게 일치한다고 생각하더라도 선택할 수 있는 WordPress 테마가 너무 많아서 귀하의 사이트에 적합한 다른 테마를 찾을 수 있음을 보장합니다.

무료 테마를 보고 있다면 자신의 콘텐츠가 제자리에 있을 때 어떻게 보이는지 확인하십시오. 아시다시피 모든 것이 항상 똑같이 보이지는 않으므로 콘텐츠가 모바일에서 원하는 방식.

어디서부터 시작해야 할지 모르겠나요? WP 엔진에서 WordPress 사이트를 호스팅하면 계획과 함께 StudioPress 테마(Genesis Framework 포함!)에 무료로 액세스할 수 있습니다. 이러한 테마는 완벽하게 반응하므로 모든 장치에서 멋지게 표시될 뿐만 아니라 구매하기로 결정한 "하나의" 프리미엄 테마에 갇힌 느낌을 받는 대신 테마 간에 쉽게 전환할 수 있습니다.

나만의 반응형 WordPress 테마를 만드는 방법

모바일 친화적인 사이트를 만들기 위해 DIY 경로를 사용하려면 처음부터 시작하거나 테스트 환경에서 시작해야 합니다. 실제 사이트에서 이와 같이 급격한 변경을 해서는 안 됩니다.

Local을 사용하여 컴퓨터에서 바로 로컬 WordPress 사이트를 가동하는 것이 좋습니다. 이 무료 앱을 사용하면 현재 사이트를 손상시키지 않으면서 마음껏 실험할 수 있습니다(재설계를 진행할 때 필수적 임). 기존 사이트를 Local로 가져올 수도 있으므로 원하는 경우 처음부터 시작하기만 하면 됩니다.

로컬 사이트에 대한 공유 가능한 URL을 생성하는 라이브 링크라는 기능도 있습니다. 이렇게 하면 사이트를 클라이언트에게 보내거나 휴대폰에서 불러올 수 있으므로 모바일 장치에서 사이트가 어떻게 보이는지 쉽게 테스트할 수 있습니다.

반응이 빠른 부모 테마를 기반으로 자식 테마를 만들면 꽤 좋은 상태가 될 것입니다. 완전히 백지 상태에서 시작하여 자신만의 테마를 만드는 경우 미디어 쿼리를 사용하여 디자인의 경계를 설정하고 요소를 한 번에 하나씩 생각하십시오.

이미지의 크기를 어떻게 조정해야 하는지, 내비게이션은 어떻게 보여야 하는지, 콘텐츠가 모바일 장치에서 숨겨지는지는 스스로에게 물어보세요. 다음은 도움이 될 수 있는 몇 가지 자습서입니다.

  • WordPress에서 반응형 탐색 메뉴를 만드는 방법
  • 반응형 웹 디자인을 위한 7가지 모범 사례 팁
  • WordPress에서 반응형 이미지 작업

4. 반응형 플러그인 사용

플러그인은 WordPress 사이트에 기능을 추가하므로 항상 프런트 엔드에 시각적으로 아무 것도 추가하지 않습니다. 그러나 사이트에 물리적 요소(예: 위젯 또는 CTA 버튼)를 추가하는 경우 모든 화면 크기에서 잘 확장되는지 확인하거나 적어도 작은 화면 크기에서는 비활성화할 수 있는 옵션을 제공해야 합니다.

예를 들어 사이드바 위젯은 데스크톱 사이트에 멋진 추가 기능이지만 모바일 디자인을 지배하거나 축소되지 않으면 사용자 경험이 크게 향상되지 않습니다.

테마와 마찬가지로 플러그인의 기능에 주의를 기울이고 구입하기 전에 리뷰를 읽거나 데모를 찾아보십시오. 그리고 새 플러그인을 활성화할 때마다 사이트의 빠른 품질 검사를 수행하여 화면 크기에 따라 올바르게 확장되는지 확인해야 합니다.

반응형 테마와 모바일에서 잘 작동하는 플러그인이 있는 한 귀하의 사이트는 작은 화면에 표시하기에 정말 좋은 모양이 될 것입니다.

5. 모바일 장치에 팝업을 추가하지 마십시오.

WordPress 사이트로 이메일 목록을 작성하려는 경우 사이트에 다양한 옵트인이 있는 것 같습니다. 대부분의 이메일 옵트인 양식은 모바일 장치에서 잘 작동합니다(확장되고 사용하기 쉽다고 가정).

그러나 팝업은 다른 짐승입니다. Google은 방해가 되는 삽입 광고, 즉 사이트의 콘텐츠를 가리는 옵트인이 있는 사이트에 불이익을 주기 시작했습니다. 여기에는 팝업(즉시 표시되는지 또는 사용자가 일정 시간 사이트에 머문 후에 표시되는지 여부) 및 사용자가 페이지의 콘텐츠에 액세스하기 전에 해제해야 하는 기타 유형의 옵트인이 포함됩니다. 여기에서 문제에 대한 Google의 입장에 대한 모든 내용을 읽을 수 있습니다.

WordPress 사이트를 모바일 친화적으로 유지하고 모범 사례를 따르려면 모바일 디자인에서 팝업을 피하세요. 이를 수행하는 방법은 옵트인을 지원하는 서비스에 따라 다르지만 대부분의 공급자는 모바일 장치에서 침입 팝업을 비활성화할 수 있는 옵션이 있어야 합니다.

6. 반응형 미디어 전략 수립

포트폴리오 사이트, 일일 블로그 또는 전자 상거래 사이트에서 작업하는 경우 반응형 퍼즐의 중요한 부분은 사이트의 미디어를 고려하는 것입니다. 홈페이지의 큰 배경 이미지는 데스크톱 컴퓨터에서는 멋지게 보일 수 있지만 제대로 크기가 조정되지 않으면 모든 컨텍스트가 손실되고 휴대폰에서 보기가 어려울 수 있습니다. 반응형 미디어에 대한 첫 번째 규칙은 무엇입니까? 사물이 어떻게 확장되는지 생각해 보십시오.

크기 조정이 실제로 사이트에 가장 적합한 솔루션이 아닌 경우 사이트가 모바일 장치에 로드될 때 특정 요소를 숨길 수도 있습니다. 이렇게 하면 경험을 단순화하고 사용자가 가장 중요한 콘텐츠에 더 빨리 접근할 수 있습니다.

마지막으로 사이트에 포함하는 미디어의 파일 크기도 염두에 두어야 합니다. 이렇게 하면 모바일 경험이 향상될 뿐만 아니라 데스크톱 로드 시간도 향상됩니다! 미디어 파일은 종종 웹 사이트에서 가장 큰 파일 중 하나이므로 로드 막대와 긴 대기 시간의 원인이 됩니다. 사이트를 간소화하고 모바일 성능을 높이려면 필요한 품질을 유지하면서 가능한 가장 작은 파일 크기를 사용하여 이미지를 최적화하십시오. (예를 들어 모바일 사이트는 데스크톱보다 더 작은 버전의 이미지를 로드할 수 있습니다!)

7. 사이트 성능 우선 순위 지정

페이지 속도는 Google 데스크톱 검색에서 사이트의 순위가 매겨지는 방식 측면에서 오랫동안 중요했지만 2018년 7월 현재 모바일 순위에서도 마찬가지입니다. 인터넷 검색의 60% 이상이 모바일 장치를 사용하고 있으며 사이트의 성능(모든 장치에서)이 그 어느 때보다 중요하다는 위의 통계와 짝을 이룹니다.

이미지는 성능 방정식의 큰 부분을 차지하지만 코드와 WordPress 호스트도 큰 역할을 합니다.

코드와 관련하여 축소와 같은 작업을 고려하십시오(특히 사용자 정의 테마로 작업하는 경우). 사이트에 설치된 모든 플러그인의 인벤토리를 확인하고 더 이상 필요하지 않은 플러그인을 비활성화하고 제거합니다. 기본적으로 사이트를 강화하는 요소를 더 체계적으로 유지할수록 더 나아질 것입니다.

WordPress 호스트의 경우 캐싱 기술, CDN 및 Google Cloud Platform과 같은 신뢰할 수 있는 공급자가 제공하는 인프라와 같은 서비스를 포함하는 우수한 파트너를 사용하고 있는지 확인하세요. WP 엔진에서 사이트를 호스팅하는 경우 이러한 모든 영역에서 설정됩니다.

점점 더 많은 사람들이 스마트폰이나 태블릿을 사용하여 인터넷에 액세스함에 따라 사이트 디자이너는 이러한 사용 패턴을 해결하기 위해 조정해야 합니다. 귀하의 사이트는 모바일 방문자를 위한 준비가 되어 있습니까? 사이트의 어떤 측면을 변경해야 했습니까? 반응형 디자인을 만드는 데 어떤 도구를 사용했습니까? 의견에 경험을 공유하십시오!

30개 이상의 프리미엄(그리고 모바일 친화적!) 테마에 액세스하세요

WP Engine에서 WordPress를 호스팅하고 StudioPress 테마 및 Genesis Framework에 액세스하여 시간과 비용을 절약하십시오. 테마는 완벽하게 반응하고 쉽게 사용자 정의할 수 있으므로 모바일 친화적인 사이트를 구축하려고 할 때 시간을 절약할 수 있습니다. 또한 WP 엔진의 강력한 플랫폼은 사이트의 성능을 최적화하여 페이지 속도를 빠르게 유지하고 사이트 순위를 높일 수 있도록 도와줍니다.