Shopify CLI란 무엇이며, 어떻게 작동하나요?

Shopify 앱을 만들고 싶을 때 가장 먼저 설치하게 되는 도구 중 하나가 바로 Shopify CLI입니다.
CLI는 “Command Line Interface”의 약자로, 명령어로 앱을 만들고 설정하고 실행할 수 있는 도구입니다.

처음 시작하는 분이라면 “이건 꼭 써야 하나요?”, “GUI도 없는데 이걸 왜 써야 하죠?” 같은 의문이 들 수 있습니다.
하지만 실제로 Shopify 앱을 개발할 때 CLI는 없어서는 안 될 중요한 도구입니다.

이 글에서는 Shopify CLI가 무엇을 하고, 안에는 어떤 기능들이 포함되어 있으며, 그것이 Node.js, React, Remix와 어떻게 연결되는지를 아주 쉽게 설명해 드리겠습니다.

Shopify CLI는 무엇인가요?

Shopify CLI는 Shopify 앱이나 테마를 쉽게 만들 수 있게 도와주는 명령어 도구입니다.
우리가 Shopify 앱을 직접 개발할 때, CLI는 아래와 같은 작업을 대신 처리해 줍니다.

앱의 기본 구조(폴더, 파일)를 자동으로 만들어줍니다
Shopify와 앱을 연결하는 인증 작업을 자동화해줍니다
앱을 로컬에서 테스트할 수 있도록 서버를 실행시켜줍니다
필요한 라이브러리를 자동으로 설치해줍니다
Shopify Admin 화면에서 앱을 열어볼 수 있게 연결해줍니다

쉽게 말해, Shopify CLI는 앱 개발에 필요한 준비와 실행 과정을 자동으로 도와주는 도우미라고 할 수 있습니다.

CLI를 설치하면 무엇이 생기나요?

Shopify CLI를 설치하면 shopify라는 명령어를 사용할 수 있게 됩니다.
터미널에서 아래처럼 명령어를 입력하면 다양한 작업을 할 수 있습니다.

shopify app create

이 명령어 하나로 앱 이름, 템플릿 종류, 사용할 언어 등을 선택한 후, 앱 기본 구조 전체를 자동으로 생성해줍니다.

예를 들어 Remix 템플릿을 선택하면 내부적으로는 Node.js + Remix + React + Polaris + Shopify API 인증 구조까지 다 만들어줍니다.
우리는 그 위에 필요한 기능만 추가하면 됩니다.

CLI 내부에는 어떤 것들이 들어 있나요?

Shopify CLI는 내부적으로 여러 가지 구성 요소와 자동화 도구를 포함하고 있습니다. 주요 기능은 다음과 같습니다.

1. 템플릿 생성 기능

shopify app create 명령어로 앱 템플릿을 만들 수 있습니다. 템플릿 종류는 다음과 같습니다.

Node.js + Remix 기반 앱 (Shopify 공식 권장 방식)
PHP 앱, Ruby 앱 (비추천 – 대부분 Node.js를 사용함)

이 템플릿은 앱을 빠르게 만들 수 있도록 미리 파일 구조와 필요한 코드가 작성되어 있습니다.

2. OAuth 인증 자동 구성

Shopify 앱은 인증 절차(OAuth)가 필수인데, CLI로 만든 앱은 이 복잡한 인증 절차가 자동으로 세팅되어 있습니다.
우리는 API Key만 넣어주면 바로 사용할 수 있습니다.

3. 로컬 서버 실행 + Shopify Admin 연결

CLI는 앱을 실행하면서 자동으로 Shopify 상점과 연결하고, 실제 Shopify Admin 화면 안에서 우리가 만든 앱을 미리 볼 수 있게 해줍니다.

예시:

shopify app dev

이 명령어 하나면 앱이 실행되고, Shopify Admin에 자동으로 탭이 뜹니다.
Cloudflare Tunnel 또는 ngrok을 자동으로 연결해 줍니다.

그럼 Node.js, Remix, React와는 어떻게 연결되나요?

Shopify CLI는 앱의 틀을 만들어줄 뿐이고, 실제 앱의 내부는 아래 세 가지 기술이 각각의 역할을 담당합니다.

Node.js: 서버 역할

Node.js는 앱의 ‘백엔드’입니다.
Shopify API를 호출하고, 인증 정보를 처리하고, 데이터를 저장하거나 불러오는 역할을 합니다.
CLI는 이 Node.js 서버가 작동되도록 자동으로 구성하고 실행해 줍니다.

Remix: 데이터 흐름과 페이지 구성

Remix는 웹 프레임워크로, 화면에서 데이터를 어떻게 불러오고 저장할지 정해주는 구조입니다.
예를 들어 상품 목록을 보여주는 페이지를 만들 때, Remix가 Shopify API에서 상품을 불러오고 화면에 전달해 줍니다.
CLI는 Remix가 작동하도록 환경을 설정하고, 기본 페이지 예제까지 함께 제공합니다.

React: 화면 디자인

React는 실제로 사용자에게 보이는 화면을 구성하는 기술입니다.
버튼, 입력창, 표, 카드 같은 구성요소들을 만들고, 사용자의 클릭이나 입력에 반응합니다.
Shopify에서 제공하는 Polaris UI 컴포넌트도 전부 React 기반입니다.
CLI는 React 코드가 포함된 화면 컴포넌트를 자동으로 세팅해 줍니다.

쉽게 예를 들어 보면…

shopify app create
→ 앱을 자동으로 만들고 Node.js + Remix + React 코드까지 세팅해 줍니다
shopify app dev
→ 앱을 실행하고 Cloudflare Tunnel을 연결해서 Shopify Admin에서 바로 확인할 수 있게 합니다
내부적으로는:
- Node.js가 서버(API, 인증)를 처리하고
- Remix가 페이지를 구성하고
- React가 화면을 보여주고
- Polaris가 React 화면을 예쁘게 꾸며줍니다

이 모든 과정을 Shopify CLI가 미리 자동으로 연결해주기 때문에, 개발자는 기능을 추가하고 디자인만 바꾸면 되는 구조입니다.

결론: Shopify CLI는 앱 개발의 필수 도우미입니다

Shopify CLI는 단순한 명령어 도구가 아니라, Shopify 앱 개발을 처음부터 끝까지 도와주는 자동화 시스템입니다.
React, Remix, Node.js 같은 복잡한 도구들을 CLI 하나로 쉽게 연결해주며, 앱을 빠르게 만들고 테스트할 수 있도록 해줍니다.

개발을 처음 시작한 분이라도 CLI를 통해 빠르게 앱을 실행해보고, 하나씩 기능을 추가해 나가면서 Shopify 앱 개발을 체계적으로 배워갈 수 있습니다.
이제 CLI의 흐름이 이해되셨다면, 다음은 실제 앱을 만들어보고 실행하는 경험을 해보는 것이 좋습니다.

필요하시면 CLI를 기반으로 Shopify 앱을 처음부터 끝까지 만드는 실습 가이드도 제공해드릴 수 있습니다.
어떤 주제부터 실습해보고 싶으신가요?