Shopify Hydrogen이란 무엇이며 2022년에 관심을 가져야 하는 이유는 무엇입니까?

지난 몇 년 동안 헤드리스 상거래는 온라인 상거래 운영 방식을 바꿀 것으로 예상되는 일반적인 전자 상거래 트렌드가 되었습니다. 현재 최고의 SaaS 전자 상거래 플랫폼 중 하나인 Shopify는 최신 기술인 Shopify Hydrogen을 통해 헤드리스 상거래를 다음 단계로 활용했습니다.

이 기사에서는 Shopify Hydrogen이 헤드리스 상거래에서 게임 체인저가 될 이유와 Shopify 판매자가 이 최신 Shopify 기술을 통해 큰 이점을 얻을 수 있는 방법을 알아봅니다.

=> 더 읽기: 헤드리스 Shopify 스토어의 모범 사례

Shopify Hydrogen 이전의 헤드리스 상거래

헤드리스 상거래는 온라인 상점의 프론트 엔드가 백엔드와 분리된 인프라를 말합니다. 간단히 이해하면 헤드리스 상거래를 사용하면 전자 상거래 플랫폼 자체에서 상점 첫 화면 레이어("헤드")를 분리하여 "헤드리스"로 만들 수 있습니다.

하지만 웹사이트 프론트엔드를 플랫폼에서 분리하려는 이유는 무엇입니까? 빠르고, 원활하고, 일관되고, 개인화된 쇼핑 경험을 쉽게 추진할 수 있는 최고의 유연성을 제공하기 때문입니다.

기존 아키텍처에서는 상점 전면과 백엔드가 밀접하게 연결되어 있으며 일반적으로 단일 시스템으로 실행되므로 디자인과 기능이 제한됩니다. 한편, 헤드리스 접근 방식을 사용하면 두 개의 분리된 레이어가 독립적으로 작동하고 API를 통해 통신할 수 있습니다. 따라서 기존 백엔드를 그대로 유지하면서 원활하고 고유한 쇼핑 경험을 사용자 정의할 수 있는 모든 능력이 있습니다.

이 기술을 처음 접하는 경우 헤드리스 상거래에 대한 더 나은 이해를 위해 다음과 같은 포괄적인 기사를 권장합니다.

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

StorefrontAPI를 활용하여 Shopify를 전자 상거래 플랫폼으로 사용하여 헤드리스 스토어를 구축하는 것은 항상 가능했습니다. 그러나 머리가 없는 것은 도전 없이 오지 않습니다. 일반적으로 수행해야 하는 다양한 복잡한 작업으로 인해 더 많은 비용과 시간이 소요됩니다. 또한 유지 관리에 더 많은 시간과 노력이 필요하므로 소규모로 성장하는 비즈니스를 운영하는 Shopify 판매자에게는 좋은 접근 방식이 아닐 수 있습니다.

Shopify Hydrogen은 과거에 Shopify 헤드리스 스토어를 개발하는 데 수반되는 이러한 모든 복잡성과 추가 비용을 제거하는 완벽한 솔루션입니다. Shopify 상점을 사용자 정의하기 위해 타사 통합, 외부 시스템 또는 추가 기술에 의존할 필요가 없습니다. Shopify는 Hydrogen이 "Shopify의 플랫폼과 API를 기반으로 하는 개인화되고 역동적인 구매자 경험"을 제공하기를 원합니다. 이것이 바로 이 최신 Shopify 기술이 헤드리스 개발의 미래로 여겨지는 이유입니다.

Shopify 수소 란 무엇입니까?

우리는 웹 상거래의 미래가 빠르고 개인적이고 역동적이라고 생각합니다. Hydrogen은 이러한 비전이 실현되는 방식을 반영합니다.

쇼피파이 유나이트 2021

Shopify Hydrogen은 Shopify의 맞춤형 상점을 구축하기 위한 React 기반 프레임워크입니다. 여기에는 개발자가 시작하고 빠르게 빌드하고 최고의 개인화된 사용자 경험을 제공하는 데 필요한 모든 구조, 구성 요소 및 도구가 포함됩니다.

Hydrogen의 궁극적인 목표는 프런트엔드 제한이나 외부 소프트웨어 통합 없이 Shopify 스토어를 구축하고 맞춤화할 수 있는 더 많은 유연성과 시간을 제공하는 것입니다. 한편 Shopify에서 제공하는 모든 백엔드 상거래 기능은 중단 없이 원활하게 작동합니다. 이를 통해 Shopify 스토어는 서드파티 통합의 번거로움과 복잡성 없이 헤드리스 접근 방식을 달성할 수 있습니다.

