헤드리스 전자 상거래란 무엇이며 왜 사용해야 하며 어떻게 사용해야 합니까?

게시 됨: 2020-05-13

전자 상거래 세계는 지속적으로 변화하고 있으며 머리를 잃을 수도 있습니다. 네, 맞습니다. 헤드리스 상거래는 새로운 것이 될 수 있고 전자 상거래의 미래가 될 수 있습니다. 헤드리스 커머스는 점차 그 인기를 높이고 있습니다. 전자 상거래의 새로운 이름이지만 더 빠른 웹 사이트 로드, 더 많은 개인화 선택 및 많은 것을 포함하여 상점 소유자와 고객 모두에게 많은 이점을 제공했습니다. 헤드리스 커머스는 B2B 및 B2C 비즈니스 모두의 표준이 될 수 있습니다. 설문 조사에 따르면 비즈니스 소유자의 86%가 고객 확보 비용 증가를 경험하고 있다고 말합니다. 따라서 기업은 고객을 유치할 수 있는 온라인 경험을 만들어야 합니다. 많은 소매업체가 콘텐츠 중심 온라인 상점을 달성하기 위해 사용하는 전략은 헤드리스 상거래입니다.

헤드리스 커머스란?

Headless Commerce는 프론트엔드 프레젠테이션 레이어가 전자상거래 애플리케이션의 모든 기능을 담당하는 백엔드 솔루션에서 분리되었음을 의미합니다. 이러한 분리로 인해 개발자나 상점 소유자는 고객 경험에 영향을 주지 않고 쉽게 변경할 수 있습니다. CMS 저장소는 프런트 엔드 계층 없이 콘텐츠를 관리하고 제공합니다.

대부분 헤드 또는 프론트엔드는 템플릿이나 테마가 분리되거나 제거되어 백엔드만 남게 됩니다. 제품, 블로그 게시물, 리뷰 및 평가와 같은 콘텐츠를 화면이나 장치에 전달하기 위해 프론트엔드 개발자는 원하는 프레임워크를 사용하여 해당 콘텐츠를 표현하는 방법에 중점을 둡니다.

헤드리스 커머스가 전자상거래 비즈니스에 어떻게 도움이 됩니까?

전자 상거래 비즈니스를 위한 헤드리스 상거래의 이점
고객의 기대치가 지속적으로 높아짐에 따라 고객이 더 나은 쇼핑 경험에 노출될 때마다 다른 브랜드에 대한 기대치가 상당히 높아집니다. 이는 궁극적으로 전자 상거래 환경이 변화하고 있으며 전자 상거래 소유자가 시장에 서기 위한 속도를 유지해야 함을 의미합니다. 더 빠르게 움직일 수 있는 민첩성을 제공합니다. 헤드리스 상거래가 전자 상거래 비즈니스에 도움이 될 수 있는 주요 방법은 다음과 같습니다.

  • 유연하고 사용자 정의 가능: 콘텐츠를 쉽게 관리하고 모든 채널에 전달할 수 있습니다. 개발자는 제한 없이 처음부터 UX를 만들 수 있습니다. 템플릿과 사전 패키지 모듈이 UX를 결정하는 기존 플랫폼에서는 달성할 수 없습니다. 개발자는 또한 PIM, OMS, ERP, 배송 물류와 같은 솔루션을 쉽게 구현할 수 있습니다. 앱을 통한 수정, 개선, 확장 또한 고객 계정에 사용자 지정 체크아웃 흐름 또는 새 필드를 추가합니다.
  • API 전달 상거래: 헤드리스 상거래에서는 프레젠테이션 계층이 없으므로 API를 사용하여 상거래가 발생할 위치를 결정할 수 있습니다. 사용자가 어떤 기기나 채널을 사용하는지에 관계없이 데이터를 사용할 수 있습니다. 웹 애플리케이션에서 IoT에 이르기까지 CMS와 통합할 수 있는 옴니채널 네트워크가 많이 있습니다. 대부분 REST API와 GraphQL을 사용합니다.
  • 고도로 미래 지향적: 상호 의존성이 없기 때문에 상점 소유자는 더 빠른 속도로 새로운 솔루션을 쉽게 구현하고 개발할 수 있습니다. 백엔드 로직을 재구성할 필요가 없습니다. 헤드리스 상거래는 또한 혁신이 항상 추진되도록 새로운 기술을 지원합니다.

PWA 기술은 헤드리스 커머스 기술과 어떤 관련이 있습니까?

