Shopify로 헤드리스로 이동하는 방법

대부분의 전자상거래 웹사이트는 백엔드와 프론트엔드를 동시에 지원하는 플랫폼을 기반으로 합니다. 이것은 비용 효율적이고 시간을 절약하는 웹 사이트 유지 관리와 손쉬운 업데이트를 가능하게 하는 간단한 솔루션입니다.

그러나 점점 더 많은 수의 전자 상거래 비즈니스가 우수한 성능을 요구하고 헤드리스 접근 방식을 선택합니다. 헤드리스는 플랫폼의 프론트엔드를 백엔드에서 분리하는 것을 의미합니다. 즉, 프론트엔드는 사용자 경험, 콘텐츠, 디자인을 담당합니다. 헤드리스 접근 방식은 디자인 팀뿐만 아니라 더 이상 플랫폼 기능의 제약을 받지 않는 마케팅 팀도 자유롭게 해줍니다.

Shopify 스토어를 소유하고 있다면 Shopify의 강력한 전자 상거래 기능(결제 처리, 재고 관리, PCI 규정 준수 등)을 잃어서는 안 되지만 사이트 속도를 크게 향상시키는 기술을 채택하거나 고급 콘텐츠 관리 요구 사항, 복잡한 제품 카탈로그가 있거나 단순히 테마의 한계에서 벗어나 매우 독특한 사이트 경험을 만들고자 합니다.

Shopify로 헤드리스로 전환하는 방법에 대한 이 기사에서는 Shopify로 헤드리스로 전환하는 방법 과 이유, 그리고 이를 효과적으로 수행한 브랜드, 이를 수행한 방법 및 결과적으로 얻은 이점을 살펴봅니다.

헤드리스 Shopify란 무엇입니까?

Shopify는 기본적으로 사이트의 프런트엔드와 백엔드를 모두 관리합니다. 매장에 가장 기본적인 기능만 요구하는 기업에 탁월한 선택입니다.

Headless Commerce는 매장의 프런트엔드(또는 "헤드")를 백엔드 기능(예: 재고 관리, 콘텐츠 관리 및 이행 기능)과 분리하기 때문에 Shopify는 다양한 콘텐츠 관리 시스템(CMS)과 함께 사용하여 서비스를 제공할 수 있습니다. 상점의 내용.

비즈니스가 성장함에 따라 특정 기능이나 디자인 가능성이 점점 더 유연해짐을 알게 될 수 있습니다. 만능 전략은 어느 정도 효과가 있을 수 있지만 비즈니스가 성장함에 따라 Shopify Storefront가 제공하는 것 이상의 추가 기능이 필요하다는 것을 알게 될 수도 있습니다. 종종 브랜드는 다음을 수행하기 위해 Shopify 헤드리스를 사용합니다.

• 빠른 페이지 간 로딩으로 더 빠르게 로드되는 사이트를 구축하세요.
• 제품의 시각적 표현에 대한 제어력을 높입니다.
• 보다 유연하고 직관적인 콘텐츠 관리를 만듭니다.
• 완전히 사용자 정의할 수 있는 URL 구조가 있어야 합니다.

다행스럽게도 포괄적인 개선이나 새로운 전자 상거래 플랫폼을 처음부터 구축할 필요가 없습니다. Shopify는 분리를 염두에 두고 설계되었으며 비즈니스가 성장함에 따라 회사의 요구 사항을 더 잘 충족하는 프런트엔드를 쉽게 조정할 수 있습니다. 상점 첫 화면용 API가 유용한 곳입니다.

Shopify는 헤드리스 CMS입니까?

​​Shopify에는 헤드리스 CMS가 있습니다. Shopify의 통합 서비스는 전자 상거래 브랜드를 위한 강력한 도구입니다. Shopify의 기본 제공 콘텐츠 관리 시스템인 Theme Layer 및 Editor 는 이미 익숙할 수 있으며 나머지 전자 상거래 기능과 원활하게 통합됩니다.

