Shopify 사용자 지정 SVG 아이콘: 깔끔한 브랜드 표식 준비하기

사용자 지정 SVG 아이콘을 Shopify 테마에 넣는 실용적인 방법은 두 가지입니다. 파일을 테마 에셋으로 업로드하고 이미지 태그로 표시하거나, 마크업을 Liquid 스니펫에 넣고 아이콘이 필요한 곳에서 렌더링합니다. 첫 방식은 고정 색상 표식에 더 간단하고, 두 번째는 경로와 색상을 직접 제어할 수 있습니다. 테마 편집기의 제어 항목은 테마마다 다르므로 코드를 바꾸기 전에 기존 아이콘 블록을 확인하세요.

유일한 원본이 PNG라면 먼저 경로 기반 SVG를 만드세요. 파일 이름만 바꿔도 픽셀이 도형이 되지는 않습니다. 깔끔한 원본 SVG가 있으면 우선 사용하고, 상세한 사진은 대개 이미지로 남기는 편이 낫습니다. 아래 단계는 특정 판매자 계정이나 테마 버전을 가정하지 않고 작은 브랜드 픽토그램의 파일 준비부터 테마 미리보기까지 다룹니다.

아이콘을 넣을 위치 선택하기

Shopify 테마에는 파일용 assets 디렉터리와 재사용 Liquid 마크업용 snippets 디렉터리가 있습니다. Shopify는 테마 아키텍처에 둘 다 설명하며 테마 코드 가이드에서 코드 편집 전에 테마 편집기 옵션을 확인하도록 권장합니다. 사용자 지정 SVG 필드가 있는 테마는 아래 코드 방식이 둘 다 필요 없을 수도 있습니다. 한 테마에 필드가 있다고 모든 테마에 있는 것은 아닙니다.

두 가지 전달 방식

이 차이는 페이지 CSS가 일반 <img>로 불러온 SVG 내부에 접근할 수 없기 때문에 중요합니다. 인라인 경로는 CSS color 속성의 값을 받는 currentColor를 사용할 수 있습니다. MDN SVG 이미지 문맥 가이드와 currentColor 설명을 참고하세요. 일반 브라우저 예제는 인라인 SVG와 이미지 태그 비교를 읽어 보세요.

테마를 수정하기 전에 SVG 준비하기

브랜드 표식에서 가장 작고 유용한 버전으로 시작하세요. 아이콘은 고객이 실제로 볼 크기에서 실루엣과 의도한 구멍을 유지해야 합니다. 아트보드에서 잘 보이는 작은 글자나 질감도 20~32픽셀에서는 무너질 수 있습니다. 브랜드 소스를 원본으로 보관하고 아이콘은 별도로 내보내세요.

1. 깔끔한 원본을 확보하세요. 원래 벡터 디자인이 있다면 SVG로 내보내세요. 평면 PNG만 있다면 PerfectVector가 그 단계에 도움이 됩니다. 클립아트 SVG 변환 작업 흐름으로 SVG 후보를 만든 뒤 벡터 편집기에서 다운로드 파일을 여세요. 실루엣과 별도 도형을 PNG와 비교하세요. 추적은 시작점이며 같은 도형을 보장하지는 않습니다.
2. 구조를 확인하세요. 보이는 표식이 삽입 래스터 <image> 사각형 하나가 아니라 경로나 기본 벡터 도형인지 확인하세요. 불필요한 배경 상자, 흩어진 조각, 중복 윤곽선과 작은 색상 영역을 제거하세요. PNG 아이콘 준비 가이드는 세트 전체의 일관된 격자와 시각적 크기를 다룹니다.
3. 캔버스와 색상을 설정하세요. 내보내기에 적절한 여백의 viewBox를 지정하세요. 표식이 2색이어야 한다면 고정 브랜드 색상을 유지하세요. 단색 아이콘이 테마 색상을 상속해야 한다면 해당 경로에 currentColor를 사용하세요. SVG 색상 변경은 고정 채우기가 이후 색상 변경을 막는 이유를 설명합니다.
4. 파일을 코드로 검토하세요. 아이콘에 필요한 요소와 속성만 유지하세요. 테마에 인라인으로 넣기 전에 예상하지 못한 스크립트, 외부 참조, 편집기 부가 정보와 신뢰할 수 없는 마크업을 제거하세요. 정리한 SVG를 아이콘 크기와 더 큰 확인 크기로 여세요. 두 검사는 서로 다른 실수를 찾습니다.

