Claude Design → Shopify 테마 실전 적용 — 디자인 파일을 실제 쇼핑몰로 | S3 EP11

클로드 어디까지 써봤니 · 시즌 3
S3 EP11 | PHASE 3 — 스토어 디자인

Claude Design → Shopify 테마 실전 적용

디자인 파일을 실제 쇼핑몰로 — 클릭 한 번이 아니라 '연결'의 기술
클로드의 친구 · 2026년 4월

EP10에서 Claude Design으로 ノルグンリ의 디자인을 완성했다. Dusty Rose 팔레트, 세리프 타이포그래피, 여백의 미학 — 화면 속 디자인은 멋졌다.

그런데 현실에서 맞닥뜨린 질문은 이거였다. "이걸 어떻게 Shopify에 넣지?"

Export 버튼 하나로 끝나면 좋겠지만 — 그런 버튼은 없다. Claude Design과 Shopify는 서로 다른 도구다. 연결하는 건 사람의 몫이다.

이번 편에서는 Claude Design 결과물을 Shopify 테마 에디터에 실제로 적용하는 전 과정을 단계별로 정리한다. 개발 지식 없이, 코드 없이, 테마 에디터만으로 가능한 것들부터 시작한다.

이번 편에서 다룰 내용

① Claude Design → Shopify, 어떻게 연결하나

② Shopify 테마 선택 — 일본 시장을 위한 기준

③ 색상 팔레트 적용 — HEX 코드 추출과 테마 설정

④ 폰트 적용 — 일본어 + 영어 혼용 최적화

⑤ 홈페이지 섹션 구성 — 히어로부터 신뢰 배지까지

⑥ 모바일 최적화 — 사오리는 스마트폰으로 산다

⑦ Claude에게 Liquid 없이 커스터마이징 묻는 법

⑧ 완성 체크리스트 + 실전 프롬프트

1. Claude Design → Shopify, 어떻게 연결하나

Claude Design은 시각적 레퍼런스를 만들어주는 도구다. Shopify 테마 에디터는 그 레퍼런스를 보면서 직접 설정을 입력하는 도구다. 두 도구 사이에는 '번역'이 필요하다.

연결 3단계 프레임워크
STEP 1 — 추출

Claude Design 화면에서 색상 HEX 코드, 폰트 이름, 레이아웃 구조를 읽어낸다. Claude에게 "이 디자인의 색상 코드를 알려줘"라고 물으면 된다.

STEP 2 — 매핑

추출한 값을 Shopify 테마 설정의 어느 항목에 입력해야 하는지 매핑한다. 색상 → Colors, 폰트 → Typography, 간격 → Layout 등.

STEP 3 — 적용

테마 에디터에서 직접 입력한다. 변경사항을 저장하고 미리보기로 확인하며 조정한다.

핵심 원칙: Claude Design은 "목표 화면"이다. Shopify 테마 에디터는 "현실 화면"이다. 100% 일치는 불필요하다 — 80%만 재현해도 브랜드 정체성은 충분히 전달된다.

2. Shopify 테마 선택 — 일본 시장을 위한 기준

어떤 테마를 쓰느냐에 따라 디자인 구현 가능 범위가 달라진다. 일본 패션 마켓을 위한 테마 선택 기준은 세 가지다.

① 일본어 렌더링

ひらがな·漢字·カタカナ 혼용 표시가 깨지지 않아야 한다. 대부분의 공식 테마는 문제없지만, 서드파티 유료 테마는 반드시 일본어 미리보기 확인 필요.

✅ 공식 무료 테마 (Dawn, Craft)는 모두 일본어 지원
② 이미지 중심 레이아웃

일본 여성 소비자는 시각적 신뢰에 민감하다. 히어로 배너가 크고 상품 이미지가 주인공인 테마를 선택해야 한다.

✅ Craft, Crave — 이미지 비중이 높은 패션 특화 테마
③ 모바일 반응형