Hydrogen은 빠른 사용자 경험, 동급 최강의 판매자 기능 및 뛰어난 개발자 경험을 제공하기 위해 Shopify에서 권장하고 의견을 제시하는 접근 방식입니다. 커머스, UX, 코딩의 교차점입니다.

현재 Hydrogen은 완전히 오픈 소스이며, 이를 사용해 보고 피드백을 보내 더 나은 성능을 제공함으로써 Hydrogen을 구축하는 데 도움을 줄 수 있습니다.

Shopify Hydrogen 작동 방식

전 세계 수백만 판매자와 협력하면서 Shopify 개발자 팀은 전자 상거래가 개인화되고 상황에 맞게 유지되는 빠르고 원활한 사용자 경험이 필요하다는 것을 깨달았습니다.

이 접근 방식은 유망해 보이지만 환상적인 상거래 경험을 위해 여러 기술을 적용하고 사이트 성능을 보장하는 것 사이에서 고민하는 개발자에게는 큰 도전 과제입니다. Hydrogen은 사이트 속도를 포기하지 않고 동적 상거래 경험을 생성할 수 있도록 하는 다양한 기술이 포함된 프레임워크를 도입하여 이 문제를 완화합니다.

Hydrogen은 사용할 준비가 된 상거래별 구성 요소와 개발자 도구가 있는 빠른 시작 환경으로 구성됩니다.

• Hydrogen 프레임워크 : 서버 측 렌더링(SSR), 수화 미들웨어 및 클라이언트 구성 요소 코드 변환을 제공하는 Vite 플러그인이 있습니다.
• Hydrogen UI 구성 요소: Shopify에 이미 존재하는 기능과 개념을 지원하는 구성 요소, 후크 및 유틸리티입니다.

Hydrogen 프레임워크는 훌륭한 상거래 경험과 사용자 경험 사이의 균형을 이룰 수 있도록 하는 빌딩 블록과 같은 역할을 합니다. 이러한 기능을 제공함으로써 Hydrogen은 React 및 Vite의 잠재력을 최대한 활용하고 최적화된 구성 요소 및 개발자 도구를 개발하는 데 세심한 주의를 기울였습니다.

또한 Shopify는 몇 분 안에 상점을 시작할 수 있는 스타터 템플릿을 포함하여 Shopify 상점 디자인의 스캐폴딩 및 구성 시간을 절약할 수 있도록 도와줍니다. 이 템플릿은 이미 Shopify 스토어와 통합된 프로젝트의 기본 파일 구조를 처리하므로 설정을 건너뛰고 즉시 스토어프론트 사용자 정의를 시작할 수 있습니다.

시작 템플릿 외에도 Hydrogen은 Shopify 데이터 모델을 중심으로 구축된 모든 UI 구성 요소를 포함하여 매장 개발 프로세스를 가속화합니다. 이러한 조각은 Storefront API와 직접 통합되어 Shopify API 또는 타사 데이터 소스와 상호 작용할 수 있습니다.

요약 : Shopify Hydrogen은 판매자가 프레임워크를 통해 상거래 경험을 활용하고 바로 사용할 수 있는 UI 구성 요소로 매장 개발 프로세스를 가속화할 수 있도록 지원합니다. 이를 통해 사이트 성능을 포기하지 않고 동적 상거래 경험을 만들 수 있습니다.

Shopify 수소 대 액체

• Liquid : Ruby로 작성되고 Shopify에서 만든 템플릿 언어입니다. 이것은 모든 Shopify 테마의 중추이며 스토어 페이지에 동적 콘텐츠를 로드하는 데 사용됩니다.
• Hydrogen : Shopify의 헤드리스 매장을 구축하기 위한 프레임워크입니다.

많은 개발자가 종종 템플릿 언어와 프레임워크를 같은 의미로 사용하지만 실제로 둘 사이에는 미묘한 차이가 있습니다.

프레임워크는 응용 프로그램을 만들기 위해 미리 만들어진 도구와 구성 요소의 모음입니다.

한편, 템플릿 언어는 여러 페이지에서 동일한 정적 콘텐츠와 한 페이지에서 다음 페이지로 변경되는 동적 콘텐츠를 결합하는 웹 페이지를 구축하는 데 사용됩니다. 템플릿은 미리 결정된 기능에 중점을 두며 프레임워크에 비해 사용자 지정 옵션이 적습니다.

템플릿은 숫자로 그린 그림과 같고 프레임워크는 LEGO 세트와 비슷합니다.

