지난 6년간 나는 헤드리스 Shopify 스토어프론트를 구축했다. 400개 이상이다. 일부는 몇 달 안에 $1M ARR에 도달했다. 다른 것들은 리플랫포밍 재앙이었고 분기를 들여서 정리해야 했다. 이 결과들 사이의 차이는 거의 항상 어떤 프레임워크를 선택하는지에 달려있지 않다 — 단 한 줄의 코드를 작성하기 전에 트레이드오프를 이해하는 것에 달려있다.

이 가이드는 내가 2020년 서툰 Next.js 설정과 구식 REST API로 첫 번째 헤드리스 Shopify 스토어를 구축했을 때 누군가가 내게 전달해주기를 바랐던 모든 것이다. DTC 브랜드, B2B 도매업체, 엔터프라이즈 Shopify Plus 머천트를 위한 스토어프론트 구축에서 얻은 정제된 지식이다. 일부는 당신이 이미 의심하는 것을 확인할 것이다. 일부는 Twitter에서 읽어본 기존 지혜에 도전할 것이다.

시작해보자.

목차

Headless Shopify Development Guide 2026: Hydrogen, Next.js & Beyond

2026년 헤드리스 Shopify의 실제 의미

헤드리스 Shopify는 프론트엔드 프레젠테이션 레이어를 Shopify의 백엔드에서 분리하는 것을 의미한다. Shopify를 진정으로 훌륭한 것들 — 인벤토리, 주문, 결제, 이행 — 을 위해 유지하고 Liquid 테마를 스토어프론트 API와 상호작용하는 커스텀 프론트엔드로 교체한다.

하지만 대부분의 글이 당신에게 말해주지 않을 것이 하나 있다: 2026년의 헤드리스 Shopify는 2년 전과도 완전히 다른 동물이다. 세 가지 변화가 환경을 근본적으로 바꿨다:

  1. Hydrogen 2는 성숙해졌다. 2023년 불안정한 출시 이후 Shopify의 React 기반 프레임워크는 Oxygen(그들의 호스팅 플랫폼)에서 상당히 안정화됐다. 이제는 내부적으로 Remix 위에 있고 합리적인 기본값으로 제공된다.

  2. 스토어프론트 API는 2025-04 버전에 도달했다. 이는 Customer Account API v2, 예측 검색 개선, 그리고 — 중요하게도 — 클라이언트 측 JavaScript를 필요로 하지 않는 서버 측 카트 작업을 가져왔다.

  3. 체크아웃 확장이 checkout.liquid를 완전히 대체했다. 2025년 8월 기준으로, 모든 Shopify Plus 스토어는 체크아웃 확장성을 사용해야 한다. Liquid 체크아웃 사용자 지정은 더 이상 없다. 이것만 해도 수천 개의 스토어를 헤드리스 아키텍처로 밀었다.

내가 사용하는 정신 모델: Shopify는 당신의 상거래 엔진이다. 당신의 프론트엔드는 그 엔진에서 데이터를 가져오는 일이 된 목적 맞춤형 인터페이스이다. 그 사이의 모든 것은 API 호출과 캐싱 전략이다.

아키텍처 스택

2026년의 전형적인 헤드리스 Shopify 설정은 이렇게 보인다:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   Frontend App   │────▶│  Storefront API   │────▶│  Shopify Backend │
│  (Hydrogen/Next) │     │  (GraphQL)        │     │  (Admin, Orders) │
└─────────────────┘     └──────────────────┘     └─────────────────┘
        │                                                  │
        ▼                                                  ▼
┌─────────────────┐                              ┌─────────────────┐
│   Headless CMS   │                              │  Checkout Ext.  │
│  (Sanity/Contentful)                            │  (Shopify UI Ext)│
└─────────────────┘                              └─────────────────┘

프론트엔드는 GraphQL을 통해 스토어프론트 API와 통신한다. Shopify에 속하지 않는 콘텐츠(에디토리얼 페이지, 랜딩 페이지, 복잡한 콘텐츠 모델)는 헤드리스 CMS에 있다. 체크아웃 사용자 지정은 커스텀 마크업이 아닌 Shopify의 확장 포인트를 통해 발생한다.

스토어프론트 API: 당신의 새로운 최고의 친구

스토어프론트 API는 고객 대면 경험을 위해 특별히 설계된 공개 GraphQL API이다. 백엔드 작업을 처리하는 Admin API와는 구별된다. 이 구별을 이해하는 것이 중요하다.

할 수 있는 것