전자 상거래를 위한 PWA
프로그레시브 웹 애플리케이션 또는 PWA는 헤드리스 커머스 솔루션을 구현하는 가장 좋은 방법입니다. 헤드리스 커머스의 진정한 잠재력은 콘텐츠를 다른 UI로 전달하는 데 문제가 없을 때 실현됩니다. 그러나 PWA와 Headless Commerce는 어떻게 이를 가능하게 합니까?

헤드리스 상거래는 정보를 정말 빠르게 업데이트하고 즉시 제공합니다. 앱을 실행할 수 있는 클라우드 기능을 제공합니다. 또한 앱에 기능을 포함할 수 있는 완전한 자유를 제공하며 코딩 언어는 앱 개발에 제한이 없습니다. PWA가 헤드리스가 되었을 때 만들어진 용어는 PWA 헤드리스입니다. PWA 헤드리스에서는 API를 통해 데이터를 가져와서 더 발전시킵니다. 헤드리스 PWA를 사용하면 앱 소유자는 빌드 증거를 유지할 수 있는 이점을 얻습니다. 전체 콘텐츠를 다시 구현하지 않고도 디자인을 새로 고칠 수 있습니다. PWA는 이미 웹 및 모바일 앱 플랫폼에서 최고의 솔루션 중 하나이며 헤드리스 기능을 추가하는 것은 캡의 또 다른 기능이 될 것입니다.

  • 표준화: 최신 기술이 적용된 헤드리스 PWA를 통해 더 빠른 개발이 가능합니다. 이것은 차례로 표준의 달성을 허용할 것입니다.
  • 새로운 아키텍처: 헤드리스 PWA를 사용하는 마이크로서비스의 새로운 아키텍처로 번개처럼 빠른 프론트엔드를 달성할 수 있습니다.
  • 최신 기술 스택: PWA는 개발자가 최소 시간에 더 빠른 전자 상거래 상점을 개발할 수 있는 유연성을 제공하는 ReactJS를 사용합니다.
  • 헤드리스 메커니즘: 헤드리스 접근 및 디커플링을 통한 API 연결은 프런트엔드에 영향을 주지 않고 백엔드 수정을 허용합니다.
PWA 헤드리스 PWA
1. PWA의 테마는 웹 사이트의 테마에서 상속됩니다.

2. 이를 사용하려면 웹사이트 테마가 완벽하게 모바일 반응형이어야 합니다.

3. 네이티브와 같은 접근 방식이지만 웹 사이트와 독립적으로 PWA의 레이아웃/UI/디자인을 다시 코딩할 수 없기 때문에 가깝지는 않습니다.

4. 관리자는 프로그레시브 웹 애플리케이션의 스플래시 배경색과 테마 색상을 설정할 수 있습니다.

5. 이 PWA에는 독립적인 테마가 없으므로 테마에 PWA 특정 캐러셀이 없습니다.

1. PWA의 테마는 웹사이트의 테마를 계승하지 않습니다. ReactJS에서 개발한 자체 테마가 있습니다.

2. 웹사이트의 테마에 상관없이 어떤 경우에도 사용할 수 있습니다.

3. 프론트엔드가 PWA의 테마를 변경하기 위해 독립적으로 다시 코딩될 수 있기 때문에 네이티브 앱에 매우 가깝습니다.

4. 스플래시 배경색, 테마 색상, 텍스트 색상, 버튼 색상 및 버튼 위치도 관리자 측에서 결정할 수 있습니다.

5. 캐러셀 및 캐러셀 이미지는 관리자가 관리하고 추가할 수도 있습니다.

또한 읽어보십시오: Magento 전자 상거래 상점을 위해 PWA를 개발해야 하는 이유는 무엇입니까?

헤드리스 커머스의 이점은 무엇입니까?

헤드리스 커머스
헤드리스 상거래의 많은 부분을 이해한 후에는 프론트엔드, API, 백엔드와 같은 세 부분으로 구성된 구조가 비즈니스와 매우 관련이 있고 너무 기술적인 영역을 떠나는 이유에 대해 더 자세히 살펴보겠습니다.

1. 진정한 옴니채널

헤드리스 CMS를 사용하면 어디에서나 콘텐츠를 추진할 수 있습니다. 전자 상거래의 경우 제품, 비디오, 블로그, 리뷰 등을 전달하는 것을 의미합니다. 또한 디지털 사이니지 또는 PWA를 통해 판매할 수도 있습니다. API를 사용하면 전자 상거래 플랫폼을 다양한 판매 채널에 연결할 수 있습니다.

2. 높은 경쟁력

