쇼피파이 좋잖아요? 머리 아프게 A부터 Z까지 다 개발할 필요가 있나요? 이번 편에서는 웹 빌더의 코드 편집 기능을 이용해 웹 사이트를 커스터마이징하는 방법에 대해 이야기합니다.
지금까지 웹 빌더의 태생적 단점들에 대해 이야기해 봤습니다. 하지만 이미 웹 빌더로 서비스, 쇼핑몰을 운영하고 있거나 직접 서버를 관리하는 게 번거로운 사람들도 있습니다. 특히, 웹 빌더가 제공하는 결제 시스템, 배송 및 재고 관리 시스템은 그 어떤 서비스보다 더 정교하게 설계되어 있습니다. 웹 빌더가 제공하는 기능을 누리면서 부족한 디자인, 상품 소개 페이지 관리, AI 활용을 보완한다면 정말 좋지 않을까요?
웹 빌더 서비스가 코드 편집과 데이터 API를 지원하는지에 따라 보완 가능 정도가 다릅니다. 이번 편에서는 이 두 가지를 모두 지원하는 쇼피파이(Shopify)에서 커스텀 코드를 활용해 부족한 점을 보완하고 나만의 쇼핑몰을 운영하는 방법에 대해 이야기합니다.
1. 무엇을 코드로 편집할 수 있나요?
우리가 오늘 직접 코드를 작성하고 관리할 대상은 두 가지입니다.
- 페이지 UI
- 상품 소개 (상품 페이지에 포함된)
페이지 UI는 쇼피파이 온라인 스토어 코드 편집 메뉴에서 편집합니다. 우리의 커스터마이징 코드를 삽입하고, 고객이 특정 주소(URL)에 접속하면 이 코드를 보여주는 방식을 이용합니다.
상품 소개 페이지는 각 상품 소개 본문 편집 상단 바 우측의 HTML 보기 버튼을 눌러서 편집합니다. HTML 보기 화면에서 미리 작성해 둔 상품 소개 페이지 HTML을 삽입하면 상품 소개 페이지에 적용됩니다.
그 외의 페이지도 코드 편집기로 얼마든지 편집할 수 있지만, 결제, 배송 등의 페이지는 쇼피파이 서버와 밀접하게 연동되어 있기 때문에 코드 작성 난이도가 매우 높은 편이고 케이스가 다양하기 떄문에 오늘 다루지는 않을 예정입니다. 이런 페이지는 쇼피파이 앱을 활용하는 것이 정신 건강에 더 좋을 것 같다는 것이 개인적인 의견입니다.
| 기존 방식 | 문제점 | 난이도 | 왜 하나요? | 편집 방법 | |
| 페이지 UI | 테마 편집기 | 제한된 디자인 | 중간 | 자유로운 디자인 | 코드 편집기 및 API |
| 상품 소개 | 상품별 이미지 업로드 | 제한된 디자인 이미지 관리의 어려움 | 낮음 | 자유로운 디자인 편리한 관리 | 상품별 HTML 편집기 |
| 그 외 | 쇼피파이 앱 | 다수의 유료 | 매우 높음 | 극한의 커스터마이징 | 코드 편집기 및 API |
2. 준비물
웹 개발 언어 및 프레임워크
쇼피파이 코드를 편집하려면 HTML과 자바스크립트를 다룰 수 있어야 합니다. 여기에 더해 쇼피파이 전용 언어인 Liquid를 작성해야 하지만, 간단한 코드만 추가하면 되기에 큰 걱정 안 하셔도 됩니다. HTML, 자바스크립트 또한 AI의 도움을 받을 것이니 어렵지 않을 겁니다.
순수 HTML, 바닐라 자바스크립트
순수 HTML과 바닐라 자바스크립트로 쇼피파이를 커스터마이징하려면 엄청나게 많은 줄의 코드를 작성해야 합니다. 쇼피파이의 데이터 API인 Storefront API를 연동하려면 더욱 복잡해집니다.
모던 웹 프레임워크
데이터와 UI를 쉽게 연동시키는 방법을 데이터 바인딩이라 하는데, 이 기능은 모던 웹 프레임워크가 기본적으로 제공합니다.
그렇다고 모든 모던 웹 프레임워크가 쇼피파이 커스터마이징에 편리한 것은 아닙니다. 각 프레임워크의 특징이 이 작업과의 궁합을 결정합니다. 우리가 검토해야 할 핵심 요소는 두 가지로 요약할 수 있습니다.
1. 코드 번들이 가벼운가? → 웹 빌더의 느린 속도를 악화시키지 않도록
2. 순수 HTML을 관리하기 편한가? → 상품 소개를 쉽게 반영할 수 있도록
가장 인기 있는 네 프레임워크 Angular, Vue, React, Svelte를 비교해 보겠습니다.
| 페이지 UI 적합도 | 이유 | 상품 소개 적합도 | 이유 | |
| Angular | 나쁨 | 번들 크기 큼 | 나쁨 | 순수 HTML 작성은 가능하지만, 개발 환경에서 컴포넌트로 구성하려면 별도의 ts 파일 필요 |
| React | 중간 | 번들 크기 중간 | 매우 나쁨 | JSX의 문법이 HTML와 달라서 개발 환경과 쇼피파이 환경 간 변환이 필수적 |
| Vue | 중간 | 번들 크기 중간 | 좋음 | 순수 HTML 컴포넌트 구성 가능 |
| Svelte | 좋음 | 번들 크기 작음 | 좋음 | 순수 HTML 컴포넌트 구성 가능 |
| 순수 HTML | 매우 나쁨 | 데이터 바인딩 직접 구현 필요 | 중간 | 상품 소개로 들어갈 Body 영역만 별도 추출 필요 |
요약하자면, Svelte 또는 Vue가 쇼피파이 커스터마이징 코드를 작성하고 관리하기에 가장 적합한 프레임워크입니다.
AI 코딩 도구
Codex, Antigravity, Claude Code 등 AI 코딩 도구를 사용하는 것이 좋습니다. AI가 없는 코드 편집은 대단히 수고스러운 작업이고 이런 수고를 들일 바에야 쇼피파이 디자인 도구를 쓰는 게 나을 겁니다. AI 코딩 도구는 이 모든 작업을 대화형 작업으로 단순화하여 우리가 쇼피파이를 더 다채롭게, 더 편하게 관리할 수 있도록 도와줍니다.
3. 주의사항
쇼피파이는 코드 버전 관리를 해 주지 않는다!
쇼피파이 코드 편집 도구는 매우 단순한 텍스트 편집기입니다. 잘못된 코드를 업로드하거나 수정할 경우에 이를 복구할 방법이 따로 제공되지 않습니다.
따라서 커스터마이징 코드를 Git을 활용해 개별적으로 관리할 필요성이 있고, 쇼피파이에 코드를 적용할 때도 이전 버전의 코드를 백업해 두는 것을 권장드립니다.
코드로 추가된 UI는 쇼피파이 테마 편집 기능으로 편집할 수 없다.
따라서 코드로 UI를 추가했다면 이 UI는 반드시 코드로 수정해야 합니다. AI 코딩 도구를 이용하면 웬만한 수정은 쇼피파이 테마 편집 기능으로 수정하는 것보다 더 간단하게 수정할 수 있습니다.
커스터마이징 페이지는 직접 번역해야 한다.
번거로운 부분이 있다면, 쇼피파이가 제공하는 모든 기본 기능들이 이 커스텀 UI를 읽고 수정하지 못하기 때문에 쇼피파이 기본 번역 앱도 이 UI의 텍스트를 인식하지 못한다는 점입니다. 따라서 언어별 커스텀 UI도 직접 만들어야 합니다.
사실 오히려 좋은 일일 수도 있습니다. 쇼피파이 기본 번역 앱은 자동 번역을 최대 2개까지만 지원하고 그 이상의 언어는 직접 번역하거나 쇼피파이 앱을 통해 유료로 번역해야 합니다. 하지만 우리에겐 AI가 있고, ‘이 페이지를 스페인어로 번역해줘’ 한마디만 명령하면 바로 번역 페이지를 얻을 수 있습니다. 번역 페이지를 적용하는 방법은 다음 게시글에서 자세히 설명해 드리겠습니다.
요소 단위 커스터마이징은 테마 편집에서 요소를 추가한 뒤 스타일만 변경하자.
페이지 전체를 번역하는 것은 언어별 URL에 맞춰 전체 페이지를 주입하면 되는 간단한 작업이지만, 요소 단위의 커스텀 UI를 번역하는 것은 어렵습니다. 따라서 요소 단위 커스텀 UI는 테마 편집 도구에서 먼저 커스텀 요소를 생성한 뒤에 CSS만 주입하는 것이 좋습니다. 예를 들어, 커스텀 버튼이 필요하다면 우선 커스텀 섹션과 하위 버튼을 생성한 뒤에 이 요소의 스타일만 코드 편집 도구를 사용해 수정합니다. 이렇게 하면, 쇼피파이 기본 번역 앱이 커스텀 요소의 텍스트를 인식하고, 추가 코드 없이 번역 버전을 바로 적용할 수 있습니다.
마치며
다음 게시글에서 모던 웹 프레임워크와 AI 코딩 도구를 이용해서 실제로 쇼피파이를 커스터마이징하는 방법을 이야기하겠습니다.