WooCommerce 스토어의 모바일 UX를 개선하는 7가지 쉬운 방법
게시 됨: 2022-05-04모바일은 이제 인터넷에 액세스하는 가장 일반적인 방법이며 온라인 쇼핑을 하는 모바일 사용자의 수는 계속해서 증가하고 있습니다. eMarketer(Statista를 통해)에 따르면 2017년에 전 세계 소매 전자 상거래 매출의 58.9%가 모바일 장치에서 이루어졌으며 이 비율은 2021년에 72.9% 또는 3조 5천억 달러로 증가했습니다.
탐색, 속도 및 접근성과 같은 상점의 UX 측면이 모바일 사용자에게 최적화되어 있지 않으면 수익에 해를 끼칠 수 있습니다.
이 때문에 WooCommerce 스토어의 모바일 사용자 경험(UX)이 최대한 긍정적인 것이 중요합니다.
하지만 걱정하지 마세요. 이 가이드에서 다루겠지만 WooCommerce 스토어의 모바일 UX를 개선하는 몇 가지 쉬운 방법이 있습니다. 몇 가지 도구를 채택하는 것부터 전체 상점을 재설계하는 것까지 모바일 사용자에게 더 사용자 친화적으로 만들기 위해 할 수 있는 일이 많습니다.
WooCommerce 스토어에 모바일 친화적인 UX가 필요한 이유
앞서 언급했듯이 모바일 장치에서 수행되는 전자 상거래의 비중은 계속해서 증가하고 있습니다. Business Insider에 따르면 2020년에서 2021년 사이에 20% 증가한 3,593억 2,000만 달러를 기록했습니다.
그러나 모바일 사용자에게 최적화되지 않은 매장의 경우 매출이 감소할 수 있습니다.
예를 들어, 한 사용성 연구에 따르면 너무 길거나 복잡한 결제 프로세스가 장바구니 포기의 17%를 차지했습니다. 이번에는 Google에서 실시한 또 다른 연구에 따르면 모바일 환경이 빠를수록 이탈률이 낮아집니다. 또한 사이트가 느릴수록 전환율이 낮아집니다.
따라서 모바일 전자 상거래가 증가하는 동안 사이트가 이러한 사용자에게 최적화되어 있지 않으면 놓칠 수 있습니다.
WooCommerce 스토어의 모바일 UX를 개선하는 7가지 쉬운 방법
이제 스토어를 모바일 친화적으로 만드는 것이 얼마나 중요한지 알았으니, 여기 WooCommerce 스토어의 모바일 UX를 개선하는 7가지 방법이 있습니다.
1. 모바일 우선 설계로 시작
처음부터 모바일 우선 디자인을 구현하여 견고한 기반 위에서 WooCommerce 스토어를 시작하는 것이 좋습니다. 모바일 친화적인 테마로 상점을 만드는 것이 모바일 사용자를 염두에 두고 구축되지 않은 디자인의 UX를 개선하려고 시도하는 것보다 훨씬 쉽습니다.
그러나 이 가이드를 읽는 대부분의 사람들은 이미 상점을 운영하고 있을 것입니다. 그런 경우라면 걱정하지 마세요. 이 기사에는 상점의 모바일 UX를 다른 방식으로 개선하는 데 도움이 되는 조언이 많이 있습니다.
그러나 아직 스토어를 출시하지 않았다면 모바일 우선 또는 모바일에 최적화된 테마 또는 디자인을 선택하면 앞으로의 골치 아픈 일을 예방할 수 있습니다.
고맙게도 모바일 사용자를 염두에 두고 구축된 WooCommerce를 위한 몇 가지 훌륭한 테마가 있습니다. 물론 이러한 테마는 데스크톱 사용자를 간과하지 않습니다. 그러나 모바일 사용자는 자신에게 고도로 최적화된 경험을 즐길 수 있어야 합니다.
따라서 아직 시작하지 않았다면 모바일 친화적인 테마나 디자인을 선택하세요.
2. 모바일 친화적인 테마로 변경
모바일 친화적이지 않은 디자인으로 이미 상점을 시작했다면 모든 것이 손실되지 않습니다.
WordPress와 WooCommerce의 장점 중 하나는 언제든지 테마를 전환할 수 있다는 것입니다.
그러나 새 테마를 업로드하고 활성화하는 프로세스는 매우 간단하지만 스토어에 미치는 영향은 엄청날 수 있습니다.
아마도 가장 큰 것은 디자인의 변화가 청중을 혼란스럽게 할 수 있다는 것입니다. 디자인의 변화가 얼마나 과격한가에 따라 브랜딩이 중단될 수도 있습니다. 테마를 변경하면 특히 사용자 정의 작업을 많이 수행한 경우 상점의 일부 측면이 손상될 수 있습니다.
전반적으로, 운영 중인 상점에서 테마를 변경하는 것은 가볍게 시작할 일이 아닙니다. 그러나 현재 디자인이 모바일 친화적이지 않거나 매장을 새로 고칠 예정이거나 아직 잠재 고객을 확보하지 못한 경우 진지하게 생각해야 할 사항일 수 있습니다.
3. 모바일 사용자를 위한 콘텐츠 및 디자인 최적화
테마 변경 여부에 관계없이 WooCommerce 스토어의 모바일 UX를 개선하기 위해 할 수 있는 일이 많습니다.
또 다른 옵션은 기존 콘텐츠와 사용자 인터페이스가 모바일 사용자에게 최적화되어 있는지 확인하는 것입니다.
초점을 맞춰야 할 영역 중 하나는 방문자가 화면이 더 작은 장치에서 매장에 액세스할 수 있는 대체 버전이 있도록 이미지를 최적화하는 것입니다. 이렇게 하면 페이지를 더 쉽게 보고 로드 시간을 단축할 수 있습니다. 최상의 이미지 형식을 선택하는 것도 중요합니다.
적응형 이미지 크기 조정을 구현하는 것은 고려해야 할 또 다른 문제입니다. 이렇게 하면 이미지가 컨테이너에 넘쳐나는 것을 방지할 수 있습니다. 이는 모바일에서 특히 성가실 수 있습니다.
다른 방법은 스마트폰 사용자가 매장의 가장 중요한 페이지나 기능에 최대한 쉽게 액세스할 수 있도록 모바일 내비게이션 시스템을 조정하는 것입니다. 검색 도구 및 장바구니와 같은 일부 요소는 대부분의 상점에서 일관됩니다.
그러나 분석을 확인하여 고객이 가장 많이 액세스하는 페이지를 확인하는 것이 좋습니다. 그런 다음 해당 정보를 사용하여 해당 페이지에 쉽게 액세스할 수 있도록 메뉴를 조정합니다. 또한 Google은 주요 제품 카테고리에 대한 링크를 상점 홈페이지에 추가할 것을 권장합니다. 일부 테마에는 모바일 전용 탐색 시스템을 만드는 데 필요한 기능이 포함되어 있습니다. 그렇지 않은 경우 WP Mobile Menu와 같은 무료 플러그인이 도움이 될 수 있습니다.
모바일 UX를 더 답답하게 만들 수 있는 필수 항목이 아닌 경우 제거하는 것이 빠른 승리입니다. 예를 들어, 사이트의 데스크톱 버전에서는 멋지게 보이지만 장식 외에는 별로 제공하지 않는 비디오나 슬라이더가 있을 수 있습니다.
Google은 이미지가 더 적은 페이지가 모바일에서 더 많은 전환을 생성한다는 것을 발견했습니다. 동일한 Google 연구에 따르면 페이지 요소가 적을수록 사용자 경험에 긍정적인 영향을 미치므로 콘텐츠를 단순화하는 것이 좋습니다.
이미지와 불필요한 요소를 완전히 제거하거나 모바일 사용자를 위해 비활성화할 수 있습니까? 정교한 배경 및 애니메이션 효과에도 동일하게 적용할 수 있습니다.
더 작은 화면 장치에서 덜 산만하게 하기 위해 색상을 조정하는 것조차 고려할 가치가 있습니다.
방문자 분석과 결합하여 모바일 장치에서 매장을 사용하는 것이 어떤 것인지 더 익숙해지면 UX를 개선하기 위해 무엇을 할 수 있는지에 대한 아이디어를 얻을 수 있습니다.
4. 주요 페이지의 모바일 전용 버전 만들기
모바일 사용자를 위해 이전 단계에서 식별한 주요 페이지를 최적화하는 것 외에도 한 단계 더 나아가 해당 페이지의 모바일 전용 버전을 만들 수도 있습니다.
이러한 페이지는 모바일 사용자에게만 표시되므로 가능한 최고의 UX를 위해 디자인할 수 있습니다. 더 큰 화면에서 콘텐츠에 액세스하는 사람들을 위해 타협할 필요가 없습니다.
무료 플러그인을 사용하면 WordPress로 이를 달성할 수 있습니다. 사이트에서 활성화되면 모바일용 특정 콘텐츠를 사용하여 사이트 페이지의 모바일 버전을 빠르게 만들 수 있습니다.
중요한 페이지의 모바일 전용 버전을 만들거나 데스크톱에서만 특정 요소를 표시하도록 페이지를 편집하는 방법을 생각해 보십시오. 이를 가능하게 하는 WordPress 페이지 편집기의 한 예는 프리미엄 Elementor 플러그인입니다.
5. 도구를 사용하여 상점의 모바일 경험 테스트
매장의 모바일 UX를 직접 탐색할 뿐만 아니라 도구를 사용하여 도움을 줄 수도 있습니다.
Google에는 모바일 사이트 평가를 위한 무료 도구가 있습니다. 아주 기본적이지만 상점의 모바일 UX에 대한 몇 가지 정보를 제공합니다. 보다 심층적인 분석을 위해 사이트를 Google Search Console에 연결할 수 있습니다.
BrowserStack과 같은 유료 도구를 사용하면 다양한 장치와 브라우저에서 매장을 테스트할 수 있을 뿐만 아니라 다양한 네트워크 속도로 다양한 위치에서 사이트를 경험할 수 있습니다.
6. 모바일에서 직접 테스트하기
양식은 아마도 전자 상거래 상점에서 가장 중요한 부분일 것입니다. 모바일에서 작동하지 않거나 사용하기 어려운 경우 고객은 주문을 할 수 없습니다.
중요하기 때문에 사이트에서 주요 양식의 UX를 직접 확인하는 것이 중요합니다. WooCommerce에서 제공하는 기본 양식 기술은 충분히 잘 작동하지만 길고 복잡한 체크아웃 프로세스는 장바구니를 포기하는 데 가장 큰 영향을 미칩니다.
모바일용 양식을 최적화하기 위한 몇 가지 실용적인 조언에는 여러 열 레이아웃을 피하고 레이블 및 자리 표시자에 대해 신중하게 생각하고 지우기 또는 재설정 버튼과 같은 불필요한 양식 항목을 제거하는 것이 포함됩니다.
7. 사이트 속도 최적화
WooCommerce 스토어의 속도를 높이면 더 나은 검색 엔진 순위 및 더 높은 전환율을 포함하여 많은 이점이 있습니다. 그러나 더 빠른 로드 시간은 모바일 UX에도 긍정적인 영향을 미칩니다.
사이트 속도를 높이기 위해 할 수 있는 일이 많기 때문에 작게 시작하거나 모두 들어갈 수 있습니다.
"WooCommerce Store 속도를 높이는 5가지 쉬운 방법" 기사에서 언급한 몇 가지 효과적인 옵션에는 이미지 최적화와 HTML, CSS 및 JavaScript 최적화 구현이 포함됩니다.
캐싱을 활성화하고 CDN(콘텐츠 전송 네트워크)을 사용하면 최소한의 노력으로 개선된 모바일 UX를 위해 스토어 속도를 높일 수 있는 두 가지 방법이 더 있습니다.
좀 더 많은 작업을 하고 싶다면 더 빠른 웹 호스트로 변경하는 것을 고려할 수 있습니다. 사이트의 현재 속도에 따라 호스트 간에 성능에 큰 차이가 있을 수 있으므로 이 작업을 수행할 가치가 있을 수 있습니다. Kinsta와 같은 대부분의 프리미엄 웹 호스트는 무료 웹사이트 마이그레이션을 제공합니다.
결론
보시다시피 WooCommerce 스토어의 모바일 UX를 개선하기 위해 할 수 있는 일이 많습니다.
이미지 최적화, 캐싱 및 CDN을 구현하기 위해 NitroPack과 같은 플러그인을 설치하는 것과 같은 일부는 빠르고 쉽습니다. 대조적으로, 상점 재설계, 더 빠른 웹 호스트로 변경, 모바일 전용 버전 콘텐츠 생성을 포함하여 더 많은 시간이 소요될 수 있습니다.
그러나 모바일 인터넷 사용이 계속 증가하고 UX를 개선하면 전환에 긍정적인 영향을 미칠 수 있으므로 가능한 한 모바일 친화적인 매장을 만들기 위해 최선을 다하는 것이 우선순위가 되어야 합니다.