🎓 Week 6: AI 코딩 (Cursor) + 스토어 기술적 최적화
🎯 이번 주 학습 목표
- AI 코드 에디터인 Cursor를 활용하여 코딩을 전혀 몰라도 스토어의 테마를 내 입맛대로 커스텀한다.
- 스토어의 로딩 속도를 최적화하고 기술적 방어막(배송 추적 등)을 세팅한다.
- 고객의 이탈률(Bounce Rate)을 줄이기 위한 모바일 중심 UI/UX 배치를 완료한다.
⏰ 타임라인 (총 2.5시간)
- 0:00 - 0:10 (10분): 5주차 과제(샘플 주문 내역 및 상세페이지) 리뷰
- 0:10 - 0:40 (30분): [이론] 이커머스 모바일 전환율(CVR)의 비밀 & 기술적 SEO
- 0:40 - 0:50 (10분): ☕ 쉬는 시간
- 0:50 - 2:10 (80분): [실습] Cursor 에디터 체험, Track123 세팅, 결제 테스트
- 2:10 - 2:30 (20분): Q&A 및 6주차 과제 안내
📖 이론 파트 (0:10 - 0:40)
1. 모바일 전환율(CVR)이 모든 것을 결정한다
광고를 돌리면 트래픽의 90% 이상이 스마트폰으로 들어옵니다. 모바일에서 내 스토어를 열었을 때, 첫 화면(스크롤 내리기 전)에 'Add to Cart(장바구니 담기)' 버튼이 안 보인다면? 고객의 절반은 귀찮아서 그냥 나갑니다. 이를 막기 위해 Sticky Add To Cart(스크롤을 내려도 따라다니는 구매 버튼) 기능을 넣을 겁니다.
2. 코딩 없는 코딩: Cursor AI 에디터 소개
예전엔 쇼피파이 테마(Liquid 코드)를 수정하려면 외주 개발자에게 수십만 원을 줬습니다. 하지만 지금은 Cursor라는 AI 에디터를 켜고 "장바구니 버튼 색깔을 깜빡거리는 빨간색으로 바꿔줘"라고 치면 1초 만에 코드를 고쳐줍니다. 오늘은 개발자의 뇌를 빌려 쓰는 법을 배웁니다.
Cursor 3 (2026.4.2 출시) 핵심 신기능
| 기능 | 설명 | 1인 셀러 활용 |
|---|---|---|
| Composer 2 | 여러 파일 동시 편집 + 멀티스텝 작업 | "헤더 + 푸터 + checkout 페이지 톤 통일" 한 번에 |
| Agents Window | 별도 창에서 백그라운드 Agent 실행 (cursor-agent CLI) | Theme 자동 리팩터·번역·SEO 메타 일괄 적용 |
| 멀티모델 스위칭 | Sonnet 4.6 / Opus 4.7 / GPT-5 / Gemini 3 Pro 토글 | 단순 변경 = Sonnet, 복잡한 디버깅 = Opus |
| MCP 자동 로드 | ~/.cursor/mcp.json Shopify·Klaviyo·GA4 통합 | 자연어로 Shopify 재고 조회·Klaviyo 세그먼트 생성 |
| Background Agent | 메일·노션·Slack에서 트리거 → Cursor가 PR 생성 | 외주 개발자 0명, 본인이 PM이 됨 |
본 강의 권장: Week 6은 Cmd/Ctrl+K 단순 명령에 집중. Composer·Agents Window·MCP는 졸업 후 Phase 4 진입 시 학습. 단 Sonnet 4.6 모델 선택은 첫날부터 권장 (디폴트가 GPT-5-mini로 변경됨).
💻 실습 파트 (0:50 - 2:10)
Step 1. Cursor AI 에디터 찍어먹기 (30분)
💡 학습 팁: 초보자가 코딩 에러에 빠지면 패닉이 옵니다. 오늘은 아주 얕은 수준만 진행하고, 깊은 코딩은 졸업 후 천천히 학습하세요.
- 쇼피파이 관리자 패널 > Online Store > Themes > Edit Code로 들어갑니다.
theme.liquid또는base.css파일의 내용을 복사하여 Cursor 에디터에 붙여넣습니다.- Cursor 명령어(Cmd/Ctrl + K) 실습:
- "Add to Cart 버튼 코드를 찾아주고, 버튼 색상을 눈에 띄는 주황색(#FF6B00)으로 바꾸는 코드로 수정해 줘."
- "상품 페이지 하단에 'Powered by Shopify' 문구를 지우는 CSS 코드를 알려 줘."
- AI가 짜준 코드를 복사해서 쇼피파이에 다시 붙여넣고 저장한 뒤, 실제 화면이 바뀌는 마법을 체험합니다.
Step 2. 고객 CS 방어를 위한 Track123 세팅 (30분)
- 쇼피파이 App Store에서 Track123 (또는 17track) 무료 앱을 설치합니다.
- 스토어 메인 메뉴 상단(Navigation)에 "Track Your Order" 메뉴를 추가하고 이 앱과 연결합니다.
- 효과: 배송이 오래 걸리기 때문에 고객들이 "내 물건 어디 있냐"고 메일을 엄청 보냅니다. 이 앱을 메뉴에 달아두면 고객이 직접 송장번호를 치고 배송 조회를 하므로 CS 문의가 절반 이하로 줄어듭니다.
Step 3. 가짜 결제 테스트 (Dummy Order) (20분)
- 쇼피파이 결제 설정(Payments)에서 **Bogus Gateway(테스트 결제 모드)**를 켭니다.
- 직접 모바일로 자기 스토어에 들어가서 장바구니에 담고 결제창(Checkout)까지 넘어가는 과정을 테스트하세요.
- 테스트용 카드번호(1 입력)를 넣고 결제가 성공적으로 승인되는지 확인합니다.
❓ 자주 묻는 질문 (FAQ)
Q: Cursor 말고 그냥 쇼피파이 앱스토어에서 앱을 깔면 안 되나요?
기능을 추가할 때마다 앱을 깔면 매월 구독료가 만 원, 이만 원씩 눈덩이처럼 불어납니다. 게다가 앱을 많이 깔수록 스토어 로딩 속도가 끔찍하게 느려집니다. 색상 변경, 폰트 크기 조절, 단순한 팝업 같은 건 Cursor로 코드 몇 줄 수정하는 게 돈도 아끼고 속도도 빠릅니다.
Q: 결제 페이지(Checkout) 디자인은 왜 못 바꾸나요?
쇼피파이는 보안상의 이유로 최고 등급 요금제(Shopify Plus, 월 수백만 원)가 아니면 결제 페이지의 코드를 수정하지 못하게 막아두었습니다. 기본으로 제공되는 로고 삽입과 컬러 변경 정도만 해도 충분히 안전해 보입니다.
📝 6주차 과제 안내
- 모바일에서 내 스토어를 캡처해서 지인 3명에게 보여주고 "사기 사이트 같아? 살 마음이 들어?"라고 솔직한 피드백을 받아오세요.
- 부족한 점을 수정하여 라이브 스토어 구축을 100% 완료하세요. 다음 주부터는 드디어 '마케팅'에 들어갑니다!