Vercel이 Shopify의 헤드리스 스토어프런트 프레임워크인 Hydrogen의 오픈소스 재구축 프로젝트에 디자인 파트너로 합류한다.
Hydrogen 덕분에 헤드리스 스토어프런트를 손쉽게 배포할 수 있게 됐지만, 이식성은 여전히 숙제로 남아 있었습니다. 뉴욕에서 열린 Vercel Ship 26에서 저희는 Shopify와 함께 Hydrogen을 처음부터 다시 만들겠다고 발표했습니다. 더 열린 웹을 향한 공동의 도전입니다.
새 버전은 오픈소스로 공개되며 런타임에 종속되지 않습니다. 즉, JavaScript가 실행되는 환경이라면 어디서든 구동할 수 있습니다. Svelte, Nuxt, Next.js는 물론, 직접 만든 커스텀 프레임워크도 활용할 수 있습니다.
이번 전략은 코어(core), 클라이언트(client), 서버(server) 세 가지 레이어로 구성됩니다.
코어는 개발자마다 따로따로 작성해왔던 Shopify API용 JavaScript 코드입니다. 서로 공유되지 않았던 그 코드들이 이제 한곳에 모입니다.
formatMoney을 예로 들어보겠습니다. 오픈 웹은 이미 Intl.NumberFormat로 이 문제를 대부분 해결해두었습니다.
그런데 Shopify API는 number를 그대로 반환하지 않습니다. 대신 MoneyV2라는 커스텀 타입으로 응답하며, 금액은 부호 있는 십진수를 문자열로 직렬화한 형태입니다.
결과는 동일하지만, 더 이상 연결 코드(glue code)를 직접 작성하거나 유지보수할 필요가 없습니다. API가 변경되더라도 업그레이드는 간단합니다.
코어를 한곳에 모으면 버그를 한 번만 수정해도 모든 개발자에게 개선 사항이 전달되고, 비로소 진짜 개발에 집중할 수 있습니다.
코어가 반환한 데이터를 렌더링할 때도 매번 같은 결정을 반복해야 합니다. 장바구니(cart) 상태 관리가 대표적입니다.
커머스 앱을 만들어본 개발자라면 누구나 이런 코드를 한 번쯤 작성해봤을 겁니다. 매번 다른 코드로, 결국 같은 목표를 좇으면서요.
이제 Hydrogen의 클라이언트 레이어가 장바구니를 처리합니다. 상태 관리는 import 한 줄로 끝납니다.
이를 통합하면 모범 사례(best practices)를 자연스럽게 적용할 수 있어, 진짜 여러분이 만들어야 할 부분에 시간을 쏟을 수 있습니다. 현재 Hydrogen preview branch에서 React용으로 사용 가능하며, 더 많은 프레임워크 지원도 예정되어 있습니다.
성능을 희생하지 않고 확장 가능한 스토어프런트를 구축하려면 풀스택 접근이 필요합니다. 정적 콘텐츠는 CDN에서 즉시 제공되고, 재고 현황 같은 동적 데이터는 스트리밍으로 전달되어야 합니다.
오픈소스 커뮤니티는 Next.js, Nuxt, SvelteKit 같은 프레임워크로 이 문제를 해결했습니다. 특정 런타임에 종속되지 않으면서 풀스택 기능을 제공하는 것이 핵심입니다.
스토어프런트에서 온디맨드 재검증(on-demand revalidation)으로 상품 쿼리를 캐싱한다고 가정해보겠습니다. GraphQL 쿼리를 작성하면 Hydrogen이 타입 안전한 클라이언트를 제공하고, Next.js가 캐싱을 처리합니다. 결과적으로 연결 코드 없이 풀스택 프레임워크와 헤드리스 Shopify API를 함께 활용할 수 있습니다.
Shopify는 이미 헤드리스 판매 채널을 통해 이러한 프레임워크를 지원하고 있지만, 지금까지는 개발자마다 동일한 API 계약에 대한 바인딩을 각자 작성해왔습니다. 이 레이어에서 필요한 것은 코드가 아니라 가이드입니다. 개발자든 에이전트든, Shopify를 위해 처음부터 다시 구현하는 대신 프레임워크가 이미 제공하는 기능을 제대로 활용하는 방법을 알아야 합니다.
이 가이드는 문서, 템플릿, 스킬의 형태로 제공됩니다.
Hydrogen 이전에 저희는 에이전틱 커머스(agentic commerce)를 위한 자체 템플릿인 vercel.shop을 만들었습니다. Next.js와 Shopify로 헤드리스 전환을 더 쉽게 할 수 있도록 돕는 템플릿입니다.
성과가 있었고, 이제 한 걸음 더 나아갑니다. vercel.shop을 구축하면서 쌓은 모든 노하우를 Hydrogen의 클라이언트 및 서버 레이어에 녹여낼 예정입니다. Hydrogen이 안정화되면 vercel.shop도 이를 도입해, Hydrogen과 Next.js로 스토어프런트를 구축하는 레퍼런스로 자리잡게 될 것입니다.
Vercel의 목표는 단순합니다. 모두를 위한 더 나은 웹을 만드는 것입니다.
Hydrogen을 통해 이는 곧, 특정 런타임·프레임워크·플랫폼에 종속되지 않는 최고의 개발자 경험을 의미합니다.
저희는 이 모든 과정을 공개적으로 진행합니다. GitHub에서 직접 사용해보고, 포크하고, 앞으로의 방향을 함께 만들어 나가 주세요.
