Shopify 테마 편집기: 상점주인이 편집할 수 있는 디자인 토큰

Source: Dev.to

상점 운영자는 테마 편집기에서 디자인 요소—버튼 색상, 폰트 선택, 테두리 두께, 투명도—를 실험해 보고 싶어합니다. Liquid 코드를 직접 수정하는 데 익숙하지 않으며, 클릭하고 미리보기하고 저장하고 싶어합니다. 개발자에게 주어진 질문은 다음과 같습니다. 테마를 깨뜨릴 위험 없이 상점 운영자에게 적절한 조절 옵션을 어떻게 노출시킬 것인가?

Shopify 테마에는 상점 운영자가 테마 편집기에서 볼 수 있는 설정을 제어하는 특정 파일이 있습니다: config/settings_schema.json.
이 스키마는 다음을 정의합니다.

• Theme settings – 전역 제어(사이트 타이포그래피, 브랜드 색상, 버튼 기본값)
• Section settings – 섹션별 제어(이미지, 헤딩, 히어로 섹션별 CTA)
• Block settings – 섹션 내부에 중첩된 제어(개별 피처 블록)

잘 설계된 설정 스키마는 상점 운영자에게 의미 있는 제어권을 제공하면서 기술적인 옵션에 압도되지 않게 합니다.

• config/settings_schema.json → 상점 운영자가 보는 설정을 정의합니다.
• config/settings_data.json → 운영자가 저장한 값이 들어 있습니다. 이 파일은 개발자가 직접 편집하지 않으며, 운영자가 테마 편집기에서 저장할 때마다 자동으로 업데이트됩니다.
• Liquid 템플릿은 settings.color_button_primary, settings.font_heading 등으로 설정 값을 사용합니다.

운영자가 편집할 수 있는 디자인을 제어하는 파일은 config/settings_schema.json 입니다. 여기서 새 설정을 추가하면 테마 편집기의 전역 설정에 나타납니다. 운영자는 클릭 → 미리보기 → 저장을 반복하고, 해당 설정을 참조하는 모든 섹션에 변경 사항이 전파됩니다.

다음과는 구분됩니다.

• config/settings_data.json – 저장된 값이며 스키마가 아님
• sections/*.liquid – 각 섹션 파일 하단에 있는 스키마 태그로 정의된 섹션별 설정
• assets/*.css – 컴파일된 CSS이며 편집기에서 직접 수정할 수 없음
• templates/*.json – 페이지 템플릿 구조이며 테마 편집기의 커스터마이징 모드에서 편집됨

Shopify 설정 스키마는 다양한 타입을 지원합니다. 디자인 토큰에 유용한 타입은 다음과 같습니다.

• color – 16진수 색상 선택기
• color_background – 투명도 옵션이 있는 배경 색상
• color_scheme – 다른 곳에 정의된 색상 스킴을 참조
• font_picker – Shopify 폰트 라이브러리(구글 폰트 + 시스템 폰트) 중 선택
• range – 숫자 슬라이더(테두리 두께, 투명도 퍼센트, 이미지 둥근 모서리 등)
• select – 드롭다운(예: “small / medium / large” 크기 옵션)
• checkbox – 불리언 토글
• text – 짧은 텍스트 입력(필요한 경우 커스텀 CSS 클래스명)

위 시나리오(버튼 색상, 폰트, 테두리 두께, 투명도)에서는 각각 color, font_picker, range 타입이 적합합니다.

Liquid에서 설정에 접근하기

전역 설정 변수 settings를 통해 접근합니다.

{{ settings.color_button_primary }}
{{ settings.font_heading }}

많은 테마는 설정 값을 CSS 커스텀 프로퍼티로 변환해 레이아웃 파일에 삽입합니다.

<style>
  :root {
    --button-primary: {{ settings.color_button_primary }};
    --heading-font: {{ settings.font_heading.family }};
    /* ... */
  }
</style>

