> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/admin/icon.md).

# 아이콘 등록/관리

<figure><img src="/files/060ee1fHaEDbJIbWdowy" alt=""><figcaption></figcaption></figure>

아이콘은 상품 목록에 SALE, BEST, MD추천, 이벤트 등의 내용을 표시하는 뱃지처럼 활용할 수 있는 기능입니다.

아이콘을 통해 상품 내 특성을 강조하여 사용자로 하여금 상품에 관심을 갖게 하고 구매로 이어지도록 유도할 수 있습니다.

## 1. 아이콘 관리하기

아이콘 관리 페이지를 통해 등록한 아이콘을 확인하고, 관리 할 수 있습니다.

<figure><img src="/files/cm6HzjXaf1aSzo1uTtYl" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="135">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>아이콘 조회</strong></td><td>등록한 아이콘의 이름, 등록 일자를 기준으로 조회를 할 수 있습니다.</td></tr><tr><td><strong>정렬</strong></td><td>등록순, 최근수정일, 과거수정일, 아이콘 이름 순으로 정렬을 합니다.</td></tr><tr><td><strong>아이콘 이름</strong></td><td>등록한 아이콘의 이름을 표시합니다.</td></tr><tr><td><strong>미리보기</strong></td><td><p>등록한 아이콘의 미리보기를 표시합니다.<br>등록한 아이콘의 미리보기를 볼 수 있습니다.</p><ul><li>아이콘의 크기는 텍스트 내용에 비례합니다.</li></ul></td></tr><tr><td><strong>등록일/수정일</strong></td><td>아이콘의 등록일과 수정일을 표시합니다.</td></tr><tr><td><strong>수정</strong></td><td>수정 버튼을 클릭하여 아이콘을 수정할 수 있습니다.</td></tr><tr><td><strong>삭제</strong></td><td><p>삭제 버튼을 클릭하여 아이콘을 삭제할 수 있습니다.</p><ul><li>삭제 된 아이콘을 복구가 불가능합니다.</li></ul></td></tr></tbody></table>

## 2. 아이콘 등록하기

아이콘은 등록 방법에 따라 텍스트형, 이미지형 으로 등록을 할 수 있습니다.

등록 된 아이콘은 상품마다 선택적으로 적용 할 수 있으며, 각 스타일의 아이콘 등록 방법은 아래 내용을 참고 부탁드립니다.

<details>

<summary>텍스트형</summary>

아이콘을 통해 보여질 텍스트를 입력하고, 색상을 지정할 수 있습니다.

{% hint style="info" %}
텍스트형 아이콘의 크기는 입력한 텍스트에 따라 달리지게 됩니다.
{% endhint %}

<figure><img src="/files/dxPOBnhzcDAnH1undgNH" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="150">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>아이콘 이름</strong></td><td><p>관리를 위해 사용할 아이콘의 이름 또는 설명을 입력합니다.</p><ul><li>최대 100자 입력 가능</li></ul></td></tr><tr><td><strong>아이콘 스타일</strong></td><td><strong>[텍스트형]</strong>을 선택합니다.</td></tr><tr><td><strong>문구 입력</strong></td><td><p>아이콘에 사용 될 문구를 입력합니다.</p><ul><li>최대 16자 입력 가능</li></ul></td></tr><tr><td><strong>배경 색상</strong></td><td><p>아이콘 배경 색상을 선택합니다.</p><ul><li>컬러 피커를 통해 선택 가능</li></ul></td></tr><tr><td><strong>라인 색상</strong></td><td><p>아이콘 라인 색상을 선택합니다.</p><ul><li>컬러 피커를 통해 선택 가능</li></ul></td></tr><tr><td><strong>글씨 색상</strong></td><td><p>아이콘 글씨 색상을 선택합니다.</p><ul><li>컬러 피커를 통해 선택 가능</li></ul></td></tr><tr><td><strong>미리보기</strong></td><td>설정하신 아이콘을 표시합니다.</td></tr></tbody></table>

</details>

<details>

<summary>이미지형</summary>