일본 이커머스의 60~70%는 모바일 구매다. 사오리는 통근 전철에서 인스타를 보다가 스토어로 들어온다. 모바일 최적화가 필수.

✅ 모든 공식 테마는 반응형 — 하지만 실제 스마트폰 미리보기 필수
ノルグンリ 추천 테마: Craft (무료)

Craft는 여백을 살린 미니멀 레이아웃, 큰 이미지 섹션, 세리프 폰트 지원을 제공한다. ノルグンリ의 "Dusty Rose × 순백 × 세리프" 컨셉과 방향이 일치한다.

Shopify 관리자 → 온라인 스토어 → 테마 → 테마 라이브러리 → Craft 검색 후 무료 추가

3. 색상 팔레트 적용 — HEX 코드 추출과 테마 설정

Claude Design에서 색상 코드를 가져다 Shopify 테마에 입력하는 것이 첫 번째 작업이다. ノルグンリ의 경우 아래 팔레트를 확정했다.

ノルグンリ 공식 색상 팔레트
Dusty Rose
#d4a0a0
메인 포인트 컬러
Warm White
#f8f5f2
배경 / 전체 톤
Deep Mauve
#3d3535
텍스트 / 헤딩
Muted Rose
#b58a8a
버튼 / CTA
Blush Beige
#e8ddd8
카드 배경 / 구분선
Shopify 테마 에디터 — 색상 적용 경로
온라인 스토어 → 테마 → 편집
→ 왼쪽 패널 하단 "테마 설정"
→ Colors (색상)
┣ Accent 1: #d4a0a0 (Dusty Rose)
┣ Accent 2: #b58a8a (Muted Rose)
┣ Background: #f8f5f2 (Warm White)
┣ Text: #3d3535 (Deep Mauve)
┗ Button label: #ffffff
Claude 활용 팁: Claude Design 화면을 캡처해 Claude에게 보내고 "이 디자인에 쓰인 색상 HEX 코드를 모두 추출해줘"라고 요청하면 정확한 값을 뽑아준다. EP10에서 작업한 Claude Design 프로젝트를 그대로 활용하면 된다.

4. 폰트 적용 — 일본어 + 영문 혼용 최적화

폰트는 브랜드 분위기를 결정짓는 핵심 요소다. ノルグンリ는 두 가지 폰트 조합을 사용한다.

헤딩 폰트
Cormorant Garamond

영문 세리프. 우아하고 클래식한 느낌. ノルグンリ 브랜드명 표기에 사용.

Google Fonts에서 무료 제공
본문 폰트
Noto Serif JP

일본어 세리프. ひらがな·カタカナ·漢字 전부 아름답게 표시. 한국어도 일부 지원.

Google Fonts에서 무료 제공 (용량 주의)
Shopify 테마 에디터 — 폰트 적용 경로
테마 설정 → Typography (서체)
→ Headings: Cormorant Garamond
→ Body: Noto Serif JP

※ Shopify 기본 폰트 목록에 없으면 "Browse all fonts"에서 검색
※ 일본어 폰트는 페이지 로딩에 영향 → Weight 선택 시 400·700만 사용
일본어 폰트 용량 경고: Noto Serif JP는 파일이 크다. 모든 Weight를 로드하면 LCP(최대 콘텐츠 렌더링) 성능에 영향을 준다. 400 (Regular)와 700 (Bold) 두 개만 선택해 로딩 속도를 지킨다.

5. 홈페이지 섹션 구성 — 히어로부터 신뢰 배지까지

Shopify 테마 에디터의 "섹션 추가" 기능으로 홈페이지 레이아웃을 구성한다. ノルグンリ 홈페이지는 아래 7개 섹션으로 설계한다.

섹션 1 — 히어로 배너

브랜드 전체 무드를 결정하는 첫 화면. Dusty Rose 배경 + 모델 착용 이미지 + ノルグンリ 영문 로고타입.

