앱·툴(서드파티) /Shopify 개발·커스터마이징 /테마 개발(Liquid)

테마 개발(Liquid)

근거 12건 · v6 · 2026-09-20 · claude-opus-4-8

테마 개발(Liquid) — 전체 개요

Shopify 스토어의 프론트엔드(고객이 보는 화면)를 만드는 방식 중 가장 표준적인 접근이 Liquid 기반 테마 개발이다 [S4][S5]. 이 분류는 Liquid 언어 자체, 로컬 개발 환경 구축(CLI·Theme Kit·VS Code), 실전 커스터마이징 기법, 기성/맞춤 테마 선택, 그리고 최근 생태계 변화(신규 필터, Tailwind 인수, Horizon 프레임워크)까지를 아우른다.

1. Liquid와 테마의 기본 개념

Liquid는 Shopify가 만든 오픈소스 템플릿 엔진이며, 모든 Shopify 테마의 기반이다 [S4][S5][S12]. HTML로 페이지 구조를 만들고, 방문하는 페이지/사용자에 따라 콘텐츠가 동적으로 바뀌도록 한다 [S5].
테마 = Shopify 스토어의 프론트엔드로, 사용자가 스토어 방문 시 상호작용하는 부분이다 [S4].
Shopify에서 스토어프론트를 만드는 방법은 세 가지로 정리된다 [S4]:
- Liquid 테마 — 가장 직관적. CMS(온라인 에디터), 호스팅(플랜에 포함), 서드파티 앱 생태계 통합을 기본 제공 [S4].
- Hydrogen — Shopify의 React 프레임워크 [S4][S1][S8][S11].
- Headless API(Storefront API) — 원하는 프론트엔드 기술을 자유롭게 연결 [S4].
Liquid의 서버 실행 특성 [S5]:
- 장점: 클라이언트에 이미 콘텐츠가 채워진 HTML을 전송 → 추가 API 호출 대기 없음, JS 복잡도 감소 [S5].
- 한계: 서버에서만 실행되어 사용자 디바이스 정보를 모름. "모바일/데스크톱 여부에 따라 섹션 렌더링" 같은 작업은 Liquid로 불가, 로드 후 JS로 처리해야 함 [S5].
테마 개발에는 HTML·CSS·JavaScript 기본 지식이 필수다. Liquid는 이들과 함께 동작한다 [S4][S1].

테마를 만드는 두 가지 목적 (2023 정보)

특정 클라이언트/비즈니스용 테마 — 가이드라인이 느슨함. 커스텀 폰트 사용 가능, 색상 수 자유 [S4].
App Store 배포용 테마 — 엄격한 가이드라인 준수 필요. 예: 커스텀 폰트 사용 불가, 색상 시스템 최소 4색 필요 [S4].

2. Liquid 문법 핵심 (S5, 2023-11 기준)

