Shopify 개발 마스터클래스 소개
Shopify 개발 마스터클래스에 오신 것을 환영합니다 -- Agentic Coding의 힘을 활용하여 최신 Shopify 앱, 테마, 통합을 구축하는 최종 코스입니다. 이것은 일반적인 Shopify 튜토리얼이 아닙니다. Shopify의 강력한 플랫폼과 Claude Code, 그리고 Model Context Protocol (MCP)을 결합하여 소프트웨어 개발에 대한 사고방식을 근본적으로 바꾸게 될 것입니다.
이 코스의 대상
이 코스는 서로 겹치는 세 그룹의 수강생을 위해 설계되었습니다:
-
코딩을 배우고 싶은 판매자. Shopify 스토어를 운영하면서 필요한 기능을 거의 충족하는 앱에 비용을 지불하는 것에 지쳤습니다. 기술적 호기심은 있지만 컴퓨터 과학 학위가 없을 수 있습니다. Agentic Coding은 여러분의 힘의 배수입니다 -- 기본기를 아직 배우고 있더라도 AI 도움으로 실제 기능을 구축할 수 있습니다.
-
Shopify가 처음인 개발자. JavaScript, React 또는 다른 언어를 알고 있지만 Shopify 플랫폼에서 구축해 본 적이 없습니다. 생태계를 이해해야 합니다 -- API, 확장 포인트, Partner Dashboard, 배포 모델 -- 그리고 빠르게 배우고 싶습니다.
-
AI에 호기심이 있는 빌더. AI 지원 코딩에 대해 들어봤지만 자동완성을 넘어서고 싶습니다. 문서를 읽고, API를 호출하고, 셸 명령을 실행하며, 전체 기능을 자율적으로 구축할 수 있는 AI 에이전트가 무엇을 의미하는지 이해하고 싶습니다. MCP 서버가 Claude Code를 Shopify 개발의 강력한 도구로 만드는 방법을 보고 싶습니다.
빠르게 진행하지만, 모든 개념은 기본 원리부터 설명합니다. JavaScript를 읽을 수 있고 터미널을 탐색할 수 있다면, 시작하는 데 필요한 모든 것을 갖추고 있습니다.
Agentic Coding이란?
기존 AI 코딩 어시스턴트는 다음 코드 줄을 제안합니다. Agentic Coding은 근본적으로 다릅니다. Claude Code와 같은 에이전틱 코딩 시스템은 다음을 수행할 수 있습니다:
- 컨텍스트 이해 -- 전체 프로젝트, 문서, API 스키마를 읽습니다
- 다단계 솔루션 계획 -- 복잡한 기능을 구현 단계로 분해합니다
- 자율적 실행 -- 명령을 실행하고, 파일을 생성하며, 의존성을 설치하고, API를 호출합니다
- 피드백에 따른 반복 -- 오류 메시지를 읽고, 버그를 수정하며, 솔루션이 작동할 때까지 개선합니다
- 도구에서 학습 -- MCP 서버를 사용하여 실시간 Shopify 데이터, 문서 등에 접근합니다
맞춤법 검사기와 공동 저자의 차이라고 생각하면 됩니다. Claude Code는 오타를 수정하는 것이 아니라 -- 전체 책을 쓰는 것을 도와줍니다.
Claude Code + MCP 패러다임 전환
Claude Code는 Anthropic의 CLI 기반 코딩 에이전트입니다. 터미널에서 실행하며 파일 시스템, 셸, 개발 도구에 대한 전체 접근 권한을 갖습니다. 하지만 Shopify 개발에 진정으로 강력하게 만드는 것은 **Model Context Protocol (MCP)**입니다.
MCP는 AI 에이전트가 통합 프로토콜을 통해 외부 도구 및 데이터 소스에 연결할 수 있게 해주는 개방형 표준입니다. Shopify 개발에서 이는 Claude Code가 다음을 수행할 수 있음을 의미합니다:
- Shopify 스토어의 Admin API를 실시간으로 쿼리
- 최신 Shopify 문서 읽기
- 테마 파일 검사 및 Liquid 개선 제안
- Shopify CLI 명령을 실행하여 스캐폴드, 테스트, 배포
- 스토어의 상품 카탈로그, 주문, 고객 데이터 접근
이것은 패러다임 전환입니다. 문서 탭, API 탐색기, 편집기 사이를 컨텍스트 전환하는 대신, 원하는 것을 설명하면 Claude Code가 실제 스토어 데이터에 대한 실시간 접근으로 구축 방법을 알아냅니다.
코스 로드맵
마스터클래스는 각각 이전 모듈을 기반으로 하는 8개 모듈로 구성됩니다:
| 모듈 | 중점 | 핵심 성과 |
|---|---|---|
| 시작하기 | 환경, 도구, 첫 번째 앱 | 개발 스토어에서 Shopify 앱 실행 |
| Shopify 기본 | 플랫폼 아키텍처, API, Liquid, Hydrogen, Functions | Shopify 생태계에 대한 깊은 이해 |
| Shopify를 위한 Claude Code | CLI 워크플로우, 프롬프트 엔지니어링, 자율 코딩 | 생산적인 에이전틱 개발 워크플로우 |
| MCP 심층 탐구 | 프로토콜 내부, 서버 구축, Shopify MCP 도구 | 워크플로우를 위한 커스텀 MCP 서버 |
| 에이전틱 패턴 | AI 지원 Shopify 개발을 위한 디자인 패턴 | 일반 작업을 위한 반복 가능한 패턴 |
| 앱 구축 | 임베디드 UI, 웹훅, 과금을 포함한 전체 앱 개발 | 프로덕션 준비된 Shopify 앱 |
| 고급 주제 | Functions, Checkout UI, B2B, Markets, Shopify Plus | 고급 플랫폼 기능 |
| 배포 및 운영 | CI/CD, 모니터링, 앱 리뷰, 스케일링 | Shopify App Store에 앱 등록 |
학습 목표
이 코스를 완료하면 다음을 할 수 있게 됩니다:
- Remix, Polaris, App Bridge를 사용하여 Shopify 앱 구축 및 배포
- Liquid, Online Store 2.0 섹션, JSON 템플릿을 사용하여 커스텀 테마 생성
- Shopify 개발을 위한 에이전틱 코딩 파트너로 Claude Code를 효과적으로 사용
- Claude Code를 Shopify API 및 커스텀 도구에 연결하는 MCP 서버 구축
- JavaScript와 Rust로 체크아웃, 할인, 배송을 확장하는 Shopify Functions 작성
- React, Remix, Storefront API로 Hydrogen 스토어프론트 설계
- 앱 리뷰, 과금, 수익 분배를 포함한 Partner 생태계 탐색
- AI 지원 개발을 안정적이고 반복 가능하게 만드는 에이전틱 디자인 패턴 적용
사전 요구사항
시작하기 전에 다음을 준비하세요:
- macOS, Linux 또는 Windows (WSL2 권장)를 실행하는 컴퓨터
- 기본 JavaScript 지식 -- 변수, 함수, async/await, 모듈
- 터미널 사용 능력 -- 디렉토리를 탐색하고 명령을 실행할 수 있어야 합니다
- Shopify Partner 계정 -- partners.shopify.com에서 무료로 생성
- Anthropic API 키 -- Claude Code에 필요하며, console.anthropic.com에서 사용 가능
- Node.js 20 이상 -- 다음 수업에서 설치를 다룰 것입니다
에이전틱 코딩에 대한 가장 큰 오해는 사용하려면 전문 프로그래머여야 한다는 것입니다. 사실은 그 반대입니다 -- Claude Code는 아직 배우고 있는 사람들에게 가장 혁신적입니다. 24시간 쉬지 않고 함께 페어 프로그래밍하는 시니어 개발자가 있는 것과 같습니다.
이 코스 사용 방법
각 수업에는 다음이 포함됩니다:
- 다이어그램과 실제 컨텍스트를 포함한 개념 설명
- 터미널에서 따라할 수 있는 실습 연습
- 복사-붙여넣기 가능하며 현재 Shopify API 버전에 대해 테스트된 코드 예제
- 각 작업에 에이전틱 코딩을 활용하는 방법을 정확히 보여주는 Claude Code 프롬프트
- 다음으로 넘어가기 전에 이해를 확인하는 체크포인트 질문
처음에는 모듈 순서대로 작업하는 것을 권장합니다. 이후에는 코스를 참조 자료로 활용하세요 -- 필요할 때 어느 섹션이든 바로 이동하세요.
이 코스 전반에 걸쳐 Shopify API 자격증명과 Anthropic API 키를 사용하게 됩니다. 이것들을 절대 버전 관리에 커밋하지 마세요. 환경 설정 수업에서 환경 변수와 .env 파일을 올바르게 사용하는 방법을 보여드리겠습니다.
시작할 준비가 되셨나요? 개발 환경을 설정해 봅시다.