불과 얼마 전만 해도, 모든 요구 사항을 충족하는 전자상거래 플랫폼을 구매하는 것은 불가능했습니다. 이로 인해 CTO들은 두 가지 선택지 중 하나를 택해야 했습니다: 처음부터 플랫폼을 완전히 구축하거나, 기성 제품을 구매해 비즈니스 요구를 충족하는 형태로 조합하는 것이었습니다. 많은 기업들이 전자를 선택하면서 유연성을 약속하는 맞춤형 전자상거래 플랫폼을 구축하게 되었습니다. 이는 뛰어난 고객 경험을 제공하고 구매자의 요구가 변할 때 빠르게 전환할 수 있는 역량을 제공했습니다.
하지만 시간이 지나면서 이런 맞춤화 수준은 일종의 ‘트로이 목마’임이 드러났습니다. Arhaus의 전자상거래 부사장인 Steve Bauer는 최근 웨비나에서 이전 플랫폼이 개발자들을 끊임없는 새로운 기능 추가와 거의 즉각적인 기술 부채의 악순환에 빠뜨렸다고 말했습니다. 그는 “우리는 플랫폼을 재고하고, 수정하고, 한꺼번에 폐기하는 일을 반복했습니다. 이런 일을 시작하는 데 드는 비용이 매우 크고, 금세 없어질 수도 있다는 점이 문제였습니다.”라고 덧붙였습니다.
오늘날, 상거래 플랫폼의 맞춤화 가능성에 관한 대화는 모든 매출 규모와 산업 분야의 브랜드에 있어 복합적이면서도 흥미로운 주제가 되었습니다. Shopify는 완전히 백지 상태의 플랫폼은 아니지만, 수천 개의 브랜드가 Shopify로 전환한 이유는 필요한 만큼 충분히 유연하기 때문입니다.
브랜드들은 자신들이 선호하는 앱이나 통합 기능을 그대로 가져올 수 있고, 또는 기본 제공되는 기능과 자체 API를 통한 통합 기능을 함께 사용할 수도 있습니다.
Shopify에 저장할 수 있는 데이터 유형
커머스가 시장에서 가장 최신 기술로 확장됨에 따라, 기술 리더들이 가장 크게 걱정하는 부분 중 하나는 이를 지원하고 저장할 수 있는 인프라입니다. 대부분의 상거래 플랫폼은 기본적으로 최신 데이터 구조를 지원하지 않기에 이러한 걱정은 당연한 일입니다.
반면 Shopify는 3D 및 AR 같은 최신 기술을 지원할 수 있는 더 유연하고 복잡한 데이터 구조를 갖추고 있습니다.
브랜드는 Shopify의 유연한 데이터 맞춤화 기능을 활용해 메타필드(metafields)와 메타오브젝트(metaobjects)를 통해 스토어를 확장할 수 있습니다. 메타필드는 고객, 주문, 상품과 같은 기본 데이터 모델에 브랜드별 정보를 추가할 수 있도록 해줍니다. 메타오브젝트는 맞춤형 데이터 모델을 생성하는 데 활용할 수 있습니다.
메타오브젝트를 통해 맞춤형 콘텐츠를 만들고 웹사이트에 쉽게 배포할 수 있는 명확한 방법을 제공합니다. 브랜드들은 룩북, 퀴즈, 사이즈 가이드 등 고유한 콘텐츠를 확장하는 데 메타오브젝트를 사용합니다. 또한 메타오브젝트는 스토어프론트의 다른 모든 콘텐츠처럼 작동하며, Translate & Adapt 앱을 통해 모든 시장에 맞게 쉽게 지역화할 수 있습니다.
이처럼 더 유연한 데이터 구조를 갖춘 덕분에, 대기업들은 보통 4가지 방법 중 하나를 선택해 Shopify 기반 구축을 진행합니다.
- Liquid로 맞춤 템플릿 구축하기
- Hydrogen과 Oxygen으로 맞춤 스토어 구축하기
- Shopify Checkout으로 더 맞춤화된 결제 경험 제공하기
- Shopify Functions로 원하는 방식으로 구축하기
Liquid로 맞춤 템플릿 구축하기
Liquid는 Shopify의 CEO인 Tobias Lütke가 처음 설계한 템플릿 언어로, 현재는 Daily Harvest와 같은 브랜드들이 빠르게 맞춤형 경험을 구축하면서도 기술 스택을 간결하게 유지하는 데 활용하고 있습니다.
Liquid는 전통적인 프로그래밍 언어처럼 문법(syntax)을 갖추고 있으며, 출력, 조건문, 반복문 등 기본적인 개념도 포함하고 있습니다. 또한 PHP 같은 웹 중심 언어처럼 데이터와 상호작용하는 방식도 유사합니다.
하지만 유사점은 여기까지입니다. Liquid는 플랫폼의 깊은 내부까지 접근하는 것을 제한합니다. 숙련된 개발자에게는 이러한 제한이 다소 답답하게 느껴질 수 있지만, Liquid는 매우 유연하고 다양한 방식으로 맞춤화를 할 수 있습니다.
Liquid는 유연성 외에도 누구나 기본으로 사용할 수 있는 강력한 기능들을 제공합니다. 특히 SEO 관련 작업을 간단하게 구현하고 유지관리할 수 있도록 지원하는 기능들이 포함되어 있습니다.
많은 기업들이 Liquid 템플릿만으로도 장기적인 성공을 위한 기반을 마련할 수 있지만, 일부는 보다 높은 수준의 커스터마이징과 유연성을 원하기도 합니다. 그런 경우에도 Shopify는 더욱 맞춤화된 스토어프론트를 구축할 수 있는 도구와 가장 명확한 접근 방식을 제공합니다.
Hydrogen과 Oxygen으로 맞춤 매장 구축하기
불과 얼마 전까지만 해도 기술 스택의 유연성과 서버 사이드 제어 기능을 원하는 브랜드라면 Shopify는 고려 대상조차 아니었습니다. 하지만 이제 Shopify의 헤드리스 커머스 경험 구축을 위한 툴킷은 가장 빠르고 효율적이며 신뢰할 수 있는 솔루션으로 자리 잡았습니다.
Shopify의 공식 개발 스택은 Hydrogen과 Oxygen으로 구성되어 있습니다. Hydrogen은 React 기반의 Remix 프레임워크 위에 구축되어 있으며, 고품질 웹 개발 기준을 갖춘 것은 물론, Shopify API와 연동되도록 미리 구성된 컴포넌트, 훅, 유틸리티를 활용해 개발 속도를 크게 높일 수 있습니다. 또한, 프론트엔드에서 서버 요청이 백그라운드에서 이루어지고 있음에도 즉각적인 반응성을 제공하는 Optimistic UI 기능도 갖추고 있습니다.
Hydrogen으로 구축한 스토어프론트는 원하는 서드파티 호스팅 서비스를 통해 운영할 수 있지만, 가장 쉽고 빠르게 배포하는 방법은 Shopify의 글로벌 호스팅 솔루션인 Oxygen을 사용하는 것입니다. Oxygen은 모든 Shopify 요금제에 기본 포함되어 있으며, 별도의 추가 비용 없이 보장된 가동 시간과 배포 관리에 대한 완전한 제어 기능을 제공합니다.
기술 스택과 프레임워크에 대해 더 많은 제어권을 원한다면, Storefront API를 활용할 수도 있습니다. 이 API는 필요한 Shopify 구성 요소만 선택해 사용할 수 있도록 유연성을 제공하며, 엔드 투 엔드 솔루션에 대한 완전한 제어권을 유지할 수 있습니다. Storefront API는 디바이스 및 플랫폼에 구애받지 않기 때문에 웹, 모바일 앱, 비디오 게임, AR/VR 등 다양한 채널에서 경험을 구축할 수 있습니다.
Shopify Checkout으로 더 맞춤화된 결제 경험 제공하기
Shopify에서는 여러 훌륭한 헤드리스 스토어프론트 사례를 볼 수 있지만, 세계적인 유수 브랜드들은 여전히 Shopify의 전체 플랫폼과 고도화된 상거래 구성요소들을 맞춤화해 사용하는 방식을 선택하고 있습니다. 대표적인 예가 Shopify Checkout입니다.
Shopify Checkout은 전 세계에서 전환율이 가장 높은 결제 시스템으로, 경쟁 플랫폼 대비 최대 36%, 평균 15.2% 더 높은 성과를 보여줍니다. 또한 다양한 맞춤 설정 옵션을 제공해 기업이 자사 브랜드에 맞는 Checkout 환경을 구현할 수 있게 돕습니다. 프론트엔드에서는 GraphQL Branding API를 활용해 Checkout의 디자인과 스타일을 변경할 수 있고, 백엔드에서는 Shopify Functions를 통해 원하는 구성요소를 확장하거나 교체할 수 있습니다.
이 Shopify Functions를 통해 주요 브랜드들이 Shopify의 상거래 구성요소들을 어떻게 활용해 자사만의 스토어프론트를 구축하고 있는지도 함께 살펴보겠습니다.
Shopify Functions로 원하는 방식으로 구축하기
Shopify Functions는 Shopify Checkout의 맞춤형 백엔드 로직을 구현할 수 있게 해줄 뿐만 아니라, 플랫폼 전체의 백엔드 로직을 개발자가 직접 커스터마이즈할 수 있도록 합니다.
Functions를 통해 개발자들은 5밀리초 이내에 실행되는 강력한 할인, 배송, 결제 방식 맞춤화를 만들 수 있으며, 대규모 세일 이벤트에도 문제없이 확장할 수 있습니다. 실제로 2023년 블랙프라이데이 기간 동안 Shopify는 1,450억 건의 요청을 처리했고, 주말 동안 분당 420만 달러(약 57억 원)의 매출을 기록했습니다. Functions는 앱 내에 설치되기 때문에, 별도의 코드를 작성하거나 수정하지 않고도 Shopify 관리자 화면에서 직접 설정할 수 있습니다. 또한 매장마다 코드를 복사·붙여넣을 필요도 없어집니다.
개발자들은 WebAssembly로 컴파일 가능한 언어라면 어떤 언어로든 Function을 작성할 수 있고, UI는 AppBridge와 React로 구축할 수 있습니다. 또한 로컬 환경에서 Function을 작성한 뒤 Shopify CLI를 통해 배포할 수도 있습니다.
Shopify가 Functions를 만든 이유는 두 가지입니다. 첫째, 브랜드가 독특한 구매 경험을 빠르게 구축할 수 있도록 더 명확한 길을 제시하기 위해서이고, 둘째, 프로모션을 조정할 때 코드의 대규모 업데이트 없이도 더 쉽게 사용할 수 있도록 하기 위해서입니다.
성장을 위한 더 명확하고 맞춤화된 경로
Shopify의 맞춤화 가능성에 대한 이야기는 예상하셨겠지만, 꽤 복잡하고 여러 측면이 있습니다. 하지만 이것이 바로 Shopify가 의도한 바입니다. Shopify의 모든 팀원은 고객들이 항상 혁신의 최전선에 설 수 있도록 노력하고 있으며, 필요에 따라 유연하게 또는 조금 덜 유연하게 쓸 수 있는 강력한 도구를 제공합니다.
Shopify는 완전히 새로 시작하는 플랫폼은 아니지만, 성장 속도를 높이고 시장에 빠르게 진입할 수 있도록 도우면서도 총 소유 비용은 줄여주는 맞춤화 옵션을 갖추고 있습니다. 세계적으로 가장 혁신적인 기업들이 선택한 것처럼, Shopify는 유연함과 명확한 방향성을 동시에 제공해 브랜드가 경쟁에서 돋보일 수 있게 합니다.
Shopify로의 전환을 탐색할 준비가 되셨나요? 문의하세요.
