Vercel Shop이 정식 출시되었습니다. 에이전트가 쓰기 편하도록 상품 정보와 쇼핑 도구를 갖춘 Shopify용 오픈소스 Next.js 템플릿입니다.
에이전트는 이미 웹에서 쇼핑하고 있지만, 대부분 사람과 검색엔진을 위해 만들어진 페이지와 도구를 그대로 사용합니다. 에이전트에게 더 나은 쇼핑 경험을 제공하려면 이들을 정식 고객으로 대우해야 합니다. 에이전트가 직접 읽을 수 있는 상품 정보와 쇼핑에 맞게 설계된 도구가 필요하다는 뜻입니다.
오늘 Shopify용 오픈소스 Next.js 스토어프론트 템플릿 Vercel Shop이 정식 출시되었습니다. 이제 Shopify 기반 스토어를 사람, 검색엔진, 에이전트 모두에게 맞게 최적화해 선보일 수 있습니다.
Vercel Shop은 Shopify의 Hydrogen SDK를 기반으로 합니다. 이 SDK로 스토어의 상품 카탈로그, 장바구니와 주문 관리, 결제, 체크아웃에 접근해 맞춤형 스토어프론트를 만들 수 있습니다. 올해 초 Vercel과 Shopify는 Hydrogen을 다시 만들겠다고 발표했고, 여러 JavaScript 프레임워크에서 쓸 수 있도록 새로 구축한 SDK가 오늘 정식 출시되었습니다.
Vercel Shop은 상품 페이지를 가격, 재고 여부, 옵션 등을 담은 기계가 읽을 수 있는 콘텐츠로도 제공합니다. 같은 상품 URL이라도 사람에게는 화면 중심의 페이지를, 에이전트에게는 레이아웃을 해석할 필요 없이 바로 읽을 수 있는 상품 정보를 보여줍니다. 또 템플릿에는 페이지에 삽입된 구조화 데이터와 사이트맵이 포함되어 있어, 검색엔진과 답변 엔진이 상품을 찾고 이해하는 데 도움이 됩니다.
Shopify가 공동 개발한 Universal Commerce Protocol(UCP)은 에이전트가 스토어 카탈로그 검색, 상품 상세 정보 확인, 재고 조회, 장바구니 구성, 체크아웃 링크 발급을 표준 방식으로 처리하게 해줍니다. Vercel Shop은 이 기능들을 판매자의 자체 도메인에서 찾아 쓸 수 있게 합니다. 덕분에 에이전트는 사이트를 일일이 돌아다니지 않고도 MCP로 상품을 검색하고 장바구니를 만들 수 있습니다.
Vercel Shop은 스토어의 상품 카탈로그, 장바구니, 체크아웃을 Next.js 스토어프론트와 하나로 묶고, 여기에 에이전트용 상품 정보와 쇼핑 도구, eve 기반 쇼핑 어시스턴트까지 더했습니다. 스토어프론트와 어시스턴트가 같은 코드베이스에 있어서 스토어 디자인은 물론 어시스턴트가 고객을 돕는 방식까지 직접 맞춤 설정할 수 있습니다.
템플릿에 포함된 Skills는 코딩 에이전트가 설정, 커스터마이징, 템플릿 업데이트를 진행하도록 안내합니다. 고객이 상품 페이지를 둘러볼 수도, 어시스턴트에게 상품을 찾아 장바구니에 담아 달라고 요청할 수도 있는 경험을 만들 수 있습니다. 두 방식은 장바구니를 공유하므로, 고객이 어느 쪽에서 쇼핑하든 담아 둔 상품이 그대로 유지됩니다.
오늘 Vercel은 한정판 드롭과 함께 굿즈 스토어 vercel.store를 열었습니다. 이 스토어도 Vercel Shop으로 만들었습니다. 스토어의 쇼핑 에이전트가 상품 탐색부터 장바구니 담기, 체크아웃 진행까지 도와줍니다.
Shopify, Next.js, Vercel은 이미 AG1, Bombas, PAIGE 같은 브랜드의 스토어프론트를 뒷받침하고 있습니다. PAIGE는 이커머스 플랫폼을 재설계한 뒤 블랙 프라이데이와 사이버 먼데이 기간에 다운타임 없이 매출 22%, 전환율 76% 상승을 기록했습니다.
스토어프론트 만들기:
Vercel Shop으로 시작해 보세요. Shopify 스토어를 연결하고 스토어프론트를 설정하는 방법은 문서에서 확인할 수 있습니다.
