> ## 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.

# 팔레트

> Palette 화면에서 색, 박(호일), 소재를 정의하고 상품과 편집기 색 선택에 연결하는 방법

팔레트는 편집기에서 고를 수 있는 색과 박을 미리 정해 둔 목록입니다. 인쇄소가 쓰는 별색이나 박 종류만 고르게 하고 싶을 때 씁니다. 같은 팔레트를 소재(material) 목록으로도 씁니다. 이 페이지는 Edicus Manager의 **Palette** 화면과 상품 설정의 연결을 다룹니다.

## 배우는 것

* 팔레트에 색, 박, 소재를 정의하는 방법
* 상품 설정과 띄우기 옵션이 팔레트를 고르는 순서
* 편집기 색 선택 창에서 팔레트가 보이는 모습

## 팔레트의 구조

**Palette** 메뉴는 파트너 관리자 계정(partner-admin)에 보입니다. 디자이너(partner-designer) 계정의 메뉴 노출은 [리소스 관리](/docs/products/resources#메뉴가-보이는-계정)를 보세요. 팔레트는 파트너마다 따로 저장됩니다.

| 항목 | 화면 이름 | 설명 |
| - | - | - |
| `palCode` | 왼쪽 목록의 이름 | 팔레트를 가리키는 코드입니다. 상품 설정이 이 값으로 팔레트를 고릅니다 |
| `dpName`, `dpNameLn` | `dp-name`, **dp-name i18n** | 편집기에 보일 팔레트 이름과 다국어 이름입니다. 박 선택 버튼에 "이름 선택"으로 나옵니다 |
| `msgName`, `msgNameLn` | `msg-name`, **msg-name i18n** | 박 개수 경고 같은 안내 문구에 들어갈 이름입니다. 비우면 `dpName`을 씁니다 |
| `colors` | **Color** 표 | 색 목록입니다 |
| `foils` | **Foil** 표 | 박 목록입니다 |

한 팔레트에 색과 박을 함께 둘 수 있습니다. 상품 설정의 목록은 쓰임에 맞는 팔레트만 보여 줍니다.

## 팔레트 만들기

<Steps>
  <Step title="Palette 화면을 엽니다">
    왼쪽 메뉴에서 **Palette**를 누릅니다.
  </Step>

  <Step title="팔레트를 추가합니다">
    **Add Palette**를 누르고 `palCode`와 `dpName`을 넣습니다. `palCode`는 다른 팔레트와 겹치면 안 되고, 저장 경로의 키라서 `. $ # [ ] /`를 쓸 수 없습니다. **Copy from Base Palette**에 체크하고 팔레트를 고르면 그 팔레트의 색을 복사해 시작합니다. 박은 복사되지 않습니다.
  </Step>

  <Step title="색과 박을 넣습니다">
    오른쪽 위 **Add Color**나 **Add Foil**을 누르고 값을 넣은 뒤 **Apply**를 누릅니다. 바로 저장됩니다.
  </Step>

  <Step title="이름을 저장합니다">
    `dp-name`, `msg-name` 칸을 고쳤다면 툴바의 **Update Name**을 누릅니다. 다국어 이름 버튼은 창을 닫을 때 바로 저장됩니다.
  </Step>
</Steps>

표의 각 줄 **⋮** 메뉴로 `edit`, `i18n`, `up`, `down`, `delete`를 합니다. 박 줄에는 복제하는 `clone`도 있습니다. 순서는 편집기 목록 순서이고, 바꾸면 바로 저장됩니다. 팔레트 자체는 왼쪽 목록의 **⋮** > **delete**로 지웁니다.

## 색

| 칸 | 설명 |
| - | - |
| `name` | 색의 코드입니다. 띄우기 옵션의 이름 필터와 소재 지정, 렌더 단계의 색 구분에 쓰입니다 |
| `dpName` | 사람이 읽는 이름입니다. **i18n**으로 다국어 이름을 붙입니다 |
| R, G, B | 0\~255입니다. 화면 표시 색이고, 저장할 때 `hex`가 함께 만들어집니다 |
| C, M, Y, K | 0\~100입니다. 인쇄용 값입니다 |
| CMYK Validity | `valid`면 이 CMYK 값이 실제 인쇄 값이라는 뜻입니다. strict 모드에서 새 글자 색이나 색 입히기에 CMYK를 함께 기록합니다 |

<Warning>
  상품의 `color-mode`가 `cmyk`면, 사용자가 팔레트 색을 고를 때 CMYK Validity와 관계없이 그 색의 C, M, Y, K 값이 들어갑니다. CMYK를 비워 두면 0, 0, 0, 0이 들어가므로 CMYK 상품에 쓸 팔레트는 CMYK 값을 꼭 채우세요.
</Warning>

## 박

| 칸 | 설명 |
| - | - |
| `name` | 박의 코드입니다. 사용자가 박을 입히면 문서에 `value://layer/name?foil=true...` 형식으로 기록됩니다. 렌더 레이어 이름은 이 값이 아닙니다. SVG 계열 렌더는 박을 입힌 개체의 윤곽을 `KissCut` 레이어로 따로 만들고([`foil-layer-control`](/docs/products/render-options#foil-layer-control)로 선 모양을 정합니다), PDF2와 PDF는 박을 따로 레이어로 나누지 않습니다 |
| `dpName` | 박 선택 목록에 보일 이름입니다. **i18n**으로 다국어 이름을 붙입니다 |
| `dpUrl` | 박 선택 목록에 보일 견본 그림 주소입니다 |
| Foil Type | `knockout` 또는 `overlay`입니다. 기존 데이터처럼 값이 없으면 `knockout`입니다 |
| `patternUrl` | `knockout`일 때 편집 화면에서 박 질감을 보여 줄 패턴 그림 주소입니다 |
| hex | `overlay`일 때 박을 덮어 보여 줄 색입니다. `#rrggbb`나 넷째 자리가 투명도인 `#rgba`를 씁니다 |
| C, M, Y, K | `overlay`일 때 hex와 함께 기록할 인쇄 값입니다 |

<Warning>
  박과 색의 `name`은 이미 만든 프로젝트 문서에 기록됩니다. 쓰기 시작한 뒤에 `name`을 바꾸면 기존 프로젝트의 박을 목록에서 찾지 못해 이름 대신 코드가 그대로 보입니다.
</Warning>

## 소재

소재는 아크릴 받침처럼 상품의 재질 색을 템플릿에 입히는 기능입니다. 오버레이는 편집 내용 위에, 언더레이는 편집 내용 아래에 깔리는 고정 개체입니다. 따로 메뉴가 없고, 팔레트의 색이나 박 한 줄이 소재 하나가 됩니다.

1. 상품 설정의 `mat-code`에서 소재 목록으로 쓸 팔레트를 고릅니다.
2. 사이즈의 `material option`에 `material_code`로 그 팔레트의 색이나 박 `name`을 적습니다.
3. 편집기는 프로젝트를 만들 때 템플릿에서 변수 id가 `material`인 오버레이와 언더레이 개체를 찾습니다. `material option`의 `overlay`, `underlay` 값이 `material`이면 소재로 칠하고, `hidden`이면 숨기고, `white`면 흰색으로 둡니다.

| 고른 줄 | 칠하는 방법 |
| - | - |
| 색 | 그 색의 `hex`로 채웁니다 |
| `knockout` 박 | `patternUrl`의 박으로 덮습니다. `patternUrl`이 `value://color`로 시작하면 흰색으로 채웁니다 |
| `overlay` 박 | 그 박의 hex로 채웁니다 |

`material_code`와 같은 이름을 색에서 먼저 찾고, 없으면 박에서 찾습니다. 그래도 없으면 `material option`의 `fallback` 값대로 숨기거나 흰색으로 둡니다. `mat-code`와 `material option`의 자세한 설정은 [편집기 동작](/docs/products/editor-behavior)과 [사이즈 고급 옵션](/docs/products/size-options#material-option)에 있습니다.

## 상품 설정과의 연결

| 상품 설정 | 목록에 나오는 팔레트 | 하는 일 |
| - | - | - |
| `palette-code` (`palCode`) | 색이 한 개 이상 있는 팔레트와 `default` | 색 선택 창의 팔레트입니다. `default`면 팔레트를 쓰지 않습니다 |
| `palette-mode` (`paletteMode`) | `default`, `strict` | `strict`면 팔레트 색만 쓸 수 있습니다. 아래를 보세요 |
| `no-custom` (`noCustomColor`) | 켜기, 끄기 | 사용자가 색을 새로 만드는 칸을 숨깁니다. `strict`면 자동으로 켜집니다 |
| `foil-code` (`foilCode`) | 박이 한 개 이상 있는 팔레트와 `none` | 박 선택 목록입니다 |
| `foil-mode` (`foilMode`) | `default`, `strict` | `strict`면 새 개체에 박이 자동으로 걸리고 박을 해제할 수 없습니다. 아래 [박 선택](#박-선택)을 보세요 |
| `mat-code` (`matCode`) | 모든 팔레트와 `none` | 소재 목록입니다 |

색상 쪽 항목은 [썸네일, 미리보기, 색상](/docs/products/thumbnail-preview), 박 쪽 항목과 박 개수 검사는 [자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어](/docs/products/assets)에 있습니다.

### 어느 값이 이기나

편집기는 아래 순서로 값을 덮어씁니다. 아래쪽이 이깁니다.

```mermaid theme={null}
flowchart TD
    A["상품 설정 palette-code, palette-mode, foil-code, foil-mode"] --> B["사이즈 product override의 Palette Code, Palette Mode, Foil Code, Foil Mode"]
    B --> C["palette 옵션: 사이즈 edicus options의 palette 위에 띄우기 옵션 options.palette를 덮은 값"]
    C --> D["override 옵션의 sizeOption: palCode, paletteMode, foilCode, foilMode"]
    D --> E["팔레트를 읽을 때 palette 옵션의 palCode, foilCode를 한 번 더 적용"]
```

| 단계 | 바꾸는 값 |
| - | - |
| 상품 설정 | 기본값입니다 |
| 사이즈 product override | 비워 두지 않은 항목만 덮어씁니다 |
| palette 옵션 | 사이즈 `edicus options`의 `palette`와 띄우기 옵션 `options.palette`를 합친 값입니다. 같은 키는 띄우기 옵션이 이깁니다. `palCode`, `noCustomColor`를 덮어쓰고, `paletteMode`는 `'strict'`일 때만 켭니다 |
| override 옵션의 `sizeOption` | 사이즈 `edicus options`나 띄우기 옵션 `options`의 `override.sizeOption`입니다. `palCode`, `paletteMode`, `foilCode`, `foilMode`를 다시 덮어씁니다. 여기서는 `paletteMode`를 `default`로 되돌릴 수도 있습니다 |
| 팔레트를 읽을 때 | palette 옵션에 `palCode`가 있으면 그 팔레트를, `foilCode`가 있으면 그 박 팔레트를 읽습니다. 그래서 두 코드는 palette 옵션이 최종으로 이깁니다 |

마지막에 `paletteMode`가 `strict`면 `no-custom`이 켜집니다. 색 팔레트는 이 시점의 `palCode`가 `default`면 읽지 않고, 박 팔레트는 `foilCode`가 비었거나 `none`이면 읽지 않습니다.

<Note>
  `options.palette`와 `options.override`는 편집기를 띄우는 코드에서 넘깁니다. 바꿀 일이 있으면 연동 담당자에게 요청하세요.
</Note>

| `options.palette` 키 | 설명 |
| - | - |
| `palCode` | 쓸 팔레트 코드입니다 |
| `palNameFilters` | 색 `name` 배열입니다. 이 이름의 색만 보여 줍니다 |
| `paletteMode` | `'strict'`만 효과가 있습니다. 상품이 `strict`인 것을 끌 수는 없습니다 |
| `noCustomColor` | `no-custom`을 덮어씁니다. `strict`면 무시하고 켭니다 |
| `max_color` | strict 모드에서 사용자가 고를 색 개수입니다 |
| `palNameMajor` | strict 모드에서 이 `name`의 색을 맨 앞에 두고 고르기 창 없이 바로 적용합니다 |
| `foilCode` | 쓸 박 팔레트 코드입니다. 상품과 덮어쓰기를 거친 `foil-code`가 `none`이 아닐 때만 효과가 있습니다 |
| `foilNameFilters` | 박 `name` 배열입니다. 이 이름의 박만 보여 줍니다 |
| `foilNameMajor` | 이 `name`의 박을 목록 맨 앞에 둡니다 |

```ts theme={null}
const session = edicus.createProject({
  parent_element: el,
  token,
  ps_code: '50x50@STAMP',
  template_uri: 'gcs://...',
  options: {
    palette: { palCode: 'ink', palNameFilters: ['red', 'blue'] },
  },
})
```

## 편집기에서 보이는 모습

### palette-mode가 default일 때

색 선택 창은 위쪽 **Custom Colors**와 아래쪽 **Predefined Colors**로 나뉩니다.

* 팔레트를 쓰지 않으면 **Predefined Colors**에 편집기 기본색 20개가 나옵니다.
* 팔레트를 쓰면 **Predefined Colors**가 팔레트 색으로 바뀝니다. 팔레트 순서대로 색 견본만 보이고 이름은 보이지 않습니다.
* **Custom Colors**는 사용자가 직접 만든 색 칸입니다. `no-custom`을 켜면 이 칸이 사라집니다.
* `color-mode`가 `cmyk`면 아래에 CMYK 프로파일 이름이 함께 보입니다.

### palette-mode가 strict일 때

잉크 색이 정해진 상품(스탬프, 단색 인쇄 등)을 위한 방식입니다.

1. 새 프로젝트를 만들면 편집기가 문서 전체를 팔레트의 첫 색으로 다시 칠합니다. 도형의 채우기와 선, 글자, 스티커와 사진과 그림 배경의 색 입히기가 모두 바뀝니다.
2. `options.palette.max_color`가 팔레트 색 수와 다르면, 먼저 **잉크 색상 선택** 창이 떠서 그 개수만큼 칸을 채우게 합니다. 칸마다 팔레트 색을 하나씩 고르고, 모든 칸을 채워야 적용됩니다. 고른 색만 문서의 팔레트가 됩니다. `palNameMajor`가 있으면 이 창 없이 바로 적용합니다. 데스크톱, 기존 모바일 UI(`mobile: true`), 신규 모바일 UI(`mobile: 'm2'`) 모두 같습니다.
3. 이후 색 선택 창에는 문서 팔레트의 색만 나옵니다. **Custom Colors**는 없습니다.
4. 색을 일부만 고른 문서는 캔버스에 색 변경 버튼이 생깁니다. 바꾸면 문서 안의 색이 새 색으로 함께 바뀝니다. 띄우기 옵션 `edit_lock`에 `set-strict-color`를 주면 이 버튼이 숨겨집니다.

### 박 선택

`foil-code`를 쓰는 상품은 데스크톱에서 개체를 고르면 캔버스에 박 선택 버튼이 생깁니다. 버튼에는 박을 입혔으면 그 박의 이름이, 아니면 "팔레트 이름 선택"이 보입니다. 목록에는 박마다 `dpUrl` 견본과 화면 언어에 맞는 이름이 나오고, 맨 아래에 박을 빼는 **선택 해제**가 있습니다.

`foil-mode`가 `strict`면 새로 넣는 사진 칸, 글상자, 스티커, 그림, 도형에 박이 자동으로 걸리고, 박 선택 목록에서 **선택 해제**가 빠져 박을 해제할 수 없습니다. 다른 박으로 바꾸는 것만 됩니다. 자동으로 거는 박은 문서에서 가장 많이 쓴 박이고, 아직 쓴 박이 없으면 팔레트의 첫 번째 박입니다. 새 도형은 테두리 없이 만들어집니다. 데스크톱, 기존 모바일 UI, 신규 모바일 UI 모두 같습니다.

## 됐는지 확인

<Check>
  상품에 `palette-code`를 연결하고 **Update**로 저장합니다. **Resource**에서 그 상품의 템플릿을 고르고 **Demo**를 누릅니다. 글상자를 골라 글자 색 선택 창의 **Predefined Colors**에 팔레트 색이 순서대로 보이면 됩니다. 박 팔레트는 개체를 골랐을 때 박 선택 목록에 `dpUrl` 견본이 보이는지 확인하세요. Demo는 저장과 사진 업로드가 안 되므로, 박을 입힌 결과를 주문 데이터로 보려면 [테스트 주문과 렌더링](/docs/templates/test-render)의 Test Order를 씁니다.
</Check>

## 다음 단계

<Columns cols={2}>
  <Card title="자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어" icon="shapes" href="/docs/products/assets">
    박 개수 검사 같은 편집기 동작을 정합니다.
  </Card>

  <Card title="썸네일, 미리보기, 색상" icon="eye" href="/docs/products/thumbnail-preview">
    색상 모드와 CMYK 프로파일을 정합니다.
  </Card>
</Columns>


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