앱·툴(서드파티) /Shopify 개발·커스터마이징

Shopify 개발·커스터마이징

근거 42건 · v9 · 2026-09-20 · claude-opus-4-8

Shopify 개발·커스터마이징 — 전체 개요 써머리

이 분류는 Shopify를 코드로 확장·자동화·커스터마이징하는 모든 활동을 다룬다. 크게 ① 앱 개발(Public/Custom App), ② API·인증·확장 지점, ③ 노코드 자동화(Shopify Flow), ④ AI/Sidekick 통합, ⑤ 앱 생태계·비즈니스, ⑥ 외주 운영/커스터마이징 서비스로 나뉜다. 수집 자료는 2019년 PHP 시절부터 2026년 AI 통합기까지 걸쳐 있어, 시점별 변화가 크다는 점에 유의한다.

1. Shopify 앱이란 무엇인가 (기초 개념)

Shopify 앱은 Shopify의 API·웹훅(webhooks)·플랫폼 확장 지점(extension points) 을 사용해 머천트와 그 고객을 위한 새 기능을 확장·생성하는 소프트웨어다 [S4]. Shopify는 수백만 머천트의 모든 요구를 자체적으로 해결할 수 없기 때문에 서드파티 개발자가 이 다양한 니즈를 채우도록 개방한다 [S3][S4].
대표 예시: 스노보드를 파는 신규 머천트가 리뷰 기능이 필요하면, 기본 제공되지 않으므로 앱스토어에서 리뷰 앱을 설치한다. 개발자는 머천트용 관리 UI를 갖춘 웹앱을 만들고, GraphQL Admin API로 머천트 데이터를 다루며, Theme App Extensions로 스토어프론트에 리뷰를 노출한다 [S4].
앱의 과금 모델은 개발자가 정한다: 일회성 요금(one-time), 반복 구독(recurring), 사용량 기반(usage-based) [S4][S6].

앱의 두 종류: Public vs Custom

Public app: 무제한 머천트가 설치 가능하고 Shopify App Store에 등재됨(비공개 언리스트도 가능) [S5][S6]. 빌링 API·멀티테넌시(데이터 격리)를 다뤄야 함 [S6].
Custom app: 단일 머천트 전용. Gadget 발표자는 입문·프리랜스 작업에 커스텀 앱을 추천 — 빌링·멀티테넌시 부담이 없어 시작이 쉽다 [S5][S6].
자료 시점: 2021년(S5)과 2023년(S6) 모두 이 구분이 동일하게 유지됨.

2. 개발 환경·도구 세팅

필수 준비물

Shopify Partner 계정(무료 가입) [S5][S6][S12][S14][S17].
Development Store: 앱을 테스트할 스토어. 파트너 대시보드 stores 탭에서 생성 [S5][S6]. developer preview store를 고르면 향후 출시 예정 기능을 미리 사용 가능하나, 소유권 이전 불가 [S5]. checkout extensibility, cart transform 같은 프리뷰 옵션도 선택 가능 [S6]. 샘플 데이터(product/order/customer)와 함께 생성할 수 있음 [S6].
Partner Dashboard: 앱 설정 관리, dev store 생성, API 키 생성, 스코프·웹훅 관리, 앱 익스텐션 관리, 지원 요청(support 탭)의 중심 [S5]. Gadget 발표자는 단일 머천트용이라도 파트너 대시보드 경유 연결을 권장(스토어 admin 직접 연결은 기능 제한) [S6].
API 키: 앱 생성 시 자동 발급. 앱 셋업 페이지에서 추가 스코프/API 요청, 웹훅 관리, 키 재발급 가능 [S5].

Shopify CLI

앱 생성·개발 작업을 가속하는 도구 [S5][S13][S14]. shopify app init으로 앱 생성 → 이름·프레임워크(Remix)·언어(JavaScript/TypeScript) 선택 [S14]. shopify app dev로 로컬 개발, P로 브라우저 열기, shopify app deploy로 설정 덮어쓰기(스코프 변경 반영 등) [S14][S15].
과거(2021) CLI 흐름은 shopify create(node.js 앱) → shopify serve로 로컬 서버 실행 + ngrok 터널 생성 방식이었고, ruby 설치가 전제였다("ruby on rails 앱을 만드는 게 아니라 CLI가 ruby 기반") [S12]. → 2024년 자료에서는 shopify app init + Remix 템플릿으로 흐름이 바뀜 [S14][S15]. (시점 변화)

