Shopify App 개발환경 셋업 (CLI, GitHub, Render 등)

Apr 8, 2025 | 프로젝트들, Shopify App 개발 | 0 comments

🛠️ 3단계: 개발환경 셋업 (CLI, GitHub, Render 등)

– 내 앱을 코딩하고 배포할 준비 완료!

Shopify 앱 개발을 시작하려면 내 컴퓨터에 개발환경을 먼저 준비해야 합니다.
이 단계는 “내 앱을 어디서, 어떻게 만들고 실행할 것인지”를 정리하고 준비하는 과정입니다.

🧰 필요한 도구 리스트

✅ STEP 1: Node.js 설치

👉 다운로드 링크:

https://nodejs.org

• LTS(Long Term Support) 버전 선택
• 설치 후 터미널(cmd)에 아래 명령어 입력해 확인:

node -v
npm -v

버전이 잘 출력되면 설치 완료입니다.

✅ STEP 2: Git & GitHub 계정 만들기

▶ Git 설치

• https://git-scm.com 에서 운영체제에 맞게 설치

▶ GitHub 계정 생성

• https://github.com
• 가입 후 New Repository에서 앱 저장소 생성 준비

✅ STEP 3: Shopify CLI 설치

Shopify에서 공식 지원하는 앱 개발 툴입니다.

▶ 설치 방법 (Node 기반)

npm install -g @shopify/cli

설치 후 버전 확인:

shopify version

✅ STEP 4: Shopify CLI 로그인

아래 명령어를 입력하세요:

shopify login --store your-store-name.myshopify.com

여기서 your-store-name.myshopify.com은 Development Store 주소입니다.
아직 안 만들었다면 [2단계: 파트너 계정 생성]에서 따라해주세요.

✅ STEP 5: Shopify 앱 프로젝트 생성

Shopify에서 기본 구조를 자동으로 만들어주는 명령어입니다.

shopify app create node

입력 예시:

• 앱 이름: my-first-app
• 프레임워크 선택: Node.js / React

자동으로 폴더가 생성되고, 기본 파일들이 구성됩니다.

✅ STEP 6: 앱 실행 (로컬 개발 서버 구동)

아래 명령어로 앱을 실행합니다:

cd my-first-app
npm install
shopify app dev

• 이 명령어는 로컬 서버를 실행하고,
• Development Store에 자동 설치하는 과정을 진행합니다.

성공 화면 예시:

• 앱이 브라우저에서 실행되며
• “앱이 성공적으로 Development Store에 설치되었습니다” 메시지가 나옵니다.

✅ STEP 7: GitHub 연결

git init
git remote add origin https://github.com/yourusername/my-first-app.git
git add .
git commit -m "Initial commit"
git push -u origin main

코드 백업 및 버전 관리용으로 GitHub 연결은 필수입니다.

✅ STEP 8: Render.com에 배포 준비 (선택)

Render는 클라우드에 내 앱을 올려서
실제 사용자에게 공개할 수 있도록 도와줍니다.

1. https://render.com 에 가입
2. GitHub 연동 후 → 새 웹 서비스 생성
3. 내 앱 레포 선택 → 자동 배포 설정
4. 환경변수 등록 (.env) 필요 (Shopify API Key 등)

초보자는 일단 로컬에서 테스트 후,
나중에 5~6단계 이후 배포만 하셔도 좋습니다.

💡 마무리 요약

🧪 실전 미션 체크리스트

🎯 다음 글 예고

👉 4단계: 앱 구조 설계 – 어떤 기능을 어떻게 구성할지 설계해보기
(화면 구성, 사용자 흐름, 기능 목록 정리 등!)

필요하시면 이 글에 포함될 실행 예시 화면 스크린샷이나
명령어 전체 리스트 PDF,
개발 환경 체크리스트 시트도 함께 제작해드릴 수 있습니다.

바로 다음 단계로 넘어가볼까요? 😊

Shopify 파트너 계정 생성

Apr 8, 2025 | 프로젝트들, Shopify App 개발 | 0 comments

🟩 2단계: Shopify 파트너 계정 생성

– 내 앱을 만들기 위한 공식적인 첫걸음!

이제 아이디어도 정했고, 내가 만들 앱의 개념도 잡혔다면
이제는 Shopify에서 공식 개발자 자격을 얻는 과정이 필요합니다.

바로, Shopify 파트너 계정 만들기입니다.

✅ Shopify 파트너란 무엇인가요?

Shopify 파트너는 Shopify 생태계에서
앱을 개발하고, 테마를 만들고, 상점을 구축할 수 있는
공식 등록된 전문가 그룹입니다.

쉽게 말해, 앱 개발자 또는 서비스 제공자용 Shopify 계정입니다.

이 계정을 통해

• 개발용 테스트 스토어 생성
• 앱 등록 및 판매
• 수익 확인
• 고객 관리 등을 할 수 있습니다.

🖥️ STEP 1. Shopify 파트너 페이지 접속하기

🔗 접속 주소

👉 https://partners.shopify.com

화면 상단에는 다음과 같은 항목이 보입니다:

• Join now 또는 Sign in
• Ways to partner / App store / Changelog 메뉴 등

🟢 STEP 2. 가입 절차 따라하기

1. “Join now” 버튼 클릭
2. 이메일 또는 Google 계정으로 회원 가입
3. 이름, 팀명, 국가 등을 입력
4. Shopify 사용 목적 선택
   • “App development” 항목 체크
5. 약관 동의 후 완료

가입이 완료되면 아래와 같은 Shopify 파트너 대시보드에 접속됩니다.

🔧 STEP 3. 파트너 대시보드 살펴보기

대시보드에서 사용할 수 있는 기능:

• Stores: 앱을 테스트할 수 있는 샵 생성
• Apps: 내가 만든 앱들을 관리
• Payouts: 수익 정산 정보
• Support: 공식 문서와 지원 센터

🏪 STEP 4. Development Store 만들기

Development Store란?

개발 중인 앱을 실제 스토어 환경처럼 테스트할 수 있도록
Shopify가 제공하는 무료 샵입니다.

만드는 방법

1. 파트너 대시보드에서 Stores 클릭
2. Add store 버튼 클릭
3. Store type → “Development store” 선택
4. 이름, 이메일 주소, 비밀번호 입력
5. “Store purpose” → “Build a new Shopify app” 선택
6. 생성 완료 후 바로 접속 가능!

🟡 이 스토어는 실제 결제 기능은 제한되며, 상업적 사용은 불가합니다.

✅ 오늘의 실전 미션

💬 자주 묻는 질문 (FAQ)

Q. 파트너 계정은 무료인가요?
A. 네! 수익이 발생하기 전까지는 모든 기능이 무료입니다.

Q. Development Store는 몇 개까지 만들 수 있나요?
A. 제한 없이 여러 개 생성 가능합니다.

Q. 이 계정으로 앱스토어에 앱 등록도 가능한가요?
A. 네, 이 계정으로만 가능하며 수익 정산까지 연결됩니다.

🎯 다음 글 예고

👉 3단계: 개발환경 셋업 (CLI, GitHub, Render) & 앱 프로젝트 시작하기

이제 내 컴퓨터에서 앱을 개발할 준비를 해볼 시간입니다.
이 글을 읽고 나면, 앱 개발용 첫 화면을 직접 띄워볼 수 있게 됩니다!

필요하시면 이 글에 들어갈

• 버튼 강조 이미지
• 실제 Shopify Partner Dashboard 스크린샷
• 유튜브 요약 영상 대본
  도 함께 만들어드릴 수 있어요.

다음 단계로 바로 이어서 진행해볼까요? 😊