query ProductPage($handle: String!) {
  product(handle: $handle) {
    id
    title
    description
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    variants(first: 100) {
      edges {
        node {
          id
          title
          availableForSale
          selectedOptions {
            name
            value
          }
          price {
            amount
            currencyCode
          }
        }
      }
    }
    metafields(identifiers: [
      { namespace: "custom", key: "sizing_guide" },
      { namespace: "custom", key: "material_info" }
    ]) {
      key
      value
      type
    }
    media(first: 20) {
      edges {
        node {
          ... on MediaImage {
            image {
              url
              altText
              width
              height
            }
          }
          ... on Video {
            sources {
              url
              mimeType
            }
          }
        }
      }
    }
  }
}

레이트 제한 및 캐싱

2026년 기준, 스토어프론트 API는 공개 액세스 토큰에 대해 스토어당 초당 100개의 요청을 허용한다(2024년 초의 60에서 상향). 비공개 액세스 토큰은 더 높은 제한을 받는다. 하지만 어차피 이 제한에 도달해야 하지 않는다 — 도달한다면 당신의 캐싱 전략이 깨진 것이다.

내가 모든 프로젝트에서 하는 것:

  • 전체 페이지 캐싱 CDN 레벨에서(Vercel, Cloudflare 또는 Oxygen) stale-while-revalidate 헤더와 함께
  • 데이터 계층 캐싱 제품 데이터는 60초 TTL, 컬렉션 데이터는 300초
  • 카트 작업 캐시되지 않음 — 매번 직접 API를 요청한다
  • 인벤토리 확인 경량 폴링 메커니즘 또는 웹훅을 사용하여 오래된 재고 데이터를 무효화한다
// 예: Next.js에서 제품 쿼리에 대한 캐싱 전략
export async function getProduct(handle: string) {
  const data = await shopifyFetch({
    query: PRODUCT_QUERY,
    variables: { handle },
    cache: 'force-cache',
    next: { revalidate: 60, tags: [`product-${handle}`] },
  });
  return data.product;
}

Hydrogen vs Next.js Commerce: 실제 비교

이것이 내가 가장 많이 받는 질문이다. 정직한 대답은: 당신의 팀, 당신의 타임라인, 당신의 호스팅 선호도에 달려있다. 하지만 데이터가 있다.

요소 Hydrogen 2 (Remix/Oxygen) Next.js Commerce (Vercel)
프레임워크 Remix (React) Next.js 15 (React)
호스팅 Oxygen (Shopify) 또는 자체 호스팅 Vercel, Netlify, 자체 호스팅
Shopify 통합 일방, 깊이 있음 커뮤니티 유지 스타터
러닝 커브 중간(Remix 패턴) 낮음(팀이 Next.js를 알면)
CMS 유연성 좋음 하지만 Shopify 중심 우수 — 생태계가 거대함
중앙값 LCP(우리 데이터) 0.8s 0.7s
중앙값 TTFB 120ms (Oxygen) 90ms (Vercel Edge)
규모별 비용 Oxygen 무료 계층 넉넉함 Vercel Pro $20/mo, Enterprise $$$
체크아웃 통합 기본 카트 → 체크아웃 흐름 스토어프론트 API 카트 설정 필요
생태계 플러그인 성장 중, ~200개 패키지 거대, 10k+ 패키지
커뮤니티 규모 ~15k GitHub 별 ~40k GitHub 별

Hydrogen을 선택할 때

이 경우 Hydrogen을 선택하라:

  • 당신의 팀이 Remix의 로더/액션 패턴에 익숙하다
  • 가장 가까운 네이티브 Shopify 경험을 원한다
  • Oxygen 호스팅이 포함된 Shopify Plus 머천트이다
  • 무거운 비상거래 콘텐츠(블로그, 에디토리얼 등)가 필요하지 않다

Next.js를 선택할 때

이 경우 Next.js를 선택하라:

  • 당신의 팀이 이미 Next.js 앱을 배포한다
  • Shopify의 메타필드를 넘어 깊은 CMS 통합이 필요하다
  • 최대 호스팅 유연성을 원한다
  • 상거래 옆에 콘텐츠 풍부한 브랜드 경험을 구축하고 있다
  • 미래에 상거래 백엔드를 바꿀 가능성이 있다

