Shopify의 수소 및 산소 - 꼭 알아야 할 모든 것

작년에 Shopify는 새로운 헤드리스 프레임워크인 Hydrogen과 Oxygen을 출시하여 헤드리스 커머스에 대한 의지를 밝혔습니다. 거의 1년 후, Shopify Editions가 출시되면서 Hydrogen & Oxygen이 공식적으로 출시되었습니다. 그와 함께 저명한 브랜드와 진취적인 전자상거래 관리자를 사로잡을 개선 및 업데이트가 있습니다. 여러분이 조사하는 번거로움을 덜어드리기 위해 지금까지 공개된 모든 세부 정보, 업데이트 및 헤드리스 커머스에 대한 의미를 정리했습니다. 그럼, 자세히 살펴보겠습니다...

이미 익숙한 것

수소

Shopify Unite 2021에서 공개된 Hydrogen은 개발자를 위한 보다 간단하고 스타일리시한 헤드리스 설정과 Shopify 매장을 이용하는 고객을 위한 신나는 쇼핑 경험을 위한 Shopify의 솔루션을 나타냅니다. Shopify의 새로운 프레임워크는 React 기반 구조를 사용하여 사이트 효율성을 손상시키지 않고 빠르게 구축할 수 있는 확장된 사용자 정의 전망으로 맞춤형 매장을 용이하게 합니다.

이것이 상인들에게 어떤 도움이 되나요?

이전에는 귀사의 전자상거래 개발팀이 종종 놀라운 사이트 신속성과 정교하게 디자인된 경험 사이에서 딜레마에 직면했습니다. 그럼에도 불구하고 Hydrogen은 파트너인 Nosto, Sanity, Contentful, Klaviyo, ReCharge, Okendo, Aloglia를 포함하여 다양한 기술을 통합하여 비교할 수 없는 사이트 성능과 생생한 사용자 경험을 달성할 수 있는 길을 열었습니다.

Shopify와 Hydrogen 스택에 의해 활력을 얻은 헤드리스 솔루션으로의 전환을 노리는 고객에게 최고 수준의 경험과 지원을 제공하기 위해 Hydrogen과 함께 시작하게 되어 기쁩니다. 우리는 상인들이 규모에 맞게 진정성 있고 적절한 온라인 상거래 경험을 구축하도록 돕기 위해 여기 있습니다.

짐 로프그렌
CEO, 노스토

수소 활용의 이점:

• 초기 템플릿. 수소를 사용하면 개발팀은 사전 조립된 데모 매장이 들어 있는 진입 키트를 이용할 수 있어 개발 기간을 단축할 수 있습니다.
• 사전 설계된 구성요소. Hydrogen은 개발자를 위해 미리 디자인된 구성 요소를 수용하여 API와의 원활한 상호 작용을 용이하게 합니다. 이 프레임워크는 또한 기본 테일윈드를 활용하여 사이트 전체에서 구성 요소를 재사용할 수 있는 기능을 제공합니다.
• 서버 측 렌더링. 전체 페이지를 한 번에 로드하는 대신 우선순위와 사용자의 검색 동작에 따라 점진적으로 사이트를 로드하여 사이트 속도를 크게 향상시킵니다.**. 이는 헤드리스 상거래 구조의 보너스이며 수소에만 국한되지 않습니다.**  
• 기본 꼬리바람. CSS 클래스를 업데이트하지 않고도 블로그 페이지와 같은 사이트의 여러 섹션에서 PDP와 같은 특수 목적 구성 요소를 재사용할 수 있습니다.
• SEO의 승리를 위한 준비. 수소에는 자동 생성된 사이트맵, 모든 페이지의 메타데이터 값, 조정 가능한 robots.txt 파일 등 미리 설정된 SEO 향상 기능이 포함됩니다.

가능성 있는 제한 사항**:**

