Claude Code 소개

Claude Code는 Anthropic의 에이전틱 터미널 코딩 도구로, Claude의 지능을 개발 워크플로우에 직접 가져오는 명령줄 인터페이스입니다. 브라우저 창에서 작동하는 채팅 기반 AI 어시스턴트와 달리, Claude Code는 터미널에 상주하며 코드베이스를 읽고, 명령을 실행하고, 파일을 편집하고, 복잡한 다단계 개발 작업을 자율적으로 관리합니다.

Shopify 개발자에게 Claude Code는 혁신적입니다. Shopify 생태계를 이해합니다 -- Liquid 템플릿, GraphQL Admin API 스키마, Polaris 컴포넌트, App Bridge, Shopify Functions, 테마 아키텍처 -- 그리고 실제 프로젝트 컨텍스트 내에서 이 모든 것을 동시에 작업할 수 있습니다.

Shopify 개발에 Claude Code를 사용하는 이유

기존 AI 코딩 어시스턴트는 코드 스니펫을 앞뒤로 복사-붙여넣기해야 합니다. Claude Code는 이러한 마찰을 완전히 제거합니다:

• 직접 파일 접근: Claude Code는 프로젝트 파일을 직접 읽고 편집합니다
• 명령 실행: shopify app dev, npm test, GraphQL 인트로스펙션 쿼리 및 기타 터미널 명령을 실행합니다
• 다중 파일 인식: Liquid 섹션이 JavaScript와 어떻게 관련되는지, 앱 확장이 백엔드에 어떻게 연결되는지, GraphQL 쿼리가 데이터 모델에 어떻게 매핑되는지 이해합니다
• 반복적 개발: 단일 세션에서 스캐폴딩, 테스트, 디버깅, 개선을 모두 수행할 수 있습니다

Claude Code가 "에이전틱"인 이유

"에이전틱"이라는 용어는 Claude Code가 단순히 질문에 답하는 것이 아니라 행동을 취한다는 것을 의미합니다. "상품 페이지에 메타필드를 추가해주세요"라고 요청하면, 테마 파일을 읽고, 올바른 섹션을 식별하고, Liquid 코드를 작성하고, 스키마를 업데이트하고, 변경 사항이 올바르게 컴파일되는지 확인합니다. 계획하고, 실행하고, 검증합니다.

설치

Claude Code는 Node.js 18 이상이 필요합니다. npm을 통해 전역으로 설치하세요:

Claude Code 설치

npm install -g @anthropic-ai/claude-code

전역 설치를 원하지 않는 경우:

전역 설치 없이 실행

npx @anthropic-ai/claude-code

시스템 요구사항

• Node.js: 버전 18.0.0 이상
• 운영체제: macOS, Linux 또는 WSL2를 통한 Windows
• 터미널: 모든 터미널 에뮬레이터 (iTerm2, Terminal.app, Warp, Windows Terminal)
• Git: 버전 관리 통합을 위해 권장

인증

설치 후 아무 디렉토리에서 Claude Code를 실행하세요:

Claude Code 시작

claude

처음 실행 시 Claude Code가 인증을 요청합니다. 두 가지 옵션이 있습니다:

옵션 1: Anthropic API 키 (직접)

API 키로 인증

export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here
claude

지속성을 위해 셸 프로필(~/.zshrc 또는 ~/.bashrc)에 추가할 수도 있습니다:

셸 프로필에 추가

echo 'export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here' >> ~/.zshrc
source ~/.zshrc

옵션 2: Claude Pro/Max 구독 (OAuth)

Claude Pro 또는 Max 구독이 있는 경우, Claude Code는 OAuth를 사용하여 Anthropic 계정으로 인증할 수 있습니다. claude를 실행하고 브라우저 기반 로그인 흐름을 따르면 됩니다. Claude 구독을 이미 결제하고 있다면 가장 간단한 옵션입니다.

브라우저를 통해 실행 및 인증

