빌드 전 및 가동 개시 모범 사례 체크리스트
컴포저블 스토어프런트 여정을 시작하신 것을 환영합니다! 이 체크리스트에는 프로젝트 타임라인에 큰 영향을 미칠 수 있는 핵심 사항이 요약되어 있습니다. 이 네 가지 모범 사례에 집중하면 성공적인 Progressive Web App(PWA) Kit 사이트를 구축, 실행 및 모니터링하는 복잡성을 탐색하고 일반적인 함정을 피할 수 있습니다. 이 체크리스트를 사용하여 원활하고 성공적인 배포를 계획하십시오!
달리 명시되지 않는 한, 이 체크리스트의 모든 사항은 100% 컴포저블 스토어프런트에서 구축되거나 단계적 헤드리스 롤아웃으로 구축된 사이트에 적용됩니다.
맞춤화는 고객이 제어합니다. 비즈니스 요구 사항을 충족하는 데 필요한 맞춤화의 범위를 이해하십시오. 고도로 맞춤화된 사이트에는 이러한 예에 설명된 대로 더 많은 노력이 필요하다는 점을 기억하십시오.
- Retail React App에서 사용할 수 있는 디자인과 기능을 숙지하십시오. Retail React App에서 사용할 수 없는 기능은 직접 빌드해야 합니다.
- 기존 React 구성요소를 최대한 많이 사용하십시오. PWA Kit는 React를 사용하므로 구성요소의 React 협력체계를 이용할 수 있습니다. 맞춤화 작업을 수행하는 경우 Chakra 구성 요소가 있는지 확인하십시오. 없는 경우 오픈 소스 버전을 찾으십시오. 오픈 소스 버전이 없는 경우 구성 요소를 직접 빌드하십시오.
- API가 필요한 맞춤화 기능을 지원하고 필요한 데이터를 반환하는지 확인하십시오. 그렇지 않은 경우 다음과 같이 할 수 있습니다.
- 데이터를 반환하는 맞춤형 API를 만듭니다.
- 후크를 사용하여 API 응답을 확장합니다.
- 사이트의 카트리지 및 통합이 헤드리스 구현에서 작동하는지 확인하십시오. PWA Kit 사이트에서 사용하려는 경우, 맞춤형 API 또는 후크를 사용하여 해당 기능을 노출할 수 있습니다.
다음 단계에 따라 사이트를 위한 안정적이고 확장 가능한 견고한 기반을 마련하십시오.
- 사용할 프로덕션 MRT(Managed Runtime) 환경 수를 결정합니다. 환경이 많을수록 더 세부적으로 제어할 수 있습니다. 그러나 환경이 많을수록 운영상 모든 환경을 관리하기가 더 복잡해집니다. 예를 들어 모두 동일한 MRT 환경에서 서비스를 제공하는 5개의 브랜드가 있는 경우 항상 함께 업데이트해야 합니다. 환경 수가 적다는 것은 운영 오버헤드가 줄어든다는 것을 의미합니다. Managed Runtime 개요를 참조하십시오.
- 임베디드 컨텐츠 전송 네트워크(eCDN)를 사용할지 아니면 타사 CDN을 사용할지 결정합니다. 타사 CDN을 사용하는 경우를 참조하십시오. 타사 CDN을 사용하기로 결정한 경우 자세한 내용은 공급업체의 설명서를 참조하십시오.
- URL 전략을 결정합니다. 대부분의 고객은 기존 URL을 유지합니다. 새 사이트에 존재하지 않는 현재 URL을 리디렉션할 계획을 세웁니다. Google Search Console 도구 또는 기타 순위 도구에 가입하여 롤아웃이 SEO 순위에 미치는 영향을 모니터링합니다. 라우팅을 참조하십시오.
- 하이브리드(단계별 헤드리스) 롤아웃의 목표, 범위 및 일정을 결정합니다. 사이트가 하이브리드 모드 상태인 시간이 길어질수록 관련 운영 복잡성을 다루는 데 더 많은 시간을 소비해야 합니다. 100% 컴포저블 사이트로 전환하기 위한 기한을 설정합니다. 단계적 헤드리스 롤아웃을 참조하십시오.
다음 기법을 적용하여 사이트의 효율성과 사용자 경험을 최적화하십시오.
- URL에
?__server_only매개변수를 추가하여 시작 페이지(홈 페이지, 카테고리 목록 페이지, 제품 목록 페이지 및 제품 세부 정보 페이지)의 서버 측 렌더링을 검토합니다. 서버 렌더링 페이지에 크롤러를 위한 충분한 데이터가 있는지, 서버와 클라이언트 간의 레이아웃 전환 규모가 작은지(이상적으로는 존재하지 않는지) 확인합니다. 이렇게 하면 SEO 순위를 높이고, 입력 페이지가 모바일 기기에 빠르게 로드될 수 있는지 확인하고, 구매자 경험을 개선하는 데 도움이 될 수 있습니다. - Lighthouse CI를 사용하여 성능 테스트를 설정합니다. 구현 중간에 성능 테스트를 시작합니다. 이렇게 하면 PWA Kit 사이트가 시작되기 훨씬 전에 현재 사이트와 비교하여 성능 저하 문제를 식별하고 수정할 수 있습니다.
- 비프로덕션 MRT 환경에 대한 지속적인 코드 배포를 설정합니다. 개발 작업 초기부터 MRT에 배포된 코드 테스트를 시작하여 사이트 기능이 예상대로 작동하는지 확인합니다. 이렇게 하면 나중에 비용이 많이 드는 재작업을 방지할 수 있습니다. 자동화 사용자를 참조하십시오 .
이러한 도구를 사용하여 사이트 성능을 지속적으로 모니터링하도록 계획합니다. 또한 예상 결과를 기준으로 이러한 도구에서 생성된 데이터가 올바른지 확인합니다.
- Log Center를 사용하여 오류와 지표를 검토할 수 있습니다. 스토어프런트가 비정상적으로 작동하는 경우 이를 확인하고 조사할 수 있도록 알림을 설정합니다.
- 활성 데이터를 사용하여 사이트의 지표를 모니터링합니다. 이를 통해 구매자 행동을 분석하여 구매자 경험을 개선하고 제품 오퍼링을 최적화하여 매출 성장을 촉진할 수 있습니다.
- B2C Commerce Reports & Dashboards는 시간 경과에 따른 추세를 파악하고 B2C Commerce 데이터를 기반으로 보다 현명한 비즈니스 의사 결정을 내리는 데 사용할 수 있는 데이터를 제공합니다.
컴포저블 스토어프런트에서 사이트를 구축하기 위한 권장 개발자 워크플로의 나머지 부분을 검토합니다. 컴포저블 스토어프런트 시작하기를 참조하십시오.