3. API·인증·데이터 상호작용

REST vs GraphQL Admin API

Shopify Admin API에는 REST Admin API와 GraphQL Admin API 두 버전이 있고, 공유 리소스가 있으나 필드 구성이 서로 다르다(예: product의 body HTML, created at 등이 REST/GraphQL에서 동일하지 않음) [S6].
GraphQL이 일반적으로 더 효율적 — 유연한 쿼리와 더 작은 페이로드 제공 [S13]. 2024년 실습 자료들은 모두 GraphQL 쿼리/뮤테이션으로 제품 조회·수정·삭제를 구현 [S15][S16].
실무 팁: GraphQL 미경험자는 Shopify의 graphiql 앱을 설치해 스토어 대상으로 쿼리를 연습·실행하며 응답 구조를 익히길 권장 [S1].

OAuth·스코프

모든 앱은 OAuth로 인증하고, 저장 데이터에 안전하게 접근하기 위해 적절한 스코프를 요청해야 한다 [S13].
예: 제품 읽기에는 read_products, 수정에는 write_products 스코프 필요. 스코프 변경 후 shopify app deploy로 반영 [S15][S6][S7].
스코프·데이터 모델 선택은 앱 연결 시점에 하지만 나중에 언제든 편집 가능 — 처음부터 완벽히 고를 필요 없음 [S6][S7].

웹훅(Webhooks)

머천트가 admin에서 데이터(예: 제품)를 변경하면 웹훅이 발화해 앱이 반응할 수 있다 [S6][S7][S8]. 제품 create/update/delete 웹훅 구독이 대표적 [S6][S7].
무한 루프 주의: 웹훅으로 받은 제품에 무조건 태그를 쓰면 다시 update 웹훅이 발화해 끝없는 루프가 생김 → 변경 감지(change detection) 로 실제 필드(예: body)가 바뀐 경우에만 로직 실행 [S7].

레이트 리밋(Rate Limit)

Shopify API에는 레이트 리밋이 있음. Shopify로 다시 쓰기(write)할 때 이를 다뤄야 하며, 통상 백그라운드 잡 시스템(Google Cloud Tasks, Amazon SQS 등)으로 처리 [S6][S7].

4. 기술 스택·프레임워크 (관점 병렬 제시)

앱을 만드는 방식은 자료마다 접근이 다르므로 관점별로 병렬 제시한다.

(A) 순수 스택 직접 구성 — Node.js + React (Coding with Jan, 2021)

앱 개발에 필요한 것: HTML/CSS/JS(특히 JS 심화), Shopify 플랫폼 이해(theme files·기능·API), 백엔드 언어 하나(Node.js 또는 Ruby on Rails — Shopify 판에서 가장 인기), 프론트 프레임워크(React), API 호출용 GraphQL, 데이터 저장용 DB, 보안 기초, 자체 호스팅(전용 서버) [S12].
아키텍처: 앱은 myapp.com 같은 완전히 분리된 웹사이트이며, Shopify가 이를 admin 안에 iframe으로 임베드한다. Shopify 사이트만 로그인 가능. App Bridge가 iframe↔메인프레임 통신을 담당 [S12].
앱 개발은 프리랜싱보다 훨씬 고급이며 초보 친화적이지 않다 [S12].

(B) Remix 기반 (2024, Shopify 공식 방향)

shopify app init → Remix + JS/TS 템플릿 [S14]. Shopify CLI의 기본 프레임워크가 Remix [S7].
로더(loader) 함수로 백엔드에서 authenticate.admin으로 인증 후 GraphQL 쿼리로 제품 조회, 프론트에서 useLoaderData로 표시. 수정·삭제는 action 파일 + GraphQL 뮤테이션 [S15][S16].
Remix 또는 Next.js를 프론트 구축에 사용 가능 [S13].

(C) 순수 PHP (WeeklyHow, 2019) — 레거시 관점