Image banner 또는 Slideshow 섹션 사용 | 이미지 최소 2400×1350px 권장
섹션 2 — 브랜드 한 줄 카피

"누가 만들었는지 몰라도 좋아하게 되는 옷" — 사오리의 감성에 닿는 짧은 문장 하나. 히어로 바로 아래.

Rich text 섹션 | Cormorant Garamond, 중앙 정렬, 여백 넉넉하게
섹션 3 — 신상품 컬렉션

最新アイテム (최신 아이템) 4~8개. 상품명은 일본어, 가격은 ¥ 표기. 클릭하면 상품 페이지로 이동.

Featured collection 섹션 | 4열 그리드 (PC) / 2열 (모바일)
섹션 4 — 스타일 룩북

코디 제안. "이렇게 입으면 어때요" 형식. 분위기 이미지 2~3장 + 짧은 설명. 사오리의 상상력을 자극.

Multicolumn 또는 Image with text 섹션 | 와이드 이미지 추천
섹션 5 — 브랜드 스토리

"ノルグンリはどんなブランド?" — 일본 소비자는 브랜드 철학을 중요하게 본다. 50~80자 내외의 진심 어린 한 단락.

Image with text 섹션 | 텍스트 왼쪽, 이미지 오른쪽 (PC) / 이미지 위, 텍스트 아래 (모바일)
섹션 6 — 신뢰 배지

안심하고 살 수 있다는 신호. "送料無料 ¥10,000~" / "安全決済" / "30日間返品保証" — 3~4개 아이콘과 텍스트.

Multicolumn 섹션 | 아이콘은 SVG 또는 이모지 텍스트 활용
섹션 7 — LINE 구독 유도

"LINEで限定セール情報をGET!" — LINE 공식 계정 친구 추가 버튼. 사오리를 반복 구매자로 전환하는 핵심 도구.

Email signup 또는 Custom HTML 섹션 | LINE 친구 추가 URL 버튼
순서의 법칙: 사오리가 스토어에 처음 들어왔을 때 10초 안에 해야 할 것은 세 가지다. (1) "이 브랜드가 뭔지" 파악, (2) "나한테 맞는지" 확인, (3) "믿을 수 있는지" 판단. 섹션 순서는 이 흐름을 따른다.

6. 모바일 최적화 — 사오리는 스마트폰으로 산다

PC에서 아무리 멋져도 모바일이 깨지면 끝이다. 사오리가 Instagram 링크를 클릭해 처음 보는 화면은 반드시 스마트폰 화면이다.

모바일 점검 5가지
1
히어로 배너 텍스트 크기

모바일에서 헤딩이 너무 작아지거나 잘리지 않는지 확인. 브랜드명 "NOLGUNGRI"가 한 줄에 들어와야 한다.

2
상품 그리드 열 수

PC 4열 → 모바일 2열 자동 전환이 되는지 확인. 상품 이미지가 잘리지 않고 정방형을 유지해야 한다.

3
버튼 탭 영역

"カートに追加" 버튼이 엄지손가락으로 탭하기 쉬운 크기인지 확인. 최소 44px 높이 권장.

4
일본어 텍스트 줄바꿈

일본어는 어절 단위 줄바꿈이 아니라 글자 단위로 된다. 의미 단위가 부자연스럽게 잘리지 않는지 확인.

5
로딩 속도

히어로 이미지가 크면 3G 환경에서 3초 이상 걸린다. WebP 포맷, 800KB 이하로 최적화 후 재업로드.

모바일 미리보기 방법
테마 에디터 상단 아이콘에서 스마트폰 아이콘 클릭
→ 모바일 뷰로 전환
→ 각 섹션 선택 후 모바일에서 어떻게 보이는지 직접 확인

※ 실제 기기 확인 방법:
Preview URL 생성 → QR 코드로 본인 스마트폰에서 열기
→ 실제 손으로 스크롤하며 점검

7. Claude에게 커스터마이징 묻는 법 — Liquid 없이도 가능한 것들

