Claudxk 가이드 - AI 코딩 어시스턴트 시작하기

Shopify 테마 실시간 디자인

피그마 없이, 브라우저에서 바로 확인하면서 Shopify 테마를 수정하는 방법을 안내합니다.

이 가이드는 누구를 위한 건가요?

Shopify 테마를 직접 수정하면서 디자인하고 싶은 디자이너를 위한 가이드예요.

기존 방식

피그마에서 디자인 → 개발자에게 전달 → 개발 → 확인 → 수정 요청 → 반복...

새로운 방식

브라우저에서 바로 수정 → 실시간 확인 → 마음에 들면 저장. 끝!

Claude Code에게 "이 색상 바꿔줘", "여기 간격 넓혀줘" 같은 말만 하면 코드를 몰라도 테마를 수정할 수 있어요. 수정 결과는 브라우저에서 바로 확인할 수 있습니다.

어떻게 동작하는 건가요?

Shopify 테마 코드를 내 컴퓨터에 가져와서, 로컬 미리보기 서버를 켜면 브라우저에서 실시간으로 수정 결과를 볼 수 있어요.

GitHub에서
테마 코드 가져오기

내 컴퓨터에서
미리보기 서버 실행

Claude에게
수정 요청

브라우저에서
바로 확인

코드를 몰라도 괜찮아요. Claude Code가 코드를 대신 수정해줍니다. 디자이너는 "색상 바꿔줘", "폰트 크기 키워줘" 같은 말만 하면 돼요.

먼저! 권한을 받으세요

시작하기 전에 아래 2가지 권한이 반드시 필요해요. 없으면 아래 과정을 진행할 수 없으니 먼저 요청하세요.

GitHub 저장소 접근 권한

테마 코드가 올라가 있는 GitHub 저장소에 초대를 받아야 해요.

Shopify 스토어 접근 권한

테마를 미리보려면 해당 Shopify 스토어의 직원(Staff) 권한이 필요해요.

은국님 또는 Nurani님에게 아래 내용으로 요청하세요:

"GitHub 레포 초대 + Shopify 스토어 Staff 권한 요청드립니다. 제 GitHub 아이디는 ___, Shopify 로그인 이메일은 ___ 입니다."

사전 준비 (처음 한 번만 하면 돼요)

위 권한을 받았으면, 아래 도구들을 순서대로 설치하세요. 이미 설치된 건 건너뛰면 돼요. 각 항목의 "설치 확인" 명령어를 실행해서 버전이 나오면 이미 설치된 거예요.

터미널 프로그램

명령어를 입력하는 프로그램이에요. 컴퓨터에 기본 내장되어 있습니다.

Spotlight (Cmd + Space)에서 "터미널" 또는 "Terminal"을 검색해서 열어요.

더 좋은 터미널을 원하면 iTerm2를 추천해요. 설치 가이드의 2단계를 참고하세요.

패키지 관리자 (다른 도구를 설치해주는 도구)

앞으로 필요한 프로그램들을 쉽게 설치할 수 있게 해주는 도구예요.

설치 확인:

brew --version

버전이 나오면 이미 설치된 거예요. 안 나오면 아래 명령어로 설치하세요.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Git (코드를 가져오는 도구)

GitHub에 있는 테마 코드를 내 컴퓨터로 복사(클론)하는 데 필요해요.

설치 확인:

git --version

버전이 나오면 이미 설치된 거예요.

macOS에는 보통 기본 내장되어 있어요. 안 되면 아래 명령어로 설치하세요.

xcode-select --install

팝업이 뜨면 "설치" 버튼을 누르세요. 몇 분 걸릴 수 있어요.

Node.js (Shopify CLI가 돌아가는 기반)

Shopify CLI를 실행하려면 Node.js가 필요해요. 직접 쓸 일은 없지만 뒤에서 동작합니다.

설치 확인:

node --version

brew install node

Shopify CLI (테마 미리보기 도구)

이게 핵심이에요! 내 컴퓨터에서 Shopify 테마를 실행하고 브라우저로 미리볼 수 있게 해주는 도구입니다.

설치 확인:

shopify version

brew tap shopify/shopify && brew install shopify-cli