Shopify의 경우 템플릿 언어 덕분에 웹 페이지 레이아웃을 정의하는 정적 요소를 재사용하는 동시에 Shopify 스토어에서 페이지로 데이터를 동적으로 마이그레이션할 수 있습니다. Liquid를 HTML, CSS, JavaScript와 같은 다른 템플릿 언어와 결합하여 Shopify 테마를 구축하고 사용자 정의할 수 있습니다.

Hydrogen에는 맞춤형 Shopify 매장을 구축하는 데 필요한 모든 구조, 구성 요소 및 도구가 포함되어 있습니다. Hydrogen은 프레임워크와 UI 구성 요소를 통해 최고의 사용자 경험을 제공할 수 있는 맞춤형 매장을 구축할 수 있도록 지원합니다.

Liquid는 테마를 구축하기 위해 정적 및 비정적 요소를 필요로 하기 때문에 Liquid는 상점 첫 화면 사용자 정의 및 성능에 몇 가지 제한 사항이 있음을 알 수 있습니다. 또한 Liquid를 사용하여 테마를 만들고 사용자 지정하는 데 시간이 많이 걸립니다. 따라서 Hydrogen은 고유한 웹사이트 UX 및 UI를 구축할 수 있는 무한한 가능성 덕분에 Shopify 기반 매장을 위한 차세대 솔루션 역할을 합니다. Shopify 매장 개발에서 Liquid를 대체하기 위해 Hydrogen이 개발될 것으로 예상됩니다.

현재 Liquid와 Hydrogen은 GitHub에서 모두가 다운로드하고 사용해 볼 수 있는 완전히 오픈 소스입니다.

Shopify Hydrogen으로 헤드리스를 사용하는 이유

1. 사이트 성능 최적화

Shopify Hydrogen에서 헤드리스 접근 방식을 따르는 것의 명백한 이점 중 하나는 우수한 사이트 성능, 특히 사이트 속도입니다.

프론트엔드를 백엔드에서 분리하면 백엔드 내에서 모든 동적 콘텐츠와 기능을 계속 유지하면서 매우 빠른 로딩 페이지 속도를 잠금 해제할 수 있는 기능을 얻을 수 있습니다. Shopify Hydrogen으로 전환하면 페이지 로드 속도를 몇 초에서 밀리초로 줄여 매장의 핵심 웹 바이탈을 활용할 수 있습니다.

간단히 말해 Shopify의 헤드리스 솔루션을 사용하면 서버와 사이트 속도를 늦추지 않고 적시에 사용자 지정할 수 있는 완전히 개인화되고 동적인 콘텐츠를 제공할 수 있습니다. 이를 통해 매장을 방문하는 모든 방문자와 고객을 만족시킬 수 있습니다.

2. 확장성 향상

사이트 속도 최적화와 관련하여 자주 발생하는 또 다른 일반적인 문제는 확장성입니다. Hydrogen 이전에 개발자들은 사이트 최적화와 관련하여 속도와 사이트 경험 간의 균형을 결정하는 데 어려움을 겪었습니다.

노련한 개발자라면 트래픽이 상대적으로 적은 경우 초고속 웹 성능으로 고도로 상호 작용하고 개인화된 쇼핑 경험을 제공하는 것이 복잡하지 않을 수 있다는 사실을 잘 알고 있을 것입니다. 그러나 상점이 확장됨에 따라 사이트는 매일 새로운 방문자 유입을 처리할 수 없으므로 속도 문제와 사이트 성능 저하로 이어집니다.

이제 Shopify Hydrogen은 2022년에 출시될 Hydrogen 매장을 위한 글로벌 호스팅 솔루션인 Shopify Oxygen을 통해 이 문제를 근본적으로 해결했습니다. Shopify 매장이 직접 호스팅되기 때문에 타사 호스팅 서비스에 의존할 필요가 없습니다. 산소에.

Shopify는 전 세계적으로 100개 이상의 서버 위치를 가진 Oxygen 글로벌 구조에 막대한 투자를 했습니다. Oxygen은 고객이 위치에 관계없이 항상 즉각적인 매장 로딩을 즐길 수 있도록 합니다. 이 다가오는 인프라는 동적 상점 콘텐츠와 상거래 구조 간의 빠른 통신을 가능하게 하여 속도 및 확장성 문제를 과거의 이야기로 남겨둡니다.

Shopify는 Oxygen이 Shopify 지원 상거래 경험을 배포하는 가장 빠른 방법이라고 주장합니다. 수소와 산소의 결합은 가까운 미래에 현대식 헤드리스 상거래를 위한 길을 닦고 있습니다.

3. 더 많은 디자인 자유도

