2022년 헤드리스 Shopify 스토어의 모범 사례

게시 됨: 2021-12-06

목차

지난 몇 년 동안, 특히 Covid-19 발생 이후 전자 상거래 산업은 고객에게 가장 원활하고 편리한 쇼핑 경험을 제공하기 위해 비약적으로 발전했습니다. 고객의 요구를 충족시키기 위해 온라인 상점은 끊임없이 혁신을 위해 노력하고 최신 기술 트렌드를 따라잡아야 합니다.

헤드리스 커머스(headless Commerce)는 최근 중소기업과 대기업 모두에서 많은 과대 광고를 하고 있는 대표적인 것이 될 것 같습니다. 현재 가장 지배적인 전자 상거래 플랫폼 중 하나인 Shopify는 판매자가 Shopify Plus를 통해 이러한 트렌드에 뛰어들도록 도왔습니다. 이 기사에서는 가장 성공적인 예를 통해 헤드리스 Shopify에 대한 일반적인 아이디어를 얻는 데 도움을 드립니다.

헤드리스 커머스 란?

헤드리스 상거래는 웹 사이트의 프런트엔드가 백엔드와 "분리"되는 전자 상거래 솔루션의 아키텍처를 나타냅니다. 간단히 이해하면 헤드리스 상거래를 사용하면 모든 백엔드 상거래 기능에서 디지털 상점을 분리할 수 있습니다. 분리된 측면은 독립적으로 작동하고 API( 애플리케이션 프로그래밍 인터페이스) 통해 통신하므로 상점 소유자는 프런트엔드 또는 "프레젠테이션 계층"의 사용자 정의에 대해 더 많은 제어를 할 수 있습니다.

이 기술을 처음 접하는 경우 헤드리스 상거래를 더 잘 이해할 수 있도록 포괄적인 기사를 제공합니다.

  • 헤드리스 커머스란?
  • 헤드리스 커머스의 15가지 모범 사례

Shopify에서 제공하는 헤드리스 상거래

현재 Shopify는 23% 이상의 시장 점유율과 100만 명 이상의 사용자를 보유한 최고의 전자 상거래 플랫폼입니다. Shopify가 중소기업을 위한 최선의 선택인 것은 사실이지만 이는 절반에 불과합니다. 2014년에 Shopify는 대규모 엔터프라이즈 브랜드를 위해 특별히 설계된 업그레이드된 계획인 Shopify Plus를 출시했습니다.

비즈니스에 맞춤형 엔터프라이즈 솔루션을 제공하기 위해 Shopify Plus는 항상 최고의 첨단 기술을 위해 노력하고 있으며 헤드리스 아키텍처도 그 중 하나입니다. Shopify를 헤드리스로 전환하면 Shopify가 제공하는 모든 백엔드 기능은 그대로 유지되는 동시에 다양한 프런트엔드를 활용하여 Shopify 스토어의 고객 대면 측면을 강화할 수 있습니다. 헤드리스 접근 방식은 유연한 URL 구조와 같은 기본 Shopify와 함께 제공되는 몇 가지 제한 사항을 저장하고 사용자 정의 및 개인화 옵션에 대한 광범위한 가능성을 열어줍니다.

Shopify 헤드리스 다이어그램
출처: Shopify

헤드리스 상거래가 전자 상거래 판매자의 비즈니스 방식에 얼마나 큰 영향을 미칠 수 있는지 알고 있는 Shopify는 이제 Shopify 판매자와 개발자가 최고의 개인화된 쇼핑 경험을 제공하는 맞춤형 상점을 구축하는 데 도움이 되는 React 기반 프레임워크인 Hydrogen을 개발하고 있습니다. Shopify Headless 및 Hydrogen은 이제 판매자가 백엔드에서 Shopify 최적화 전자 상거래 구성 요소를 유지하면서 최고 수준의 프론트 엔드 성능에 대한 더 많은 제어를 달성할 때 전자 상거래 업계의 판도를 바꿀 것으로 예상됩니다.

헤드리스 Shopify 스토어의 모범 사례

Shopify 헤드리스 작동 방식을 깊이 이해하기 위해 Shopify에서 제공하는 헤드리스 매장의 가장 좋은 예를 분석해 보겠습니다.

1. 베이비리스트

베이비리스트 웹사이트

Babylist는 부모가 선물을 주는 사람과 위시리스트를 공유하기를 기대하는 온라인 플랫폼입니다. 이 사이트는 타사 공급자의 목록에 있는 모든 제품을 사용자에게 가져와서 사용자가 비교하고 제품 권장 사항을 찾아보고 구매를 위한 최상의 옵션을 선택할 수 있도록 합니다. 모든 것이 하나의 웹사이트에서만 수행될 수 있으며, 모놀리식 전자상거래 플랫폼에서 이 사이트를 만드는 것이 얼마나 복잡한지 보여줍니다. 따라서 Babylist는 CMS(Contentful), 주문 관리 시스템(Shopify) 및 체크아웃(Shopify Plus)을 포함하여 원활한 웹 성능을 유지하기 위해 Shopify 헤드리스를 선택하고 여러 플랫폼을 통합했습니다.