• Shopify API에 맞게 제작되었습니다. Hydrogen은 Shopify API에 독점적으로 맞춤화되어 있습니다. 따라서 구성 요소는 Shopify API의 개별 세그먼트와 긴밀하게 연결됩니다. 게다가 Hydrogen은 Shopify 스토어프런트를 구성하는 데만 사용할 수 있으며 모바일 애플리케이션과 같은 다른 사용자 지정 스토어프런트에 대한 지원이 부족합니다.
• 개발자 중심 워크플로. Hydrogen 프레임워크는 코드로 가득 차 있어 모든 것이 개발 팀이나 Shopify Plus 조직에서 구성하고 유지해야 함을 의미합니다. 마케팅이나 제품과 같은 비개발 부서는 사이트의 프런트엔드 계층을 감독할 수 있는 역량이 없습니다. 그럼에도 불구하고 이 시나리오는 일반적으로 모든 헤드리스 설정에서 발생합니다. 또는 저희와 같은 Shopify Plus 조직과 협력하여 Hydrogen 스토어를 장기적으로 구축하고 관리하거나 내부 팀의 기술을 향상시킬 수 있습니다. 이에 대해 더 자세히 알아보려면 언제든지 저희 팀에 문의하세요.
• 애플리케이션 통합. Shopify는 Hydrogen 프레임워크와 직접 통합할 수 있는 가장 선호하는 애플리케이션 중 일부를 준비해 놓았고, 선호하는 CMS로는 Sanity와 Contentful을 선택합니다(나중에 자세히 설명하겠습니다). 호환되지 않는 CMS나 애플리케이션이 필요한 경우 미들웨어를 활용하여 독립적으로 연결을 관리해야 합니다.

산소

간단히 말해서 Oxygen은 Shopify Plus에서 Hydrogen 스토어프런트를 직접 호스팅할 수 있는 권한을 부여하는 Shopify 호스팅 플랫폼입니다. 이는 일반적으로 헤드리스의 경우 프레임워크를 호스팅하려면 타사 플랫폼이 필요하지만 Oxygen은 이러한 필요성을 없애줍니다. 대신 Shopify의 Storefront API와 원활하게 동기화하여 미리 보기, 공유, 테스트 및 실험을 위해 여러 개의 개별 Hydrogen 스토어프런트를 배포할 수 있습니다.

Shopify 상인에 대한 적응성에 관해서요? Oxygen은 블랙 프라이데이와 같은 중요한 이벤트에서 엄청난 동시 트래픽 볼륨을 견뎌내도록 설계되었으며, 실패의 위험 없이 전 세계에 배포되면 뛰어난 국제 판매 경험을 제공합니다.

2022년에는 무슨 새로운 소식이 있나요?

Shopify는 2022년 6월에 공식적으로 Hydrogen을 공개하여 여러 업데이트를 통합했습니다. Shopify가 Hydrogen & Oxygen 프레임워크에 도입하고 통합한 모든 새로운 기능에 대한 포괄적인 개요는 다음과 같습니다.

CMS가 선호하는 협력자

승인된 수소 및 산소 발사의 일부로서, Shopify는 CMS 도구인 Sanity와 협력하고 투자했습니다. Sanity는 개발자와 콘텐츠 소유자가 처음부터 구상할 수 있는 완전히 적응 가능한 CMS 도구입니다. 이 협업을 위해 Sanity의 인력은 Shopify의 Hydrogen & Oxygen에 맞게 사용자 정의된 콘텐츠 애플리케이션 도구를 개발했습니다. 이를 통해 판매자는 Shopify에서 제품, 변형 및 컬렉션을 유지 관리할 수 있으며 프런트엔드는 Sanity의 CMS와 조화를 이룹니다.

Shopify와 전략적 파트너십을 맺었고 Shopify가 Sanity에 상당한 투자를 할당했다는 사실을 공개하게 되어 기쁩니다. 함께 헤드리스 오퍼링 간의 통합을 간소화하여 탁월한 경험을 구축하고자 하는 브랜드에 비할 데 없는 잠재력을 구축하고 있습니다. 이는 기술의 진보와 전자상거래의 미래에 대한 콘텐츠의 전략적 중요성을 증명합니다. Shopify가 콘텐츠 플랫폼에 투자한 유일한 회사로서 우리는 서 있습니다.

매그너스 힐레스타드
Sanity.io의 CEO 겸 공동 창립자

선호 CMS 협력업체로 지정된 또 다른 업체는 Contentful입니다. Contentful은 현재 제공되는 가장 빠르게 성장하는 CMS 기술 중 하나로, 따라서 Hydrogen & Oxygen의 예비 출시를 위한 선호 공급업체로 선정된 것은 놀라운 일이 아닙니다. API 우선 접근 방식은 기사나 제품 세부 정보 등 브랜드 콘텐츠를 제품을 마케팅하는 모든 곳에 배포하고 실시간으로 정확하게 번역하고 새로 고칠 수 있음을 의미합니다. Contentful과 같은 선호 동반자와 함께 Hydrogen & Oxygen을 사용하면

모든 브랜드에 적합한 견고한 구색.

대체 CMS 옵션은 여전히 헤드리스 스택에 통합될 수 있다는 점을 언급하는 것이 중요합니다. 그러나 현재로서는 사용자 정의 통합이 필요하며, 이는 Sanity나 Contentful을 사용하는 것보다 더 많은 시간을 소모할 수 있습니다.