출력 vs 로직 구분 [S5]:
- 값 출력(변수 프린트): {{ ... }} (중괄호 두 쌍)
- 로직(변수 선언·if·for·switch): {% ... %}
변수 선언: {% assign my_value = "hello world" %} [S5]. HTML을 변수에 담을 때는 capture 블록 사용 ({% capture html %} ... {% endcapture %}) — 내부에서 변수·조건·반복 사용 가능, 결과는 문자열로 취급 [S5].
화이트스페이스 제어: 태그에 대시({%- -%})를 붙이면 렌더링 시 생기는 빈 줄이 제거된다. 클라이언트에 미세하게 적은 코드 전송(성능 영향은 미미). Dawn(Shopify 오픈소스 팀) 코드에서 사용됨. 핵심은 코드베이스 전체에서 하나로 일관되게 쓰는 것 [S5].
데이터 타입: string / number(정수·부동소수) / boolean / nil(=null, 확장이 자동 변환) / array / object [S5].
- 숫자로만 된 문자열도 Liquid는 문자열로 취급 → 비교 연산 시 주의 [S5].
- 배열/객체는 직접 선언 불가, Shopify가 제공하는 것만 접근 가능(예: product.tags, product.title). 인덱스 0부터, .size 속성, for ... in으로 순회 [S5].
- 변수 상당수는 컨텍스트 의존적: product.tags는 홈페이지에선 빈 값, 상품 페이지에선 값이 나옴 [S5].
- 객체 커스텀 생성 불가 → 메타오브젝트가 우회책이나 Shopify 어드민에서 관리해야 함 [S5].
필터: 파이프 연산자. 예 {{ page.description | truncate: 150 }} (150자로 자름) [S5].
주석: {% comment %}...{% endcomment %}는 서버에 남아 클라이언트로 전송 안 됨(권장). HTML 주석()은 클라이언트로 전송되나 렌더링만 안 됨 → 민감 정보 노출 위험이 있어 Liquid 주석이 선호됨 [S5].
조건문: {% if %} / {% else %} / {% endif %}. else는 선택, if와 endif는 필수 [S5]. 재고 확인 예시 [S12]:
```
{% if product.available %}
<button>장바구니에 담기</button>
{% else %}
<p>품절</p>
{% endif %}
```
스니펫 렌더링: {% render 'tutorial' %} — 대상 파일은 반드시 snippets 폴더에 있어야 함. sections 등 다른 폴더에 두면 에러 [S5].

Liquid로 할 수 있는 작업 정리 [S12]

태그·객체·필터로 동적 데이터 출력(예: {{ product.title }})
재사용 스니펫·레이아웃 구축
조건부 로직(예: 할인 중일 때만 배지 노출)
커스텀 코드로 테마 템플릿 확장·재정의

3. 신규 배열 필터 (2025-02 도입, S6)

2025년 2월 Liquid에 배열 필터 4종이 추가됨 [S6]:

| 필터 | 동작 | |------|------| | find | 조건에 맞는 첫 번째 항목 반환 | | find_index | 조건에 맞는 첫 항목의 인덱스 반환 | | has | 조건에 맞는 항목이 있으면 true | | reject | 조건에 맞는 항목을 제외한 배열 반환 |

사용 예: {% assign heading_block = section.blocks | find: 'type', 'heading' %} [S6].
기존엔 for 루프 + break 등 여러 줄로 짜야 했던 로직을 한 줄로 대체 — "코드 작성 방식을 근본적으로 바꾸진 않지만 삶의 질(QoL)을 개선"하는 성격 [S6].
참고로 where 필터는 이전부터 존재했고, 조건에 맞는 모든 항목을 배열로 반환한다 [S6].
한계(도입 시점 기준): 중첩 속성(예: settings.button_label) 미지원 → has/find 등으로 중첩 속성 검사 시 false 반환. for 루프 방식으로는 가능. Shopify 공식 Liquid 레포에 중첩 속성 지원 오픈 이슈 존재(영상 녹화 시점 미구현) [S6].

4. 로컬 개발 환경 구축

두 가지 도구 계열이 자료에 등장한다. 시점·권장도가 다르므로 병렬로 제시한다.

(A) Shopify CLI — 최신·권장 흐름 (S4, 2023-11 / S11, 2026)

Shopify CLI: 테마를 로컬로 clone, 핫 리로드 개발 서버 실행, live/스테이징 테마로 push 가능 [S4].
설치: OS별 안내. 저자는 Mac에서도 npm 설치를 선호 — Homebrew는 이전 버전 롤백이 어렵기 때문(최신 버전이 뭔가를 깨뜨렸을 때 npm이 롤백 용이). npm 사용 시 Ruby·git 필요, Homebrew 사용 시 Node·Ruby·git 자동 설치 [S4].
Partners 계정 → 개발 스토어 생성 흐름: 개발 스토어는 플랜 미가입 상태로 테스트·학습용, 테스트 데이터·베타 기능 접근 가능. 테스트 데이터로 시작하면 전송 불가(non-transferable) → 클라이언트에 이관하려면 데이터 없이 시작해야 함 [S4].
VS Code Shopify Liquid 확장(공식): 구문 강조, language server(자동완성·linking·포매팅) 제공 [S4].
주요 명령 [S4][S5]:
- shopify theme pull -c development (또는 -e) — 테마 내려받기
- shopify theme dev -e development — 로컬 서버(기본 localhost:9292), 핫 리로드
- shopify theme push -e development — 스토어(또는 live)로 반영
- shopify.theme.toml 환경 파일로 스토어를 고정 지정 → 매번 store 플래그 지정/마지막 스토어 오사용 방지 [S4].
Shopify는 엄격한 폴더 구조를 요구함(layout/sections/snippets/templates/assets 등) [S4][S5][S11].