웹호스트(HTTPS 필수), 파트너 계정, FTP(FileZilla), OAuth 액세스 토큰 생성용 오픈소스 스크립트(install.php, generate_token.php)로 앱 구성 [S17]. 로컬호스트는 인증서가 없어 보안 에러 발생 [S17].
REST API(/admin/api/2019-10/...json)로 컬렉션·제품·이미지 조회 [S18][S19]. 액세스 토큰은 스토어의 비밀번호와 같으므로 반드시 저장·보호 [S17][S18].
※ 2019년 방식으로, 현재 권장 스택(Remix/GraphQL)과 상이 — 개념 이해용 참고.

(D) BaaS 플랫폼 — Gadget (2023~2025)

Gadget은 Shopify 보일러플레이트(OAuth, 프론트 세션 토큰, 웹훅 구독, 히스토리컬 데이터 싱크 + 레이트 리밋 관리)를 대신 처리하는 호스팅형 오토스케일 풀스택 플랫폼 [S6][S7][S8]. 제공물: Postgres DB, 서버리스 Node 백엔드, React(또는 Remix) 프론트, 빌트인 백그라운드 잡 시스템(temporal 기반) [S6][S7].
모델(=DB 테이블)에 대해 CRUD API 자동 생성, find_many(기본 50, 최대 250건 페이지) 등 API 클라이언트·React 훅 제공 [S7]. 커스텀 모델·필드 추가, 메타필드를 제품 레코드와 인라인 저장 가능 [S7][S8].
로컬 개발용 CLI ggt(ggt dev)로 웹 에디터↔로컬 양방향 동기화 → 소스 컨트롤·CI/CD 가능 [S7][S8]. 원클릭 배포(개발/프로덕션 환경 분리, 마이그레이션 자동) [S6].
Shopify CLI로 remix 템플릿을 만드는 방식도 있으나 Gadget 발표자는 OAuth를 직접 안 짜도 되는 점을 강조 [S6][S7].

Polaris(공통 UI)

Shopify의 React 컴포넌트 라이브러리. admin에 자연스럽게 녹아드는 native-feeling 앱을 만들 수 있음(Banner 등 컴포넌트 재사용) [S6]. Gadget이 연결 시 자동 설치 [S6]. Remix 실습에서도 Page/Layout/Card/DataTable/Modal 등 Polaris 컴포넌트 사용 [S15][S16]. Polaris는 controlled 컴포넌트라 폼 상태 관리에 주의 [S8].
LinkedIn 가이드도 Shopify CLI + Polaris UI + OAuth·빌링·배포 모범사례를 표준 개발 흐름으로 정리 [S13].

5. 확장 지점(Extension Points) — 앱을 플랫폼에 심기

App Extensions는 개발자가 콘텐츠를 Shopify admin·checkout·online store에 노출하는 방법이다 [S5]. 종류가 시간이 지나며 확장돼 왔다.

Theme App Extensions: 앱이 머천트 온라인 스토어(테마)에 콘텐츠를 추가하는 방식. 스토어프론트 전체 테마를 만들지 않고 작은 기능 조각만 넣을 때 사용 [S4][S6].
App Block Extensions: 테마와 상호작용하는 블록. 예로 위시리스트 앱이 "add to cart" 아래에 "add wishlist" 블록을 추가하고 색상 변경 등 설정 노출 [S20].
Checkout UI Extensions: 체크아웃에 UI를 넣음. 예: 프리-퍼처스(pre-purchase) 상품 오퍼 앱. 파트너 대시보드 경유 연결 필요, 메타필드를 익스텐션 input으로 전달 [S8]. checkout extensibility 프리뷰 스토어에서 최신 체크아웃 기능 개발 [S6].
Admin UI Extensions: 앱의 일부를 products·customers 등 코어 상세 페이지 안에 심음 — 머천트가 탭을 전환하지 않는 임베디드 경험 [S9][S10].
Admin Intents: 앱에서 Shopify 네이티브 UI(할인·제품 생성 등)를 한 줄 코드로 호출 — 자체 UI를 만들 필요 없음 [S9][S10].
App Bridge: 임베디드 앱과 admin 간 통신·세션 토큰 처리. Gadget이 자동 세팅 [S8][S12].