그러나 이러한 기능은 필요한 경우 서로 독립적으로 작동하도록 설계되었습니다. 따라서 CMS에서 콘텐츠를 구성하는 방법에 더 많은 유연성이 필요한 경우(Shopify는 4가지 미리 정의된 콘텐츠 유형만 지원) Contentful 또는 Prismic과 같은 보다 다재다능한 타사 CMS를 사용하고 원하는 대로 데이터를 정의한 다음 헤드리스를 사용하여 API를 통해 Shopify에 연결합니다.

Shopify 및 기타 공급업체는 여러분이 생각하는 것보다 훨씬 더 프로세스를 단순화하는 강력한 툴킷을 개발했습니다. 소규모 온라인 소매업체인 경우 Shopify의 CMS로 충분할 수 있지만 규모를 확장하거나 속도, 고객 경험 및 프레젠테이션을 우선시하는 모바일 우선 비즈니스 모델이 있는 경우 Shopify 헤드리스 상거래의 상대적 단순성과 보다 강력한 CMS 옵션은 PWA 빌드를 추구하는 것을 정당화할 수 있습니다. Shopify 호환 CMS가 포함된 경험 플랫폼 또는 서비스로서의 프론트엔드 제공업체와 함께 이 옵션을 추구할 수 있습니다.

Shopify로 헤드리스 전환의 장단점

헤드리스 Shopify의 장점

• 소비자 경험에 대한 더 높은 수준의 제어 : 플러그 앤 플레이 Shopify보다 헤드리스 아키텍처로 훨씬 더 많은 사용자 정의 및 개인화 가능성이 있습니다. Shopify의 기본 기능과 테마의 한계를 극복하고 독특한 비주얼 머천다이징 경험을 만들 수 있습니다. 또한 추가 코딩이나 사용자 지정을 희생하지 않고도 사이트 관리를 보다 효과적으로 제어할 수 있습니다.
• 더 빠른 속도 : 속도는 특히 모바일에서 더 많은 판매를 의미하므로 코드베이스를 간소화하기 위해 할 수 있는 모든 것이 전환에 도움이 됩니다. 헤드리스로 전환하면 보다 효율적인 프론트엔드 전달 기술을 사용할 수 있습니다. 헤드리스 PWA 디자인을 사용하면 브라우저가 동적 데이터베이스 요청 없이 정적으로 생성된 사이트를 로드하며, 이는 종종 매우 느립니다.
• SEO 개선을 ​​위한 맞춤형 URL : URL 구조는 고객을 귀하의 사이트로 안내하는 데 매우 중요합니다. Shopify는 URL 수정과 관련하여 실제로 매우 엄격합니다. 헤드리스 아키텍처를 사용하여 웹 페이지를 구축하면 URL 구조를 완벽하게 제어할 수 있으므로 SEO 결과를 극대화할 수 있습니다.
• 출시 시간 단축 : Shopify 스토어에 연결된 맞춤형 프론트엔드를 통해 마케팅 팀은 백엔드 절차에 영향을 주지 않고 사이트 스타일 및 제품 배치를 실험하여 캠페인을 보다 신속하게 개념화하고 디자인할 수 있으므로 개념에서 실행까지의 시간이 단축됩니다. 또한 브랜드의 모양과 느낌을 정밀하게 제어할 수 있습니다.

헤드리스 Shopify의 단점