claude
# 브라우저에서 OAuth 프롬프트를 따르세요

Shopify 개발에 권장

Claude Max 플랜 ($100/월 또는 $200/월)은 집중적인 Shopify 개발에 최상의 경험을 제공합니다. 상위 Max 플랜은 상당히 더 많은 사용량을 제공하며, 이는 상당한 컨텍스트를 소비하는 대규모 Shopify 코드베이스를 작업할 때 중요합니다. Max 플랜의 사용량은 일반적으로 하루 종일 집중적인 개발을 하기에 충분합니다.

CLAUDE.md 프로젝트 파일 이해하기

CLAUDE.md 파일은 Claude Code를 사용한 효과적인 Shopify 개발을 위한 가장 중요한 설정입니다. 프로젝트 루트에 위치하며 Claude Code가 모든 세션 시작 시 읽는 지속적인 컨텍스트를 제공합니다.

CLAUDE.md를 팀에 합류하는 전문 개발자를 위한 브리핑 문서로 생각하세요. Claude Code에게 다음을 알려줍니다:

• 프로젝트가 무엇이고 어떻게 구성되어 있는지
• 따라야 할 코딩 표준과 규칙
• 사용 중인 Shopify API와 버전
• 프로젝트를 실행, 테스트, 배포하는 방법
• 일반적인 함정과 프로젝트별 규칙

Shopify 앱용 CLAUDE.md 예시

# Project: My Shopify App

## Overview
Remix-based Shopify app for inventory management.
Uses Shopify API version 2025-01.

## Tech Stack
- Framework: Remix (Shopify app template)
- Database: Prisma with SQLite (dev) / PostgreSQL (prod)
- UI: Shopify Polaris React components
- Auth: Shopify App Bridge + session tokens

## Commands
- `npm run dev` - Start development server
- `npm run build` - Production build
- `shopify app dev` - Start with Shopify CLI
- `npm test` - Run Vitest suite
- `npx prisma db push` - Sync database schema

## Coding Standards
- Use TypeScript strict mode
- All API calls must use the authenticated admin client
- Use Polaris components exclusively for UI (no custom CSS for standard patterns)
- GraphQL queries go in `app/graphql/` directory
- Validate all webhook payloads with HMAC verification

## API Version
Always use API version 2025-01. Do not use unstable.

CLAUDE.md 계층 구조

Claude Code는 CLAUDE.md 파일의 계층 구조를 지원합니다:

위치	범위	사용 사례
~/.claude/CLAUDE.md	전역	모든 프로젝트에 걸친 개인 설정
./CLAUDE.md	프로젝트 루트	프로젝트별 컨텍스트 및 규칙
./src/CLAUDE.md	하위 디렉토리	모듈별 가이드

파일은 상위에서 하위로 병합되며, 더 구체적인 파일이 우선합니다.

컨텍스트 윈도우 관리

Claude Code는 컨텍스트 윈도우 내에서 작동합니다 -- 한 번에 메모리에 보유할 수 있는 텍스트(코드, 대화, 파일 내용)의 총량입니다. 효과적인 컨텍스트 관리는 생산적인 Shopify 개발 세션에 매우 중요합니다.

컨텍스트가 소비되는 방식

모든 상호작용이 컨텍스트에 추가됩니다:

• 프롬프트와 Claude의 응답
• Claude가 읽는 파일 내용
• 터미널 실행의 명령 출력
• 오류 메시지와 로그

대규모 Shopify 테마에는 50개 이상의 Liquid 파일이 있을 수 있습니다. 이를 모두 한 번에 읽으면 상당한 컨텍스트를 소비합니다. Claude Code는 이에 대해 지능적입니다 -- 모든 것을 미리 로드하는 대신 필요에 따라 파일을 읽습니다.

컨텍스트 관리 명령

필수 컨텍스트 명령

# 현재 비용 및 토큰 사용량 확인
/cost

