Skip to main content

Shopify 플랫폼 아키텍처

Shopify에서 효과적으로 구축하려면 먼저 플랫폼이 어떻게 구성되어 있는지 이해해야 합니다. Shopify는 전 세계 모든 업종의 수백만 판매자를 지원하는 세계 최대의 멀티테넌트 SaaS 플랫폼 중 하나입니다. 이 수업에서는 이 모든 것을 가능하게 하는 아키텍처를 탐구합니다.

멀티테넌트 SaaS 아키텍처​

Shopify는 멀티테넌트 아키텍처에서 실행됩니다. 이는 모든 판매자가 동일한 애플리케이션 인프라를 공유한다는 것을 의미합니다. 자체 호스팅 플랫폼(WooCommerce, Magento)과 달리 판매자는 서버, 데이터베이스, 배포를 관리하지 않습니다.

멀티테넌시가 개발자에게 미치는 영향​

Shopify 개발자로서 멀티테넌시는 여러 가지 방식으로 영향을 미칩니다:

  • 서버 접근 불가: Shopify 서버에 SSH로 접속하거나 시스템 구성을 수정할 수 없습니다. 코드는 샌드박스 환경(앱, 테마, Functions)에서 실행됩니다.
  • 공유 Rate Limit: API Rate Limit은 플랫폼을 보호합니다. 앱은 판매자 스토어의 다른 모든 앱과 리소스를 공유합니다.
  • 보장된 가동 시간: Shopify가 인프라, 스케일링, 보안을 처리합니다. 앱은 Shopify의 99.99% 가동 시간 SLA의 혜택을 받습니다.
  • 표준화된 데이터 모델: 모든 스토어가 동일한 상품, 주문, 고객 데이터 모델을 사용합니다. 한 번 배우면 어디서나 작동합니다.
대규모의 Shopify

Shopify는 연간 2,000억 달러 이상의 GMV(총 상품 거래액)를 처리합니다. Black Friday/Cyber Monday와 같은 피크 이벤트 동안 플랫폼은 한 주말에 42억 달러 이상을 처리합니다. 아키텍처는 이 수준의 규모를 위해 설계되었으며, 앱은 해당 인프라를 상속합니다.

세 가지 서피스​

Shopify는 사용자가 상호 작용하는 세 가지 주요 서피스를 노출합니다. 이를 이해하는 것은 코드가 어디서 실행되는지 아는 데 기본입니다.

1. 스토어프론트​

스토어프론트는 고객이 판매자의 온라인 스토어를 방문할 때 보는 것입니다. 두 가지 방식으로 렌더링될 수 있습니다:

Liquid 테마 (Online Store 2.0): 기본값입니다. Shopify의 서버가 Liquid 템플릿 언어를 사용하여 HTML을 렌더링합니다. 테마는 Liquid 템플릿, CSS, JavaScript, 자산의 모음입니다. 대다수의 Shopify 스토어에서 사용되는 가장 일반적인 접근법입니다.

Hydrogen (Headless): 커스텀 스토어프론트를 구축하기 위한 React 기반 프레임워크입니다. Hydrogen은 Storefront API를 사용하여 데이터를 가져오며 Shopify의 Oxygen 호스팅이나 모든 Node.js 호스트에 배포할 수 있습니다. 완전한 디자인 자유가 필요한 브랜드에서 사용됩니다.

2. 관리자​

Shopify Admin은 판매자의 백오피스입니다 -- 상품, 주문, 고객, 설정, 설치된 앱을 관리하는 곳입니다. 앱 개발자로서 앱은 App Bridge를 사용하여 Admin 내에 임베디드로 실행됩니다.

