Shopify 스토어에서 Framer 랜딩 페이지 운영하는 법

캠페인용 랜딩 페이지는 Framer로 만들고, 장바구니와 결제는 Shopify 스토어 안에 두세요. 장바구니 퍼머링크가 구매자를 넘겨주면서 장바구니까지 채워줍니다. 이 구성이 깨지는 지점은 둘입니다. 도메인이 두 개라 애널리틱스가 헷갈리고, 두 곳의 가격이 서로 어긋납니다. 둘 다 반나절이면 잡습니다.

Framer 랜딩 페이지와 Shopify 스토어의 역할을 나누세요

Framer는 자주 바꾸고 디자인 자유도가 필요한 페이지를 맡습니다. 캠페인 랜딩 페이지, 광고형 기사, 브랜드 스토리, 런칭 페이지, 퀴즈 결과 페이지입니다. Shopify는 돈과 관련된 것을 전부 맡습니다. 제품 페이지, 컬렉션, 장바구니, 결제, 고객 계정, 주문 상태입니다. 결제 화면은 다시 만들지 마세요.

이 구분이 통하는 이유는 두 묶음이 하는 일도 다르고 수정 빈도도 크게 다르기 때문입니다. 이번 달에 랜딩 페이지 변형은 네 개를 내보내지만 결제 화면은 한 번도 건드리지 않습니다.

인수인계는 장바구니 퍼머링크로

Shopify에는 링크만으로 장바구니를 채우는 URL 형식이 문서로 정리돼 있습니다. Framer 버튼을 yourstore.com/cart/VARIANT_ID:QUANTITY로 연결하세요. 할인은 ?discount=CODE로 붙입니다. 품목을 여러 개 넣을 때는 /cart/11111:1,22222:2처럼 쉼표로 이어줍니다. 결제로 바로 가지 않고 장바구니 페이지에 도착하게 하려면 ?storefront=true를 붙이세요.

variant ID는 Shopify 관리자에서 옵션을 열었을 때 주소창에서 확인합니다. 제안마다 퍼머링크를 하나씩 공유 문서에 적어두세요. variant ID를 잘못 넣으면 모든 구매자가 엉뚱한 용량으로 넘어가고, 배송 리포트를 보기 전까지 알아채지 못합니다.

광고비를 1달러라도 쓰기 전에 트래킹부터 고치세요

Framer와 Shopify를 함께 쓰는 구성이 조용히 무너지는 지점이 여기입니다. 방문자는 Framer 도메인에서 시작해 Shopify 결제에서 끝납니다. 설정을 제대로 안 하면 GA4는 세션 하나를 둘로 세고, Meta는 클릭과 구매 사이의 연결을 잃습니다.

네 가지를 하세요. GA4의 도메인 간 측정 목록에 두 도메인을 모두 넣거나, 둘을 같은 루트 도메인에 두세요. Meta 픽셀은 Framer에 심고, Shopify Customer Events로도 한 번 더 심으세요. UTM은 퍼머링크에 실어 보내서 유입 경로가 넘어가는 동안 살아남게 하세요. 그런 다음 실제로 한 건 결제해보고 GA4와 Meta에 각각 한 번씩만 잡히는지 확인하세요. 두 번도 아니고 0번도 아니어야 합니다.

두 시스템의 가격을 일치시키세요

Framer 페이지에는 49달러라고 적혀 있는데 Shopify에서 54달러가 결제되는 순간, 환불 요청과 후기 문제가 같이 옵니다. 가격은 페이지마다 정확히 한 곳에만 적으세요. 내보낸 이미지 안에는 절대 넣지 말고, 두 시간 들여 만든 히어로 그래픽 안에도 넣지 마세요.

랜딩 페이지가 세 장을 넘어가면 제안 정보를 Framer CMS 컬렉션으로 옮기고 가격, 정가, 퍼머링크, 재고 상태 필드를 두세요. 그러면 한 번만 고쳐도 모든 페이지가 바뀝니다. 매달 알림을 걸어두고 라이브 페이지와 해당 Shopify 제품을 나란히 열어 두 값이 맞는지 확인하세요.

돈 주고 산 속도를 지키세요

Framer 페이지는 처음엔 빠릅니다. 그러다 누군가 채팅 위젯, 히트맵 녹화 스크립트, 픽셀 두 개, 후기 임베드를 붙이고 나면 4G에서 히어로가 뜨는 데 4초가 걸립니다. Google이 제시하는 Largest Contentful Paint 기준은 실제 모바일 방문의 75번째 백분위수에서 2.5초입니다. 페이지 전체에 주어진 예산이 그겁니다.

히어로 이미지는 실제로 그려지는 크기에 맞춰 내보내세요. 히어로에는 지연 로딩을 걸지 마세요. 후기 위젯은 첫 화면 아래에서만 불러오세요. 사무실 와이파이의 데스크톱이 아니라, 속도를 제한한 모바일 데이터에서 실제 휴대폰으로 확인하세요.

Framer가 맞지 않는 경우

SKU 200개에 필터와 검색이 붙고 재고가 매일 바뀌는 카탈로그는 Shopify의 몫입니다. 이럴 때 Framer는 캠페인 페이지에만 쓰세요. Framer는 디자인 품질과 반복 속도가 결과를 가르는 자리에서 값을 합니다. 카탈로그 탐색보다 랜딩 페이지가 그런 자리입니다.

순서대로 세팅하기

Framer 도메인을 연결하세요. 랜딩 페이지 한 장과 장바구니 퍼머링크 하나를 만드세요. 양쪽 플랫폼에 픽셀을 심고 링크로 UTM을 넘기세요. 실제로 한 건 결제해서 GA4, Meta, Shopify 주문까지 따라가 보세요. 그 확인이 끝난 뒤에 광고비를 태우세요.

첫 페이지에는 하루, 그다음부터는 페이지당 한 시간을 잡으세요. 이 조합을 쓰는 이유가 속도이니, 새 각도의 페이지는 스프린트가 아니라 반나절 만에 올라가야 합니다.