Shopify API 업데이트

Hydrogen을 둘러싼 모든 과대광고와 함께 Shopify는 새로운 프레임워크를 수용하기 위해 API를 개선했습니다. 지금까지 스토어프런트 API는 서버 측 애플리케이션에 적합하지 않았습니다. 판매자의 경우 이는 속도 제한에 도달하여 사이트의 전반적인 기능에 영향을 미칠 수 있습니다. 이 업데이트를 통해 서버는 제한에 부딪히지 않고 판매자를 대신하여 요청을 할 수 있으므로 이전에는 위험하다고 여겨졌던 서버 측 작업이 가능해졌습니다.

앱 통합

2021년 Shopify가 처음으로 Hydrogen & Oxygen을 출시했을 때 앱 통합에 대한 우려가 있었습니다. Shopify는 광범위한 앱 스토어를 자랑하며, 일부 인기 앱은 상인의 기술 스택에 필수적인 구성 요소입니다. 그러나 이러한 앱에 대한 API 통합이 없으면 미들웨어가 유일한 대안처럼 보였습니다. 다행히도 Shopify는 이제 처음부터 Hydrogen에 원활하게 통합할 수 있도록 준비된 필수 기술 스택 구성 요소 목록을 공개하여 상인이 선호하는 기술 솔루션을 유지할 수 있도록 했습니다.

Hydrogen & Recharge로 고객의 구독 경험을 향상시키세요. 우리는 판매자를 위한 Shopify의 헤드리스 오퍼링과 호환되는 최초의 구독 앱이 되어 기쁩니다. 함께 개발자에게 맞춤형 구독 서비스를 만들 수 있는 유연성과 자유를 제공합니다.

라이언 포스터
파트너십 관리자 EMEA, Recharge

70% 이상의 Shopify Plus 브랜드와 협력하는 Klaviyo는 새로운 기술을 수용하고 지원해야 할 필요성을 인식합니다. 그래서 우리는 Hydrogen 출시에 참여하게 되어 기쁩니다. 출시를 준비하고 헌신하는 소수의 파트너 중 한 명이 되어 기쁩니다.

마이클 워슬리
시니어 매니저 겸 솔루션 아키텍트, Klaviyo

전자상거래의 미래에 대한 의미…

작년에 Hydrogen & Oxygen이 발표되고 이제 공식 출시된 이후로 헤드리스 아키텍처가 전자상거래의 미래이며 Shopify가 선두를 달리고 있다는 것이 점점 더 분명해지고 있습니다. Shopify는 브랜드에 대한 장벽을 제거한 실적이 있으며 Hydrogen & Oxygen도 예외는 아닙니다. 이 출시는 높은 매출과 광범위한 고객 기반을 가진 상인뿐만 아니라 더 광범위한 상인에게 헤드리스의 도달 범위를 확대합니다. 브랜드의 경우 헤드리스(특히 헤드리스 프레임워크인 Hydrogen)를 채택하면 변화하는 수요에 빠르게 적응하여 전환율을 높일 수 있는 새로운 길을 제공합니다. 고객의 경우 좋아하는 매장에서 더 빠르고 풍부한 경험이 표준이 되고 있습니다.

Hydrogen은 Shopify와 긴밀하게 통합되어 있으면서도 많은 헤드리스 이점을 제공합니다. 더불어 Shopify의 최신 호스팅 서비스인 Oxygen을 사용하면 인프라에 대한 걱정 없이 수백만 명의 사용자로 확장하고, 운영 비용을 절감하고, 출시 시간을 단축할 수 있습니다.

이완 막
Shopify 엔지니어, Tenten

수소는 또한 웹의 기술적 미래에서 중요한 역할을 하는데, React Server Components를 사용하여 로드맵에서 React를 안내하고 있기 때문입니다. 이러한 진화는 개발자와 기관이 관행을 강화하고, 모놀리식 아키텍처에서 벗어나고, 향상된 성능과 디자인 자유로 개발을 간소화하고, 온라인 쇼핑 여정의 개인화를 간소화할 수 있는 힘을 줍니다.

어느 헤드리스 프레임워크를 '가장 적합하다'고 결정하든, 주요 플랫폼인 Shopify가 판매업체를 위해 헤드리스로 전환하는 경로를 투자하고 공개하는 것은 앞으로 브랜드가 전자상거래 플랫폼을 구축하는 방식에 직접적인 영향을 미칠 것임은 분명합니다.