(B) Theme Kit — 구형 도구 (S2, 2023-10, Windows)

설치: Chocolatey 설치 → choco로 Theme Kit 설치. PowerShell 실행 정책이 AllSigned여야 함 [S2].
인증: 스토어 → Settings → Apps and sales channels → Develop apps → 새 앱 생성 → Admin API scope에서 테마 읽기/쓰기 권한 부여 → API credentials에서 앱 설치 후 토큰 발급 [S2].
config.yml 작성(development: password/theme_id/store) 후 theme download로 다운로드, theme watch로 변경 감지·자동 업로드. live 테마 대상이면 allow_live 추가 필요 [S2].

S3(Code Pirates Academy)도 테마 다운로드·templates·featured collection 등을 다루나 자막이 대부분 손상되어 구체 내용 확인 불가 [S3].

버전 관리(Git)의 필요성 (S4)

여러 명이 같은 스토어를 작업할 때, 로컬 변경을 push하면 콘텐츠 편집자가 최근 바꾼 내용을 실수로 덮어쓸 수 있다 [S4].
Shopify 콘텐츠는 테마에 연결됨 — 텍스트가 index.json 등 Json에 저장되며 섹션에 붙는다. push 시 파일 전체가 override됨 [S4].
따라서 테마를 Git에 연결하는 것이 권장됨 [S4].

5. 실전 커스터마이징 레시피 (자료에 등장한 구체 기법)

Canonical(정규 URL) 문제 해결 (S9, 2026-02)

layout/theme.liquid의 여는 <head> 태그 바로 아래에 canonical link 요소가 있어야 함: <link rel="canonical" href="{{ canonical_url }}"> — 없거나 위치가 어긋나면 추가·이동 [S9].
코드 검색에서 within:을 검색 → 상품 링크가 within collection 컨텍스트로 생성돼 collection/.../products/... 형태의 대체 URL을 만드는 지점을 찾아, 해당 부분을 제거해 링크가 상품 canonical URL로 직행하게 함 [S9].
목적: 중복 콘텐츠 감소, 랭킹 신호 통합. 상품 그리드·컬렉션 템플릿·공유 스니펫 전반에서 처리 [S9].

"Powered by Shopify" 푸터 문구 제거 (S10, 2026-02)

Dawn 테마: sections/footer.liquid에서 powered 검색 → 해당 줄을 삭제하지 말고 {% comment %} ... {% endcomment %}로 주석 처리(원복 용이) [S10].
Horizon 테마: 섹션이 아니라 블록이라 위치가 다름 → blocks/footer copyright.liquid(또는 검색)에서 if 문 전체를 주석 처리 [S10].
그 외 테마도 유사 방식: 푸터 파일에서 powered by를 찾아 주석 처리 [S10].
베스트 프랙티스: 테마 복사본을 만들어 먼저 편집·미리보기 후 문제 없으면 게시하거나 라이브 테마에 동일 적용 [S10][S12].

메타필드 활용 (S12, 2026 / S5)

기본 상품 필드에 없는 커스텀 데이터를 저장·노출, 테마를 직접 수정하지 않고 기능 확장 [S12].
활용 예: 사이즈 표·취급주의, 재입고 예정일/사전주문 정보, '비건'·'친환경' 라벨, 블로그/랜딩 전용 필드 [S12].
동작: 어드민에서 네임스페이스·키 정의(예: details.material) → 리소스에 값 할당 → Liquid에서 호출 [S12]. (메타오브젝트는 커스텀 객체의 우회책이나 어드민 관리 필요 [S5].)

