스테이징 환경에서 WordPress와 WooCommerce 플러그인 테스트하기
스테이징 환경에서 WordPress와 WooCommerce 플러그인을 테스트하는 방법을 알아봅시다. 일반적인 이커머스 웹사이트는 개설 첫해가 끝날 무렵 월 33만 달러가량을 벌어들이지만, 업데이트나 플러그인 설치 중에 실수 한 번이면 그 몫을 통째로 날릴 수도 있습니다. 다행히 WordPress와 WooCommerce 플러그인을 스테이징에서 테스트하면 이런 일을 피할 수 있습니다.
이 글에서는 값비싼 실수를 피할 수 있도록, 플러그인을 테스트할 스테이징 사이트를 만드는 과정을 설명합니다. 다루는 내용은 다음과 같습니다.
- 스테이징이란 무엇인가
- 왜 스테이징에서 WordPress와 WooCommerce 플러그인을 테스트해야 하는가
- 플러그인을 제대로 테스트하는 방법
- 테스트에 필요한 도구
- 플러그인과 업데이트 테스트 점검표
- 플러그인 업데이트와 설치에서 자동화 스크립트가 하는 일
스테이징이란?
WordPress에서 스테이징이란 테스트를 위해 만들어 두는, 외부에 공개되지 않은 사이트 복제본을 말합니다. 방문자에게 보이는 화면에 영향을 주지 않으면서 웹사이트와 플러그인을 시험해 볼 수 있는 훌륭한 수단입니다.
이 복제본은 테스트 사이트인 동시에 백업 역할도 합니다. 백업과 복제에 걸리는 시간은 사이트 규모에 따라 다르지만, 플러그인을 쓰면 간단히 해결됩니다. 몇 초 만에 사이트 복제본을 만들 수 있어, 업데이트와 WooCommerce 플러그인 설치를 부담 없이 진행할 수 있습니다.
왜 스테이징에서 플러그인을 테스트해야 할까요?
웹사이트를 업데이트할 때 스테이징은 꼭 필요합니다. 다음과 같은 사고를 막아 주기 때문입니다.
- 사이트가 깨지는 일
- 사이트에 접속할 수 없게 되는 일
- 일부 기기에서만 작동하는 일(예: Apple 기기에서는 되는데 Android에서는 안 되거나, 노트북에서는 되는데 태블릿에서는 안 되는 경우)
- 결제 페이지, 상품 후기, 문의 양식 같은 핵심 페이지에 접근할 수 없게 되는 일
- 모바일 메뉴가 사라지는 일
- 사이트 하단 푸터가 사라지는 일
- 이른바 '백스크린 오브 데스(WSOD)', 즉 화면이 온통 백지로만 표시되는 현상
업데이트를 적용하다 잘못될 수 있는 경로는 아주 많습니다. 방문자가 많은데 사이트가 제대로 작동하지 않는다는 사실을 모르고 있다면 엄청난 판매 기회를 놓치게 됩니다. 계획 없이 덤벼들면 업데이트만큼 사람을 지치게 하는 일도 없습니다.
번거로움을 피하려면 업데이트와 플러그인을 공개하기 전에 먼저 테스트하세요. 테스트하면 다음과 같은 이점이 있습니다.
- 매끄럽게 돌아가는 웹사이트
- 빠르고 안전한 웹사이트
- 방문자의 신뢰
WordPress와 WooCommerce 플러그인을 제대로 테스트하는 방법
웹사이트 운영은 긴 호흡의 일입니다. 사이트를 운영하는 동안 여러 차례 업데이트와 플러그인을 적용하게 되고, 그 과정은 단조롭게 느껴지기 쉽습니다. 성가시다고 말하는 사람도 있을 텐데, 알맞은 도구와 업데이트 전후에 밟아야 할 절차를 담은 점검표가 있으면 그 단조로움을 덜 수 있습니다.
* 금요일에는 WordPress 사이트를 업데이트하지 마세요. 주말 내내 이어질 수 있는 혼란과 문제를 미리 막을 수 있습니다.
테스트에 필요한 도구
- 전체 페이지 스크린샷 도구: 플러그인이나 업데이트를 적용하기 전과 후에 전체 페이지 스크린샷 도구를 사용하세요.
- 스테이징 사이트: 복제해 둔 웹사이트입니다.
- 자동화 스크립트 테스트: 업데이트나 플러그인 설치 후 사이트 곳곳의 여러 스크립트를 자동으로 검사해, 모든 기능이 의도대로 작동하는지 확인해 줍니다.
- 스크린샷 비교 도구: 적용 전후에 찍은 스크린샷을 나란히 비교해 달라진 부분을 찾아낼 수 있게 해 줍니다.
작업을 덜어 주는 스크린샷 도구 3가지
BrowserStack의 스크린샷 도구는 버튼 한 번으로 스크린샷을 만들어 줍니다. 확인하려는 URL에 대해 기기 종류와 브라우저를 최대 25개까지 고르기만 하면 나머지는 도구가 알아서 처리합니다.
TestingBot의 스크린샷 도구는 3,200가지가 넘는 브라우저·기기 조합 중에서 골라 테스트할 수 있게 해 줍니다. 스크린샷 비교 기능, 베타 및 개발 빌드 지원, 자체 디버깅 도구도 제공합니다.
CrossBrowserTesting Screenshot Tool
CrossBrowserTesting의 스크린샷 도구는 웹 앱이나 API로 스크린샷을 찍을 수 있습니다. API를 쓰면 여러 URL의 스크린샷을 한 번에 받을 수 있습니다.
플러그인과 업데이트 테스트 점검표
설치 및 업데이트 전
1. 자동으로 업데이트되지 않는 유료 플러그인과 테마를 모두 적어 둡니다.
2. 해당 플러그인과 테마를 구매한 사이트에 들어가 최신 버전을 확인합니다.
3. 업데이트 후 확인할 URL 목록을 만듭니다. 맞춤 글 유형 템플릿, WordPress 템플릿, 그리고 문의 페이지·홈페이지·상품 페이지·카테고리 페이지·결제 페이지 같은 주요 페이지를 포함하세요.
4. 테스트할 시나리오를 적어 둡니다. 예를 들어 사용자가 로그인해 상품 페이지를 거쳐 결제 페이지로 이동하는 흐름처럼, 사이트에 해당하는 시나리오를 모두 준비하세요.
5. 그 시나리오를 검사할 테스트 스크립트 목록을 만듭니다.
스테이징 사이트에서
1. 웹사이트 전체를 스테이징 환경으로 복제하되, 양쪽의 MySQL과 PHP 버전이 같은지 확인하세요. 호스팅 업체에 따라 클릭 한 번으로 스테이징을 만들 수 있습니다. WP Engine, SiteGround, Flywheel 등이 이 기능을 제공합니다.
2. 스테이징 사이트가 원본과 일치하는지 확인합니다. 사이트를 한 번 훑어보면 됩니다.
3. 전체 페이지 스크린샷 도구로 모든 URL의 스크린샷을 찍습니다. Chrome, Firefox, Safari, Edge, Android, iPhone 등 모든 환경에서 빠짐없이 찍으세요. 이 과정을 간편하게 해 주는 도구들이 있습니다.
4. 다음 항목을 업데이트합니다.
- 테마와 플러그인 파일
- WordPress 코어 파일
- 자동으로 업데이트되지 않는 모든 항목
5. 업데이트한 스테이징 사이트의 스크린샷을 찍습니다. 이번에도 모든 URL과 환경에서 찍으세요.
6. 스크린샷 비교 도구로 3단계의 '전' 스크린샷과 5단계의 '후' 스크린샷을 비교합니다.
7. 앞서 준비한 테스트 스크립트를 실행합니다. 양식, 결제를 비롯한 핵심 기능이 문제없이 작동하는지 확인하세요.
실제 운영 사이트에서
1. 운영 사이트를 백업합니다.
2. 모든 URL의 스크린샷을 찍습니다.
3. 운영 사이트를 업데이트합니다.
4. 관리자 화면에서 모든 항목이 업데이트됐는지 확인합니다. 새로 고침을 눌러 실패한 항목이 없는지 살펴보세요.
5. 운영 사이트의 캐시를 비웁니다.
6. 다시 스크린샷을 찍습니다.
7. 2단계의 스크린샷과 6단계의 스크린샷을 비교합니다.
8. 앞서 준비한 테스트 스크립트를 실행합니다.
9. 사이트를 눈으로 한 번 더 빠르게 훑어봅니다.
10. 스스로를 칭찬해 주세요.
플러그인 업데이트와 설치에서 자동화 스크립트가 하는 일
자동화 스크립트를 쓰면 WordPress 사이트 테스트가 간단해지지만, 다른 방법도 있습니다. 하나는 직접 손으로 확인하는 것이고, 다른 하나는 개발자를 고용하는 것입니다.
테스트 스크립트를 만드는 데는 시간이 걸리지만, 한 번 만들어 두면 재사용하기는 아주 쉽습니다. 수작업 테스트에 비해 스크립트가 나은 점은 다음과 같습니다.
- 사람의 실수를 없애 줍니다.
- 두 가지 방식으로 시간을 아껴 줍니다.
- 오래 걸리는 검사는 스크립트에 맡기고, 그동안 스크립트가 할 수 없는 일에 집중할 수 있습니다.
- 기기 2대와 브라우저 4종을 동시에 테스트할 수 있습니다.
핵심은 이것입니다. 스테이징에서 WordPress와 WooCommerce 플러그인을 테스트하면 큰 사고를 피할 수 있습니다. 과정 자체는 그리 복잡하지 않으며, 이 점검표만 있으면 업데이트를 성공적으로 마치는 데 필요한 것은 다 갖춘 셈입니다.
플러그인 일괄 설치 방법을 알려 드리든 WordPress와 WooCommerce 유지 관리를 대신해 드리든, 저희는 여러분이 이커머스에서 성과를 내도록 돕고자 합니다. 본업에 집중할 수 있도록 WordPress 운영을 맡기고 싶다면 지금 문의해 주세요. 기꺼이 도와드리겠습니다.