• 앱/서비스 지원 중단: Shopify의 기본 제공 테마 사용을 중단하면 특정 앱이 작동을 멈춥니다. 서비스로서의 프론트엔드 제공업체를 선택하면 해당 제공업체에서 귀하가 선택하고 다시 통합한 통합을 제공할 것입니다. 그러나 귀하의 비즈니스가 대행사와 함께 Shopify 스토어의 프런트엔드를 사용자 지정(또는 아키텍처의 특정 구성 요소 선택)한다고 가정합니다. 이 경우 Shopify의 API가 타사 앱을 식별할 수 있도록 일부 고유 코드를 구현해야 합니다.
• 복잡성 추가: 전자 상거래 스택에 다른 계층을 추가하면 작업의 복잡성이 자동으로 증가합니다. 전용 프론트 엔드를 선택하는 경우 사이트를 원활하게 실행하기 위해 (최소한) 두 개의 플랫폼을 관리해야 합니다. 확장하려면 React에 대해 잘 알고 있는 사내 개발 팀이 필요하거나 서비스로서의 프론트엔드 제공업체 및/또는 에이전시와 파트너 관계를 맺고 싶을 것입니다.
• 구현 파트너를 위한 고려 사항 : 헤드리스의 기술 요구 사항을 처리할 수 있는 파트너가 있다는 것은 귀하와 전자 상거래 직원이 영업 및 마케팅에 집중할 수 있도록 하는 긍정적인 발전입니다. 그러나 이 경우 주의해야 합니다.

Shopify로 헤드리스로 이동하는 방법

1단계: 매장에 적합한 기술 선택

사용자 인터페이스에 대한 기술을 선택할 때 수많은 요소를 고려해야 합니다. 최소한 개발 팀의 기술 집합과 프로젝트의 기술 및 설계 목표와 일치하는 이 특정 기술의 기능을 고려해야 합니다.

• Shopify 팀은 Shopify Storefront API를 활용하는 데모 사용자 정의 상점 응용 프로그램을 개발했습니다. 대부분의 예제는 React.js 및 Ember로 작성되었으므로 이러한 기술 중 하나를 채택하는 것을 고려해야 합니다.
• GatsbyJS 또는 Next.js와 같은 정적 사이트 생성기 프레임워크 활용을 고려해야 합니다. 서버 측 렌더링(SSR)은 검색 엔진 최적화를 개선하고 TTI(Time to Interactive)를 줄이는 데 도움이 될 수 있습니다.
• 또한 Prismic 또는 Contentful과 같은 헤드리스 CMS를 활용하여 개발 시간을 단축하고 성능을 높이는 것을 고려하십시오.

2단계: 액세스 토큰 생성

Shopify 관리자의 앱 영역으로 이동한 다음 비공개 앱 관리 를 선택합니다.

새 비공개 앱 만들기를 선택합니다. 이름과 이메일 주소를 입력합니다.

스토어프론트 API 섹션에서 스토어 프론트 API를 사용하여 이 앱이 스토어프론트 데이터에 액세스하도록 허용을 선택하십시오. 앱에서 사용할 수 있도록 하려는 데이터 유형을 정의합니다. 저장 버튼을 클릭합니다.

앱 저장 후 생성된 스토어프론트 액세스 토큰은 페이지 하단 스토어프론트 API 영역에서 확인할 수 있습니다.

3단계: 독특한 매장 만들기

Shopify의 사용자 정의 스토어프론트 데모 애플리케이션 중 하나에 익숙해지는 것으로 시작하는 것이 좋습니다. 프로젝트에 React.js를 사용하기로 결정했다면 react-js-buy 저장소를 찾아볼 수 있습니다.

다음 단계는 사용자 정의 상점 첫화면 개발을 시작하는 것입니다. React.js 애플리케이션을 Shopify Storefront API와 통합하려면 다음 단계를 따르십시오.

• NPM을 사용하여 Javascript Buy SDK 모듈을 설치하십시오: npm install --save shopify-buy 또는 Yarn이 마음에 들면 yarn add shopify-buy 를 선택하십시오.

• 'shopify-buy'에서 클라이언트 에 포함하기 위해 Javascript Buy SDK 에서 클라이언트 가져오기 ; 응용 프로그램에 다음 클라이언트 개체를 제공합니다.

• 클라이언트 가 설정되면 Storefront API 에 대한 요청을 시작할 수 있습니다.