6. 테마 편집기 & 노코드 커스터마이징 (S12, 2026)

코드 없이 가능한 작업 계층 [S12]:

빠른 수정: 글꼴·로고·배너·이미지·배지·재고 표시 등
블록 기반 레이아웃: 최신 테마의 모듈형 구조를 드래그앤드롭으로 재배치/숨김
AI 지원 커스터마이징: Horizon 테마의 2025년 여름 업데이트로 텍스트 프롬프트만으로 디자인 블록 즉시 생성(예: "제품 갤러리 아래 카운트다운 타이머 추가")
고급 커스터마이징: 개발자가 Liquid·스크립트·API·메타필드로 확장

편집기 접근: 관리자 → 온라인 스토어 → 테마 → 사용자 맞춤 설정 [S12]. 주요 도구: 섹션/블록 사이드바, 전역 테마 설정(글꼴·색상·파비콘·결제 브랜딩), 기기 미리보기, 앱 임베드, 동적 소스, 프리셋/스타일, 언어 편집기, 접근성·SEO 설정 [S12].

실무 팁 [S12]: 홈페이지부터 시작 · 모바일 우선(트래픽 절반 이상 모바일) · 새 시도 전 테마 복제(테마 → 작업 → 복제) · 프리셋 활용 · 파일 용량 주의.

파일 용량 제한 (사실값, S12, 2026)

테마 업로드: 50MB, 개별 파일: 20MB [S12].
이미지: 개당 1MB 미만(권장 500KB 이하), 권장 포맷 — 사진 JPEG, 투명 그래픽 PNG, 로고/아이콘 SVG [S12].

앱 임베드 (S12)

고객에게 안 보이는 코드나 떠 있는 UI(예: 채팅 말풍선)를 추가. 테마 편집기에서 관리, 모든 테마 버전과 호환, 한 번 설정하면 노출되는 모든 페이지에 자동 반영 [S12]. 예: Ora Organic이 Gorgias 기반 실시간 채팅 임베드 사용 [S12].

7. 기성 테마 vs 맞춤 제작 테마 (S12, 2026 / S8)

가격·특성 (사실값, S12)

| 구분 | 기성 테마 | 맞춤 제작 테마 | |------|-----------|----------------| | 비용 | $200~$400 (29만~59만원, 일회성) | $5,000(737만원) 이상 | | 출시 소요 | 며칠~수주 | 수주~수개월 | | 유연성 | 프레임워크 한도 내 | 무제한 | | 유지보수 | 테마 개발자 처리·자동 업데이트 | 전담 개발자 필요·자동 업데이트 없음 | | 지원 | 테마 개발자 + Shopify | 자체 개발자/대행사 |

테마 스토어 가격(사실값, 변화 이력 유의): S12 본문은 유료 테마를 두 곳에서 다르게 기술 — "$180~$350(26만~52만원), 800개 이상 제공"과 "$200~$400(29만~59만원)"이 함께 등장 [S12]. 무료 테마는 20개 이상 [S12].
기본 제공 테마: Online Store 2.0 여부에 따라 Debut 또는 Dawn [S12]. Dawn은 오픈소스라 코드·변경 이력·PR 컨텍스트를 GitHub에서 볼 수 있어 학습 출발점으로 좋음(2023 시점 2.2k stars) [S4].
앱 스토어: 8,000개 이상 앱 등록(스토어 디자인·마케팅·주문/배송 등) [S12].

커스텀 테마 vs 앱 선택 관점 (의견형, 병렬 제시)

maeum.io [S8]: 특정 머천트만의 시각/UX 변경이면 테마, 여러 스토어 확장이나 어드민에 상주해야 하는 기능이면 앱. Hydrogen vs Liquid는 — "성능 중요한 헤드리스 + 복잡 콘텐츠면 Hydrogen, 표준 테마에서 빠른 반복이면 Liquid. 대부분 머천트는 아직 Hydrogen 불필요" [S8].
Shopify 공식 [S12]: 자금 자체 조달·기술 보유·간단 기능만 필요하면 직접 설정 적합. 복잡 기능·디자인 필요 시 전문가 고용이 오히려 비용 효율적일 수 있음. Shopify Partners(Experts)로 개발자 연결 가능 [S12][S7].

