Shopify Hydrogen 데모 스토어 목록 [업데이트 중]

Shopify는 SaaS 전자 상거래 플랫폼이므로 사용자는 온라인 상점을 사용자 정의하는 데 많은 제한 사항에 직면하지만 Hydrogen에서는 더 이상 그렇지 않을 수 있습니다.

Hydrogen은 개발자가 맞춤형 상점을 구축하기 위한 Shopify의 첫 번째 React 기반 프레임워크입니다. React Server 구성 요소, 서버 측 렌더링 및 캐싱 API를 사용하여 프레임워크는 개발자가 짧은 시간에 빠르고 매우 유연한 상점을 만들 수 있습니다.

데모 저장소는 프레임워크, 해당 구조 및 구성 요소에 익숙해지는 데 도움이 됩니다. 또한 Shopify Hydrogen 매장이 실제로 어떻게 보이고 작동하는지에 대한 명확한 아이디어를 제공합니다.

Shopify Hydrogen 매장 데모

1. Shopify의 공식 데모

공식 데모는 개발자를 위한 온라인 환경인 StackBlitz에 업로드됩니다. 실시간 미리보기는 오른쪽 패널에서 몇 초 안에 가져옵니다. 모바일에서는 이 데모 스토어를 볼 수 없습니다.

2. 쇼피파이 공급

이것은 실제로 데모 스토어가 아니라 Shopify 자체에서 Hydrogen으로 만든 공식 스토어입니다.

3. Tapita의 수소 데모

Shopify Hydrogen 프론트엔드 데모는 SimiCart에서 Tapita Hydrogen 페이지 빌더를 사용하여 모든 페이지를 끌어서 놓는 데 사용합니다.

4. rafaelcg.com의 수소 데모

이 프론트엔드 데모는 교육 목적으로 만들어졌으며 개발자가 Hydrogen을 사용하여 기본 사용자 지정 상점을 구축하는 방법을 보여줍니다.

5. Sanity의 수소 데모

데모는 Shopify Hydrogen 매장이 제품과 마케팅 데이터를 결합하는 도구인 Sanity.io와 함께 작동하는 방법을 보여줍니다.

Shopify Hydrogen 프로젝트 데모

다음은 Shopify Hydrogen의 구성 요소 및 구조를 이해하는 데 도움이 되는 Github의 데모 프로젝트 모음입니다.

• Shopify의 데모
• Shopify 공급의 프로젝트
• Shobhit Sirohi의 데모
• henryclong의 데모
• andacg1의 데모
• bschnell-google의 데모
• kwaaaaaa의 데모

Shopify Hydrogen vs Shopify 일반 상점: 차이점은 무엇입니까?

개발자에게는 쉬울 수 있지만 Shopify 판매자는 Shopify Hydrogen, 관련 용어 및 작동 방식을 이해하기 어려울 수 있습니다.

따라서 Shopify Hydrogen과 Shopify 일반 상점의 주요 차이점을 간단히 비교하여 기술에 정통하지 않은 Shopify 판매자가 더 나은 그림을 볼 수 있도록 합니다.

정의

• Shopify Hydrogen : UI 구성 요소가 있는 맞춤형 상점을 위한 프레임워크
• Shopify : 전자 상거래 플랫폼

프레임워크와 플랫폼은 외부인이 이해하기 어려운 두 가지 IT 용어입니다.

플랫폼에는 사람들이 애플리케이션을 만들고 사용할 수 있는 환경을 제공하는 소프트웨어와 하드웨어가 모두 포함되어 있습니다. 한편, 소프트웨어만 포함된 프레임워크는 개발자가 응용 프로그램을 만들 수 있도록 미리 만들어진 구성 요소가 있는 템플릿과 같습니다.

우리는 종종 플랫폼을 사람들이 방문하고 미끄럼틀과 시소를 가지고 노는 놀이터로 간주합니다. 반면 틀은 시소 그 자체다. 제공된 나무와 페인트로 맞춤형 시소를 만들 수 있습니다.

