스테이징 사이트 정의 및 제작 방법

브로드웨이 뮤지컬을 관람하는 것을 상상해 보세요. 완벽하게 다듬어진 공연을 보지만, 그 뒤에서는 출연진과 스태프가 오디션, 대사 연습, 드레스 리허설 등에 수백 시간을 투자했습니다. 여러분이 보는 모든 것은 철저한 준비의 결과입니다.

마찬가지로, 웹 개발에서 스테이징 사이트는 실제 웹사이트의 “드레스 리허설” 역할을 합니다. 개발자들은 업데이트 사항을 라이브 웹사이트에 직접 적용하는 대신, 스테이징 사이트에서 테스트와 수정을 진행하여 실제 사용자에게 보여줄 준비가 되었을 때까지 작업을 진행합니다.

전자상거래 스토어를 위한 스테이징 사이트의 이점과 Shopify에서 스테이징 사이트를 만드는 방법에 대해 자세히 알아보세요.

스테이징 사이트란 무엇인가요?

스테이징 사이트는 라이브 사이트에 영향을 주지 않고 업데이트나 디자인 변경 사항에 대해 검토할 수 있는 비공식 웹사이트 테스트 환경입니다. 이는 개발자와 이해관계자가 실제 사용자처럼 사이트를 경험할 수 있도록 라이브 버전을 시뮬레이션합니다.

스테이징 환경의 핵심 목표는 결함을 발견하고 수정하는 것입니다. 보통 마케팅팀이나 경영진과 같은 이해관계자들이 스테이징 과정에 참여하여 피드백을 제공합니다. 이해관계자들이 테스트 사이트를 철저히 검토하고 그들의 의견이 반영되면, 업데이트 사항이 라이브 환경에 전송됩니다.

예를 들어, 새로운 제품 이미지 섹션과 같은 중요한 업데이트가 제대로 작동하지 않으면 전환율에 악영향을 미칠 수 있습니다. 제품 페이지를 클릭하고 장바구니에 아이템을 추가하는 사용자 경험을 시뮬레이션하면 실제 고객에게 영향을 미치기 전에 오류를 발견하고 수정할 수 있습니다.

웹 개발은 개발, 스테이징, 라이브라는 세 가지 주요 영역에서 이루어집니다. 먼저, 개발 웹사이트에서 코드를 작성한 후 스테이징 사이트로 전송되어 품질 평가(QA)를 거친 후, 마지막으로 모든 사용자에게 라이브 사이트를 업데이트합니다.

개발 사이트

개발 사이트는 개발자들이 코드를 작성하고 아이디어를 실현하는 샌드박스입니다. 보통 개발팀만 접근할 수 있는 로컬 환경입니다. 이 단계에서는 이미지, 텍스트, 동영상, 인터랙티브 제품 필터와 같은 맞춤 기능을 위한 코드를 추가합니다. 초기 테스트는 일부 진행되지만, 개발 환경은 일반적으로 다듬어지지 않은 상태입니다.

스테이징 사이트

개발이 완료되면 코드가 새로운 스테이징 사이트에 게시됩니다. 이는 라이브 관객 앞에서 모든 문제를 해결하는 드레스 리허설입니다. 스테이징 웹사이트는 일반적으로 staging.yourwebsitename.com과 같은 스테이징 도메인에서 온라인으로 운영됩니다.

스테이징 사이트가 검색 엔진에 인덱싱되지 않도록 해야 합니다. 즉, 검색 결과에 표시되지 않도록 해야 합니다. 몇 줄의 코드를 추가하면 이를 신속하게 수행할 수 있습니다. 곧 있을 세일 정보처럼 고객에게 보여주고 싶지 않은 정보가 있다면, 스테이징 사이트를 비밀번호로 보호하는 것도 고려해 보세요.