결제 페이지 커스터마이징 (사실값, S12)

표준 결제 페이지 설정은 Basic 요금제부터 지원. 레이아웃·동작을 바꾸는 완전한 고급 결제 커스터마이징은 Shopify Plus 전용 [S12].
참고: Shopify Functions(카트 검증·커스텀 할인 등 백엔드 로직 확장)와 Checkout 확장은 Shopify Plus 플랜에서 이용 가능(2023 시점, 일부는 developer preview) [S4].
Baymard Institute: 결제 단계를 브랜드에 맞게 설정한 기업이 전환율을 최대 **35%**까지 올림 [S12].

8. 생태계 변화: Tailwind CSS 인수 (S11, 2026)

⚠️ 아래는 단일 블로그(all-lifes.com) 출처의 미래·전망 성격 서술이며, 인용된 통계도 해당 글 기재값이다. 교차 검증 필요.

Shopify가 Tailwind CSS를 인수 — 목표는 개발자 경험(DX) 개선과 디자인 시스템 표준화 [S11].
기존 테마 개발은 Liquid + SCSS 중심이었고, 대규모에서 CSS 관리 복잡성·클래스 충돌·불필요 코드 증가 문제가 있었다 [S11]. Tailwind는 유틸리티 클래스 기반으로 이를 완화하고, 필요한 CSS만 번들링해 최종 번들 크기를 줄인다 [S11].
Hydrogen + Dawn에 우선 통합. 2026년 3분기부터 Hydrogen 프로젝트 생성 시 Tailwind CSS v4.1이 기본 옵션으로 제공 [S11].
사실값(글 기재): Shopify는 175개국 460만+ 웹사이트 호스팅(2026 Q2), Tailwind는 2025년 기준 개발자 600만+·GitHub 스타 9만+ [S11].
커뮤니티 반응(의견, 병렬) [S11]:
- 긍정: 워크플로우 간소화, 수작업 Tailwind 통합 번거로움 해소(레딧·해커뉴스 지지).
- 우려(국내 커뮤니티): 오픈소스 독점화·유료 전환 가능성, 중소·프리랜서 비용 부담.
실사용 주의점(의견) [S11]: 초기 학습 곡선이 예상보다 가파름, CSS 기본기 없으면 커스터마이징 어려움. Liquid + Tailwind 병용 시 동적 클래스 생성 로직 조정에 디버깅 시간 소요. 한국 특수 제약 — 한국어 심층 자료 부족, 레거시/결제 솔루션과 스타일 충돌, (필요 시) IE 대응 부담.
Bootstrap/Polaris 대비(의견) [S11]: Bootstrap은 빠른 프로토타이핑, Tailwind는 디자인 자유도·번들 최소화로 고성능·독창 디자인에 적합, Polaris는 Shopify 앱 개발용 일관성 강점이나 커스터마이징 제약. 인수 후 Polaris를 Tailwind 유틸리티로 오버라이드하는 가이드 제공 전망.
테마에 Tailwind v4.1 적용 체크리스트 [S11]:
1. shopify theme init [테마명]로 Dawn 기반 프로젝트 생성(Shopify CLI 3.x)
2. npm install -D tailwindcss@latest postcss autoprefixer
3. npx tailwindcss init -p
4. tailwind.config.js의 content에 Liquid 경로 추가(./layout/*.liquid, ./sections/*.liquid, ./snippets/*.liquid, ./templates/*.liquid, ./assets/*.js)
5. assets/tailwind.css에 @tailwind base; components; utilities; 추가 후 theme.liquid에서 임포트
6. package.json에 build/watch 스크립트 추가(tailwindcss -i ... -o ./assets/theme.min.css --minify / --watch)

9. Horizon 프레임워크 (S12, 2026)

Shopify의 새 Horizon 프레임워크는 테마 모듈화를 강화해, 기본 상태에서 브랜드화된 완성형 스토어로 빠르게 전환 [S12].
오늘날 기성 테마는 Horizon 덕분에 과거 맞춤 제작이 필요했던 수준의 설정 자유도를 제공 [S12].
AI 블록 생성(2025 여름 업데이트)이 Horizon에 탑재됨 [S12].

10. 시장·직무 관점 (참고)

국내 채용에서 요구하는 Shopify 테마 개발 스택: Liquid, HTML5, CSS(SCSS), JavaScript(ES6+), React, Polaris, Hydrogen, Storefront/Admin API, GraphQL/REST, Git/GitHub, Figma [S1]. 업무는 테마 커스터마이징·API 기능 확장·앱 개발/연동·성능 최적화·SEO·반응형·외부 시스템(ERP/WMS) 연동 [S1].
대행사 서비스 범위: 테마 개발/커스터마이징, 앱 개발, 마이그레이션, SEO, 유지보수 [S7]. 프로덕션급 개발 산출물로 커스텀 앱·Hydrogen+Remix 헤드리스·Liquid 테마 커스터마이징·App Store 제출 등 [S8].

시점 요약 (정보 신선도)

2023년 정보: 로컬 개발 흐름(Theme Kit[S2], CLI·Dawn·Git[S4]), Liquid 문법 전반[S5], App Store 테마 가이드라인[S4].
2025년 정보: 신규 배열 필터(find/find_index/has/reject)[S6], Horizon AI 블록 생성(여름 업데이트)[S12].
2026년 정보: canonical 수정[S9], Powered by Shopify 제거(Dawn/Horizon)[S10], Tailwind 인수·v4.1[S11], 테마 편집기·메타필드·기성/맞춤 가격·파일 용량 제한·Horizon[S12].

출처

[S1] www.wanted.co.kr — 콘센트릭스 Shopify 개발 포지션 — https://www.wanted.co.kr/wd/315823 (수집 2026-08-13)
[S2] Fayyaz Ahmed | Shopify Developer — "Shopify Theme Kit 설치"(Windows) — https://youtu.be/GP_Nwn_3OUw (게시 2023-10-11)
[S3] Code Pirates Academy — Shopify 테마 튜토리얼(자막 손상) — https://youtu.be/c_fFynBveag (게시 2023-07-05)
[S4] Stacking Context — Shopify 테마 개발 시리즈(개요·CLI·Dawn·Git) — https://youtu.be/1dznKWXkL3E (게시 2023-11-13)
[S5] Stacking Context — "Liquid 탐구"(문법·데이터타입·필터·capture) — https://youtu.be/Oc9zCbsN5Q4 (게시 2023-11-16)
[S6] Stacking Context — "새 배열 필터(2025-02)" — https://youtu.be/ORlrp_1xvuY (게시 2025-02-17)
[S7] kr.linkedin.com — Top Shopify Development Companies(Aron Web Solutions) — https://kr.linkedin.com/pulse/top-shopify-development-companies-choosing-right-partner-chauhan-uphfc (수집 2026-08-13)
[S8] maeum.io — Shopify Development 서비스(테마 vs 앱, Hydrogen vs Liquid) — https://maeum.io/services/shopify-development (수집 2026-08-14)
[S9] Tutorial Toolkit — "Shopify canonical 이슈 수정" — https://youtu.be/VsskvJS4Dq4 (게시 2026-02-16)
[S10] Lee Ruane | Shopify CRO Specialist — "Powered by Shopify 제거(Dawn/Horizon)" — https://youtu.be/hb0fY1nDiao (게시 2026-02-22)
[S11] all-lifes.com — "Shopify의 Tailwind 인수 후 개발자 변화" — https://all-lifes.com/shopify-tailwind-acquisition-impact (수집 2026-09-14)
[S12] www.shopify.com — "스토어 테마 커스터마이징 가이드"(테마 편집기·Liquid·메타필드·Horizon) — https://www.shopify.com/kr/blog/customizing-store-theme (수집 2026-09-20)