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

# 썸네일, 미리보기, 색상

> 저장할 때 만드는 썸네일, 미리보기와 나가기 전 확인, 색상 모드, 크기 표시와 면적 계산

편집기는 사용자가 저장할 때마다 썸네일을 만들어 돌려줍니다. 장바구니나 주문 목록에 보이는 그 이미지입니다. 이 페이지는 썸네일과 미리보기, 색상, 크기 표시를 다룹니다. 재단선 경고와 나가기 확인은 [편집기 동작](/docs/products/editor-behavior#경고)에 있습니다.

## 배우는 것

* 썸네일을 몇 장, 어떤 모양으로 만들지 정하는 방법
* 여러 페이지를 한 장의 썸네일로 모으는 방법
* 미리보기와 색상 선택기의 동작을 정하는 방법

## 썸네일

`thumbnail`과 `tn-option`은 **편집기 동작** 그룹의 **시작 상태** 줄에 있습니다. 썸네일은 저장할 때 만들어 `save-doc-report`([편집기 이벤트](/docs/sdk/events))의 `docInfo.tnUrlList`로 돌려줍니다. 기본 크기는 550 × 550px 상자에 맞춘 PNG입니다.

### thumbnail: 몇 장 만들지

| 화면 이름 | 저장 값 | 썸네일 |
| - | - | - |
| `front-page` | `front-page` | 첫 페이지 한 장입니다. 표지가 있으면 표지입니다. 기본값입니다 |
| `all-page (4)` | `all-page` | 앞에서부터 페이지마다 한 장씩, 최대 4장입니다 |
| `all-page (force)` | `all-page-force` | 모든 페이지를 한 장씩 만듭니다. 파트너 권한에 따라 목록에 없을 수 있습니다 |
| `dual-page-h` | `dual-page@h` | 1페이지와 2페이지를 가로로 붙여 한 장으로 만듭니다 |
| `dual-page-v` | `dual-page@v` | 1페이지와 2페이지를 세로로 붙여 한 장으로 만듭니다 |
| `none` | `none` | 만들지 않습니다 |

썸네일은 저장할 때마다 한 장씩 차례로 그려 올리므로 장수가 늘수록 저장이 오래 걸립니다. 그래서 `all-page`도 4장에서 멈춥니다. `tnUrlList`의 썸네일은 위 방식으로 그린 2D 이미지 한 종류입니다. 모든 페이지를 이미지로 보여 줘야 하면 저장된 프로젝트를 [Preview 모드](/docs/sdk/preview)로 띄웁니다.

`dual-page`는 3페이지부터를 무시합니다. 앞뒷면 카드처럼 두 면을 한눈에 보여 줄 때 씁니다. 가변 데이터(VDP) 문서는 VDP 옵션 `force_snapshot`을 켰을 때만 이 값과 관계없이 모든 페이지를 만듭니다.

### tn-option: 어떤 모양으로 만들지

| 화면 이름 | 저장 값 | 영역 | 배경 | 가이드 |
| - | - | - | - | - |
| `none` | `none` | 재단 영역 | 포함 | 포함 |
| `nocut` | `nocut` | 편집 대지 전체 | 포함 | 포함 |
| `ex-bg-nocut` | `exclude-bg-nocut` | 편집 대지 전체 | 빼기 | 포함 |
| `ex-guide` | `exclude-guide` | 재단 영역 | 포함 | 빼기 |
| `ex-guide-bg` | `exclude-guide-bg` | 재단 영역 | 빼기 | 빼기 |
| `ex-guide-nc` | `exclude-guide-nocut` | 편집 대지 전체 | 포함 | 빼기 |
| `ex-guide-bg-nc` | `exclude-guide-bg-nocut` | 편집 대지 전체 | 빼기 | 빼기 |

**재단 영역**은 아래 순서로 정합니다.

1. 템플릿 페이지에 `RenderBound`(생산 렌더에 쓸 사각 영역을 정하는 예약 개체, [예약 개체 이름과 페이지 영역](/docs/templates/reserved-names))가 있으면 그 영역입니다. 생산 렌더와 같은 모양입니다.
2. 없으면 페이지에서 사이즈 페이지 정보의 재단 여백을 잘라 냅니다. `edge-type`이 `fold`면 자르지 않습니다.
3. 페이징 규칙이 있는 상품의 표지는 책등과 뒷표지를 잘라 앞표지만 남깁니다. 오른쪽 면만 쓰는 반쪽 내지는 오른쪽 반만 남깁니다.

**편집 대지 전체**는 재단 여백과 `RenderBound` 바깥까지 포함한 페이지 전체입니다.

**가이드**는 인쇄되지 않는 안내 그림(케이스 몸체, 그림자 등)입니다. 가이드를 빼도 후가공 레이어와 `render=true` 개체는 남습니다. 개체별로 `snapshot=false`를 단 가이드는 항상 빠집니다. 배경을 빼면 그 자리는 투명합니다. 템플릿 쪽 표기는 [레이어 이름과 개체 종류](/docs/templates/layers)와 [예약 개체 이름과 페이지 영역](/docs/templates/reserved-names)을 보세요.

띄우기 옵션 `options.tn_upload.thumbnail_option`을 주면 `tn-option`보다 우선합니다. `options.tn_upload`의 `url`을 주면 데스크톱 상단에 썸네일 업로드 버튼이 생기고, `url`이 `file://download`면 다운로드 버튼이 됩니다. `size`(px), `file_type`으로 그 버튼이 만드는 이미지 크기와 형식을 바꿉니다. 이 버튼도 `thumbnail_option`이 없으면 상품의 `tn-option`을 씁니다. `tn_upload` 없이 호스트가 `save-snapshot` 커맨드로 이미지를 받을 때만 `nocut`으로 만듭니다.

### 여러 페이지를 한 장으로

사이즈의 **product override**에서 **Tn**을 정합니다. 비워 두면(`undefined`) 상품 기본 동작을 따릅니다.

| 항목 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| Tn | `tn.type` | `undefined` | `default`는 썸네일 상자 크기만 바꿉니다. `grid-fit`은 여러 페이지를 격자로 모아 한 장으로 만듭니다 |
| width, height | `tn.size` | `550`, `550` | 썸네일 상자 크기(px)입니다 |
| page-count | `tn.page_count` | `0` | 모을 페이지 수입니다. `0`이면 모든 페이지입니다. `grid-fit`에서만 씁니다 |
| flow | `tn.flow` | `vertical` | `horizontal`은 왼쪽에서 오른쪽, 다음 줄 순서로, `vertical`은 위에서 아래, 다음 열 순서로 채웁니다. `grid-fit`에서만 보입니다 |
| outer padding-w, -h | `tn.padding.outer` | `5`, `5` | 바깥 여백(px)입니다. `grid-fit`에서만 보입니다 |
| inner padding-w, -h | `tn.padding.inner` | `5`, `5` | 페이지 둘레 여백(px)입니다. `grid-fit`에서만 보입니다 |

`grid-fit`은 첫 페이지 크기를 기준으로 한 줄에 1\~4장인 배치 중 페이지가 가장 크게 보이는 배치를 고르고, 흰 바탕에 그립니다. `thumbnail` 값이 정하는 장수만큼 같은 이미지를 만들므로 `thumbnail`은 `front-page`로 둡니다. `thumbnail`이 `dual-page`면 `grid-fit`보다 `dual-page`가 우선합니다.

## 미리보기

**출력 · 색상** 그룹의 **미리보기** 줄입니다. 데스크톱의 미리보기 버튼은 [편집기 동작](/docs/products/editor-behavior)의 `preview-ui`가 정합니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `prv-on-exit` | `exitPreview` | 꺼짐 | **편집종료**를 누르면 미리보기를 먼저 띄웁니다. 미리보기 아래 **편집화면으로 돌아가기**와 **종료하기** 버튼이 나옵니다 |
| `prv-check` | `pageVisit` | 꺼짐 | 사용자가 한 번도 열지 않은 페이지가 있을 때만 **편집종료**에서 위 미리보기를 띄웁니다 |
| `no-edit-page` | `noEditedPageMode` | `none` | 개체가 하나도 없고 배경도 없거나 투명한 빈 페이지가 있으면 종료 전에 확인합니다. `warning`은 그래도 종료할지 묻고, `prevent`는 알림을 띄우고 종료를 막습니다 |
| `prv-option` | `previewOption` | `none` | 미리보기의 모양입니다. 아래 표를 보세요 |
| `prv-zoom` | `previewZoom` | `default` | `100%`만 동작합니다. 데스크톱 미리보기에서 페이지를 실제 크기(1mm = 96/25.4px)로 보여 주고, 창보다 크면 창에 맞춥니다. 다른 값과 기존 모바일 UI, 신규 모바일 UI는 창에 맞춥니다 |
| `prv-multi` | `previewMulti` | 꺼짐 | 사이즈에 `standard` 페이징 규칙이 있으면 미리보기를 **여러장 보기**로 엽니다. 내지를 끌거나 화살표로 순서를 바꿀 수 있고 닫을 때 반영합니다. **한장씩 보기**로 전환할 수 있습니다. `multi-page`를 켜야 열립니다 |
| `prv-mobile` | `previewMobile` | 꺼짐 | 기존 모바일 UI(`mobile: true`)와 신규 모바일 UI(`mobile: 'm2'`)의 머리글에 미리보기 버튼을 보여 줍니다. 신규 모바일 UI는 사이즈 미리보기가 `model-3d`나 `surface-stack`이면 이 값과 관계없이 보여 줍니다 |

| `prv-option` 화면 값 | 저장 값 | 미리보기 |
| - | - | - |
| `none` | `none` | 재단 여백을 가리고 가이드를 보여 줍니다 |
| `nocut` | `nocut` | 재단 여백까지 보여 줍니다 |
| `ex-guide` | `exclude-guide` | 재단 여백을 가리고 가이드를 숨깁니다 |
| `ex-guide-nc` | `exclude-guide-nocut` | 재단 여백까지 보여 주고 가이드를 숨깁니다 |

`prv-on-exit`과 `prv-check`의 미리보기는 사이즈 미리보기가 `real-2d`면 그 방식으로, 나머지는 기본 방식으로 엽니다. 확인 화면의 제목과 설명은 [파트너 공통 설정](/docs/products/style)의 `preview_confirm_title`, `preview_confirm_desc` 문구로 바꿉니다. 사이즈별 미리보기 방식은 [사이즈 고급 옵션](/docs/products/size-options#preview)에 있습니다.

## 색상

**출력 · 색상** 그룹의 **색상** 줄입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `color-mode` | `colorMode` | `cmyk` | 색 선택기의 방식입니다. `CMYK`(저장 값 `cmyk`)는 고른 색을 CMYK 값으로 바꿔 함께 저장하고 CMYK 값을 직접 입력하게 합니다. `RGB`(`rgb`)는 RGB로만 고릅니다 |
| `default-cmyk-profile` | `cmykProfile` | `Japan Color 2001 Coated` | RGB와 CMYK를 바꿀 때 쓰는 프로파일입니다. 템플릿에 프로파일이 있으면 템플릿 것을 씁니다. 기본 색 견본도 프로파일마다 다릅니다. `color-mode`가 `cmyk`일 때 열립니다 |
| `palette-code` | `palCode` | `default` | 기본 색 견본 대신 보여 줄 팔레트입니다. `default`면 팔레트를 쓰지 않습니다 |
| `palette-mode` | `paletteMode` | `default` | `strict`면 팔레트 색만 쓰게 하고 `no-custom`을 자동으로 켭니다 |
| `no-custom` | `noCustomColor` | 꺼짐 | 색 선택기에서 사용자 정의 색(직접 고르기)을 숨깁니다 |
| `black-mode` | `blackMode` | `default` | `c0m0y0k100`(저장 값 `cmyk:0,0,0,100`)이면 CMYK 기본 색 견본의 검정을 먹 100%로 바꿉니다. `default`는 프로파일의 4색 검정입니다. 팔레트를 쓰면 영향이 없습니다 |

`default-cmyk-profile` 목록의 저장 값은 화면 이름과 같습니다. 예외로 **ISO Coated v2**는 `ISO Coated`로 저장되는데, 편집기는 이 값을 알아보지 못해 `Japan Color 2001 Coated`를 씁니다. `color-mode`와 `default-cmyk-profile`은 편집기의 색 선택에만 쓰입니다. 인쇄 PDF를 만들 때의 색 변환은 이 값을 읽지 않고 템플릿 문서의 프로파일과 [렌더 출력 옵션](/docs/products/render-output)을 따릅니다.

팔레트를 만드는 방법과 `strict` 모드의 흐름은 [팔레트](/docs/products/palettes)에 있습니다. 팔레트는 사이즈의 product override와 띄우기 옵션 `options.palette`로도 바꿉니다.

## 크기 표시와 면적 계산

**출력 · 색상** 그룹의 **크기 표시** 줄입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `show-page-size` | `showPageSize` | 꺼짐 | 캔버스 위에 **재단크기**와 **작업크기**를 mm 정수로 보여 줍니다. 데스크톱, 기존 모바일 UI, 신규 모바일 UI 모두 해당합니다. `size-tab`이 켜져 있어도 보입니다 |
| `show-item-size` | `showItemSize` | 꺼짐 | 개체를 선택하면 옆에 `가로 x 세로 mm`(소수 첫째 자리)를 보여 줍니다 |
| `calc-area` | `calcArea` | 꺼짐 | 저장할 때 페이지마다 그림이 있는 면적을 계산해 `save-doc-report`의 `docInfo.areaInfos`로 돌려줍니다 |
| `size-preview` | `sizePreview` | 꺼짐 | 데스크톱 캔버스에 **제품 크기 비교** 표시와 비교 이미지를 실제 축척으로 보여 줍니다 |
| `size-preview-uri` | `sizePreviewUri` | 빈 값 | 비교 이미지 주소입니다. `size-preview`를 켜야 열립니다 |

**재단크기**는 템플릿의 크기 기준 개체, `Cut` 칼선, `RenderBound`, 페이지에서 재단 여백을 뺀 크기 순서로 찾습니다. **작업크기**는 크기 보조 개체, `RenderBound`, 페이지 전체 순서로 찾습니다. `show-page-size`와 `show-item-size`는 사이즈의 product override로 바꿀 수 있습니다.

`size-preview-uri` 끝에 `?w=가로mm&h=세로mm`를 붙이면 그 크기로 그립니다. `&s=1`을 더하면 그림자를 넣습니다. `gcs://` 리소스 주소와 `https://` 주소를 씁니다.

```text theme={null}
https://cdn.example.com/hand.png?w=85&h=54&s=1
```

`calc-area`는 배경과 가이드를 뺀 페이지를 550px 상자에 그려 투명하지 않은 픽셀 비율을 셉니다.

| 필드 | 의미 |
| - | - |
| `pageArea` | 페이지 가로 × 세로(mm²) |
| `coverage` | 투명하지 않은 픽셀의 비율(0\~1) |
| `effectiveArea` | `coverage × pageArea`(mm²) |
| `maxEffectiveArea` | 템플릿 `PageInfo`의 `EffectiveArea=` 값. 없으면 `0` |
| `effectiveCoverage` | `maxEffectiveArea`에 대한 비율. 없으면 `coverage`와 같습니다 |

## 달력 줄

같은 그룹의 **달력** 줄(`resolve-date`, `change-date`, `change-mode`, `year-type`)은 [달력 상품](/docs/products/calendar)에 있습니다.

## 됐는지 확인

<Check>
  Manager **Resource**에서 템플릿을 고르고 **Demo**로 열어 미리보기, 색 선택기, 크기 표시가 설정대로 나오면 됩니다. 썸네일은 저장할 때 만들어지므로 [테스트 주문과 렌더링](/docs/templates/test-render)의 **Test Order**로 저장까지 해 봅니다.
</Check>

<Note>
  저장 결과 `save-doc-report`의 `tnUrlList`에 `thumbnail`이 정한 장수만큼 이미지가 오는지, 그 모양이 `tn-option`과 맞는지는 연동 담당자에게 확인을 부탁하세요.
</Note>

## 다음 단계

<Columns cols={2}>
  <Card title="팔레트" icon="palette" href="/docs/products/palettes">
    색 팔레트와 박, 소재를 만듭니다.
  </Card>

  <Card title="렌더 옵션" icon="print" href="/docs/products/render-options">
    주문 뒤 인쇄용 파일을 만드는 방식을 정합니다.
  </Card>
</Columns>


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