> ## Documentation Index
> Fetch the complete documentation index at: https://make.edicus.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 스티커·패턴·디자인 관리

> Sticker, Pattern, Design 화면에서 그룹과 카테고리를 만들고 편집기에 보일 자산을 올리는 방법

스티커 탭의 스티커, 배경 탭의 패턴, 레이아웃 탭의 디자인은 모두 **그룹 > 카테고리 > 리소스** 구조로 관리합니다. 상품은 그룹 하나를 고르고, 편집기는 그 그룹의 카테고리를 탭 위쪽 선택 목록으로 보여 줍니다. 이 페이지는 세 화면의 사용법을 다룹니다.

## 배우는 것

* 그룹, 카테고리, 리소스의 관계와 상품 설정과의 연결
* 스티커 그룹을 만들고 스티커를 올리는 방법
* 편집기 스티커 탭에 보이는 카테고리와 순서
* Pattern과 Design 화면의 차이

## 그룹과 카테고리

| 단위 | 설명 |
| - | - |
| 그룹 | 카테고리 묶음입니다. `groupCode`로 구분합니다. 상품마다 그룹 하나를 고릅니다 |
| 카테고리 | 편집기 탭 위쪽 목록의 한 칸입니다. `categoryCode`와 표시 이름을 가집니다. 그룹마다 `etc`(기타) 카테고리가 기본으로 있고 지울 수 없습니다 |
| 리소스 | 카테고리에 넣은 파일 하나입니다. **Resource** 화면의 `sticker`, `pattern`, `design` 리소스입니다 |

상품 설정에서 그룹을 고르는 항목은 아래와 같습니다. 사이즈의 product override에서 사이즈마다 바꿀 수 있는 것도 있습니다.

| 화면 | 상품 설정 항목 | 사이즈 덮어쓰기 | 편집기 |
| - | - | - | - |
| **Sticker** | **자산** 그룹의 `sticker-group` | Sticker Group | 스티커 탭. 비우면 `default` 그룹 |
| **Pattern** | **레이아웃 · 배경** 그룹의 `pattern-group` | 없음 | 배경 탭의 패턴 |
| **Design** | **레이아웃 · 배경** 그룹의 `design-group` | Design Group | 레이아웃 탭. `none`이면 디자인을 쓰지 않습니다 |

상품 설정 쪽 설명은 [자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어](/docs/products/assets)와 [레이아웃과 배경](/docs/products/layout-background)에 있습니다.

## 메뉴가 보이는 계정