아이콘으로 사용할 이미지를 제작하여, 업로드 하여 사용할 수 있습니다.

<figure><img src="/files/H2vGzfguPvfMBXXzjH0w" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="150">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>아이콘 이름</strong></td><td><p>관리를 위해 사용할 아이콘의 이름 또는 설명을 입력합니다.</p><ul><li>최대 100자 입력 가능</li></ul></td></tr><tr><td><strong>아이콘 스타일</strong></td><td>[<strong>이미지형</strong>]을 선택합니다.</td></tr><tr><td><strong>파일 업로드</strong></td><td><p>아이콘으로 사용할 이미지를 업로드 합니다.</p><ul><li>이미지 형식 : JPG, JPEG, PNG, ICO, SVG / 장당 1MB 이내</li><li>권장 크기 : 60px * 24px</li></ul></td></tr><tr><td><strong>대체 텍스트</strong></td><td><p>아이콘 대체 텍스트를 입력합니다.</p><ul><li>대체 텍스트는 눈으로 화면을 볼 수 없는 경우, 이미지에 대한 설명을 대체 텍스트로 입력하여 스크린리더를 통해 정보를 인식하게 <br>도와줍니다.</li></ul></td></tr></tbody></table>

</details>

### 2-1. 텍스트형

아이콘을 통해 보여질 텍스트를 입력하고, 색상을 지정할 수 있습니다.

{% hint style="info" %}
텍스트형 아이콘의 크기는 입력한 텍스트에 따라 달리지게 됩니다.
{% endhint %}

<figure><img src="/files/dxPOBnhzcDAnH1undgNH" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="150">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>아이콘 이름</strong></td><td><p>관리를 위해 사용할 아이콘의 이름 또는 설명을 입력합니다.</p><ul><li>최대 100자 입력 가능</li></ul></td></tr><tr><td><strong>아이콘 스타일</strong></td><td><strong>[텍스트형]</strong>을 선택합니다.</td></tr><tr><td><strong>문구 입력</strong></td><td><p>아이콘에 사용 될 문구를 입력합니다.</p><ul><li>최대 16자 입력 가능</li></ul></td></tr><tr><td><strong>배경 색상</strong></td><td><p>아이콘 배경 색상을 선택합니다.</p><ul><li>컬러 피커를 통해 선택 가능</li></ul></td></tr><tr><td><strong>라인 색상</strong></td><td><p>아이콘 라인 색상을 선택합니다.</p><ul><li>컬러 피커를 통해 선택 가능</li></ul></td></tr><tr><td><strong>글씨 색상</strong></td><td><p>아이콘 글씨 색상을 선택합니다.</p><ul><li>컬러 피커를 통해 선택 가능</li></ul></td></tr><tr><td><strong>미리보기</strong></td><td>설정하신 아이콘을 표시합니다.</td></tr></tbody></table>

### 2-2. 이미지형

아이콘으로 사용할 이미지를 제작하여, 업로드 하여 사용할 수 있습니다.

<figure><img src="/files/H2vGzfguPvfMBXXzjH0w" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="150">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>아이콘 이름</strong></td><td><p>관리를 위해 사용할 아이콘의 이름 또는 설명을 입력합니다.</p><ul><li>최대 100자 입력 가능</li></ul></td></tr><tr><td><strong>아이콘 스타일</strong></td><td>[<strong>이미지형</strong>]을 선택합니다.</td></tr><tr><td><strong>파일 업로드</strong></td><td><p>아이콘으로 사용할 이미지를 업로드 합니다.</p><ul><li>이미지 형식 : JPG, JPEG, PNG, ICO, SVG / 장당 1MB 이내</li><li>권장 크기 : 60px * 24px</li></ul></td></tr><tr><td><strong>대체 텍스트</strong></td><td><p>아이콘 대체 텍스트를 입력합니다.</p><ul><li>대체 텍스트는 눈으로 화면을 볼 수 없는 경우, 이미지에 대한 설명을 대체 <br>텍스트로 입력하여 스크린리더를 통해 정보를 인식하게 도와줍니다.</li></ul></td></tr></tbody></table>

