팔레트

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

배우는 것

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

팔레트의 구조

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

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

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

팔레트 만들기

Palette 화면을 엽니다

왼쪽 메뉴에서 Palette를 누릅니다.

팔레트를 추가합니다

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

색과 박을 넣습니다

오른쪽 위 Add Color나 Add Foil을 누르고 값을 넣은 뒤 Apply를 누릅니다. 바로 저장됩니다.

이름을 저장합니다

dp-name, msg-name 칸을 고쳤다면 툴바의 Update Name을 누릅니다. 다국어 이름 버튼은 창을 닫을 때 바로 저장됩니다.

표의 각 줄 ⋮ 메뉴로 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를 함께 기록합니다

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

박

칸	설명
`name`	박의 코드입니다. 사용자가 박을 입히면 문서에 `value://layer/name?foil=true...` 형식으로 기록됩니다. 렌더 레이어 이름은 이 값이 아닙니다. SVG 계열 렌더는 박을 입힌 개체의 윤곽을 `KissCut` 레이어로 따로 만들고(`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와 함께 기록할 인쇄 값입니다

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

소재

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

상품 설정의 mat-code에서 소재 목록으로 쓸 팔레트를 고릅니다.
사이즈의 material option에 material_code로 그 팔레트의 색이나 박 name을 적습니다.
편집기는 프로젝트를 만들 때 템플릿에서 변수 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의 자세한 설정은 편집기 동작과 사이즈 고급 옵션에 있습니다.

상품 설정과의 연결

상품 설정	목록에 나오는 팔레트	하는 일
`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`	소재 목록입니다

색상 쪽 항목은 썸네일, 미리보기, 색상, 박 쪽 항목과 박 개수 검사는 자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어에 있습니다.

어느 값이 이기나

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

단계	바꾸는 값
상품 설정	기본값입니다
사이즈 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이면 읽지 않습니다.

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

`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`의 박을 목록 맨 앞에 둡니다

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일 때

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

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

박 선택

foil-code를 쓰는 상품은 데스크톱에서 개체를 고르면 캔버스에 박 선택 버튼이 생깁니다. 버튼에는 박을 입혔으면 그 박의 이름이, 아니면 “팔레트 이름 선택”이 보입니다. 목록에는 박마다 dpUrl 견본과 화면 언어에 맞는 이름이 나오고, 맨 아래에 박을 빼는 선택 해제가 있습니다. foil-mode가 strict면 새로 넣는 사진 칸, 글상자, 스티커, 그림, 도형에 박이 자동으로 걸리고, 박 선택 목록에서 선택 해제가 빠져 박을 해제할 수 없습니다. 다른 박으로 바꾸는 것만 됩니다. 자동으로 거는 박은 문서에서 가장 많이 쓴 박이고, 아직 쓴 박이 없으면 팔레트의 첫 번째 박입니다. 새 도형은 테두리 없이 만들어집니다. 데스크톱, 기존 모바일 UI, 신규 모바일 UI 모두 같습니다.

됐는지 확인

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

시작하기

편집기 설정

자산과 공통 설정

상품 유형별 설정

렌더 설정

배우는 것

팔레트의 구조

팔레트 만들기

색

박

소재

상품 설정과의 연결

어느 값이 이기나

편집기에서 보이는 모습

palette-mode가 default일 때

palette-mode가 strict일 때

박 선택

됐는지 확인

다음 단계

자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어

썸네일, 미리보기, 색상

​배우는 것

​팔레트의 구조

​팔레트 만들기

​색

​박

​소재

​상품 설정과의 연결

​어느 값이 이기나

​편집기에서 보이는 모습

​palette-mode가 default일 때

​palette-mode가 strict일 때

​박 선택

​됐는지 확인

​다음 단계

자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어

썸네일, 미리보기, 색상

배우는 것

팔레트의 구조

팔레트 만들기

색

박

소재

상품 설정과의 연결

어느 값이 이기나

편집기에서 보이는 모습

palette-mode가 default일 때

palette-mode가 strict일 때

박 선택

됐는지 확인

다음 단계