이제 Shopify 사례로 돌아가 보겠습니다.

전자 상거래 플랫폼인 Shopify에는 상점 소유자가 온라인 웹 사이트를 만들 수 있는 테마, 전자 상거래 기능 및 앱이 있습니다.

한편, 프레임워크인 Shopify Hydrogen은 개발자가 Shopify 웹사이트에서 작동하는 맞춤형 상점을 구축하는 데 필요한 구조, 도구 및 구성 요소를 제공합니다.

코딩 언어

• Shopify Hydrogen : React 프레임워크가 포함된 Javascript
• Shopify 일반 상점 : Shopify Liquid

Liquid는 Shopify 전용인 Shopify의 유일한 코딩 언어입니다. 반면에 Javascript는 수백만 개의 응용 프로그램에 사용되는 매우 보편적인 코딩 언어입니다. 예를 들어 Netflix, Facebook, Candy Crush, Linkedin 등은 Javascript를 사용하는 주목할만한 애플리케이션입니다.

Shopify Liquids는 견고한 코딩 언어이지만 특히 성능과 관련하여 몇 가지 제한 사항이 있습니다. Shopify 매장용 Javascript를 사용하면 웹 페이지를 더 빠르게 만들 수 있으며 고유한 웹 사이트 UI 및 UX를 구축할 수 있는 무한한 가능성이 열립니다.

사용자 친근성

• Shopify Hydrogen : 개발자 중심
• Shopify 일반 상점 : 비기술자 지향

Hydrogen 웹사이트, 데모, 튜토리얼에 소개된 용어는 개발자를 위한 것입니다. 누구나 Shopify 매장을 만들 수 있지만 Shopify Hydrogen을 통해 맞춤형 매장을 만들려면 코딩 경험이 필요합니다.

이익

Hydrogen은 개발자와 판매자에게 Shopify에서 역동적인 전자 상거래 경험을 생성할 수 있는 새로운 방법을 제공합니다. 유연성 및 속도 성능 부족과 같은 현재 Shopify 매장의 많은 기존 문제를 해결합니다.

Shopify Hydrogen의 장점에 대해 자세히 알아보겠습니다.

빠른 개발

거의 30개의 구성 요소가 포함된 공식 데모 템플릿에는 이미 전체 고객 구매 여정이 포함되어 있습니다. 이런 식으로 개발자는 설정을 건너뛰고 즉시 코딩을 시작할 수 있습니다.

또한 Shopify Hydrogen에는 즉시 사용할 수 있는 후크, 구성 요소 및 Storefront API와 직접 연결되는 유틸리티가 함께 제공됩니다. 따라서 GraphQL 쿼리를 만들 필요 없이 데이터 가져오기가 간단하고 효율적입니다.

더 나은 성능

Shopify Hydrogen은 고급 웹 기술을 활용하여 속도를 최적화하고 성능을 활용합니다.

• 스트리밍 서버 측 렌더링
• React 서버 구성 요소
• 스마트 내장 캐시 및 효율적인 데이터 가져오기
• 서버 측 렌더링, 클라이언트 측 페칭 및 에지 전달을 동적으로 결합

성능 향상은 필연적으로 더 나은 Google Core Vitals 점수로 이어지므로 더 나은 SEO 결과를 얻을 수 있습니다.

다재다능함

수소는 Shopify가 헤드리스 상거래에 대응하는 방식입니다. 이는 2022년 가장 두드러진 전자 상거래 트렌드 중 하나입니다.

헤드리스 상거래는 프론트엔드를 백엔드에서 분리하여 비할 데 없는 사용자 정의 가능성과 통합성을 달성하는 것을 의미합니다.

Hydrogen으로 이 작업을 수행하면 백엔드 기능에 영향을 주지 않고 프론트엔드를 자유롭게 변경할 수 있습니다. 여기에는 더 나은 개인화를 위해 여러 프런트엔드를 사용하고 Shopify의 URL 구조를 수정하는 작업이 포함됩니다.