그 후 컴포넌트 CSS는 해당 커스텀 프로퍼티를 사용합니다.

.button {
  background-color: var(--button-primary);
  font-family: var(--heading-font);
}

이 구조 덕분에 테마 편집기에서 디자인 시스템을 바꾸면 한 곳만 수정해도 전체에 적용됩니다.

색상 스킴

현대 Shopify 테마는 색상 스킴을 지원합니다. 배경, 텍스트, 버튼, 강조 색상의 조합을 이름으로 정의하고 섹션에 적용할 수 있습니다. 운영자는 “Light scheme”과 “Dark scheme” 중 선택해 섹션마다 적용할 수 있습니다. 색상 스킴 역시 스키마에 정의되지만 자체 구조를 가집니다.

이 패턴은 Dawn 및 최신 OS 2.0 테마에서 사용됩니다.
운영자는 섹션당 스킴을 선택하고, 테마는 해당 스킴 색상을 일관되게 렌더링합니다.

폰트

font_picker 설정 타입은 폰트 객체를 반환합니다. 객체는 family와 로드 URL을 포함합니다. 테마는 font_url 필터를 사용해 올바른 스타일시트를 로드합니다.

{% assign font = settings.font_heading %}
<link href="{{ font | font_url }}" rel="stylesheet">

이 코드는 선택된 폰트에 맞는 @font-face 선언을 자동으로 삽입합니다. 운영자는 Shopify 라이브러리(구글 폰트 + 시스템 폰트) 중 원하는 폰트를 고르면 테마가 자동으로 적용됩니다.

잘 정리된 설정 스키마의 특징

• 관련 설정을 헤더(예: “Colors”, “Typography”, “Buttons”) 아래 그룹화
• 라벨을 직관적으로 작성(예: “Primary button color” 대신 “color_button_primary”)
• 효과를 설명하는 도움말 텍스트 포함
• 영향력이 큰 설정부터 순서대로 배치
• 합리적인 기본값 제공

100개의 무분류 설정이 있는 스키마는 기술적인 운영자조차 사용하기 어렵습니다. 반면 15개의 잘 정리된 설정이면 비전문가도 안심하고 실험할 수 있습니다.

설정에 포함하면 좋은 항목

• 브랜드 색상
• 타이포그래피 선택
• 레이아웃 파라미터(최대 콘텐츠 너비, 간격 스케일)
• 버튼 스타일
• 섹션 레벨 토글(기능 보이기/숨기기)

설정에 포함하면 안 되는 항목

• CSS 지식이 필요한 항목(예: box-shadow 구문, 커스텀 포지셔닝)
• 잘못된 값이 레이아웃을 깨뜨릴 위험이 있는 항목(예: 최소 패딩 이하)
• 구현 세부 사항(캐시 타임아웃, 서드파티 ID 등)

경계: 잘못된 값이 테마를 의미 있게 깨뜨린다면, 해당 옵션은 운영자 편집용 설정에 포함되지 않아야 합니다.

비전문가가 스스로 디자인 토큰을 관리할 수 있는 테마 구성

• config/settings_schema.json에 그룹화·라벨·기본값이 지정된 설정 존재
• 디자인 토큰을 CSS 커스텀 프로퍼티로 사용
• 테마 편집기에서 직관적인 순서로 노출
• 커스터마이징 없이도 사용 가능한 기본 테마 제공
• 각 설정의 역할을 설명하는 문서(또는 편집기 내 도움말) 제공
• 버전 관리 규칙 준수 – 코드에서 설정 ID를 바꾸면 운영자의 저장값이 깨지므로 신중히 처리

운영자가 스스로 디자인 토큰을 조정할 수 있다면 테마에 대한 만족도가 높아집니다. 개발자의 역할은 발생 가능한 문제를 최소화하면서 적절한 노브를 제공하는 것이며, 이를 통해 불필요한 “발판(footgun)”을 방지할 수 있습니다.