Headless 접근 방식을 채택한 이후 Babylist는 주문량이 전년 대비 145% 증가했으며 첫 달 이후 월별 iOS 앱 체크아웃이 300% 증가했으며 온라인 플랫폼을 통해 제공되는 선물도 전년 대비 102% 증가했습니다.

2. 본룩

본룩 웹사이트

헤드리스 방식은 전자상거래 브랜드를 위한 고급 솔루션일 뿐만 아니라 옴니채널에서 판매하는 매장에도 유용합니다. BonLook은 디자인된 렌즈와 처방 안경을 전 세계에서 온라인으로 판매하는 캐나다 브랜드이며 캐나다 전역에 37개의 실제 매장이 있습니다. 처방 안경을 온라인으로 판매하는 것은 사용자가 처방전을 업로드하고 렌즈 재질, 프레임 유형 및 크기, 유리 디자인과 관련하여 다양한 옵션을 선택해야 하기 때문에 상당히 복잡할 수 있습니다. Headless Shopify Plus를 사용하면 고객이 온라인 또는 오프라인 채널에서 쇼핑할 수 있을 때 Bonlook이 옴니채널 비즈니스를 완벽하게 운영할 수 있어 평균 주문 금액이 18% 증가 했습니다.

3. 그림

무화과 웹사이트

헤드리스 접근 방식을 사용하는 또 다른 Shopify 비즈니스는 의료 의류 및 라이프스타일 브랜드인 Figs입니다. Figs는 Shopify Plus를 사용하여 백엔드 기능을 관리하지만 온라인에서 사용자 지정에 더 많은 유연성이 필요하기 때문에 Unbounce 및 Next.js를 사용하여 프런트엔드를 제어했습니다. 헤드리스 접근 방식은 각 맞춤형 랜딩 페이지를 Shopify의 제품 페이지와 연결하는 데 도움이 되며, 이는 도 1 및 도 2에서 고객의 온라인 쇼핑 경험을 크게 향상시킵니다. 또한 모든 데이터는 Shopify Plus로 다시 호출되며 FIG는 여기에서 문제 없이 몇 분 안에 주문을 관리하고 재고를 업데이트할 수 있습니다.

4.

볼스 웹사이트

암스테르담에 본사를 둔 가장 오래되고 가장 사랑받는 주류 브랜드 중 하나인 Bols도 Shopify 헤드리스에서 잠재력을 보았습니다. Bols는 새로운 가정용 제품 범위를 만든 이후로 사업을 확장하여 국제적 규모로 고객에게 직접 판매하기로 결정했습니다. 헤드리스 Shopify Plus 설정 덕분에 페이지 로드 속도가 50% 증가했으며 맞춤형 상점을 통해 고객에게 풍부한 콘텐츠 경험을 제공할 수 있는 모든 능력을 얻었습니다.

5. 빅토리아 베컴 뷰티

빅토리아 베컴 홈페이지

빅토리아 베컴 뷰티(Victoria Beckham Beauty)는 명성에 걸맞는 프리미엄 맞춤형 온라인 입지를 제공하는 것을 목표로 하는 럭셔리 뷰티 및 코스메틱 브랜드입니다. 그렇기 때문에 시각적 디자인, 사용자 여정 및 제품 구성에서 더 많은 유연성을 달성하기 위해 Shopify 헤드리스 접근 방식을 선택했습니다. Victoria Beckham Beauty는 Shopify 매장 API를 사용하여 인벤토리 및 제품 정보를 관리하는 동시에 Contentful에서 프런트엔드를 디자인하고 생성합니다. 헤드리스 접근 방식을 통해 사이트는 페이지 새로고침 없이 모바일에서 놀랍도록 빠른 앱과 같은 경험을 누렸고 최상위 판매 유입경로에서의 속도 증가는 전환율에도 긍정적인 영향을 미쳤습니다.

6. 코트엔

KOTN 홈페이지

캐나다에 기반을 둔 의류 브랜드인 KOTN은 Shopify 헤드리스 API를 활용하여 두 개의 매장을 하나로 통합한 우수한 사례 연구입니다. KOTN의 전자 상거래 사이트는 헤드리스 빌드로 시작하지 않았지만 이제 Shopify Plus에 의해 완전히 헤드리스 구동됩니다. 헤드리스 아키텍처는 매장을 관리하고 고객에게 즉시 사용 가능한 개인화된 경험을 제공할 수 있는 전체 기능을 제공했습니다. 그들의 상점은 이제 몇 초 만에 변경할 수 있으며 가장 좋은 점은 성수기와 트래픽이 많은 경우에도 사이트 속도가 엄청나게 빠르다는 것입니다.

7. 피드

피드 웹사이트