선택할 수 있는 헤드리스 옵션은 무엇입니까?

Shopify 상점 첫 화면에 새롭고 향상된 프런트엔드가 필요하다고 판단한 경우 세 가지 기본 접근 방식이 있습니다. 어떤 옵션을 선택하든 고유한 비즈니스 요구 사항에 따라 결정됩니다.

1. DIY

Shopify Plus를 기반으로 자체 헤드리스 아키텍처를 개발하면 모든 전자 상거래 기능에 대한 소유권을 얻고 잠재적으로 유연성을 높일 수 있습니다. 즉, 다른 사람의 시스템에 얽매이지 않고 개발 및 코딩을 주도할 수 있습니다.

그러나 처음부터 헤드리스 아키텍처를 구성하려면 상당한 개발 및 코딩 노력이 필요합니다. 예를 들어 Shopify 테마는 Liquid 템플릿 언어를 사용합니다. Liquid는 헤드리스로 사용할 수 없기 때문에 Shopify Storefront API를 통해 액세스할 수 있는 맞춤형 매장을 만들려면 React.js 및 Ember와 같은 프레임워크에 익숙한 팀이 필요합니다. 또는 정적 사이트를 구축하는 경우 Next.js 또는 Gatsby와 같은 프레임워크에 익숙해야 합니다.

2. 에이전시와 함께 개발

대행사를 적절하게 선택하면 Shopify의 백엔드와 인터페이스하는 헤드리스 사이트 개발 경험이 풍부하고 잠재적인 모든 위험과 이를 방지하는 방법에 대해 잘 알고 있는 사람과 협력하게 됩니다! 또한 에이전시는 맞춤형(최상의 옵션인 경우) 또는 서비스로서의 프론트엔드 제공업체와 파트너 관계를 맺어 소프트웨어 개발을 완료함으로써 매장을 머리 없이 진행하는 데 도움을 줄 수 있습니다.

에이전시는 설계 단계에서 귀하를 지원하고 조언할 수 있으며 귀하의 위대한 새 비전을 현실로 전환하는 데 필요한 지식을 보유할 것입니다. 그들은 Shopify 백엔드에서 가장 잘 작동하는 기능, 레이아웃 및 탐색에 대한 권장 사항을 제공하여 사이트를 최적화하는 데 도움을 줄 수 있습니다.

반면에 헤드리스 매장을 직접 관리해야 하는 책임은 여전히 ​​있습니다. 초기 설계 및 빌드가 완료되면 전체 작업을 원활하게 실행하는 것은 귀하와 귀하의 기술 직원에게 달려 있습니다. 이는 기술 스택의 수많은 움직이는 부분을 처리할 때 작은 위업이 아닙니다. 이는 파트너 기관과의 유지 계약을 통해 수행할 수 있습니다.

3. Frontend-as-a-Service 공급자 사용

플랫폼 및 사용자 지정 API의 패치워크를 조사, 설계, 개발, 테스트 및 배포하는 데 관심이 없다면 프론트엔드 공급자가 이를 처리할 수 있습니다. 당신이 얻는 것은 상점을 운영하는 데 필요한 모든 것을 포함하는 완벽한 솔루션입니다.

팀은 기술 스택의 여러 계층을 탐색하는 대신 직관적인 Experience Manager를 통해 모든 전자 상거래 및 마케팅 문제를 관리할 수 있으므로 일상적인 사이트 관리와 관련된 많은 기술적 골칫거리를 제거할 수 있습니다.

경험 플랫폼을 사용한다고 해서 웹 디자인 스튜디오와 협력하여 사이트를 재구축하는 것은 아닙니다. 수많은 프론트엔드 제공업체에는 전문 웹사이트 빌더인 파트너 회사가 있습니다. 즉, 상점의 효율적인 운영에 대한 숙련된 지원을 받을 뿐만 아니라 완전히 새로운 웹사이트도 받게 됩니다!