**Sticker**는 파트너 관리자 계정(partner-admin)의 왼쪽 메뉴에 있습니다. 디자이너(partner-designer) 계정의 메뉴 노출은 [리소스 관리](/docs/products/resources#메뉴가-보이는-계정)를 보세요. **Pattern**과 **Design**은 파트너 권한에 따라 보이지 않을 수 있습니다. 보이면 **Calendar** 바로 위에 **Pattern**, **Design** 순으로 나옵니다.

## 스티커 탭이 목록을 만드는 방식

스티커 탭은 **Customize**의 **Asset Settings**에 있는 `sticker-manage` 값에 따라 두 방식 중 하나로 동작합니다. 값은 [Customize 동작 설정](/docs/products/customize-config#asset-settings)에서 바꿉니다.

| `sticker-manage` | 스티커 탭 |
| - | - |
| `none` (기본) | 카테고리 없이 공개 스티커 전체를 보여 줍니다. **스티커**, **색상클립**, **도형**으로 나뉩니다. 그룹과 카테고리는 쓰지 않습니다 |
| `category` | 상품 `sticker-group`의 카테고리를 위쪽 목록으로 보여 주고, 고른 카테고리의 공개 스티커를 보여 줍니다 |

`category` 방식일 때 위쪽 목록은 아래 순서로 만들어집니다.

1. 그룹의 카테고리를 화면에 정렬한 순서대로 놓습니다.
2. `ignore etc`가 켜져 있으면 `etc`를 뺍니다.
3. 템플릿에 `protected` 하위 스티커가 있으면 맨 앞에 **템플릿 스티커**를 붙입니다.
4. `has all`이 켜져 있으면 그 앞에 **전체보기**를 붙입니다.

처음 열리는 카테고리는 그룹의 initial 카테고리입니다. `has all`을 켜면 **전체보기**가 처음 열리고, `keep initial`도 켜면 initial 카테고리가 그대로 처음 열립니다.

<Note>
  편집기를 띄우는 코드가 띄우기 옵션 `options.asset.sticker.category`로 카테고리 코드를 넘기면 그 카테고리가 처음 열립니다. 필요하면 연동 담당자에게 요청하세요.
</Note>

카테고리 안의 스티커는 올린 순서대로 나옵니다. **Asset Settings**의 `sticker-order`로 최근 순이나 이름 순으로 바꿀 수 있습니다.

## 스티커 그룹 만들기

<Steps>
  <Step title="Sticker 화면을 엽니다">
    왼쪽 메뉴에서 **Sticker**를 누릅니다. 가장 왼쪽 열이 그룹, 가운데 열이 카테고리입니다.
  </Step>

  <Step title="그룹을 추가합니다">
    **Add Group**을 누르고 `groupCode`를 넣습니다. 새 그룹에는 `etc` 카테고리 하나가 들어 있고 initial 카테고리도 `etc`입니다.
  </Step>

  <Step title="카테고리를 추가합니다">
    그룹을 고르고 **Add Category**를 누릅니다. `categoryCode`는 그룹 안에서 겹치면 안 됩니다. `name`은 편집기에 보일 이름입니다.
  </Step>

  <Step title="표시 이름과 다국어 이름을 정합니다">
    카테고리를 고르면 오른쪽 위에 `dp-name`과 **dp-name i18n**이 있습니다. 고친 뒤 툴바의 **Update Name**을 눌러야 저장됩니다. 편집기는 화면 언어(`ui_locale`)에 맞는 다국어 이름을 먼저 씁니다.
  </Step>

  <Step title="상품에 연결합니다">
    상품 설정의 `sticker-group`에서 이 그룹을 고르고 **Update**를 누릅니다.
  </Step>
</Steps>

그룹이 하나도 저장되지 않은 파트너는 목록에 `default` 그룹이 보입니다. 이 그룹은 화면에만 있는 기본값이고, 카테고리를 추가하거나 **Update Name**을 눌러야 저장됩니다. 저장하지 않으면 `category` 방식의 스티커 탭이 카테고리를 읽지 못하니 먼저 저장해 두세요.

툴바의 **Delete Group**은 비활성 상태입니다. 그룹은 화면에서 지울 수 없습니다.

### 그룹 옵션

카테고리 열 오른쪽의 버튼으로 바꿉니다. 바로 저장됩니다.

| 버튼 | 저장 키 | 켜면 |
| - | - | - |
| `single line ui` | `singleLine` | 카테고리 선택을 넓은 한 줄 목록으로 보여 줍니다 |
| `has all` | `hasAll` | 맨 앞에 **전체보기**를 붙이고 처음에 엽니다 |
| `ignore etc` | `ignoreEtc` | `etc` 카테고리를 편집기에 보여 주지 않습니다 |
| `keep initial` | `keepInitialCode` | `has all`이 켜져 있어도 initial 카테고리를 처음에 엽니다 |

### 카테고리 메뉴

카테고리의 **⋮** 메뉴에서 고릅니다.

| 메뉴 | 하는 일 |
| - | - |
| `delete` | 카테고리를 지웁니다. `etc`는 지울 수 없습니다. 안에 있던 스티커는 지워지지 않습니다 |
| `up`, `down` | 편집기 목록에서의 순서를 바꿉니다 |
| `set-to-initial` | 편집기에서 처음 열릴 카테고리로 정합니다 |

파트너 권한에 따라 카테고리 위에 두 칸이 더 보일 수 있습니다. `hide-div`는 고른 디비전으로 띄운 편집기에서 이 카테고리를 숨깁니다. `tags`는 쉼표나 공백으로 구분한 검색어입니다. **Customize**의 **System Settings**에 있는 `category-search`를 켜면 사용자가 스티커 탭에서 검색어를 넣어, 그 단어를 `tags`에 가진 카테고리의 스티커를 한꺼번에 찾습니다. 두 칸도 **Update Name**으로 저장합니다.

## 스티커 올리기

<Steps>
  <Step title="카테고리를 고릅니다">
    올릴 카테고리를 누르면 오른쪽에 그 카테고리의 스티커가 나옵니다.
  </Step>

  <Step title="Upload Sticker를 누릅니다">
    PNG나 SVG 파일을 여러 개 고를 수 있습니다. 파일 이름에서 확장자를 뺀 것이 제목이 됩니다. 올린 스티커는 바로 `public`입니다.
  </Step>
</Steps>

SVG에 `text`, `image`, `filter`, `set`, `foreignObject`, `animate`, `animateColor`, `animateMotion`, `animateTransform` 요소가 있으면 올라가지 않습니다. 글자는 윤곽선으로 바꾸고, 그림은 PNG로 올리세요.

SVG 안에서 `id`가 `color`로 시작하는 요소는 사용자가 색을 바꿀 수 있는 부분이 됩니다. 예를 들어 `id="color1"`인 요소의 `fill`이 처음 색입니다. 이런 스티커는 `none` 방식 스티커 탭에서 **색상클립**에 나옵니다.

### 올린 스티커 관리

오른쪽 목록의 스티커를 고른 뒤 위쪽 버튼을 누릅니다. 목록에는 `public`, `protected`, `deleted` 스티커가 함께 보이고 상태 아이콘이 붙습니다.

| 버튼 | 하는 일 |
| - | - |
| **Order** | 목록을 등록 순(`Default`)과 이름 순(`Name`)으로 바꿔 봅니다. 편집기 순서는 바뀌지 않습니다 |
| **Select All**, **Clear Select** | 모두 고르거나 고르기를 풉니다 |
| **Set Style** | 편집기 목록의 바탕을 `light`나 `dark`로 정합니다. 흰 스티커는 `dark`가 잘 보입니다 |
| **Change Aspect** | `free aspect ratio`면 사용자가 가로세로 비율을 바꿔 늘릴 수 있습니다. 기본은 `preserve aspect ratio`입니다 |
| **Change Name** | 하나만 골랐을 때 제목을 바꿉니다 |
| **Change Category** | 같은 그룹의 다른 카테고리로 옮깁니다 |
| **Change Visiblity** | `public`, `protected`, `deleted` 중 고릅니다. **Delete Permanently**는 파일까지 지웁니다 |

<Warning>
  **Delete Permanently**로 지운 스티커는 이미 주문한 프로젝트에서도 그림이 사라질 수 있습니다. 목록에서만 빼려면 `deleted`를 고르세요.
</Warning>

툴바 **⋮** > **Download**는 고른 스티커 파일을 내려받습니다.

### 익스포터로 올린 스티커

익스포터의 Sticker 출력은 InDesign 파일의 그림을 `default` 그룹의 카테고리에 `protected`로 올립니다. 카테고리를 정하지 않은 그림은 `etc`에 들어갑니다. 편집기에 보이려면 **Change Visiblity**로 `public`으로 바꿉니다.

템플릿 안에 놓은 그림은 그 템플릿의 하위 스티커가 됩니다. 이 스티커를 **템플릿 스티커**로 보여 주는 방법은 [리소스 관리](/docs/products/resources#utility)의 **Sticker**를 보세요.

## Pattern

배경 탭의 패턴 목록입니다. 상품 설정에서 `use-pattern`을 켜고 `pattern-group`을 고르면 배경 탭에 패턴이 나옵니다. 배경 탭의 패턴은 항상 카테고리 방식으로 보입니다.

사용법은 **Sticker**와 같습니다. 다른 점은 아래와 같습니다.

* 그룹이 하나도 없으면 `default` 그룹이 자동으로 저장됩니다.
* 그룹 옵션은 `single line ui`, `has all` 두 가지입니다. 데스크톱 편집기 배경 탭에는 `has all`이 적용되지 않습니다.
* 올릴 때는 **Upload Pattern**을 누릅니다. PNG, SVG를 받습니다.
* 바탕은 **Set Light**, **Set Dark** 버튼으로 바로 바꿉니다. 비율 바꾸기와 제목 바꾸기는 없습니다.

## Design

레이아웃 탭에서 디자인 그룹을 쓰는 상품의 디자인 목록입니다. 상품 설정에서 `layout-tab`을 켜고, `use-template`을 끄고, `design-group`을 고르면 레이아웃 탭이 그 그룹의 디자인을 보여 줍니다. 페이지 종류와 디자인을 짝짓는 `design-mode`는 [레이아웃과 배경](/docs/products/layout-background)에 있습니다.

디자인은 익스포터의 Design 출력으로 만듭니다. 출력할 때 고른 그룹의 `etc` 카테고리에 InDesign 페이지마다 한 건씩 `protected`로 올라갑니다. 페이지 제목이 있으면 그것이 디자인 제목이 됩니다. 올린 뒤 **Change Category**로 카테고리를 나누고, **Change Visiblity**로 `public`으로 바꿔야 레이아웃 탭에 나옵니다.

**Sticker**와 다른 점은 아래와 같습니다.

* 그룹 옵션은 `single line ui`, `has all`, `ignore etc` 세 가지입니다.
* `hide-div`는 파트너 권한에 따라 보입니다. `tags`는 없습니다.
* 바탕은 **Set Light**, **Set White**, **Set Dark**로 정합니다.
* **Display**는 목록 아래 글자를 제목과 페이지 종류 사이에서 바꿔 봅니다.
* **Export List**는 카테고리의 디자인 번호, ID, 제목, 페이지 종류를 CSV로 받습니다. **Import List**는 같은 형식의 CSV나 XLSX를 읽어 `ID`별로 `title`을 고칩니다.

<Note>
  **Upload Design**은 PNG, SVG 그림을 `design`으로 등록하지만 페이지 문서로 바꾸지는 않습니다. 레이아웃 탭은 디자인을 페이지 문서로 읽으므로, 디자인은 익스포터로 올리세요.
</Note>

## 됐는지 확인

<Check>
  **Resource**에서 그 상품의 템플릿을 고르고 **Demo**를 누릅니다. 스티커 탭을 열었을 때, 만든 카테고리가 정한 순서로 보이고 고른 카테고리에 올린 스티커가 나오면 됩니다. 카테고리가 안 보이면 **Asset Settings**의 `sticker-manage`가 `category`인지 확인하세요.
</Check>

## 다음 단계

<Columns cols={2}>
  <Card title="자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어" icon="shapes" href="/docs/products/assets">
    스티커 탭의 도형과 박 같은 부속 요소 설정을 정합니다.
  </Card>

  <Card title="팔레트" icon="palette" href="/docs/products/palettes">
    색과 박, 소재를 정의합니다.
  </Card>
</Columns>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.