Claude Code (AI 코딩 도우미)

코드를 직접 짤 필요 없이 말로 수정을 요청할 수 있어요. 이 사이트의 설치 가이드를 따라 설치하세요.

설치 확인:

claude --version

설치가 어렵다면? 담당자나 개발자에게 "위 6가지 설치 도와주세요"라고 요청하세요. 처음 한 번만 세팅하면 그 다음부터는 쉬워요.

Step 1. 테마 코드 가져오기

GitHub에 올라가 있는 Shopify 테마 코드를 내 컴퓨터로 가져와요. 이걸 "클론(clone)"이라고 해요. 원본과 연결된 복사본을 만드는 거예요.

GitHub
(테마 원본)

내 컴퓨터
(작업할 복사본)

Claude Code에게 시키기 (추천)

Claude Code를 열고, GitHub 주소와 저장할 위치를 말해주세요.

Claude Code 프롬프트

https://github.com/우리팀/우리테마 이거
/Users/나/Documents/프로젝트 밑에 클론해줘

GitHub 주소는 팀에서 알려준 URL을 그대로 붙여넣기하면 돼요. 저장 위치도 자유롭게 정할 수 있어요.

GitHub 주소는 어디서 찾나요?

팀에서 공유받은 GitHub 레포지토리 페이지에 가면 초록색 <> Code 버튼이 있어요.

그 버튼을 누르면 나오는 https://github.com/... 주소를 복사하면 됩니다.

GitHub 주소 예시

https://github.com/lukuku-dev/jentestore-korea
https://github.com/lukuku-dev/misto-global

저장 위치를 어디로 하면 좋을까요?

어디든 상관없지만, 찾기 쉬운 곳을 추천해요.

Step 2. 스토어 ID 확인하기

개발 서버를 켜려면 "어떤 Shopify 스토어의 데이터로 미리보기할지" 알려줘야 해요. 이때 필요한 게 스토어 ID예요.

스토어 ID 찾는 방법

Shopify Admin에 로그인한 뒤, 브라우저 주소창을 보세요.

Shopify Admin 주소

https://admin.shopify.com/store/여기가-스토어ID
                                    ──────────────
                                    ↑ 이 부분을 복사하세요

또는 .myshopify.com 앞부분이 스토어 ID예요.

myshopify.com 주소

https://여기가-스토어ID.myshopify.com
       ──────────────
       ↑ 이 부분이 스토어 ID

스토어 ID 예시

스토어 주소	스토어 ID
`my-brand.myshopify.com`	`my-brand`
`4e1550-7b.myshopify.com`	`4e1550-7b`
`misto-glboal.myshopify.com`	`misto-glboal`

스토어 ID를 모르겠으면 스토어 관리자(보통 개발자)에게 물어보세요.

Step 3. 스토어 인증하기 (처음 한 번만)

처음 접속하는 스토어는 본인 확인이 필요해요. 한 번만 하면 다음부터는 자동으로 접속돼요.

인증하는 방법

이 단계는 터미널에서 직접 해야 해요. (Claude Code에서는 비밀번호 입력이 안 돼요.)

1터미널을 열어요

2아래 명령어를 입력하세요 (스토어 ID를 내 것으로 바꿔주세요)

cd /테마가/저장된/경로 && shopify theme dev --store=내스토어ID

3브라우저가 열리면 Shopify 계정으로 로그인하세요

4로그인 성공하면 터미널에 "Preview your theme" 메시지가 나와요

5Ctrl + C를 눌러서 서버를 끄세요 (인증만 하면 되니까요)

왜 터미널에서 해야 하나요? Shopify 인증은 비밀번호 입력이나 브라우저 로그인이 필요한데, Claude Code에서는 이런 대화형 입력이 지원되지 않아요. 한 번만 터미널에서 인증하면 그 다음부터는 Claude Code에서 바로 실행할 수 있어요.

이미 인증된 스토어: 이전에 같은 스토어에 접속한 적 있으면 이 단계는 건너뛰세요. Claude Code에서 바로 Step 4로 넘어가면 돼요.

Step 4. 미리보기 서버 실행하기

