환경 설정

Shopify 코드를 한 줄도 작성하기 전에, 올바르게 구성된 개발 환경이 필요합니다. 이 수업에서는 macOS, Linux, Windows (WSL2)에 대한 정확한 명령과 함께 필요한 모든 도구를 설치하는 과정을 안내합니다. 마지막에는 Claude Code, Shopify CLI, 그리고 Shopify 개발 스토어가 준비되어 있을 것입니다.

필수 도구 개요

도구	용도	버전
Node.js	JavaScript 런타임	20+ (LTS 권장)
npm	패키지 관리자	Node.js와 함께 제공
Claude Code	에이전틱 코딩 CLI	최신
Shopify CLI	Shopify 개발 도구키트	최신 (v3+)
Git	버전 관리	2.30+
VS Code 또는 Cursor	코드 편집기	최신

1단계: Node.js 20+ 설치

Shopify CLI와 Claude Code 모두 Node.js가 필요합니다. 버전을 쉽게 전환할 수 있도록 nvm (Node Version Manager) 사용을 권장합니다.

macOS / Linux

# nvm 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# 터미널을 재시작한 후 Node.js 20 LTS 설치
nvm install 20
nvm use 20
nvm alias default 20

# 설치 확인
node --version   # v20.x.x가 출력되어야 합니다
npm --version    # 10.x.x가 출력되어야 합니다

Windows (WSL2)

네이티브 Windows가 아닌 WSL2를 사용하세요

Shopify CLI와 Claude Code는 Unix 유사 환경에서 가장 잘 작동합니다. 먼저 WSL2를 설치한 다음, WSL2 터미널 내에서 macOS/Linux 지침을 따르세요.

# PowerShell에서 (관리자 권한)
wsl --install -d Ubuntu

# WSL2 설정 후 Ubuntu 터미널을 열고 nvm 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20

Node.js 확인

모든 것이 작동하는지 확인하려면 다음을 실행하세요:

node -e "console.log('Node.js', process.version, 'is ready')"
# 예상 출력: Node.js v20.x.x is ready

2단계: Claude Code 설치

Claude Code는 Anthropic의 명령줄 코딩 에이전트입니다. 터미널에서 실행되며 파일을 읽고, 명령을 실행하고, MCP 서버와 상호 작용할 수 있습니다.

# Claude Code 전역 설치
npm install -g @anthropic-ai/claude-code

# 설치 확인
claude --version

Anthropic API 키 구성

Claude Code는 Anthropic의 모델과 통신하기 위해 API 키가 필요합니다. console.anthropic.com에서 발급받으세요.

# 옵션 1: 셸 프로필에 설정 (~/.zshrc 또는 ~/.bashrc)
export ANTHROPIC_API_KEY="sk-ant-your-key-here"

# 옵션 2: Claude Code가 처음 실행 시 프롬프트를 표시합니다
claude

API 키를 보호하세요

Anthropic API 키는 계정에 대한 전체 접근 권한을 부여합니다. 절대 Git에 커밋하거나, 스크린샷에 공유하거나, 공개 채널에 붙여넣지 마세요. 환경 변수나 시크릿 관리자를 사용하세요.

Claude Code 테스트

Claude Code가 작동하는지 빠른 테스트를 실행하세요:

# 프로젝트 디렉토리에서 Claude Code 시작
cd ~/shopify-projects
claude

# Claude Code 내에서 간단한 프롬프트를 시도하세요:
# > Create a file called hello.js that prints "Hello from Claude Code"

Claude Code가 파일을 생성하면 node hello.js로 작동을 확인할 수 있습니다.

3단계: Shopify CLI 설치

Shopify CLI는 앱, 테마 생성, 확장 프로그램 관리, Shopify 배포를 위한 주요 도구입니다.

# Shopify CLI 전역 설치
npm install -g @shopify/cli @shopify/app

# 설치 확인
shopify version
# 예상: @shopify/cli/3.x.x

# Partner 계정으로 인증
shopify auth login

shopify auth login 명령은 브라우저 창을 엽니다. Shopify Partner 계정 자격증명으로 로그인하세요.

Shopify CLI v3+ 아키텍처

Shopify CLI v3는 oclif 프레임워크 위에 구축되어 있으며 플러그인 아키텍처를 사용합니다. @shopify/app 패키지는 앱 특정 명령을 추가합니다. shopify app init을 실행하면 CLI가 Shopify 특정 도구가 내장된 전체 Remix 애플리케이션을 스캐폴드합니다.

Shopify CLI 확인

# 사용 가능한 명령 목록
shopify commands

# 앱 명령이 사용 가능한지 확인
shopify app --help

4단계: Shopify Partner 계정 생성

아직 없다면 무료 Shopify Partner 계정을 생성하세요:

1. partners.shopify.com으로 이동
2. 지금 가입을 클릭하고 세부 정보를 입력
3. 이메일 주소 확인
4. 파트너 온보딩 설문 완료