스테이징 사이트가 라이브로 운영되면 이해관계자들이 이를 검토하고 피드백을 제공합니다. 이후 코드는 다시 개발 사이트로 돌아가 개발자들이 우려 사항을 처리하고 스테이징 사이트에 변경 사항을 다시 적용합니다. 이 과정은 모든 이해관계자가 승인할 때까지 계속됩니다.

라이브 사이트

라이브 사이트는 최종적으로 공개되는 버전으로, 프로덕션 환경 또는 프로덕션 사이트라고도 불립니다. 여기서 모든 사용자에게 공개되며 이들이 업데이트 사항을 확인할 수 있습니다. 사용자들은 콘텐츠를 구매하거나 상호작용을 하며 브랜드와 소통할 수 있습니다. 변경 사항이 라이브로 전환되면 모든 사용자가 접근할 수 있으므로, 스테이징 단계에서 철저한 QA가 중요합니다.

전자상거래 스토어에 스테이징 사이트를 사용하는 이유

잘못된 업데이트 사항을 게시하면 고객을 불편하게 하고 판매에 악영향을 미칠 수 있으므로, 전자상거래 스토어는 스테이징 사이트를 사용하는 것이 특히 중요합니다. 스테이징 사이트는 다음과 같은 이점이 있습니다.

사용자 경험에 영향을 주지 않고 요소 테스트. 고객 경험을 저하하지 않고 디자인과 새로운 기능을 실험할 수 있습니다.
공식 롤아웃 전에 버그 발견 가능. 장바구니 문제, 작동하지 않는 버튼, 깨진 제품 이미지와 같은 오류를 찾아냅니다.
사이트 중단 없이 통합한 사항 테스트. 라이브 사이트에 영향을 주지 않고 API(응용 프로그램 프로그래밍 인터페이스) 또는 배송 계산기와 같은 타사 통합 사항을 테스트합니다.
이해관계자와 협업. 다양한 팀, 디자이너, 이해관계자를 초대하여 수정 사항을 검토하고 협업합니다.
사용자 경험 시뮬레이션. 고객이 경험하는 것과 동일하게 사이트를 경험하며 쇼핑 경험의 단점을 발견합니다. 이는 Figma와 같은 도구에서 인터랙티브 디자인 파일을 사용하는 것보다 더 완전한 시뮬레이션입니다.
웹사이트 성능 테스트. 업데이트가 사이트를 느리게 만들고 있나요? 스테이징 사이트를 통해 기술 성능에 미치는 영향을 테스트할 수 있습니다. (유기적 검색 순위에도 영향을 미칠 수 있는 사항)

Shopify에서 스테이징 사이트를 만드는 3가지 방법

테마 복제하기
개발 스토어 만들기
앱 사용하기

표준 Shopify 웹사이트에는 스테이징 사이트가 포함되어 있지 않으므로, 직접 만들어야 합니다. 이를 위한 세 가지 방법이 있습니다.

1. 테마 복제하기

이 방법은 표준 Shopify 플랜으로 스테이징 환경을 만드는 가장 쉬운 방법입니다. 몇 번의 클릭으로 빠르게 설정할 수 있습니다. 서드파티 앱을 설치할 필요도 없으며, 스테이징 환경은 Shopify의 관리 패널에 내장되어 있습니다.

Shopify에서 테마를 복제하여 스테이징 사이트를 만드는 방법은 다음과 같습니다.

1. Shopify 관리 패널에서 온라인 스토어 > 테마로 이동합니다.

2. 현재 테마 > 작업에서 복제를 선택합니다.

3. 이제 라이브 테마와 동일한 복사본이 생성되었습니다. 라이브 사이트에 영향을 주지 않고 자유롭게 수정할 수 있습니다. 미리 보기를 클릭하여 스테이징 인스턴스를 생성할 수 있습니다.

4. 테스트가 완료되면 라이브 사이트에서 변경 사항을 적용할 수 있습니다.