Hydrogen은 Shopify 사이트의 상점을 모든 데이터 및 사이트 기능을 보유하는 백엔드와 분리하는 헤드리스 접근 방식을 따르므로 원하는 방식으로 상점을 구축하고 사용자 정의할 수 있는 더 많은 유연성과 자유를 제공합니다. Shopify Hydrogen의 디자인 능력은 무궁무진하며 고유한 UX/UI 디자인을 만들어 방문자에게 개인화되고 역동적인 쇼핑 경험을 제공할 수 있습니다.

Hydrogen 매장을 전문으로 하는 페이지 빌더 도구를 사용하면 디자인 프로세스를 훨씬 빠르고 원활하게 만들 수 있습니다. Shopify 판매자는 레이아웃을 처음부터 드래그 앤 드롭하거나 사전 제작된 템플릿과 블록을 사용하여 코딩이나 디자인 기술 없이도 페이지를 구축할 수 있습니다.

또한 Shopify 사이트의 프런트 엔드와 백 엔드가 API를 통해 통신하므로 기존 상거래에서 일반적으로 발생하는 백엔드 기능을 복잡하게 하거나 중단할 걱정 없이 프런트엔드 디자인을 자유롭게 변경할 수 있습니다.

4. 뛰어난 상거래 경험

전자 상거래 비즈니스를 위한 개인화 마케팅은 새로운 것이 아니지만(Amazon 제품 권장 사항을 인기 있는 예로 들 수 있음) 헤드리스 매장이 아닌 매장에서 쉽게 채택할 수 있는 일반적인 접근 방식은 아닙니다.

프론트엔드 유연성과 별도의 CMS를 갖춘 Shopify Hydrogen은 모든 Shopify 매장에서 활용할 수 있는 간단하고 가벼운 솔루션을 소개합니다. 매장 디자인 및 콘텐츠 관리를 완벽하게 제어하여 고객을 만족시키기 위해 개인화된 매장을 맞춤화할 수 있습니다. 또한 수소와 산소를 결합하면 안정적인 웹 성능을 유지하면서 밀리초 페이지 로딩 속도를 보장합니다.

훌륭한 상거래 경험은 고객 만족만을 목표로 해서는 안 되며, 고객 경험과 매장 역량의 균형을 신중하게 맞춰야 합니다. Shopify Hydrogen은 매장 성과와 고객 경험을 동시에 만족시킬 수 있는 뛰어난 상거래 경험에 접근할 수 있도록 도와줍니다.

5. 빠른 개발

Shopify Hydrogen은 기본 프레임워크와 바로 사용할 수 있는 UI 구성 요소를 활용하여 프론트엔드 개발을 가속화하는 동시에 판매자에게 무한한 디자인 기능을 제공할 수 있습니다. 또한 Hydrogen은 과거에 맞춤형 매장을 구축하는 데 필요한 타사 통합 및 소프트웨어와 함께 자주 발생하는 모든 복잡성을 줄이는 데 도움이 됩니다.

따라서 Shopify Hydrogen은 길고 복잡하며 비용이 많이 드는 개발 프로세스 없이 Shopify 매장이 최고의 헤드리스 상거래 기능을 달성하기 위해 채택할 수 있는 가장 빠른 경로 중 하나입니다.

Shopify 수소 제한 사항

Shopify Hydrogen은 개발자 미리 보기에서만 사용할 수 있으므로 이 Shopify 기반 헤드리스 개발에 대해 아직 말할 수 있는 내용이 많지 않습니다. 현재 Hydrogen은 Shopify 매장을 구축하는 데만 사용할 수 있습니다. 모바일 앱, 비디오 게임 및 스마트 장치를 포함한 다른 유형의 사용자 정의 상점은 현재 지원되지 않습니다. 이 최신 Shopify 기술을 정기적으로 업데이트하여 다른 잠재적인 제한 사항과 단점을 알려드립니다.

오늘 SimiCart와 함께 헤드리스로 이동

헤드리스 상거래에 대한 많은 접근 방식이 있지만 Shopify Hydrogen은 분명히 게임 체인저이며 미래에 훨씬 더 많이 기대할 수 있습니다. 빠른 시일 내에 Liquid를 대체하지는 않겠지만 최신 기술 트렌드를 따르면 경쟁업체보다 한 발 앞서 나갈 수 있습니다.

무한한 디자인 기능, 번개처럼 빠른 페이지 속도, 매장 전면을 완벽하게 제어하여 탁월한 상거래 경험을 제공하려는 경우 Shopify 헤드리스가 반드시 따라야 할 길입니다. 헤드리스 커머스로 Shopify 스토어를 강화할 수 있도록 도와드리겠습니다.