솔직하게 말하겠다: 지난 해 내가 구축한 스토어 70%에서는 Next.js가 올바른 선택이었다. 기술적으로 우월해서가 아니라 — 반드시 그런 것은 아니지만 — 인재 풀이 5배 크고 생태계가 엣지 케이스에 대한 더 많은 솔루션을 가지고 있기 때문이다. 당신의 클라이언트의 마케팅 팀이 특정 애니메이션 라이브러리를 원하거나 그들의 SEO 에이전시가 특정 메타 태그 구조를 요구할 때, Next.js 땅에서 답을 더 빨리 찾을 수 있을 것이다.

즉, Oxygen의 Hydrogen 스토어는 따라잡기 어려운 배포 단순성을 가지고 있다. 메인으로 푸시하면, 라이브된다. 빌드 구성 없음, 디버깅할 엣지 함수 콜드 스타트 없음.

Headless Shopify Development Guide 2026: Hydrogen, Next.js & Beyond - architecture

1초 미만의 LCP 달성

이것은 고무가 도로와 만나는 곳이다. 헤드리스 Shopify의 전체 비즈니스 케이스 — 실제 재정적 정당화 — 은 성능에 기반한다. 그리고 당신이 달성해야 할 숫자는 모바일에서 1초 미만의 Largest Contentful Paint이다.

여기 이유가 있다: LCP의 100ms 개선마다 대략 1%의 전환율 증가와 상관관계가 있다, Shopify의 자체 2025년 성능 연구에 따르면. 연간 $5M을 하는 스토어가 2.5s LCP(전형적 Liquid 테마)에서 0.9s LCP로 가면 대략 15% 증가를 기대할 수 있다. 그것은 $750K의 추가 수익이다.

400개 이상의 사이트에 걸친 우리 데이터는 이 범위를 확인한다. 헤드리스 스토어프론트는 Liquid 테마보다 60-75% 빠르다 평균적으로, CrUX 보고서의 실제 사용자 Core Web Vitals 데이터로 측정되었다.

성능 플레이북

정확히 우리가 어떻게 일관되게 1초 미만의 LCP를 달성하는지:

1. 중요 경로를 서버 렌더링한다

// Next.js App Router — 제품 페이지의 서버 컴포넌트
export default async function ProductPage({ params }: { params: { handle: string } }) {
  const product = await getProduct(params.handle);
  
  return (
    <main>
      <ProductHero product={product} />
      <Suspense fallback={<PriceSkeleton />}>
        <ProductPricing productId={product.id} />
      </Suspense>
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={product.id} />
      </Suspense>
    </main>
  );
}

2. 이미지를 공격적으로 최적화한다

Shopify의 CDN은 width, height, crop 파라미터를 지원한다. 사용하라. 2000px 히어로 이미지를 375px 모바일 뷰포트에 제공하지 마라.

function getOptimizedImageUrl(url: string, width: number) {
  const imageUrl = new URL(url);
  imageUrl.searchParams.set('width', String(width));
  imageUrl.searchParams.set('format', 'webp');
  return imageUrl.toString();
}

3. LCP 이미지를 미리 로드한다

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

4. 중요 CSS를 인라인하고, 나머지는 지연시킨다

우리는 상단부 CSS를 14KB 미만으로 유지한다(하나의 TCP 왕복). 그 외 모든 것은 비동기로 로드된다.

5. 엣지 측 렌더링

Vercel Edge Functions와 Oxygen의 워커 런타임 모두 엣지에서 실행되어 전 세계적으로 100ms 미만의 TTFB를 제공한다. 이것이 당신이 당길 수 있는 가장 큰 성능 레버이다.

6. 의도에서 미리 가져온다

뷰포트의 모든 것을 미리 가져오지 마라. 호버/터치 시작에서 미리 가져온다. 이것은 불필요한 대역폭을 ~40% 줄이면서도 여전히 즉각적으로 느껴진다.

체크아웃 확장 및 Post-Checkout.liquid 시대

많은 머천트의 손을 강제한 변화가 하나 있다: 2025년 8월 기준으로, Shopify는 Plus 스토어에서 checkout.liquid를 일몰했다. 커스텀 체크아웃 수정이 있었다면 — 그리고 대부분의 Plus 머천트는 그랬다 — 체크아웃 확장으로 마이그레이션해야 했다.

체크아웃 확장은 Shopify의 UI 확장 프레임워크를 사용한다. 정의된 확장 포인트(구매 전, 구매 후, 배송, 결제 등) 내에서 Shopify의 체크아웃 내에 렌더링되는 React 같은 컴포넌트를 작성한다.

// 예: 구매 후 업셀 확장
import { useApi, reactExtension, BlockStack, Text, Button } from '@shopify/ui-extensions-react/checkout';