또한 헤드리스 아키텍처를 사용하여 모든 사용자 지정 및 유지 관리를 백엔드와 프런트엔드에서 동시에 수행할 수 있습니다. 프론트엔드 프로세스가 백엔드에 영향을 미치지 않으며 그 반대의 경우도 마찬가지임을 알면 개발자와 디자이너는 작업을 수행할 수 있는 더 많은 자유를 갖게 됩니다.

더보기: 헤드리스 Shopify 스토어 예시

더 나은 개인화

전자 상거래의 미래는 고객에게 가장 적절한 경험을 제공하는 데 있습니다.

간단한 개인화는 현지화에서 시작됩니다. 페이지는 다양한 국가의 구매자를 위해 다른 언어로 번역됩니다.

그러나 오늘날 전자 상거래 개인화는 점점 더 복잡해지고 있습니다. 우리는 가격이 상황에 따라 동적으로 변하는 것을 보아왔고, 제품 추천이 다양한 고객에게 다르게 표시되는 것을 보았습니다.

전자 상거래 상점은 이제 웹 사이트의 모든 작은 세부 사항을 개인화하려고 노력하고 있습니다.

현대 전자 상거래 개인화를 설명하면서 Shopify의 수석 엔지니어 Ilya Grigorik은 모든 페이지를 개방형 테트리스 보드로 시각화했으며 보드의 각 "슬롯"은 방문자에게 동적으로 어필할 수 있도록 사용자 지정할 수 있습니다.

그렇다면 Shopify Hydrogen은 개인화에 어떻게 도움이 됩니까?

Shopify Hydrogen 매장은 견고한 구조가 아니라 다양한 UI 구성 요소로 구성되어 있습니다. 개발자와 판매자는 각 콘텐츠 구성 요소를 맞춤화하여 최고의 동적 콘텐츠와 개인화된 고객 경험을 제공할 수 있습니다.

예를 들어 과거 구매 또는 인구 통계 정보와 같은 고객 데이터를 기반으로 제품 권장 사항에 대한 블록을 만들 수 있습니다.

게다가 개인화된 웹 스토어는 종종 매우 복잡하기 때문에 좋은 속도 성능을 유지하려면 더 강력하고 동적인 웹 기술이 필요합니다. Shopify는 오랫동안 이 문제를 인식했습니다. 따라서 더 나은 서버 측 렌더링, 동적 캐싱 및 데이터 가져오기를 포함하여 더 빠른 스토어를 위한 Hydrogen의 모든 노력은 이 특정 문제를 염두에 두고 이루어집니다.

SimiCart로 수소 매장을 맞춤화하세요

수소는 전자 상거래의 미래인 역동성과 개인화를 향한 Shopify의 디딤돌입니다. Hydrogen을 통해 Shopify는 고객, 특히 확장 중인 판매자에게 더 많은 가치를 제공할 수 있으므로 다른 유연한 플랫폼에 비해 경쟁 우위를 유지할 수 있습니다.

판매자의 경우 현재 Shopify 프런트엔드를 버리고 Hydrogen 매장을 구축하면 성능 및 사용자 지정과 같은 기존의 많은 문제점을 해결하는 데 도움이 됩니다. 그 결과 평균 주문 가치가 높아지고 유지율이 향상되며 수익이 증가합니다.

그러나 현재 Hydrogen은 기술에 정통하지 않은 Shopify 소유자가 아닌 개발자를 위해 제작되었습니다. 코딩 경험이 필요하고 시작할 페이지 빌더 도구가 없으며 초보자에게 친숙한 가이드도 없습니다.

SimiCart는 합리적인 가격에 Shopify Hydrogen으로 헤드리스 매장을 구축할 수 있는 완벽한 개발 솔루션을 제공합니다. 패키지에는 드래그 앤 드롭 페이지 빌더 도구가 함께 제공되므로 Shopify 판매자는 일반 Shopify 매장에서와 마찬가지로 맞춤형 Hydrogen 매장을 만들 수 있습니다.