Partner 계정은 다음에 대한 접근을 제공합니다:

• 무제한 개발 스토어 (테스트용 무료 Shopify 스토어)
• 앱과 스토어를 관리하는 Partner Dashboard
• 앱 게시 또는 판매자 추천 시 수익 분배
• Shopify Academy 코스 및 인증

5단계: 개발 스토어 생성

개발 스토어는 만료되지 않으며 모든 기능을 포함하는 무료 Shopify 스토어입니다. 이 코스에 최소 하나가 필요합니다.

Partner Dashboard를 통해

1. partners.shopify.com에 로그인
2. 왼쪽 사이드바에서 스토어로 이동
3. 스토어 추가 클릭
4. 개발 스토어 만들기 선택
5. 테스트 및 빌드를 위한 스토어 만들기 선택
6. 스토어 이름 입력 (예: masterclass-dev)
7. 테스트 데이터로 시작을 선택하여 상품 및 주문 사전 입력
8. 개발 스토어 만들기 클릭

Shopify CLI를 통해

# CLI에서 직접 개발 스토어 생성
shopify app dev --store=masterclass-dev
# 필요한 경우 CLI가 스토어 생성 과정을 안내합니다

테스트 데이터를 미리 채우세요

개발 스토어를 생성할 때 항상 "테스트 데이터로 시작"을 선택하세요. 이렇게 하면 즉시 작업할 수 있는 샘플 상품, 컬렉션, 고객 및 주문이 제공됩니다. 실제처럼 보이는 데이터를 기반으로 구축하는 것이 처음부터 시작하는 것보다 훨씬 생산적입니다.

6단계: 코드 편집기 설정

VS Code

Shopify 개발을 위해 다음 확장 프로그램과 함께 VS Code를 권장합니다:

# 터미널에서 VS Code 확장 프로그램 설치
code --install-extension Shopify.theme-check-vscode
code --install-extension GraphQL.vscode-graphql
code --install-extension GraphQL.vscode-graphql-syntax
code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode

확장 프로그램	용도
Shopify Theme Check	Liquid 파일 린팅 및 자동완성
GraphQL	GraphQL 구문 강조 및 유효성 검사
Tailwind CSS IntelliSense	Tailwind 자동완성 (Hydrogen에서 사용)
ESLint	JavaScript/TypeScript 린팅
Prettier	코드 포맷팅

Cursor

AI 기반 VS Code 포크인 Cursor를 선호한다면, 동일한 확장 프로그램이 작동합니다. Cursor에는 Claude Code를 잘 보완하는 내장 AI 기능도 있습니다 -- 인라인 제안에는 Cursor를, 더 크고 다중 파일 에이전틱 작업에는 Claude Code를 사용하세요.

권장 VS Code 설정

.vscode/settings.json에 다음을 추가하세요:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.associations": {
    "*.liquid": "liquid"
  },
  "emmet.includeLanguages": {
    "liquid": "html"
  },
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode"
  }
}

7단계: Git 구성

버전 관리는 필수입니다. 본인의 정보로 Git을 구성하세요:

# Git ID 설정
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# 기본 브랜치 이름 설정
git config --global init.defaultBranch main

# 유용한 Git 설정 활성화
git config --global pull.rebase true
git config --global fetch.prune true

전역 .gitignore 생성

Shopify 프로젝트에는 절대 커밋하면 안 되는 파일이 포함됩니다:

# 전역 gitignore 생성
cat >> ~/.gitignore_global << 'EOF'
# 환경 변수
.env
.env.local
.env.*.local

# 의존성
node_modules/

# Shopify
.shopify/

# OS 파일
.DS_Store
Thumbs.db

# 편집기
.vscode/settings.json
.idea/
EOF

git config --global core.excludesfile ~/.gitignore_global

확인 체크리스트

모든 것이 올바르게 설정되었는지 확인하기 위해 이 체크리스트를 실행하세요:

# Node.js 20+
node --version

# npm 10+
npm --version

# Claude Code
claude --version

# Shopify CLI 3+
shopify version

# Git 2.30+
git --version

# Shopify 인증
shopify auth login --check 2>/dev/null && echo "Authenticated" || echo "Run: shopify auth login"

Claude Code로 자동화하기

에이전틱 코딩의 첫 맛보기입니다. Claude Code를 시작하고 다음을 물어보세요: "Shopify 개발을 위한 내 개발 환경이 올바르게 설정되어 있는지 확인해주세요. Node.js 20+, Shopify CLI, Git이 설치되어 있는지 확인해주세요." Claude Code가 명령을 실행하고 무엇이 부족한지 알려줍니다.

다음 단계

환경이 준비되었습니다. 다음 수업에서는 shopify app init을 사용하여 첫 번째 Shopify 앱을 만들고 개발 스토어에 설치합니다.