이 옵션은 레이아웃 수정이나 새로운 페이지 섹션과 같은 디자인 변경에 가장 적합합니다. 그러나 통합이나 기능 변경을 위한 테스트 환경은 제공하지 않습니다. 또한 기존 사이트에 이미 추가한 요소를 수동으로 추가해야 한다는 점도 유의하세요.

2. 개발 스토어 만들기

이 방법은 새로운 Shopify 파트너 계정을 생성해야 하며, 이를 통해 테스트를 위한 전체 스토어를 구축할 수 있습니다. 파트너 계정은 클라이언트를 위해 스토어를 구축하고 관리하는 개발자, 디자이너, 에이전시를 위해 설계되었습니다. 무료이며, 개발 스토어에 접근할 수 있어 주요 사이트의 모든 것을 비공식 환경에서 미러링할 수 있습니다.

개발 스토어를 사용하여 스테이징 사이트를 만드는 방법은 다음과 같습니다.

1. Shopify 파트너 계정에 가입합니다.

2. 스토어 > 스토어 생성으로 이동합니다.

3. 스토어 유형으로 개발을 선택합니다.

4. “staging-yourwebsite”와 같은 이름을 지정하여 라이브 스토어와 쉽게 구별할 수 있도록 합니다.

5. 제품을 추가하고, 테마를 설치하며, 라이브 스토어를 미러링하도록 모든 설정을 구성합니다.

이제 실제 사이트를 위험에 빠뜨리지 않고 전체 사용자 경험을 시뮬레이션할 수 있습니다. 이는 맞춤 코드나 타사 통합을 포함한 기능 변경에 가장 적합한 옵션입니다. 개발 스토어는 테스트용은 무료이지만, 일부 제한 사항이 있습니다. 예를 들어 무료 및 파트너 친화적인 앱만 설치할 수 있으며, 테스트 배송 라벨만 생성할 수 있습니다.

추가 앱을 테스트하거나 기능 배송 라벨을 생성하려면 기본 플랜에서 새로운 유료 스토어를 설정할 수 있습니다. 테마를 복제한 경우와 마찬가지로, 스테이징 사이트에 추가한 웹사이트 요소를 수동으로 복사해야 합니다.

3. 앱 사용하기

Duplify와 같은 일부 스테이징 도구(제한된 무료 플랜 제공)는 전체 사이트를 복제하는 스테이징 환경을 생성할 수 있게 해줍니다. 그런 다음 라이브로 전환하기 전에 기존 페이지와 제품을 테스트할 수 있습니다. Rewind Staging는 유사한 앱(무료 체험 제공)으로, 테마 백업을 포함하여 문제가 발생할 경우 이전 버전으로 되돌릴 수 있습니다. Shopify 앱 스토어로 이동하여 스테이징 앱을 검색하여 시작하세요. 참고로 위에 명시된 2개의 앱은 현재 한국어가 제공되지 않습니다.

Rewind Staging를 사용하여 스테이징 사이트를 만드는 방법은 다음과 같습니다.

1. Shopify 앱 스토어에서 라이브 사이트에 Rewind Copy를 설치합니다.

2. 라이브 스토어를 소스 스토어로 선택합니다.

3. 개발 스토어에 Rewind Copy를 설치합니다.

4. 개발 스토어를 대상 스토어로 선택합니다.

5. 소스 스토어에서 대상 스토어로 키를 복사하여 두 스토어를 연결합니다.

6. 스테이징 사이트에 복사할 정보를 선택하여 라이브 사이트와 동일하게 만듭니다.

7. 두 스토어 간의 동기화를 유지하기 위해 복사 변경 사항을 지속적으로 확인합니다.

8. 복사를 시작하려면 작업 시작을 클릭합니다.

때때로 웹사이트를 수동으로 복제하면 일부 요소가 누락될 수 있으므로, 스테이징 앱을 사용하면 정확한 복사본을 확보할 수 있습니다. 특히 복잡한 테마가 있는 경우 더욱 그렇습니다.