Liquid

정의

Liquid는 Shopify가 2006년에 자체 개발한 오픈소스 템플릿 언어입니다. HTML 마크업 안에 {% %}(로직)와 {{ }}(출력) 형태의 태그를 삽입해, 스토어의 상품·주문·고객·컬렉션 데이터를 실시간으로 렌더링합니다. Ruby 기반으로 만들어졌으며, Shopify 외에도 Jekyll, Salesforce Marketing Cloud 등에서 채택했습니다.

DTC 브랜드 관점에서 Liquid는 "쇼핑몰의 프론트엔드 두뇌" 입니다. 고객이 상품 페이지에 접속하는 순간, Liquid가 DB에서 재고·가격·옵션·리뷰 데이터를 끌어와 0.3~0.8초 내에 HTML을 완성합니다.

비유로 이해하기

Liquid를 "레고 조립 설명서" 에 비유해봅시다.

- 섹션(Section) = 레고 박스 (Header, Hero, Product Grid 등)

- 블록(Block) = 박스 안의 개별 브릭 (버튼, 이미지, 텍스트)

- Liquid 태그 = "3번 브릭을 2개 끼우세요" 같은 조립 지시문

- 스키마(Schema) = 각 브릭의 색상·크기를 바꿀 수 있는 설정판

즉, 개발자가 뼈대를 만들고, 머천다이저가 테마 에디터에서 값을 바꾸면 Liquid가 그 값을 실시간으로 HTML에 반영합니다.

핵심 문법 공식

{{ product.title }}                    → 출력 (Output)
{% if product.available %}             → 조건문 (Logic)
{% for variant in product.variants %}  → 반복문 (Loop)
{% assign cart_total = cart.total_price | money %}  → 변수 + 필터

필터(Filter) 체이닝 공식:

{{ 값 | 필터1: 파라미터 | 필터2 }}

예시:

{{ 12900 | times: 1.1 | round | money }}
→ 14190 (원화 표기)

Liquid vs 경쟁 언어 비교

항목	Liquid (Shopify)	Twig (WooCommerce)	Handlebars (BigCommerce)	React (Headless)
학습 난이도	낮음 (1~2일)	중간 (3~5일)	낮음	높음 (2~4주)
렌더링 방식	서버 사이드	서버 사이드	서버 사이드	클라이언트 사이드
실시간 재고 반영	즉시	즉시	즉시	API 호출 필요
테마 커스터마이징	에디터 내 가능	코드 수정 필요	에디터 내 가능	별도 빌드
평균 페이지 로드	0.6초	1.2초	0.9초	1.8초
DTC 적합도	★★★★★	★★★	★★★★	★★★★

실제 DTC 적용 시나리오

1. 타임세일 카운트다운 배너

{% assign now = 'now' | date: '%s' %}
{% assign sale_end = section.settings.end_time | date: '%s' %}
{% if now < sale_end %}
  <div class="sale-banner">마감까지 {{ sale_end | minus: now | divided_by: 3600 }}시간</div>
{% endif %}

2. 재고 기반 긴급 배지 (전환율 +18% 사례)

{% if product.variants.first.inventory_quantity < 10 %}
  <span class="urgency">🔥 품절임박: {{ product.variants.first.inventory_quantity }}개 남음</span>
{% endif %}

3. 고객 등급별 가격 노출

{% if customer.tags contains 'VIP' %}
  {{ product.price | times: 0.85 | money }}  ← 15% VIP 할인가
{% else %}
  {{ product.price | money }}
{% endif %}

4. 장바구니 무료배송 프로그레스 바

{% assign remain = 30000 | minus: cart.total_price %}
{% if remain > 0 %}
  무료배송까지 {{ remain | money }} 남았어요!
{% else %}
  🎉 무료배송 적용됨
{% endif %}

자주 하는 실수 7가지

1. {{ }} 안에 로직 작성 — 출력 태그에는 조건문 불가. {% %}와 혼동 주의.

2. 필터 순서 오류 — | money | times: 2는 문자열 곱셈 오류 발생. 반드시 | times: 2 | money.

3. for 루프 50개 제한 무시 — 기본 limit은 50. {% for item in collection.products limit: 100 %}로 명시 필요.

4. 캐싱 무시 — {% cache %} 미사용 시 동일 섹션 반복 렌더로 TTFB 0.4초 증가.

5. assign vs capture 혼용 — HTML 블록 저장은 반드시 capture.

6. section.settings 오타 — 스키마 ID와 100% 일치해야 함. 대소문자 구분.

7. money 필터 로케일 미설정 — KRW 표기 시 {{ price | money_with_currency }} 권장.

마무리

Liquid는 "개발자 없이도 DTC 브랜드가 테마를 운영할 수 있게" 만든 Shopify의 전략적 무기입니다. 2024년 기준 Shopify 전체 스토어의 약 87%가 Liquid 기반 테마를 사용하며, 커스텀 Liquid 최적화만으로 평균 LCP 1.2초 → 0.7초, 전환율 +11~23% 개선 사례가 보고됩니다. Headless(Hydrogen)로 갈수록 Liquid 의존도는 줄지만, 여전히 Shopify DTC의 90% 이상이 Liquid로 굴러갑니다.

정의