export default reactExtension('purchase.checkout.block.render', () => <UpsellBlock />);

function UpsellBlock() {
  const { cost, lines } = useApi();
  
  return (
    <BlockStack>
      <Text size="medium">매칭 액세서리를 추가하시겠어요?</Text>
      <Button onPress={() => { /* 카트에 추가 로직 */ }}>
        $19.99에 추가
      </Button>
    </BlockStack>
  );
}

이해할 핵심: 체크아웃 확장은 당신이 헤드리스이든 Liquid 테마를 사용하든 동일하게 작동한다. 당신의 헤드리스 프론트엔드는 Shopify의 체크아웃으로 전달하고, 확장은 그곳에서 실행된다. 이것은 실제로 헤드리스 접근의 주요 장점이다 — 당신의 스토어프론트는 완전히 커스텀이지만, 체크아웃은 Shopify 호스팅(PCI 준수, Shopify에서 유지, 등)된다.

Shopify Plus 마이그레이션 전략

기존 Shopify Plus 스토어를 헤드리스로 마이그레이션하는 것은 단계적 작업이다. 모두 한 번에 하려고 하지 마라. 여기는 우리 프로젝트에서 가장 잘 작동한 접근법이다:

단계 1: 기초 (1-3주)

  • 프론트엔드 프레임워크 설정(Next.js 또는 Hydrogen)
  • 캐싱을 통한 스토어프론트 API 연결 계층 구현
  • 디자인 시스템 / 컴포넌트 라이브러리 구축
  • CI/CD 파이프라인 설정

단계 2: 핵심 상거래 (4-8주)

  • 제품 목록 페이지(컬렉션)
  • 제품 상세 페이지
  • 카트 기능
  • 검색(Shopify의 예측 검색 API 또는 Algolia와 같은 제3자 사용)
  • Customer Account API를 통한 계정 페이지

단계 3: 콘텐츠 & 마케팅 (9-11주)

  • 비상거래 페이지를 위한 CMS 통합
  • 블로그 / 에디토리얼 섹션
  • 마케팅 팀을 위한 랜딩 페이지 빌더
  • SEO 마이그레이션(301 리다이렉트, 사이트맵, 구조화된 데이터)

단계 4: 런칭 & 최적화 (12-14주)

  • 성능 감사 및 최적화
  • A/B 테스팅 설정
  • 분석 마이그레이션(GA4, 서버 측 추적)
  • 기능 플래그 또는 분할 테스팅을 통한 점진적 트래픽 마이그레이션

총 타임라인: 전형적인 Shopify Plus 스토어의 경우 12-14주. 복잡한 카탈로그(50k+ SKU)나 무거운 사용자 지정이 있는 엔터프라이즈 스토어는 16-20주가 걸릴 수 있다.

$1M ARR 임계값: 헤드리스가 재정적으로 타당할 때

헤드리스는 무료가 아니다. 커스텀 프론트엔드 개발은 Liquid 테마 설치보다 더 비싼다. 지속적인 유지관리에는 개발자 시간이 필요하다. 그래서 수학이 언제 맞는가?

우리 데이터를 기반으로: $1M ARR은 헤드리스 Shopify가 명확한 재정적 의미를 가지기 시작하는 임계값이다.

여기는 수학이다:

수익 수준 예상 전환 비율 증가 수익 증가 헤드리스 구축 비용 연간 진행 비용 ROI 타임라인
$500K ARR 10-15% $50-75K $80-150K $24-48K 18-24개월
$1M ARR 10-15% $100-150K $80-150K $24-48K 8-14개월
$3M ARR 10-15% $300-450K $120-200K $36-60K 4-6개월
$10M ARR 10-15% $1-1.5M $150-300K $48-96K 2-3개월

$1M 아래에서는 잘 구축된 Liquid 테마에서 전환율 최적화에 투자하는 것이 더 좋다. $1M 이상에서는 성능 이득이 빠르게 복합되어 투자를 정당화하기에 충분하다. $3M 이상에서는 헤드리스를 가지 않는 것은 심각한 돈을 테이블에 남기고 있다.

헤드리스 빌드에 대한 가격 세부사항은 우리의 가격 페이지를 확인하라 — 우리는 프로젝트 범위에 대해 투명하다.

에이전시 선택: Naturaily, Aalpha 등

헤드리스 Shopify 작업을 위해 에이전시를 평가하고 있다면, 여기는 2026년의 환경에 대한 내 정직한 평가이다.