진화 맥락(director of product, 2026): 과거 앱은 admin 안에서 "2등 시민"처럼 머천트를 외부로 튕겨냈다 → admin UI extensions → admin intents → Sidekick extensions 순으로 워크플로우 통합이 심화됨 [S9][S10].

6. Shopify Flow — 노코드/로우코드 자동화

Shopify Flow는 코드 없이 admin 안에서 워크플로우·프로세스를 자동화하는 로우코드 플랫폼. 그래프 인터페이스에서 빌딩 블록을 연결 [S1]. Shopify가 공식 빌드·유지하며 무료 [S1].
3가지 블록: Trigger(워크플로우를 시작하는 이벤트, 예: 주문 생성) → Condition(조건 분기, 예: 주문액 5,000 이상) → Action(실제 동작, 예: 태그 추가·이행상태 변경·Slack 알림). 하나의 flow는 트리거 1개 + 조건/액션 다수 [S1].
활용 카테고리: 재고관리(저재고 태깅·알림), 주문관리·이행(우선순위·알림), 사기 방지(고액 주문 보류), 고객 대면(긍정 리뷰 시 자동 감사 메일) [S1].
실습: 5,000 초과 주문 시 Slack 알림. Slack 액션은 인증 필요, 채널 members에 Shopify Flow 봇 추가 필요. 액션 목록에서 "installed apps" 필터 해제 후 서드파티 앱 검색 [S1]. 변수 삽입 + Liquid split 필터로 global ID에서 실제 order ID 추출 가능 [S1].
Run Code 액션(신규): 워크플로우 안에서 커스텀 JavaScript 실행. GraphQL 쿼리로 input 정의 → output 변수 정의 → JS 구현. 더 복잡한 로직·데이터 반복·메타필드 처리 가능 [S1]. (Shopify Editions 업데이트로 도입)
커스텀 개발 서비스에서도 Flow는 "경량 자동화"(최적화 패키지)부터 "Flow·백엔드 스크립트·API 트리거 자동화 시스템 구축"(확장 패키지)까지 폭넓게 언급됨 [S2].

7. AI·Sidekick 통합 (2026 최신 흐름)

출처 S9(2026-07-23)·S10(2026-08-09), Shopify director of product Jonathan Zazoff 발언 기반. 의견·전망성 정보 다수.

Sidekick Extensions: 워크플로우 통합의 "다음 단계". 두 가지를 함 — ① Sidekick 대화에서 앱 데이터에 직접 접근(별도 분석 페이지·앱 이탈 없이, 모바일에서도), ② Action 경험 — 앱의 기존 URL을 띄워 폼 채우기·페이지 요소 상호작용을 Sidekick이 어디서든 호출 [S9][S10].
개발 난이도: Sidekick 익스텐션은 MCP에 최대한 가깝게 설계됨(일부 Shopify 특화 toml 존재). 이미 다른 AI에 툴을 노출 중인 앱이 쉽게 붙이도록 의도 [S9].
주의(gimmick 경계): 단순히 페이지를 열어 다른 탭으로 URL만 주는 건 fail 케이스. "맥락 속에서 일이 일어나게" 하는 게 목적 — 실제 문제를 풀어야 함 [S9].
MCP 서버 제공 여부는 사용자층에 달림: Smile(로열티 앱)의 경우 사용자가 마케터라 Claude/ChatGPT에 MCP를 연결하지 않으므로 Sidekick이 더 접근성 높음. 개발자 대상이면 자체 MCP가 의미 있을 수 있음 [S9]. → 관점 병렬: Shopify(플랫폼)의 시각과 개별 앱의 시각이 다를 수 있음 [S9].
UI의 미래: 대화형과 시각적 UI 둘 다 계속 필요. 인간은 시각적이면서 대화적이고, AI가 "시킨 일을 했다는 증거(proof)"를 보려면 좋은 UI가 여전히 중요 [S9].

8. 앱 생태계·비즈니스 (사실 정보 + 노하우 병렬)

사실형 정보 (검증 가능 값 — 변화 이력 보존)