이제 Claude Code에서 미리보기 서버를 켤 수 있어요. 서버가 켜지면 브라우저에서 테마를 실시간으로 확인할 수 있습니다.

Claude Code에서 실행 (추천)

Claude Code 프롬프트

/테마/경로에서 shopify theme dev --store="내스토어ID" 실행해줘

성공하면 이런 결과가 나와요:

실행 결과

╭─ success ─────────────────────────────────────────╮
│                                                   │
│  Preview your theme                               │
│    • http://127.0.0.1:9292     ← 이 주소를 열어요!  │
│                                                   │
╰───────────────────────────────────────────────────╯

브라우저에서 확인하기

1Chrome이나 Safari를 열어요

2주소창에 http://127.0.0.1:9292를 입력하세요

3Shopify 스토어가 보이면 성공!

127.0.0.1은 "내 컴퓨터"라는 뜻이에요. 인터넷에 공개되는 게 아니라 내 컴퓨터에서만 볼 수 있어요.

Step 5. 테마 수정하기 (실시간!)

미리보기 서버가 켜져 있는 상태에서 Claude Code에게 수정을 요청하면, 브라우저에서 바로 결과를 확인할 수 있어요.

수정 요청 예시

이런 식으로 말하면 돼요. 코드를 몰라도 괜찮아요!

색상

"헤더 배경색을 #1a1a2e로 바꿔줘"

레이아웃

"상품 카드 사이 간격을 24px로 넓혀줘"

타이포

"메인 제목 폰트 크기를 32px로 키워줘"

구조

"footer에 Instagram 링크를 추가해줘"

반응형

"모바일에서 상품 그리드를 1열로 바꿔줘"

이미지

"히어로 배너 높이를 500px로 줄여줘"

수정하면 바로 반영되나요?

네! 개발 서버가 파일 변경을 감지해서 브라우저에 자동으로 반영해요. Claude Code가 파일을 수정하면 브라우저를 새로고침하지 않아도 바뀌는 게 보여요.

만약 바로 안 보이면 브라우저에서 Cmd + R (Mac) 또는 F5 (Windows)로 새로고침하세요.

Shopify 테마의 주요 파일들

알아두면 요청할 때 더 정확하게 말할 수 있어요.

폴더/파일	역할	요청 예시
`sections/`	페이지의 각 섹션 (헤더, 푸터, 상품 등)	"header 섹션 수정해줘"
`assets/`	CSS, JS, 이미지 파일	"전체 폰트 바꿔줘"
`templates/`	페이지 레이아웃 설정	"상품 페이지 구조 바꿔줘"
`snippets/`	재사용되는 작은 코드 조각	"가격 표시 형식 바꿔줘"
`layout/`	전체 페이지 뼈대	"전체 레이아웃 수정해줘"
`config/`	테마 설정값	"테마 설정 확인해줘"

폴더 이름을 몰라도 괜찮아요. "헤더 색상 바꿔줘"처럼 말하면 Claude가 알아서 맞는 파일을 찾아줘요.

Step 6. 수정사항 저장하기

수정이 마음에 들면 GitHub에 올려서 팀과 공유하세요. 이것도 Claude Code에게 시키면 돼요.

GitHub에 올리기

Claude Code 프롬프트

수정한 내용 커밋하고 푸시해줘

Claude가 변경된 파일들을 정리해서 GitHub에 올려줘요. 팀원들이 변경사항을 확인할 수 있게 됩니다.

커밋이 뭔가요?

"커밋(commit)"은 수정한 내용을 저장하는 거예요. 게임의 세이브 포인트라고 생각하면 돼요. "푸시(push)"는 그 세이브를 GitHub에 올리는 거예요.

커밋
(로컬 저장)

푸시
(GitHub에 올리기)

여러 스토어 동시에 작업하기

프로젝트가 여러 개일 때, 각각 다른 포트(번호)로 동시에 미리볼 수 있어요.

포트가 뭔가요?

미리보기 서버의 "문 번호"라고 생각하세요. 기본은 9292번 문을 사용해요. 두 번째 서버를 열려면 다른 문 번호를 지정해야 해요.

두 번째 서버 포트 충돌 에러