Naturaily는 폴란드 기반 에이전시로 헤드리스 상거래, 특히 Next.js 및 Vue Storefront를 사용한 견고한 평판을 구축했다. 그들의 강점은 중가 시장에 있다 — $1-10M을 하는 엔터프라이즈 가격 없이 전문 빌드가 필요한 브랜드. 기술적으로 유능하고 좋은 Shopify Storefront API 경험이 있다. 어디서 그들이 때때로 투쟁하는지: 매우 커스텀 B2B 워크플로우 및 멀티마켓 Shopify 설정.

Aalpha는 인도 기반 개발 회사로 더 광범위한 초점을 가지고 있다 — 그들은 모바일 앱, 엔터프라이즈 소프트웨어, 헤드리스 상거래를 한다. 그들의 요금은 상당히 더 낮다(종종 서구 에이전시의 40-60% 덜), 예산 의식 프로젝트에 매력적이게 한다. 트레이드오프는 일반적으로 프로젝트 관리 오버헤드 및 디자인 광택이다. 강한 내부 디자인 팀을 가지고 있고 프로젝트를 주의 깊게 관리할 수 있다면, 그들은 견고한 기술 작업을 제공할 수 있다.

Social Animal에서의 우리와의 비교: 우리는 헤드리스 웹 개발에만 특화되어 있다 — Shopify만이 아니라, Next.js 및 Astro를 포함한 헤드리스 CMS와 프레임워크 작업의 전체 스펙트럼. 우리의 최적의 장소는 큰 에이전시의 오버헤드 없이 깊은 기술 전문성이 필요한 브랜드 및 회사들이다. 당신이 적합성에 대해 궁금하다면, 연락해라 — 우리는 당신의 프로젝트에 대해 우리가 올바른 상점인지 정직하게 당신에게 말할 것이다.

요소 Social Animal Naturaily Aalpha
특화 헤드리스 웹(깊이) 헤드리스 상거래 + 웹 풀스택 개발
기본 프레임워크 Next.js, Astro, Hydrogen Next.js, Vue Storefront Next.js, React Native
팀 위치 미국 기반 폴란드 인도
전형적 프로젝트 범위 $80-250K $60-200K $25-100K
Shopify Plus 경험 예(400+ 헤드리스 사이트) 예 예
최고의 경우 성능 중심 스토어프론트 중가 헤드리스 상거래 예산 의식 빌드

Astro 및 기타 프레임워크를 사용한 커스텀 스토어프론트

여기 대부분의 Shopify 헤드리스 가이드가 당신에게 말해주지 않을 것이 있다: 당신은 React를 사용할 필요가 없다.

우리는 Astro로 여러 Shopify 스토어프론트를 구축했다 — 특히 콘텐츠와 에디토리얼이 상거래만큼 중요한 브랜드. Astro의 아일랜드 아키텍처는 기본적으로 JavaScript를 0으로 배포하고 대화형 비트(카트, 제품 선택기, 검색)만 수화한다.

결과? LCP는 일관되게 0.6초 미만. 총 페이지 무게 100KB 미만. 그것은 터무니없이 빠르다.

---
// Shopify 제품 카드를 위한 Astro 컴포넌트
import { getProduct } from '../lib/shopify';

const product = await getProduct(Astro.params.handle);
---

<article class="product-card">
  <img 
    src={product.featuredImage.url + '&width=600'}
    alt={product.featuredImage.altText}
    width="600"
    height="600"
    loading="lazy"
  />
  <h2>{product.title}</h2>
  <p class="price">${product.priceRange.minVariantPrice.amount}</p>
  
  <!-- 이 컴포넌트만 JavaScript를 배포한다 -->
  <AddToCart client:visible productId={product.id} />
</article>

트레이드오프: Astro의 상거래 생태계는 더 작다. 카트 관리, 인증, 검색을 위해 더 많은 커스텀 코드를 작성할 것이다. 하지만 성능이 당신의 주요 지표이고 당신의 팀이 추가 작업과 편하다면, 그것은 합법적 선택이다.

FAQ

작은 스토어에는 헤드리스 Shopify이 가치가 있는가?

$500K ARR 미만인 스토어의 경우 보통 아니다. 개발 및 유지관리 비용은 전환율 개선을 능가한다. 당신은 Dawn과 같은 빠르고 잘 최적화된 Liquid 테마와 더 낫다. $1M ARR에 도달하면, 경제가 헤드리스에 유리하게 결정적으로 변한다.