테마 에디터만으로 안 되는 미세 조정이 생긴다. 이때 Claude에게 물으면 대부분 Custom CSS로 해결할 수 있다. Liquid(Shopify 템플릿 언어)를 몰라도 된다.

Custom CSS로 해결 가능한 것들
케이스 1 — 배너 높이 조정
/* 히어로 배너를 PC에서 80vh로 설정 */
.banner__media { min-height: 80vh !important; }
/* 모바일에서는 50vh */
@media (max-width: 749px) {
  .banner__media { min-height: 50vh !important; }
}
케이스 2 — 버튼 둥글기 조정
/* 버튼을 더 둥글게 (pill shape) */
.button, .btn { border-radius: 50px !important; }
/* 구매 버튼 색상 변경 */
.button--primary { background-color: #b58a8a !important; border-color: #b58a8a !important; }
케이스 3 — 네비게이션 폰트 크기
/* 헤더 네비 텍스트를 letter-spacing 추가해 고급스럽게 */
.header__menu-item { letter-spacing: 0.08em !important; font-size: 13px !important; }
Claude에게 CSS 커스터마이징 요청 프롬프트
나는 Shopify Craft 테마를 사용하고 있어.
다음과 같은 커스터마이징을 Custom CSS로 하고 싶어:
[원하는 변경사항 설명]

CSS 클래스 이름을 찾을 수 없어서 어떤 클래스를 써야 할지 모르겠어.
Craft 테마 기준으로 올바른 CSS 셀렉터와 코드를 알려줘.
모바일(max-width: 749px)에서도 대응하게 해줘.
Custom CSS 적용 방법: 테마 에디터 → 테마 설정 → Edit code → assets/base.css 또는 Custom CSS 입력란에 추가. Craft 테마는 테마 설정 하단에 "Custom CSS" 직접 입력란이 있다.

8. 완성 체크리스트 + 실전 프롬프트

테마 적용 완료 전 최종 확인 목록이다. 하나씩 체크하고 넘어간다.

ノルグンリ 테마 적용 완료 체크리스트
☐ Craft 테마 설치 및 활성화 완료
☐ 색상 팔레트 5종 (Dusty Rose, Warm White, Deep Mauve, Muted Rose, Blush Beige) 입력
☐ 헤딩: Cormorant Garamond, 본문: Noto Serif JP 설정
☐ 홈페이지 7개 섹션 배치 완료
☐ 히어로 이미지 WebP 최적화 (800KB 이하)
☐ 모바일 미리보기 5개 항목 점검 완료
☐ 네비게이션 메뉴 일본어로 설정 (ホーム, コレクション, ブランドについて, お問い合わせ)
☐ 푸터에 특정상거래법 링크, SNS 링크 배치
☐ 파비콘 (브라우저 탭 아이콘) 설정 — 브랜드 이니셜 N
☐ Google Analytics 또는 Shopify Analytics 연결 확인
☐ 실제 스마트폰에서 QR 코드로 최종 확인

실전 프롬프트 모음

프롬프트 1 — 홈페이지 카피 초안
나는 한국 패션을 일본에서 판매하는 온라인 스토어 ノルグンリ를 운영해.
메인 타깃은 30대 일본 여성 '사오리'로, SNS를 보다 발견하고 구매하는 스타일이야.

홈페이지 히어로 섹션에 들어갈 카피를 작성해줘.
조건: 일본어, 20자 이내 메인 카피 + 40자 이내 서브 카피, 세련되고 따뜻한 톤.
프롬프트 2 — 브랜드 스토리 섹션
ノルグンリ의 브랜드 스토리 섹션에 들어갈 짧은 소개문을 일본어로 써줘.
"韓国発、日本の暮らしに溶け込む服" 라는 방향성으로.
80자 이내, 딱딱하지 않고 진심이 느껴지는 톤.
프롬프트 3 — 신뢰 배지 문구
일본 이커머스 스토어에서 사용할 신뢰 배지 4개의 문구를 만들어줘.
내 조건: 무료배송 기준 ¥10,000, Shopify Payments 사용, 환불 30일 이내.
각 배지는 아이콘 이모지 + 제목(10자 이내) + 설명(25자 이내) 형식으로.
NEXT EPISODE
EP12: 상품 페이지 & 카피라이팅
사오리가 "買う" 버튼을 누르게 하는 법

스토어 디자인이 완성됐다면, 이제 상품 하나하나가 말을 해야 한다.
이미지 구성, 일본어 카피, 사이즈 표 — 구매 결정을 만드는 상품 페이지 설계.

📚 시즌 3 전체 목차 — 일본에서 쇼핑몰로 먹고 살기

🤖 Created with Claude (Anthropic)

#클로드어디까지써봤니 #시즌3 #ShopifyJapan #쇼피파이테마 #클로드디자인 #일본쇼핑몰 #ノルグンリ #NOLGUNGRI #Shopify #테마적용 #쇼피파이커스터마이징 #일본이커머스 #K패션일본 #온라인쇼핑몰 #드롭쉬핑 #패션창업 #일본창업 #Claude #AI활용 #쇼핑몰디자인 #CraftTheme #모바일최적화

コメント

コメントを投稿

このブログの人気の投稿

"이거 매일 해줘" — 첫 번째 자동화 태스크 [클로드 어디까지 써봤니 EP 04]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 04 "이거 매일 해줘" — 스케줄 태스크로 반복 작업 자동화하기 클로드의 친구 · 2026년 4월 13일 ◀ EP 03: AI가 나를 기억한다 | 📚 EP 04 | EP 05: 나만의 헌법 만들기 ▶ 1. "매일 아침 뉴스 요약해줘"가 어떻게 작동할까 Lucas는 어느 날 아침 클로드에게 이렇게 말했습니다. "클로드, 매일 저녁 7시에 경제 뉴스 요약해서 블로그에 올려줘." 그 이후로 클로드는 매일 저녁 7시에 스스로 일어나, 뉴스를 검색하고, 글을 쓰고, 블로그에 올립니다. Lucas는 지금 이 일을 위해 아무것도 하지 않습니다. 이게 바로 스케줄 태스크 입니다. 그런데 "매일 저녁 7시"는 어떻게 기계가 이해하는 숫자로 바뀔까요? 그 비밀이 바로 크론 표현식(Cron Expression) 입니다. 2. 크론 표현식 — 시간을 코드로 말하는 방법 크론(Cron)은 원래 Unix/Linux 계열 운영체제에서 주기적 작업을 자동 실행하기 위해 만들어진 스케줄러입니다. 이름은 그리스어로 "시간"을 뜻하는 Chronos에서 왔습니다. 크론 표현식은 이렇게 생겼습니다: 분 시 일 월 요일 0 19 * * * 5개의 자리가 공백으로 구분되어 있습니다. 왼쪽부터 분(0-59) , 시(0-23) , 일(1-31) , 월(1-12) , 요일(0-6, 0=일요일) 입니다. * 는 "모든 값"을 뜻합니다. 위의 예시 0 19 * * * 는 "매일, 매월, 모든 요일, 19시 정각"이라는 뜻이죠. 실전 예시들 0 19 * * * → 매일 저녁 7시 정각. Lucas의 "클...
続きを読む

AI가 나를 기억한다 — 메모리 시스템의 비밀 [클로드 어디까지 써봤니 EP 03]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 03 AI가 나를 기억한다 — 메모리 시스템의 비밀: 대화가 끝나도 남는 것들 클로드의 친구 · 2026년 4월 13일 ◀ EP 02: 클로드, 너 뭐 할 수 있어? | 📚 EP 03 | EP 04: "이거 매일 해줘" ▶ EP 02 에서 클로드의 기능 지도를 펼쳤습니다. 프로젝트, 아티팩트, MCP, 스케줄 태스크까지. 그런데 이 모든 기능을 쓰면서도 한 가지 아쉬운 순간이 있습니다. 새 대화를 열 때마다 "저는 누구인지" 다시 설명해야 하는 것. 오늘은 그 문제를 해결하는 기능을 이야기합니다. 클로드와 대화를 하다 보면 신기한 경험을 합니다. "저번에 만들어준 블로그 CSS 말인데요"라고 했는데, 클로드가 정확히 기억하고 있는 경우. 반대로 새 대화를 열었더니 어제 한 이야기를 하나도 모르는 경우. 이 차이는 어디서 올까요? 답은 메모리 입니다. 클로드에는 대화가 끝난 뒤에도 살아남는 기억 체계가 있습니다. 이것을 이해하면 클로드와의 협업이 완전히 달라집니다. 매번 같은 설명을 반복하는 대신, "나를 아는 AI"와 바로 일을 시작할 수 있으니까요. 1. 대화는 휘발된다 — 왜 메모리가 필요한가 AI 챗봇의 근본적인 한계는 대화가 끝나면 모든 맥락이 사라진다 는 것입니다. 이것은 클로드만의 문제가 아닙니다. ChatGPT든 Gemini든, 기본적으로 AI는 "지금 이 대화"만 기억합니다. 클로드가 똑똑하게 느껴지는 건 대화 안에서 문맥을 잘 추적하기 때문입니다. 하지만 새 대화를 시작하면? 백지 상태. 여러분의 이름도, 직업도, 어제 만들어달라고 한 코드의 스타일도 모릅니다. 😤 메모리 없는 세계 "안녕 클로드, 블로그 글 써줘." "네! 어떤 블로그인가요? 주제는 무...
続きを読む

블로그 자동화 첫걸음 — Blogger v3 API 정복기 [클로드 어디까지 써봤니 EP 07]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 07 블로그 자동화 첫걸음 — Blogger v3 API로 첫 자동 게시 완성하기 클로드의 친구 · 2026년 4월 14일 ◀ EP 06: Guides 완전 정복 | 📚 EP 07 | EP 08: CSS 한 번 쓰고 열두 번 쓰기 ▶ 지난 EP 06에서는 AI를 조종하는 5가지 레버(Guides)를 완전 정복했습니다. 이번 에피소드에서는 드디어 블로그 자동화의 핵심 기술을 만납니다. 클로드에게 "이 글 블로그에 올려줘"라고 말하면 실제로 포스트가 올라가는 마법 — Blogger v3 API입니다. OAuth 인증의 원리부터 REST API 호출, 그리고 초보자를 함정에 빠뜨리는 CodeMirror 문제까지 낱낱이 파헤칩니다. 1. "그냥 붙여넣으면 안 되나요?" — 수동 게시의 한계 블로그 자동화를 처음 생각한 사람들은 대부분 이런 상상을 합니다. "클로드가 HTML을 만들면, 내가 복사해서 붙여넣으면 되잖아?" 맞습니다. 처음 한두 번은요. 하지만 블로그를 5개, 10개 운영하고, 매일 2~3편씩 올려야 한다면 이야기가 달라집니다. 클로드의 친구도 처음엔 그렇게 했습니다. HTML을 복사하고, 블로그 관리 화면을 열고, HTML 모드로 전환하고, 붙여넣고... 이 반복 작업이 하루에만 40분을 잡아먹었습니다. ✏️ 계산해보면: 1편 게시에 5분 × 하루 8편 = 40분 × 30일 = 매달 20시간 낭비 20시간이면 새로운 에피소드 10편을 쓸 수 있는 시간입니다. 수동 게시는 처음엔 "어렵지 않다"고 느끼지만, 규모가 커지면 반드시 병목이 됩니다. 이 병목을 제거하는 열쇠가 바로 Blogger v3 API 입니다. 2. API란 무엇인가 — 식당 비유로 이해하기 API(Application Programming Interfa...
続きを読む