ChatGPT와 함께 첫 Shopify 앱 만들기 – 실전 튜토리얼

이 글은 ChatGPT와 함께 코딩 없이 Shopify 앱을 개발하고,
실제로 앱을 호스팅하고 앱스토어에 등록하는 전 과정을 자세히 설명한 실전 튜토리얼입니다.

🚀 앱은 어디에 설치되나요? 내 코드는 어디 있나요?

Shopify 앱은 Shopify 자체 서버에 설치되는 구조가 아닙니다.
즉, 앱의 코드는 여러분의 컴퓨터나 클라우드에 직접 존재하게 됩니다.

Shopify는 여러분의 앱을 “외부 앱(External App)”으로 취급하고,
Shopify의 관리자 화면(Admin Dashboard) 안에 이 앱을 Iframe 형태로 불러와 표시합니다.

즉, 여러분은 앱의 코드를 아래처럼 구성하게 됩니다:

• 코드 저장소: GitHub
• 앱 호스팅: Render, Vercel, Heroku, 또는 개인 서버
• Shopify와의 연결: Shopify App Bridge + OAuth 인증

📁 앱 구조 간단 요약

📁 my-shopify-app/
├── frontend/         # React 앱 (사용자 UI)
├── backend/          # Node.js (서버 API, 인증, 처리)
├── .env              # 환경변수 (API 키 등)
├── shopify.app.toml  # Shopify 앱 설정 파일

이 구조는 ChatGPT가 쉽게 안내해줄 수 있으며, Shopify CLI 명령어로 자동 생성할 수도 있습니다.

☁️ 웹 호스팅은 꼭 필요할까요?

네, 반드시 필요합니다. 왜냐하면 Shopify는 앱을 사용자가 접근할 수 있는 “공개 URL”을 통해 불러오기 때문입니다.

추천하는 No-cost/Low-cost 호스팅 플랫폼은 다음과 같습니다:

🔧 Render로 앱 호스팅하는 방법 (대략적인 설명)

1. GitHub에 앱 코드 업로드
2. Render 가입 및 ‘New Web Service’ 선택
3. GitHub 저장소 연결
4. Build Command: npm run build
   Start Command: npm start
5. 환경변수(.env)의 내용을 입력
6. 앱이 배포되면 공개 URL이 생성됨 (예: https://myapp.onrender.com)

이 URL을 Shopify 앱 등록 시 연결해주면 됩니다.

보다 상세한 내용을 알기 위해서는 Shopify App를 만들기 위한 환경설정 – Render를 참조하세요

🔗 Shopify 앱에 호스팅된 앱 URL 연결하기

Shopify Partner Dashboard에서 앱을 등록할 때, 아래와 같이 연결합니다:

1. App setup → App URL: https://myapp.onrender.com
2. Redirection URL: OAuth 인증용 경로 (예: /auth/callback)
3. App Embed Script, Webhooks 등 필요한 설정 추가

🎯 요약

• Shopify 앱의 코드는 GitHub에 저장합니다.
• 앱은 Render, Vercel 등의 웹 호스팅을 통해 운영됩니다.
• Shopify는 여러분의 앱을 Iframe으로 불러옵니다.
• ChatGPT는 코드 생성부터 배포, 설정까지 전 과정에 도움을 줄 수 있습니다.

✨ 다음 글 예고

• Render를 이용한 Shopify 앱 배포 실습
• 환경변수 설정과 보안 처리 방법
• Freemium 모델 수익화 전략