주요 Admin 개념:

  • App Bridge: 임베디드 앱이 Shopify Admin과 통신할 수 있게 하는 JavaScript 라이브러리 (내비게이션, 모달, 토스트 알림, 리소스 피커)
  • Polaris: 네이티브처럼 느껴지는 Admin UI를 구축하기 위한 Shopify의 React 컴포넌트 라이브러리
  • Admin API: 앱이 스토어 데이터를 읽고 쓸 수 있게 하는 GraphQL 및 REST API
  • Admin 확장: Admin 페이지에 직접 앱의 기능을 추가하는 UI 확장 (예: 상품 페이지의 커스텀 필드)

3. 체크아웃​

체크아웃은 Shopify에서 가장 보호되는 서피스입니다. 보안 및 규정 준수(PCI DSS)를 위해 체크아웃은 엄격히 통제됩니다. 특정 API를 통해 확장합니다:

  • Checkout UI Extensions: 체크아웃 플로우 내 지정된 확장 대상에 렌더링되는 React 컴포넌트
  • Shopify Functions: 체크아웃 로직을 커스터마이징하는 WebAssembly 모듈 (할인, 배송, 결제 방법, 장바구니 변환)
  • Post-Purchase Extensions: 결제 후 감사 페이지 전에 표시되는 UI
체크아웃은 자유롭지 않습니다

다른 플랫폼과 달리 Shopify의 체크아웃에 임의의 JavaScript를 삽입할 수 없습니다. 이것은 의도적입니다 -- 전환율, 보안, 성능을 보호합니다. Extensions와 Functions는 안전한 경계 내에서 강력한 커스터마이징을 제공합니다.

Online Store 2.0​

Online Store 2.0 (OS2.0)은 2021년에 도입된 Shopify의 현재 테마 아키텍처입니다. 기존 테마 시스템을 더 유연하고 판매자 친화적인 접근 방식으로 대체했습니다.

주요 OS2.0 기능​

  • JSON 템플릿: 템플릿이 JSON으로 정의되며, 어떤 섹션을 어떤 순서로 렌더링할지 지정합니다. 판매자는 코드를 편집하지 않고도 섹션을 추가, 제거, 재정렬할 수 있습니다.
  • 어디서나 섹션: 섹션은 재사용 가능하고 구성 가능한 콘텐츠 블록입니다. OS2.0에서는 홈페이지뿐만 아니라 모든 페이지 유형에서 섹션이 작동합니다.
  • 블록: 섹션에는 블록이 포함됩니다 -- 판매자가 섹션 내에서 추가하고 재배열할 수 있는 더 작은 콘텐츠 단위입니다.
  • Metafield: 상품, 컬렉션, 주문 및 기타 리소스에 연결된 커스텀 데이터 필드입니다. OS2.0에서는 테마 편집기에서 metafield에 접근할 수 있게 되었습니다.
  • App 블록: 앱이 판매자가 편집기를 사용하여 테마에 드래그 앤 드롭할 수 있는 테마 블록을 등록할 수 있습니다.

Hydrogen과 Oxygen​

스토어프론트에 대한 완전한 제어가 필요한 판매자를 위해 Shopify는 headless 커머스 솔루션을 제공합니다.

Hydrogen​

Hydrogen은 Remix 기반으로 구축된 React 프레임워크로, Shopify 스토어프론트를 위해 특별히 설계되었습니다. 제공하는 것:

  • 상품, 컬렉션, 장바구니, 고객 계정을 위한 Shopify 전용 훅과 컴포넌트
  • 내장 캐싱과 낙관적 업데이트가 포함된 Storefront API 통합
  • 메타 태그, 사이트맵, 구조화된 데이터를 관리하기 위한 SEO 유틸리티
  • 빠른 초기 페이지 로드를 위한 스트리밍 SSR
  • 완전한 스토어프론트를 즉시 제공하는 스타터 템플릿

Oxygen​