그럼에도 불구하고 기술 스택의 내부 구성 요소 중 일부를 직접 제어할 수 없게 됩니다. 단순히 코드에 들어가서 원할 때마다 몇 가지를 변경할 수는 없습니다. 프론트엔드 제공업체와 특정 기술적인 비하인드 스토리 변경 사항에 대해 논의해야 합니다.

Shopify 헤드리스 스토어의 예

1. 피드

Feed.com의 파트너인 Ben Kennedy는 처음에 Shopify 사이트를 헤드리스로 전환하여 얻을 수 있는 속도와 사용자 경험 향상에 대해 의심스러워 몇 가지 실험을 수행하기로 결정했습니다. 헤드리스 버전과 Shopify Liquid를 사용하는 두 가지 동일한 버전의 사이트를 개발한 후 헤드리스 버전이 Shopify Liquid 버전보다 5.24% 더 높은 전환율 과 10.28% 더 높은 방문자당 수입 을 제공한다는 것을 발견했습니다.

원시 수치와는 별도로 Ben은 그의 팀이 기본 코드에 참여하지 않고도 Shogun Frontend를 쉽게 구현할 수 있다는 점에 깊은 인상을 받았습니다.

2.페이.co

이 독일 보석 사업은 We Make Websites의 또 다른 헤드리스 Shopify 프로젝트였습니다. Alex는 이와 같은 사이트가 브랜드에 제공할 수 있는 이점에 대해 설명합니다. "Shopify Checkout은 항상 동급 최고의 UX(모바일 친화적, Apple Pay와 같은 대체 결제 방법 지원, 깔끔한 UI)와 안전하고 확장 가능한 플랫폼입니다." Shopify에서 제품 카탈로그를 유지 관리할 수 있는 기능뿐만 아니라 이점도 유지합니다."

또한 그는 "Shogun과 같은 제품을 사용하는 것은 좋은 단계입니다. JAMstack 앱 구축과 관련된 막대한 개발 노력을 피하면서 Shopify의 일부 플러그 및 재생 요소를 복제하지만 헤드리스(즉, 관심사의 분리 및 각 구성 요소가 전문화된 아키텍처)" 그리고 이러한 사이트는 "정적 빌드로 인해 안전하고 더 빠릅니다."

3. 폴 발렌타인

매력적인 보석 세공인이자 시계 제작자는 We Make Websites 에이전시와 제휴하여 헤드리스 사용자를 위해 웹사이트를 개편했습니다. 이전을 고려 중인 다른 많은 회사와 마찬가지로 Paul Valentine은 순수한 '플러그 앤 플레이' Shopify에서 이전할 수 있는 사이트 유지 관리에 대한 용이성과 통제력 부족에 대해 우려했습니다.

그러나 We Make Websites의 Alex O'Byrne에 따르면 트레이드오프는 그만한 가치가 있습니다. "헤드리스의 경우 적어도 웹 사이트 구축 전반에 걸쳐 보다 개발 집약적인 직원이 필요합니다."

결론

머리가없는 것은 온라인 판매자가 밤에 깨어있게하는 것입니다. 평판이 좋은 전자 상거래 플랫폼에서 비즈니스를 성장시키는 데 수년을 보냈지만 회사가 확장되면 원래 기능을 능가하게 된다는 것을 알게 되었습니다.

Shopify 헤드리스 전자상거래 매장을 생성하여 사용자는 Shopify 매장을 방문하지 않고도 제품을 탐색, 검색 및 선택할 수 있습니다. 그 외에도 고유한 코드베이스 및 템플릿을 유지 관리할 수 있습니다.

Shopify를 활용하여 브랜드를 성장시키고 있지만 이제 자유를 얻을 때가 되었다고 생각한다면 Shopify 사이트를 머리 없이 사용하는 것이 주요 개발 문제일 필요는 없습니다.