영양, 피트니스 및 웰빙 마켓플레이스인 Feed는 부진한 사이트 성능과 프론트엔드 디자인 제한으로 어려움을 겪고 있었습니다. 소비자에게 더 빠르고 원활한 웹사이트 경험을 제공하고 신제품의 출시 시간을 단축하기 위해 The Feed는 Shopify Plus를 헤드리스 플랫폼으로 사용하고 Shogun Frontend를 사용하여 프런트엔드를 관리하는 사이트를 다시 시작하기로 결정했습니다. 더 빨라진 사이트 성능과 동적 홈페이지 기능은 피드의 이탈률을 4.5% 감소시키고 세션당 페이지 조회수를 10.8% 증가시켰습니다.

8. 뱀포드

뱀포드 웹사이트

Bamford는 영국의 고급 유기농 바디 케어 및 라운지웨어 브랜드입니다. Bamford는 매장과 스파의 고객 경험을 반영하도록 웹사이트를 재구축하면서 이전과 같은 단순한 커뮤니케이션과 원활한 쇼핑 경험을 유지하기를 원했을 때 Shopify Headless를 솔루션으로 선택했습니다. WooCommerce에서 벗어나 Bamford는 헤드리스 플랫폼인 Shopify Plus와 CMS 플랫폼인 Contentful을 사용하여 전자 상거래 사이트를 다시 플랫폼화했습니다. 이 통합은 Shopify 플랫폼 덕분에 빠른 웹 로드 속도, 향상된 백엔드 성능 및 향상된 보안을 유지했습니다. 한편 Bamford는 프론트엔드에서 여전히 무한한 창의성을 얻었으며, 이를 활용하여 고객에게 단순하고 깨끗하면서도 미적 웹 존재를 제공했습니다.

헤드리스 기반 기술 혁신은 웹 성능을 크게 활용했습니다. 재출시 첫 6개월 이내에 Bamford는 수익이 140% , 트래픽이 35% , 전환율이 60% 증가했습니다.

9. 풀뿌리 농민협동조합

잔디 뿌리 농부 웹사이트

Grass Roots Farmers' Cooperative는 미국 전역에서 지속 가능한 고기를 판매하는 농부 소유 협동조합입니다. 그들은 헤드리스가 놀라운 경험을 만드는 데 도움이 될 수 있는 최첨단 기술이라고 믿었기 때문에 헤드리스 상거래 플랫폼으로 Shopify Plus를 선택했습니다. 또한 Netsuite 및 Ruby on Rails와 같은 여러 플랫폼을 통합하여 맞춤형 제품 페이지, 체크아웃 및 비즈니스 관리를 지원합니다. 헤드리스 접근 방식은 매장에서도 PWA 성능을 상당히 향상시켰습니다.

우리의 프로그레시브 웹 앱은 모바일 평균 주문 가치를 크게 높였습니다. 수익 증가와 함께 우리는 지속 가능성 노력을 지원합니다.

Cody Hopkins, 창립자이자 Grass Roots Farmers' Cooperative CEO

10. 폴 발렌타인

폴 발렌타인 홈페이지

폴 발렌타인은 독일에 본사를 둔 럭셔리 주얼리 및 액세서리 브랜드입니다. Paul Valentine이 진정한 글로벌 브랜드가 되는 궁극적인 목표를 달성하기 위해 그들은 시장을 국제적으로 성장시켜야 한다는 것을 알고 있었지만 동시에 여러 시장을 탐색하려고 할 때 상당한 도전이 될 수 있습니다. Shopify Plus는 Paul Valentine이 유럽과 북미에 걸쳐 5개의 글로벌 매장을 런칭하는 데 도움이 되었으며 전체 로컬라이제이션을 위해 정확히 똑같은 온라인 매장은 없습니다. 헤드리스(headless) 방식은 더 맞춤화된 고객 경험을 제공하고 여러 글로벌 매장 인프라를 손쉽게 관리할 수 있는 능력을 제공했습니다. 현재 Paul Valentine은 8개 언어로 제공되는 20개 온라인 글로벌 매장을 통해 131개국에서 판매되고 있어 헤드리스 접근 방식은 그만한 가치가 있습니다.

결론

Shopify 플랫폼을 설계할 때 헤드리스 방식은 필수 옵션이 아닙니다. 그러나 궁극적인 사용자 지정 가능성 및 유연성과 같은 제공할 수 있는 모든 장기적 이점을 고려할 때 헤드리스 Shopify는 가까운 장래에 많은 브랜드에서 채택할 웹 개발 접근 방식인 것 같습니다. Shopify 비즈니스가 확장 중인 경우 매장을 헤드리스로 전환하는 것이 사이트 성능을 활용하기 위한 합리적인 개발일 수 있습니다.

최신 기술 트렌드를 따라잡고 Hydrogen을 사용하여 헤드리스 상거래로 Shopify 스토어에 권한을 부여하려는 경우 SimiCart가 도와드리겠습니다. 당사의 Hydrogen 매장 개발 서비스는 내장된 드래그 앤 드롭 페이지 빌더 도구로 매장 전면 디자인 프로세스를 단순화하고 전환율이 높은 전문 매장을 제공합니다.

헤드리스 Shopify 스토어 만들기