2021년 기준: App Store에 public 앱 7,000개 이상, 머천트당 평균 6개 앱 설치 [S3].
수익 배분 정책: Shopify는 앱 비즈니스로 매년 버는 첫 100만 달러에 대해 수익 배분(revenue share)을 걷지 않음 — 시작이 더 쉽고 수익성 높음 [S3]. (2021년 자료 기준값)
앱스토어 정책 강화(2026): ①리뷰를 인센티브로 유도한 앱은 이제 해당 리뷰를 삭제(과거엔 언리스트 후 유지→상위 랭크 문제) [S9], ②이름 고유성(uniqueness) 강제 요구사항 신설 — 카피캣("Smile 2" 같은) 방지 [S9].
Built for Shopify 인증/배지: 임베디드 admin 경험 등 요건 충족 시 획득. 설치·발견에 유리하고 엔터프라이즈 브랜드 신뢰 확보에 중요 [S9]. Build Award 등 프로그램 존재 [S9].

노하우·의견형 정보 (최신이 옛것을 대체하지 않음 — 병렬)

앱 아이디어 발굴·검증 (Matt 인터뷰, 2022) [S11]:

"아이디어가 아니라 **문제(problem)**를 찾는다." 타깃 그룹과 연결해 반복되는 문제를 찾고, 여러 사람이 겪으면 사업화 [S11].
검증: 더 많은 사람과 대화 → 반응 관찰(스스로 다시 연락해오면 문제가 충분히 깊은 것) → Photoshop 목업/랜딩으로 "만들기 전에 판다(sell before you build)" [S11].
완벽주의 함정: 계속 기능만 추가하다 출시 못 함. "당신에게 완벽 ≠ 사용자에게 완벽" [S11].
데이터 추적의 중요성: 첫 앱이 월 $1,000에서 정체됐던 건 추측만 하고 데이터를 안 봤기 때문. 설치율(리스팅 클릭→설치), 활성화율(핵심 행동 도달), 커미션율(퍼널 단계별)을 추적해 개선 [S11].

프리랜싱 vs 앱 (Coding with Jan, 2021) [S12]:

앱은 타깃이 "돈을 투자할 여력이 있는 머천트"라 안드로이드/iOS 앱보다 수익화 유리하나, 프리랜싱보다 훨씬 고급/복잡 [S12].
프리랜싱 진입이 더 예측 가능·빠른 수입 경로일 수 있음(HTML/CSS/JS + Liquid + 플랫폼 숙지) [S12].

동기부여 사례: Matt는 2017년 첫 앱을 월 $1,000까지 키웠으나 플랫폼 변경으로 종료, 2·3번째 실패 후 포기했다가 2020년 White Bundle로 재기(월 $30,000 MRR) — 프리랜싱으로 문제를 체득한 게 자산 [S11]. Twitter엔 앱 1~2개로 월 $50,000 사례도 [S20].

9. 외주 운영·커스터마이징 서비스 (에이전시 관점)

출처 S2 (arbalest.co.kr, 한국 에이전시). 서비스 소개 성격.

개발 운영: Liquid·JS·Shopify API 기능 고도화, 앱 통합·커스텀 기능 개발, 자동화 시스템(Shopify Flow·백엔드 스크립트·API 워크플로우), 성능 최적화·리팩토링, 오류 모니터링, 스케일러블 아키텍처 [S2].
디자인·콘텐츠 운영 / 데이터 기반 최적화: UX/UI 개선, 퍼널·CRO, A/B 테스트, KPI 로드맵 [S2].
패키지 3종: ①안정성(버그 수정·모니터링·보안·성능 튜닝, 리스크 낮은 일상 운영), ②최적화(전환·UX·속도, 경량 자동화 포함, 점진적 개선), ③확장(고급 앱 통합·커스텀 API, 신규 기능 개발, 멀티리전/멀티언어, 대량 트래픽 인프라 — 엔터프라이즈/글로벌/B2B 대상) [S2].

10. 시점별 정보 대비 (요약)