작은 단색 별의 원본은 다음처럼 단순할 수 있습니다. 아래 경로는 직접 만든 예제이며 Shopify 제공 아이콘이나 PerfectVector 변환 결과가 아닙니다. 명시적 좌표계가 있고 삽입 이미지는 없습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

2색 브랜드 표식에는 의도한 채우기가 있는 별도 경로나 도형이 필요합니다. 모든 색을 currentColor로 바꾸면 구분이 사라집니다. 표식이 더 큰 아이콘 세트의 일부라면 나머지를 내보내기 전에 대표 아이콘 몇 개에 같은 크기·색상 규칙을 적용하세요.

방식 A: 테마 에셋 표시하기

Shopify의 asset_url 필터는 테마 assets 디렉터리 파일의 CDN URL을 반환합니다. 검토한 SVG를 그곳에 추가하고 적절한 Liquid 템플릿, 섹션이나 스니펫에서 정확한 파일명을 참조하세요. 아래 단순 예제는 brand-mark.svg가 보이는 텍스트 옆의 고정 색상 장식 표식이라고 가정합니다.

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

인접 텍스트에 없는 정보를 이미지가 전달한다면 설명적인 alt 텍스트를 사용하세요. 순수 장식 이미지에는 alt=""가 적절합니다. Shopify의 테마 접근성 가이드는 모든 이미지에 alt 속성을, 장식 아이콘에는 빈 값을 요구합니다. 너비와 높이를 명시하면 Shopify의 에셋 전달 가이드가 설명하듯 로딩 중에도 공간을 확보합니다.

이 방식에서는 페이지 관점에서 SVG가 이미지 하나입니다. 테마 색상이 바뀌면 부모 CSS 규칙이 파일 색을 바꿀 것이라고 가정하지 말고 SVG 채우기를 갱신하거나 인라인 방식을 선택하세요. 다른 테마에 한 스토어의 파일 URL을 붙여 넣지 말고 asset_url로 테마 에셋을 해석하세요.

방식 B: 인라인 아이콘 스니펫 렌더링하기

반복되는 단색 아이콘에는 검토한 SVG 마크업을 snippets/brand-mark-icon.liquid 같은 스니펫에 넣으세요. Shopify의 스니펫 문서는 {% render %}로 재사용 마크업을 삽입합니다. 최소 스니펫은 주변 텍스트 스타일에서 색을 받을 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

그런 다음 관련 테마 파일에서 렌더링하세요.

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

여기서 aria-hidden="true"는 주변의 보이는 텍스트를 장식만 하는 아이콘용입니다. 아이콘만으로 버튼이나 링크를 표시한다면 장식 SVG에 의존하지 말고 컨트롤에 접근 가능한 이름을 지정하세요. 키보드와 스크린 리더로 테스트하세요. 일회성 인라인 값을 흩어 놓기보다 테마의 일반 스타일 시스템에서 CSS 색상과 크기를 유지하세요.

스니펫은 재사용 가능하지만 여전히 테마 코드입니다. Shopify는 코드 변경 전 테마 복제를 권합니다. 사본에서 수정하고 실제 페이지나 섹션을 미리 본 뒤 원본 스니펫을 저장해 테마 업데이트 후 비교하세요. 테마별 아이콘 라이브러리에는 자체 인수와 구조가 있을 수 있으므로 기본 아이콘을 교체하기 전에 파일을 확인하세요. 현재 아이콘 라이브러리에 관한 Shopify Community 토론은 전체 라이브러리 렌더링이 아이콘 하나 선택과 반드시 같지는 않은 이유를 보여 줍니다.