헤드리스를 사용하면 백엔드 시스템에 큰 영향을 주지 않고 빠른 업데이트를 수행할 수 있습니다. 따라서 소비자 요구의 속도와 일치하도록 프런트 엔드를 변경하십시오. 예를 들어 모바일 사용자가 증가함에 따라 고도로 최적화된 모바일 브라우징 경험을 쉽게 제공할 수 있습니다. 프론트엔드는 백엔드에 크게 의존하지 않기 때문에 백엔드에서 많은 사용자 정의를 수행할 필요 없이 보상 프로그램을 추가할 수 있습니다.

3. 강력한 애자일 마케팅

새로운 고객 경험을 디자인하고 싶거나 새로운 소셜 미디어 플랫폼에서 채널을 홍보하고 싶으십니까? 헤드리스 커머스로 쉽게 할 수 있습니다. Magento, Shopify 및 BigCommerce와 같은 주요 전자 상거래 플랫폼을 사용하면 다양한 소셜 미디어 플랫폼에서 제품을 판매하고 홍보할 수 있습니다. 따라서 헤드리스 상거래에서 몇 주 안에 캠페인을 수행할 수 있습니다.

4. 실험의 자유

전체 시스템을 위험에 빠뜨릴 염려 없이 고객 사용자 인터페이스에서 새로운 실험을 수행할 수 있습니다. 예를 들어 특정 부품을 A/B 테스트하려면 PWA를 빌드하면 백엔드 작업에 영향을 주지 않고 프로세스에서 일부 오류를 생성할 수 있고 백엔드 작업에 영향을 주지 않고 프로세스에서 일부 오류를 생성할 수 있습니다.

5. 확장성

개발자는 프런트엔드와 백엔드를 개별적으로 확장할 수 있습니다. 프론트엔드에 많은 트래픽이 있더라도 느슨하게 연결된 백엔드만큼의 영향을 미치지는 않습니다. 따라서 운영 비용이 절감되고 가용성이 안정화됩니다.

최고의 헤드리스 상거래 플랫폼

1. 어도비 헤드리스 커머스

거의 1년 전 Adobe Commerce Cloud는 기업 고객의 높은 고객 경험 요구 사항을 충족하기 위해 Headless 제품을 출시했습니다. 지속적인 통합 및 전달 프로세스를 위한 강력하고 매우 유연한 인프라이며 고객이 코드를 빠르고 민첩하게 반복할 수 있도록 지원합니다.

2. 빅커머스 헤드리스 커머스

Bigcommerce를 사용하면 여러 플랫폼의 여러 상점에 전력을 공급할 수 있습니다. 하나의 BigCommerce 계정에서 다양한 프론트 엔드 솔루션에서 동시에 여러 상점을 자유롭게 운영할 수 있습니다.

3. Hybris 헤드리스 커머스

Hybris 헤드리스 상거래는 SAP Commerce 클라우드의 Angular JS로 혁신되었습니다. 최신 JS 상점을 사용하여 개발을 단순화하고 속도를 높입니다. 확장 가능하며 상점은 REST API를 사용하여 커머스 플랫폼과 통신합니다. 비즈니스 요구 사항에 맞게 사용자 지정할 수 있습니다.

4. Shopify 헤드리스 커머스

Shopify Headless Commerce는 키오스크, 광고판, 스마트 거울, 웨어러블 및 자동 판매기와 같은 혁신적이고 창의적인 매장을 통해 고객을 참여시킵니다. 캠페인을 업데이트하기 위해 애자일 마케팅 및 A/B 테스트를 실험합니다.

5. 마젠토 헤드리스 커머스

Magento는 별도의 프레임워크나 헤드리스 CMS를 통해 헤드리스 빌드의 백엔드에 매우 적합합니다. Magento의 페이지 빌더 또는 콘텐츠 스테이징 및 미리보기는 이에 해당하는 기능의 좋은 예입니다.

또한 읽기: Magento 2.3 PWA 설치 – 전체 가이드

6. Drupal 헤드리스 커머스

Drupal Commerce를 사용하면 헤드리스 커머스를 구현할 수 있으며 대부분의 경우 순간에 강력한 영감이 일시적인 변덕으로 줄어들기 때문에 고조된 감정의 순간을 수익화하는 데 도움이 됩니다.

7. Salesforce 헤드리스 커머스

Salesforce Headless Commerce 접근 방식은 브랜드가 소유 및 타사 플랫폼에서 고객을 만날 수 있도록 하기 때문에 CLV(고객평생가치)를 높일 것입니다.

헤드리스 전자상거래를 위한 프론트엔드 프레임워크

