Shopify 앱 개발 기초 강의 🎯
안녕하세요! 오늘은 Shopify 앱 개발에 대해 기술적으로 설명해드리겠습니다. Shopify 앱을 처음 개발하는 분들도 쉽게 따라올 수 있도록 단계별로 설명할 테니 집중해서 들어주세요.
1️⃣ Shopify 앱이란?
Shopify 앱은 Shopify 스토어의 기능을 확장하는 독립적인 웹 애플리케이션입니다.
보통 두 가지 유형이 있습니다:
- Public App (공개 앱) – Shopify App Store에 등록해서 여러 사용자가 다운로드할 수 있음.
- Custom App (맞춤형 앱) – 특정 스토어에서만 사용 가능하며, App Store 등록이 필요 없음.
우리가 만들 앱은 Shopify Admin에서 제품과 인벤토리를 관리하는 기능을 확장하는 앱입니다.
즉, Admin의 Bulk Edit 기능과 Filter 기능을 개선하는 것이 목표입니다.
이 앱을 개발하기 위해서는 Shopify API를 사용해야 하며, 보통 Node.js + React 스택이 많이 활용됩니다.
2️⃣ Shopify 앱을 만들기 위한 필수 기술
Shopify 앱 개발에는 몇 가지 중요한 기술이 필요합니다.
📌 1. Shopify 개발 환경 설정
- Shopify Partner 계정 가입 👉 https://partners.shopify.com
- Dev Store 생성 (앱을 테스트할 Shopify 샵)
- Shopify CLI 설치 (
npm install -g @shopify/cli)
📌 2. Shopify API 이해하기
Shopify 앱은 REST API & GraphQL API를 통해 데이터를 가져오고 수정합니다.
우리는 주로 Admin API를 사용해야 합니다.
Admin API 주요 엔드포인트
GET /admin/api/2023-10/products.json→ 모든 제품 조회PUT /admin/api/2023-10/products/{id}.json→ 특정 제품 수정GET /admin/api/2023-10/inventory_levels.json→ 인벤토리 조회
이 API를 활용하면 제품 정보, 재고 상태를 불러오고, 수정할 수 있습니다.
📌 3. 앱 구조 & 개발 언어
Shopify 앱은 일반적으로 백엔드와 프론트엔드로 나뉩니다.
- 백엔드: Node.js (Express.js) 또는 Python (Django)
- 프론트엔드: React + Polaris (Shopify UI 라이브러리)
- 데이터베이스: MongoDB, PostgreSQL 등
3️⃣ 실제 개발 프로세스
이제 실제로 Shopify 앱을 개발하는 과정을 살펴보겠습니다.
✅ Step 1. Shopify 앱 기본 생성
Shopify CLI를 사용하면 빠르게 앱을 만들 수 있습니다.
shopify app create node --name my-shopify-app
cd my-shopify-app
npm install
이제 기본 앱이 생성되었으며, 로컬에서 실행할 수 있습니다.
npm run dev
💡 앱이 실행되면 Shopify의 Embedded UI로 로드됩니다.
이제 기본적인 Shopify 앱 환경이 준비되었습니다.
✅ Step 2. Shopify API와 연동하기
이제 Shopify Admin API를 사용해서 제품 데이터를 가져오는 기능을 만들어야 합니다.
예제: 모든 제품 가져오기
app.get('/products', async (req, res) => {
const session = res.locals.shopify.session;
const { Product } = await import('@shopify/shopify-api');
const products = await Product.all({ session });
res.json(products);
});
이제 /products 엔드포인트를 호출하면 Shopify 스토어의 모든 제품을 JSON 형태로 가져올 수 있습니다.
✅ Step 3. Bulk Edit 기능 구현하기
Shopify 기본 Bulk Edit 기능보다 더 강력한 기능을 만들려면 GraphQL API를 활용해야 합니다.
예제: 여러 제품의 가격 한 번에 변경하기
const gql = `
mutation bulkEditProducts($input: ProductInput!) {
productUpdate(input: $input) {
product {
id
title
variants {
price
}
}
}
}
`;
const variables = {
input: {
id: "gid://shopify/Product/123456789",
variants: [{ price: "19.99" }]
}
};
fetch("https://your-shopify-store.myshopify.com/admin/api/2023-10/graphql.json", {
method: "POST",
headers: {
"X-Shopify-Access-Token": "your-access-token",
"Content-Type": "application/json"
},
body: JSON.stringify({ query: gql, variables })
});
이제 API를 호출하면 선택한 제품의 가격이 한 번에 변경됩니다.
✅ Step 4. 필터 기능 확장하기
Shopify 기본 필터 기능은 한계가 있기 때문에, 더 정교한 필터를 만들려면 고급 검색 기능을 추가해야 합니다.
예제: 특정 태그가 포함된 제품만 조회
app.get('/filtered-products', async (req, res) => {
const session = res.locals.shopify.session;
const { Product } = await import('@shopify/shopify-api');
const products = await Product.all({
session,
query: "tag:'featured'"
});
res.json(products);
});
이제 tag:'featured' 태그가 있는 제품만 조회할 수 있습니다.
✅ Step 5. 앱 배포하기
개발이 완료되면 앱을 배포해야 합니다. 보통 Heroku, Vercel, AWS 등의 서비스를 사용합니다.
Heroku 배포 예제
git init
heroku create my-shopify-app
git push heroku main
이제 앱이 Shopify에서 실행 가능하게 됩니다.
4️⃣ 결론 & 앞으로 해야 할 일
지금까지 Shopify 앱 개발의 전체적인 흐름을 배웠습니다. 핵심을 정리하면:
✅ Shopify Partner 계정 가입
✅ Shopify CLI로 앱 생성
✅ Admin API 활용해서 제품 정보 가져오기
✅ Bulk Edit & 필터 기능 확장
✅ 배포 후 실제 사용
📢 앞으로의 목표:
1️⃣ Shopify API 학습 심화
2️⃣ React + Polaris UI로 프론트엔드 개발
3️⃣ Admin에 커스텀 필터 추가
이제 직접 코드 실습을 진행하면서 더 깊이 이해해 보세요! 🚀