| 항목 | 과거 정보 | 최신 정보 | |---|---|---| | 권장 스택/CLI | PHP + REST + 수동 OAuth 스크립트 (2019) [S17][S18][S19] / shopify create node 앱 + ngrok (2021) [S12] | shopify app init + Remix 템플릿 + GraphQL (2024) [S14][S15][S16] | | API 선호 | REST 사용 예시 다수 (2019) [S18][S19] | GraphQL이 더 효율적, 실습도 GraphQL 중심 (2024) [S13][S15][S16] | | 확장 지점 | Theme App Extensions 중심 [S4] | + Admin UI Extensions → Admin Intents → Sidekick Extensions (2026) [S9][S10] | | 앱스토어 정책 | 인센티브 리뷰 처벌 약함, 이름 중복 허용 | 인센티브 리뷰 삭제, 이름 고유성 강제 (2026) [S9] | | 생태계 규모 | public 앱 7,000+, 머천트당 평균 6개 (2021) [S3] | (최신 수치 자료 없음) |

출처

[S1] Coding with Jan – "Shopify Flow" — https://youtu.be/edym2_mCj2I (2024-02-13)
[S2] arbalest.co.kr – Shopify Operation Services — https://arbalest.co.kr/pages/shopify-operation-services
[S3] ShopifyDevs – What is a Shopify App (생태계/수익배분) — https://youtu.be/GrvCf_RvkKI (2021-11-16)
[S4] ShopifyDevs – Shopify 앱 개요/확장지점 — https://youtu.be/UbAiY7RFlik (2021-11-16)
[S5] ShopifyDevs – Partner Dashboard/Dev Store/API 키 — https://youtu.be/6yNnwqjPtYA (2021-11-16)
[S6] Gadget – Shopify 앱 시작하기 (REST/GraphQL, Polaris, 웹훅, 배포) — https://youtu.be/bQWfJxVYktY (2023-12-01)
[S7] Gadget – 풀스택 Product Tagger 앱 (Remix, 백그라운드 잡, 변경감지, ggt) — https://youtu.be/BerX6e8_u7s (2025-09-26)
[S8] Gadget – Checkout UI Extension / Pre-purchase 오퍼 앱 — https://youtu.be/rCXC4tabpSE (2024-03-28)
[S9] The Shopify App Show – 앱 생태계/정책/Sidekick/MCP (JZ, Mike Rossi) — https://youtu.be/byWkk_FmF8E (2026-07-23)
[S10] The Shopify App Show – Admin UI Extensions/Intents/Sidekick (발췌) — https://youtu.be/yBj2-8nnbdw (2026-08-09)
[S11] Coding with Jan – Matt 인터뷰(아이디어·검증·데이터) — https://youtu.be/19835Mj5uTo (2022-09-23)
[S12] Coding with Jan – 앱 vs 프리랜싱 / 첫 앱 만들기 — https://youtu.be/A8YCxBTgsbI (2021-05-12)
[S13] kr.linkedin.com (Crest Infotech) – Shopify 앱 개발·관리 가이드 — https://kr.linkedin.com/pulse/...eo7pf
[S14] Fayyaz Ahmed – Shopify 앱 설치(Remix) — https://youtu.be/UBtJonSR7V8 (2024-07-02)
[S15] Fayyaz Ahmed – 제품 조회(GraphQL/Polaris) — https://youtu.be/2X4xo9v8-Fk (2024-07-02)
[S16] Fayyaz Ahmed – 제품 수정·삭제(GraphQL 뮤테이션) — https://youtu.be/GvlmukUw8Ns (2024-07-02)
[S17] WeeklyHow – PHP 앱 처음부터(OAuth/토큰) — https://youtu.be/tX1E8fuesSE (2019-10-03)
[S18] WeeklyHow – PHP로 제품 표시(REST) — https://youtu.be/YMnouXWOyFw (2019-10-06)
[S19] WeeklyHow – 제품 이미지 표시(Product Image API) — https://youtu.be/f2mQiULUm1o (2019-10-10)
[S20] Code Inspire – Remix로 위시리스트 앱(App Block·Billing API) — https://youtu.be/FMVShSvAaAA (2024-02-09)

참고: S7·S8은 원문이 중간에 잘려(truncated) 일부 후반 내용이 자료에 없다. Gadget의 백그라운드 액션 완성 코드, 체크아웃 익스텐션 배포 마무리 등 세부는 원본 영상 확인 필요.