Oxygen은 Hydrogen 스토어프론트를 위한 Shopify의 호스팅 플랫폼입니다. 주요 이점:

  • 글로벌 에지 배포 -- 전 세계 고객에 가까이서 스토어프론트 실행
  • 자동 스케일링 -- 구성 없이 트래픽 급증 처리
  • Git 기반 배포 -- main에 push하면 Oxygen이 자동으로 배포
  • 환경 변수 -- 시크릿을 안전하게 관리
  • 미리보기 배포 -- 모든 브랜치에 미리보기 URL 제공
Hydrogen vs Liquid 사용 시점

판매자가 표준 전자상거래 경험이 필요하고, 테마 편집기를 사용하려 하며, 지속적인 유지보수를 위한 개발 팀이 없을 때 Liquid 테마를 사용하세요.

브랜드가 완전히 커스텀한 디자인이 필요하거나, 앱과 같은 인터랙티비티를 원하거나, Shopify 외 데이터 소스를 통합해야 하거나, React를 선호하는 개발 팀이 있을 때 Hydrogen을 사용하세요.

대부분의 스토어에서는 Liquid 테마가 올바른 선택입니다. Hydrogen은 하이엔드 브랜드, 마켓플레이스, 복잡한 멀티소스 스토어프론트에서 빛을 발합니다.

Shopify Functions 런타임​

Shopify Functions는 플랫폼 아키텍처의 가장 새로운 주요 부분입니다. 핵심 커머스 로직을 커스터마이징하기 위해 Shopify의 인프라에서 실행되는 가볍고 샌드박스된 프로그램입니다.

Functions의 작동 방식​

  1. Extension target: 커스터마이징할 커머스 플로우의 부분을 선택합니다 (할인, 배송율, 결제 방법, 장바구니 변환, 주문 라우팅 등)
  2. 입력 쿼리: Function이 필요한 데이터를 정의하는 GraphQL 쿼리를 작성합니다 (장바구니 내용, 고객 정보, metafield 등)
  3. Function 로직: JavaScript 또는 Rust로 커스터마이징 로직을 작성합니다. 코드는 WebAssembly (Wasm)로 컴파일됩니다.
  4. 출력: Function이 Shopify가 체크아웃에 적용하는 구조화된 응답을 반환합니다.

Functions는 엄격한 메모리 제한과 함께 5ms 이내에 실행됩니다. 빠르고 안전하도록 설계되었습니다 -- 네트워크 요청, 파일 시스템 접근, I/O를 수행할 수 없습니다. 모든 데이터는 입력 쿼리를 통해 제공됩니다.

Scripts에서 Functions로의 마이그레이션

Shopify Scripts (Ruby 기반 체크아웃 커스터마이징)를 유지하고 있다면, Scripts는 더 이상 사용되지 않으며 2026년 6월에 제거될 예정입니다. 모든 Scripts는 Functions로 마이그레이션해야 합니다. 마이그레이션 프로세스는 Shopify Functions 수업에서 자세히 다룹니다.

모든 것의 연결​

플랫폼 구성 요소가 서로 어떻게 관련되는지에 대한 전체 그림입니다:

핵심 요약​

플랫폼 아키텍처를 이해하면 Shopify 개발자로서 내리는 모든 결정에 대한 정신 모델을 얻게 됩니다:

  • 멀티테넌시는 플랫폼을 확장하는 것이지 인프라를 제어하는 것이 아님을 의미합니다
  • 세 가지 서피스 (스토어프론트, 관리자, 체크아웃)는 각각 다른 확장 메커니즘을 가집니다
  • Online Store 2.0는 섹션과 블록으로 유연하고 판매자가 편집 가능한 테마를 제공합니다
  • Hydrogen + Oxygen은 완전한 제어가 필요한 브랜드를 위한 headless 스토어프론트를 가능하게 합니다
  • Shopify Functions는 빠르고 샌드박스된 런타임에서 커머스 로직을 커스터마이징합니다

다음 수업에서는 완전한 Shopify API 환경을 조사하고 각 작업에 적합한 API를 선택하는 방법을 배웁니다.