2026년에 헤드리스 Shopify 빌드는 얼마나 드는가?

복잡성, 에이전시 위치, 기능 범위에 따라 초기 빌드에 $80K-$300K를 기대하라. 진행 중인 유지관리는 월 $2K-$8K를 실행한다. 남아시아의 예산 에이전시는 $25K-$80K로 제공할 수 있지만, 일반적으로 더 강한 내부 프로젝트 관리 및 품질 보증이 필요할 것이다.

헤드리스 스토어프론트와 함께 Shopify의 체크아웃을 사용할 수 있는가?

예, 그리고 당신은 해야 한다. Shopify의 체크아웃은 PCI 준수, 전투 테스트, 결제 처리를 다룬다. 당신의 헤드리스 프론트엔드는 스토어프론트 API를 통해 카트를 생성한 다음 Shopify의 호스팅된 체크아웃으로 리다이렉트한다. 체크아웃 확장은 당신이 Shopify의 확장 포인트 내에서 경험을 사용자 지정할 수 있게 한다.

헤드리스와 Liquid 테마 사이의 성능 차이는 무엇인가?

400개 이상의 사이트에 걸친 우리 데이터는 헤드리스 스토어프론트가 Core Web Vitals 메트릭에서 Liquid 테마보다 60-75% 더 빠르다는 것을 보여준다. 특히, 중앙값 LCP는 2.3-3.5초(Liquid)에서 0.7-1.0초(헤드리스)로 떨어진다. 이것은 평균적으로 약 10-15% 전환율 개선으로 번역된다.

헤드리스 Shopify 스토어에 Hydrogen 또는 Next.js를 사용해야 하는가?

당신의 팀이 Next.js를 알면, Next.js를 사용하라. 당신이 새로 시작하고 최소 구성으로 가장 통합된 Shopify 경험을 원한다면, Oxygen의 Hydrogen은 우수하다. 그들 사이의 성능 차이는 무시할 수 있다 — 팀 전문성과 생태계 필요가 당신의 결정을 운전해야 한다.

헤드리스를 위해 Shopify Plus가 필요한가?

기술적으로 아니다. 스토어프론트 API는 모든 Shopify 플랜에서 이용 가능하다. 하지만 실제로, 대부분의 헤드리스 빌드는 Plus 기능으로부터 이익을 얻는다: 체크아웃 확장, 스크립트, 멀티 스토어 설정을 위한 조직 API, 더 높은 API 레이트 제한. 헤드리스가 의미가 있는 수익 수준($1M+)에서, 어차피 Plus에 있어야 한다.

헤드리스 Shopify 마이그레이션은 얼마나 오래 걸리는가?

경험 많은 팀이 있는 전형적인 Shopify Plus에서 헤드리스로의 마이그레이션은 12-14주가 걸린다. 복잡한 카탈로그, 무거운 사용자 지정, 또는 멀티마켓 설정이 있는 엔터프라이즈 스토어는 16-20주가 걸릴 수 있다. 누군가가 당신에게 4주 작업이라고 말하지 마라 — 그것은 어떻게 당신이 깨진 런칭에서 끝나는지이다.

헤드리스 프론트엔드로 이동할 때 내 Shopify 앱은 어떻게 되는가?

이것이 가장 큰 통증 포인트 중 하나이다. 많은 Shopify 앱이 Liquid 테마에 스크립트를 주입하는데, 이것은 헤드리스 프론트엔드에서 작동하지 않을 것이다. 당신은 각 앱을 평가해야 할 것이다: 일부는 당신이 직접 통합할 수 있는 API를 제공하고, 일부는 헤드리스 호환 버전을 가지고 있으며, 일부는 커스텀 코드나 대체 서비스로 교체되어야 한다. 프로젝트 범위의 일부로 앱 감사 및 마이그레이션을 계획하라.

Astro 또는 다른 비React 프레임워크를 Shopify의 스토어프론트 API와 함께 사용할 수 있는가?

절대적으로. 스토어프론트 API는 표준 GraphQL API이다 — HTTP 요청을 할 수 있는 모든 프레임워크가 이것을 사용할 수 있다. 우리는 Astro, SvelteKit, 그리고 심지어 순수 JavaScript로 Shopify 스토어프론트를 구축했다. 트레이드오프는 Shopify의 공식 도구(Hydrogen, 카트 유틸리티, 등)가 React 기반이므로, 다른 프레임워크와 더 많은 커스텀 통합 코드를 작성할 것이다.