## 3. 아이콘 적용하기

생성한 아이콘은 상품마다 서로 다르게 적용을 할 수 있습니다.

{% hint style="warning" %}
상품에 등록 가능한 아이콘의 갯수 제한은 없으나, 너무 많은 아이콘이 적용이 될 경우 디자인을 해칠 수 있으니 적절한 갯수의 아이콘 사용을 권장 드립니다.
{% endhint %}

3-1. 관리자페이지의 **\[상품 등록]** 또는 **\[상품 관리 > 더보기 > 편집하기]** 를 클릭합니다.

<figure><img src="/files/wto5YUs43R1TCZorb2vS" alt=""><figcaption></figcaption></figure>

3-2. 상품 등록 페이지의 \[상품 아이콘]의 **\[아이콘 불러오기]**&#xBC84;튼을 클릭합니다.

{% hint style="info" %}
**\[아이콘 직접 등록]** 버튼을 클릭하여 아이콘을 등록 할 수 있습니다.
{% endhint %}

<figure><img src="/files/CfMALx7XdLHggSewNUVM" alt=""><figcaption></figcaption></figure>

3-3. 생성 된 아이콘을 선택한 후 **\[등록하기]** 버튼을 클릭합니다.

<figure><img src="/files/PrlAUyhBh0wqCxg4hyMo" alt=""><figcaption></figcaption></figure>

3-4. 뱃지의 노출 순서를 지정하고, 뱃지의 노출 기간을 설정합니다.

{% hint style="info" %}
가장 위에 적용 된 뱃지는 상품 목록의 가장 왼쪽에 보여지게 됩니다.
{% endhint %}

<figure><img src="/files/HPHTORrBOFcUe3DA4zgt" alt=""><figcaption></figcaption></figure>

## 4. 아이콘 노출 설정

상품에 적용한 아이콘은 에디터의 상품 목록 블록 또는 상품 슬라이더 블록을 통해 보여지게 됩니다.

아래 가이드를 참고하여, 아이콘 표시 여부 및 표시 위치를 설정할 수 있습니다.

4-1. 큐샵 로그인 후 에디터에 접속 합니다. ([에디터 접속하기](/customer_support/guide/tip/modoo.md#id-1))

{% hint style="info" %}

* 아이콘 관리 페이지의 **\[아이콘 위치 설정하기]** 버튼을 클릭하여 에디터 접속을 할 수도 있습니다.<br>

  <figure><img src="/files/cTvz3mNF4kB3hAvIrlEe" alt=""><figcaption></figcaption></figure>

{% endhint %}

4-2. 상품 목록 또는 상품 슬라이더 블록을 추가합니다.([블록 추가하기](/customer_support/guide/design/editor/contents.md#id-1-1))

4-3. 블록의 상세설정의 **\[구성 > 위치고정 > 상품 아이콘]** 항목을 활성화 합니다.

4-4. 상품 아이콘 설정을 통해 아이콘의 위치를 지정합니다.

<figure><img src="/files/Nwa43S0MKbFLJ1K7smPr" alt=""><figcaption></figcaption></figure>

4-5. **\[게시하기]** 버튼을 클릭하여 사이트에 반영합니다.

## 자주묻는질문(FAQ)

<details>

<summary>아이콘 이미지의 권장 사이즈는 어떻게 되나요?</summary>

아이콘 이미지의 형식 및 권장 크기는 아래와 같습니다.

* 이미지 형식 : JPG, JPEG, PNG, ICO, SVG / 장당 1MB 이내&#x20;
* 권장 크기 : 60px \* 24px

</details>

<details>

<summary>아이콘의 등록 갯수 제한이 있나요?</summary>

상품에 등록 가능한 아이콘의 갯수 제한은 없으나, 너무 많은 아이콘이 적용이 될 경우 디자인을 \
해칠 수 있으니 적절한 갯수의 아이콘 사용을 권장 드립니다.

</details>