# 대화 압축 (이력을 요약하여 컨텍스트 확보)
/compact

# 전체 대화를 지우고 새로 시작
/clear

/compact vs /clear 사용 시기

**/compact**는 작업 중이고 이전 논의의 요지를 유지하면서 컨텍스트를 확보하고 싶을 때 사용하세요. **/clear**는 완전히 다른 작업으로 전환할 때 사용하세요.

Shopify 개발에 좋은 리듬: 각 개별 기능이나 버그 수정을 완료한 후 /compact를 사용하고, 테마 작업과 앱 개발 사이를 전환할 때 /clear를 사용하세요.

대규모 Shopify 프로젝트를 위한 전략

1. 집중 세션으로 작업하세요: "전체 테마를 리팩토링해주세요"라고 요청하는 대신 한 번에 하나의 섹션에 집중하세요
2. CLAUDE.md를 적극적으로 활용하세요: 안정적인 컨텍스트(API 버전, 규칙, 파일 구조)를 CLAUDE.md에 넣어 반복할 필요가 없도록 하세요
3. 마일스톤 후 /compact를 활용하세요: 기능을 완료한 후 다음으로 넘어가기 전에 압축하세요
4. 파일 경로를 구체적으로 명시하세요: 불필요한 파일 검색을 피하기 위해 "상품 페이지를 편집해주세요" 대신 "sections/product-main.liquid를 편집해주세요"라고 말하세요

비용 및 사용 계층

Claude Code 사용량은 처리된 토큰(입력 및 출력 모두)에 따라 측정됩니다. 가격 책정을 이해하면 효과적으로 예산을 세울 수 있습니다.

구독 플랜

플랜	월 비용	적합한 대상
Claude Pro	$20/월	가벼운 사용, 간헐적 코딩 지원
Claude Max (5x)	$100/월	정기적 개발, 대부분의 Shopify 개발자
Claude Max (20x)	$200/월	집중적인 일일 사용, 풀타임 Shopify 개발

API 키 가격

API 키를 직접 사용하는 경우 토큰당 비용을 지불합니다:

모델	입력 (100만 토큰당)	출력 (100만 토큰당)
Claude Sonnet 4	$3.00	$15.00
Claude Opus 4	$15.00	$75.00

사용량을 주시하세요

단일 집중 Shopify 개발 세션(완전한 앱 기능 구축)은 수십만 토큰을 처리할 수 있습니다. API 키 가격의 경우 이것이 빠르게 누적될 수 있습니다. 정기적인 개발 작업의 경우 Max 구독이 API 키 사용보다 거의 항상 비용 효율적입니다.

사용량 모니터링

개발 중 /cost 명령을 자주 사용하세요:

> /cost
Session cost: $2.34
Total tokens: 145,230 input / 23,456 output

빠른 시작: 첫 Shopify 세션

모든 것이 작동하는지 확인하는 전체 워크플로우입니다:

첫 Shopify + Claude Code 세션

# 1. Shopify 프로젝트로 이동
cd ~/my-shopify-app

# 2. CLAUDE.md 파일 생성
echo "# My Shopify App\nRemix-based app using API version 2025-01" > CLAUDE.md

# 3. Claude Code 실행
claude

# 4. Claude Code에 프로젝트 탐색 요청
> Explore this project structure and summarize what you find

# 5. 빌드 시작
> Create a new page in the app that displays a list of products using GraphQL and Polaris components

Claude Code는 프로젝트 파일을 읽고, 구조를 이해하고, 코드를 작성하고, 결과를 확인하기 위해 개발 서버를 실행할 수도 있습니다. 에이전틱 Shopify 개발에 오신 것을 환영합니다.

다음 단계

Claude Code가 설치되고 설정되었으므로, Shopify 개발 워크플로우로 진행하여 Claude Code를 사용한 테마 개발, 앱 빌드, 디버깅의 구체적인 패턴을 배우세요.