이미 서버가 하나 실행 중인데 또 실행하면 이런 에러가 나요:

에러 메시지

Error: listen EADDRINUSE: address already in use 127.0.0.1:9292

걱정 마세요! --port로 다른 번호를 지정하면 돼요.

shopify theme dev --store='두번째스토어' --port=9293

실전 예시

스토어	브라우저 주소
스토어 A (기본)	`http://127.0.0.1:9292`
스토어 B (포트 변경)	`http://127.0.0.1:9293`

Claude Code 프롬프트

스토어B 테마 개발 서버를 9293 포트로 실행해줘

전체 흐름 한눈에 보기

처음 세팅부터 수정, 저장까지 전체 과정이에요.

테마 코드 가져오기 (처음 1회)

Claude Code 프롬프트

https://github.com/우리팀/테마이름
/Users/나/Documents/프로젝트 밑에 클론해줘

스토어 인증하기 (처음 1회, 터미널에서)

cd /테마/경로
shopify theme dev --store="내스토어ID"
# → 브라우저에서 Shopify 로그인
# → 성공 후 Ctrl + C로 종료

미리보기 서버 켜기

Claude Code 프롬프트

개발 서버 실행해줘

브라우저에서 미리보기 열기

http://127.0.0.1:9292를 브라우저에서 열어요

Claude Code에게 수정 요청

Claude Code 프롬프트

헤더 배경색을 검정으로 바꿔줘

브라우저에서 확인 → 반복

마음에 들 때까지 5번을 반복하세요

수정 완료 후 GitHub에 저장

Claude Code 프롬프트

수정한 내용 커밋하고 푸시해줘

매일 하는 작업은 3~7번만 반복하면 돼요. 1~2번은 처음 한 번만 하면 됩니다.

자주 묻는 질문

'EADDRINUSE' 에러가 나요

이미 다른 서버가 같은 포트를 쓰고 있어요. --port 옵션으로 다른 번호를 쓰세요.

shopify theme dev --store='내스토어' --port=9293

Claude Code에서 비밀번호를 입력할 수 없어요

정상이에요. Claude Code는 비밀번호 입력을 지원하지 않아요. 터미널(Terminal 또는 iTerm2)에서 먼저 한 번 인증을 완료하세요.

인증했는데 또 비밀번호를 물어봐요

인증이 만료된 거예요. 터미널에서 다시 한 번 인증하면 돼요.

cd /테마/경로 && shopify theme dev --store='내스토어ID'

수정했는데 브라우저에 안 보여요

브라우저에서 Cmd + R (Mac) 또는 F5 (Windows)로 새로고침해보세요. 그래도 안 되면 개발 서버가 켜져 있는지 확인하세요.

실수로 잘못 수정했어요. 되돌릴 수 있나요?

Claude Code에게 되돌려달라고 하면 돼요.

Claude Code 프롬프트

방금 수정한 거 원래대로 되돌려줘

Git이 변경 이력을 저장하고 있어서 언제든 되돌릴 수 있어요. 걱정 마세요!

실제 스토어에 바로 반영되나요?

아니요! 개발 서버는 내 컴퓨터에서만 보이는 미리보기예요. 실제 스토어에 반영하려면 별도로 "테마 배포" 과정이 필요해요. 이건 보통 개발자가 해요.

디자이너를 위한 팁

구체적으로 말하세요: "이쁘게 바꿔줘"보다 "배경색 #f5f5f5, 폰트 크기 16px, 간격 24px로 바꿔줘"처럼 구체적인 수치를 말하면 원하는 결과가 나와요.

스크린샷 활용: 브라우저에서 스크린샷을 찍어서 "이 부분 수정해줘"라고 보여주면 Claude가 정확히 어디를 수정해야 하는지 이해해요.

모바일도 확인하세요: 브라우저 개발자 도구(F12)에서 모바일 모드로 확인하거나, Claude에게 "모바일에서 어떻게 보이는지 확인해줘"라고 요청하세요.

작업할 때마다 커밋하세요: "헤더 색상 변경 커밋해줘"처럼 수정할 때마다 커밋하면 나중에 문제가 생겨도 쉽게 되돌릴 수 있어요.