헤드리스 상거래를 위한 최고의 프론트엔드 프레임워크는 다음과 같습니다.

  • Vue.js: Vue.js는 가볍고 진보적인 JS 프레임워크 중 하나입니다.
  • React.js: React.js는 멋진 사용자 인터페이스를 구축하기 위한 선언적 JS 라이브러리입니다.
  • Angular: 대화형 웹 애플리케이션 개발에 가장 적합한 TypeScript 기반 오픈 소스 프레임워크
  • Nuxt.js: Vue.js 위에 구축된 오픈 소스 고급 프레임워크입니다.
  • Inferno.js: Inferno.js는 최신 사용자 인터페이스를 개발하기 위한 매우 빠른 JS 라이브러리입니다.
  • Next.js: Vue.js 프레임워크를 기반으로 하는 오픈 소스 JS 프레임워크입니다.
  • Express.js: Node.js의 사실상의 표준 서버 프레임워크라고 합니다.

더 읽어보기: 전자 상거래 모바일 앱을 개발하는 방법은 무엇입니까?

헤드리스 커머스를 위한 미들웨어 오케스트레이션 계층

어떤 식으로든 프런트 엔드는 헤드리스 상거래 애플리케이션 프로그래밍 인터페이스에서 모든 데이터를 가져와야 합니다. 상거래 API를 프런트 엔드에서 직접 호출하는 대신 캐싱과 같은 다양한 서비스를 제공하고 안정적인 고대역폭 연결을 통해 여러 외부 시스템의 응답을 통합할 수 있는 미들웨어 오케스트레이션 계층을 추가하는 것을 선호합니다. 상거래 데이터를 표시하는 것 외에도 대부분의 구현은 CMS와 상호 작용합니다.

우리는 주로 Node.js가 매우 효율적이고 생산적이라는 것을 알기 때문에 오케스트레이션 레이어를 Node.js로 작성하는 것을 선호합니다. Node.js에는 수많은 라이브러리가 있는 번창하는 개발 커뮤니티가 있으며 개발 워크플로를 지속적으로 개선하고 있습니다. 프론트 엔드 자바스크립트와의 호환성은 클라이언트와 서버 간에 코드를 공유할 수 있게 하는 또 다른 이점입니다(동형 서버 측 렌더링에서 수행하는 작업과 유사).

헤드리스 커머스를 위한 CMS

Headless Commerce를 위한 최고의 CMS는 다음과 같습니다.

  • Amplience: Amplience는 주로 헤드리스에 사용되는 엔터프라이즈급 플랫폼입니다.
  • Acquia: Acquia는 헤드리스를 위한 drupal 기반 CMS 플랫폼입니다.
  • Butter CMS: ButterCMS는 API 기반 또는 "헤드리스" CMS로, 이를 통해 클라이언트 활성화 측면에서 WordPress와 동일한 작업을 수행할 수 있습니다.
  • Cockpit: Cockpit은 구조화된 콘텐츠를 관리하기 위한 매우 간단한 콘텐츠 플랫폼입니다. 자체 호스팅 헤드리스 및 API 기반 CMS입니다.
  • Contentstack: Contentstack은 비즈니스 및 기술 팀을 하나로 모아 개인화된 옴니채널 디지털 경험을 제공합니다.
  • Contentful: 정확히 CMS는 아니지만 Contentful은 기존 CMS가 할 수 있는 모든 것을 할 수 있습니다.
  • Core dna: Core dna는 헤드리스 SaaS CMS 및 상거래 플랫폼입니다. 팀이 전자 상거래 사이트를 신속하게 시작하고 디지털 마케팅을 구현할 수 있도록 지원합니다.
  • Craft: Craft를 헤드리스 CMS로 사용하려면 일반 웹사이트 대신(또는 이에 추가하여) 콘텐츠 API로 작동해야 합니다.
  • DatoCMS: DatoCMS는 헤드리스 CMS입니다. 중앙 허브에서 대규모 온라인 콘텐츠를 생성하고 API를 통해 웹사이트 및 기타 디지털 경험에 쉽게 배포할 수 있습니다.
  • Deity: Deity는 React.js 기반 API 우선 헤드리스 전자상거래 플랫폼입니다.
  • Directus: Directus 8은 사용자 지정 SQL 데이터베이스를 동적 API로 래핑하고 콘텐츠 관리를 위한 직관적인 관리 앱을 제공하는 데이터 우선 헤드리스 CMS입니다.
  • Gatsby: Gatsby는 React 및 GraphQL을 기반으로 하는 정적 사이트 생성기입니다. 헤드리스 CMS는 정적 사이트 생성기가 읽을 수 있는 읽기 전용 API를 제공합니다.