최종 크기에서 전달 결과 확인하기

파일이 기술적으로 유효해도 스토어에서는 잘못 보일 수 있습니다. 테마가 밝은·어두운 배경을 사용하면 둘 다 검토하세요. 실제 CSS 크기, 좁은 뷰포트와 인접 아이콘 옆에서 표식을 확인하세요. 구멍이 열려 있고 색상 대비가 충분하며 viewBox나 컨테이너에 잘리지 않는지 확인하세요.

에셋을 확대했을 때 흐릿한 사각형처럼 보이면 삽입 래스터를 확인하세요. 인라인 아이콘이 테마 색상을 무시하면 고정 채우기, 인라인 스타일이나 더 구체적인 선택자를 찾으세요. 아무것도 표시되지 않으면 에셋 파일명이나 스니펫 이름부터 확인하고 테마 섹션 마크업을 확인하세요. 여러 항목을 동시에 바꾸지 마세요. CSS 마스크 아이콘 가이드는 경로를 인라인으로 넣지 않고 실루엣 색을 바꾸는 다른 방식을 다룹니다.

자신의 평면 픽토그램이 래스터로만 있다면 PerfectVector로 SVG 후보를 만든 뒤 의도한 아이콘 크기에서 경로, 구멍과 색상을 확인하고 테마 방식을 선택하세요. 이미 좋은 SVG가 있다면 추적을 건너뛰고 스토어 미리보기에 시간을 쓰세요.

FAQ

모든 Shopify 테마의 Customize 화면에서 SVG 아이콘을 업로드할 수 있나요? 아닙니다. 일부 테마는 아이콘이나 사용자 지정 SVG 필드를 제공하지만 다른 테마는 에셋 또는 코드 편집이 필요합니다. 필드가 있다고 가정하기 전에 해당 테마의 섹션과 문서를 확인하세요.

업로드한 SVG가 테마 색상을 따르지 않는 이유는 무엇인가요? 이미지 태그의 SVG는 이미지 리소스이므로 페이지 CSS가 내부 경로를 스타일링하지 않습니다. 고정 색상 에셋은 SVG 채우기를 편집하고, 테마 색상이 필요하면 currentColor를 쓰는 검토된 인라인 마크업을 사용하세요.

PNG 브랜드 아이콘을 추가하기 전에 SVG로 변환해야 하나요? 확장·편집 가능한 경로가 필요한 평면 픽토그램이라면 변환하세요. 의도한 아이콘 크기에서 추적을 확인하고 불필요한 도형을 제거하세요. 추적이 핵심 세부를 버린다면 사진이나 질감 이미지는 래스터로 유지하세요.

Sources

1. Shopify Developers — 테마 아키텍처 — 테마 에셋, 스니펫과 마크업 위치를 설명합니다.
2. Shopify Developers — asset_url — Liquid 예제에서 사용한 테마 에셋 URL 동작을 설명합니다.
3. Shopify Developers — 스니펫 — 재사용 Liquid 마크업과 render 태그를 설명합니다.
4. Shopify Help Center — 테마 코드 편집 — 편집기 우선 접근, 테마 복제와 코드 변경 주의사항을 설명합니다.
5. Shopify Developers — 접근성 권장 사항 — 대체 텍스트와 장식 아이콘 처리를 설명합니다.
6. Shopify Developers — Shopify CDN에서 에셋 제공 — 에셋 필터와 명시적 이미지 크기를 설명합니다.
7. MDN — 이미지로 사용하는 SVG — 브라우저 이미지 문맥의 제한을 설명합니다.
8. MDN — SVG color 속성 — currentColor가 SVG 채우기와 스트로크에 값을 전달하는 방식을 설명합니다.