헤드리스 전자상거래를 위한 정적 사이트 생성기 플랫폼

  • Jekyll: Jekyll은 간단한 블로그 인식 개인 또는 조직 사이트를 제공합니다. GitHub 공동 창립자 Tom Preston-Werner가 Ruby 언어로 작성했습니다.
  • Hugo: Hugo는 가장 인기 있는 오픈 소스 정적 사이트 생성기 중 하나이며 놀라운 속도와 유연성을 제공합니다.
  • Gatsby: Gatsby는 React를 위한 놀랍도록 빠르고 현대적인 사이트 생성기입니다. 또한 블로그, 전자 상거래 사이트 및 본격적인 앱을 구축할 수 있습니다.
  • Spike: Spike는 웹팩을 기반으로 구축된 고급 최신 정적 사이트 생성기입니다.
  • Wyam: Wyam은 매우 구성 가능한 모듈식 정적 콘텐츠 생성기 및 툴킷입니다.
  • VuePress: VuePress는 각 페이지에 대해 미리 렌더링된 정적 HTML을 생성하고 페이지가 로드되면 SPA로 실행됩니다. 전자 상거래 개발자를 고용

헤드리스 커머스의 10가지 모범 사례

1. 나이키

나이키
Nike는 더 많은 전환율을 위해 PWA로 머리를 깎았습니다. 신발 제조업체 거인은 전환율을 15-30%로 높였습니다.

2. 금성

비너스 패션
Venus Fashion은 헤드리스로 이동하여 모바일 웹 페이지의 평균 로드 시간을 320밀리초로 줄였습니다. 페이지 로딩 속도를 15%에서 73%로 증가시킵니다.

3. 코알라

코알라 매트리스
호주 최고의 매트리스 브랜드인 Koala는 코드에서 콘텐츠를 분리하여 엔지니어와 작가가 서로 종속되지 않도록 했습니다. 따라서 이제 새 페이지, 제품 및 콘텐츠를 훨씬 빠르게 만들 수 있습니다.

4. 대상

전자상거래 대상
Target은 미국의 또 다른 선도적인 전자 상거래 업체입니다. 헤드리스를 채택하여 이탈률을 줄이고 SEM의 ROI를 높였습니다.

5. 아마존

아마존
가장 큰 전자 상거래 거대 기업인 Amazon은 또한 전자 상거래의 새로운 경쟁 전장인 매혹적인 사이트 속도를 위해 헤드리스를 채택했습니다.

6. 월마트

월마트
헤드리스 상거래의 또 다른 가장 큰 예는 코드를 단순화/축소하여 웹사이트 개선 속도를 높인 Walmart입니다.

7. 유나이티드 항공

유나이티드 항공사
전자 상거래뿐만 아니라 United Airlines와 같은 항공 사이트는 PWA에 헤드리스를 채택했습니다.

8. 랑콤

랑콤 화장품
Lancom은 고급 화장품 브랜드로 2019년 Forbes의 가장 가치 있는 브랜드로 선정되었습니다. 또한 PWA의 이점 때문에 헤드리스로 채택되었습니다.

9. 카니발 크루즈 라인

카니발 크루즈 라인
여행자라면 이 이름을 들어봤을 것입니다. Carnival Cruise Line은 세계 최대의 여행 레저 업체 중 하나입니다. 그들은 헤드리스를 채택했고 예약 관리에 좋습니다.

10. 독특한 느낌

독특한 느낌
Feel Unique는 유럽 최고의 미용 제품 소매업체입니다. 그들은 헤드리스 접근 방식으로 React PWA를 개발했습니다.

헤드리스 커머스의 단점

플랫폼의 장점이 얼마나 많든 간에 항상 주의해야 할 몇 가지 단점이 있습니다. 그럼 헤드리스 커머스의 단점에 대해서도 알아보겠습니다.

원가계산

프론트엔드와 백엔드를 분리함에 따라 이제 두 개의 별도 환경에 지출해야 합니다. 즉, 비용이 두 배가 됩니다. 헤드리스 상거래를 설정하는 데에도 선행 비용이 발생할 수 있습니다.

복잡성 증가

이제 자체적인 버그 및 보안 문제와 함께 설치, 구성, 문제 해결 및 지원 방법이 있는 여러 공급업체 및 기술을 처리하게 됩니다. 이러한 모든 작업에는 더 많은 작업이 필요하고 복잡성이 증가합니다.

기본 전자상거래 기능 상실

현재 전자상거래 플랫폼에 따라 프론트엔드에서 분리한 후 기본 프론트엔드 기능을 잃을 수도 있습니다. 페이지 작성, 미리보기(WYSIWYG) 및 상품화와 같은 기능은 더 이상 사용할 수 없습니다.