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

# 페이지와 책등

> 페이지 그룹의 모든 항목, 페이징 규칙, 책등 두께 계산과 확인 방법

명함은 한두 장이면 끝나지만 포토북은 사용자가 페이지를 늘리고 줄입니다. 페이지가 늘면 책등도 두꺼워집니다. 이 페이지는 **상품 설정**의 **페이지** 그룹과 사이즈의 **paging-rule**, 책등과 관련된 띄우기 옵션을 다룹니다.

## 배우는 것

* 페이지 구성, 여러 장 설정, 페이지 표시 줄의 모든 항목
* 페이지 수 한도가 정해지는 순서
* 책등 두께가 계산되는 방식과 확인하는 방법

용어를 먼저 정리합니다. **스토리보드**는 편집 화면 아래의 페이지 목록입니다. **내지**는 `page-type`이 `content`인 페이지이고, **표지**는 `cover`인 페이지입니다. 편집기는 InDesign 페이지 하나를 페이지 하나로 셉니다. 펼침면으로 만든 템플릿이면 펼침면 하나가 1입니다.

## 페이지 구성

모두 기본값은 꺼짐입니다.

| 화면 이름 | 저장 키 | 설명 |
| - | - | - |
| `has-cover` | `cover` | 스토리보드 번호를 표지 기준으로 매깁니다. 첫 페이지는 **앞면**으로, 표지에 책등이 있거나 `split-page`가 켜져 있으면 **뒷면 / 앞면**으로 표시하고 다음 페이지부터 번호를 붙입니다. 문서에 표지 페이지가 없으면 무시합니다 |
| `split-page` | `splitPage` | 가운데서 접는 상품입니다. 표지가 아닌 페이지 가운데에 접힘 그림자를 그리고, 스토리보드 번호를 좌우 두 쪽으로 매깁니다 |
| `split-warning` | `splitWarning` | 선택한 사진 칸이 가운데 접힘선(폭 2mm)에 걸치면 "사진이 두 페이지에 걸쳐 있습니다" 경고를 띄웁니다. 표지는 검사하지 않습니다. `split-page`를 켜야 열립니다 |
| `no-split-shade` | `noSplitShade` | 편집 화면과 미리보기에서 접힘 그림자를 그리지 않습니다. `split-page`를 켜야 열립니다 |
| `double-side` | `doubleSide` | 스토리보드 번호를 첫 페이지 **앞면**, 나머지 **뒷면**으로 표시합니다. 다른 번호 규칙보다 우선합니다 |
| `multi-page` | `multiPage` | 편집 화면 아래에 스토리보드를 보여 줍니다. 아래 **여러 장 설정** 줄이 열립니다 |

<Note>
  `split-page`와 `double-side`는 편집기 화면(접힘 그림자, 정렬 기준, 스토리보드 번호)만 바꿉니다. 인쇄 파일에서 페이지를 나누거나 양면으로 배치하는 일은 같은 이름의 렌더 엔티티 [`split-page`](/docs/products/render-options#split-page)와 `grid-page`의 [`double-side`](/docs/products/render-options#grid-page)가 정합니다.
</Note>

사이즈의 `page-caption`을 `static`으로 두거나 템플릿에 `PageCaption`이 있으면 번호 대신 그 이름을 보여 줍니다. `split-warning`의 경고는 `no-cut-warn`을 켜면 나오지 않습니다.

## 여러 장 설정

`multi-page`를 켜야 이 줄이 열립니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `page-menu` | `pageMenu` | 꺼짐 | 스토리보드에 페이지 추가와 삭제 버튼을 보여 줍니다. 데스크톱에서는 끌어서 순서도 바꿀 수 있습니다. 신규 모바일 UI(`mobile: 'm2'`)에서는 **복제**, **삭제** 버튼으로, 기존 모바일 UI(`mobile: true`)에서는 페이지 패널의 추가·삭제 버튼으로 나옵니다 |
| `add-page-mode` | `addPageMode` | `default` | `default`는 현재 페이지를 복사해 새 페이지를 만듭니다. `clean`은 흰 배경 하나만 있는 빈 페이지를 만듭니다 |
| `reserve-photo` | `reservePhoto` | 꺼짐 | 복사한 페이지의 사진을 남깁니다. 끄면 사진 칸만 비우고 글자와 스티커는 남깁니다. 페이징 규칙이 있으면 항상 사진을 비웁니다 |
| `force-order` | `forceOrderPage` | 꺼짐 | `page-menu`를 꺼도 데스크톱 스토리보드에서 내지를 끌어 순서를 바꾸게 합니다. 기존 모바일 UI와 신규 모바일 UI에는 영향이 없습니다 |
| `min-page` | `minContentPage` | `1` | 페이징 규칙이 없을 때 내지 수의 최솟값입니다. 여기에 닿으면 삭제 버튼이 꺼집니다 |
| `max-page` | `maxContentPage` | `1` | 페이징 규칙이 없을 때 내지 수의 최댓값입니다. 여기에 닿으면 추가 버튼이 꺼집니다 |
| `grouping` | `pageGrouping` | 꺼짐 | 여러 페이지를 한 묶음(그룹)으로 다루고 그룹별 수량을 받습니다. 켜면 사이즈의 `paging-rule` 칸이 사라집니다 |
| `group-type` | `pageGroupType` | `default` | 그룹 스토리보드의 모양입니다. 아래 표를 보세요. `grouping`을 켜야 열립니다 |
| `group-tmpl` | `groupTemplate` | 꺼짐 | 템플릿 탭에서 템플릿을 고르면 확인 창 없이 현재 그룹의 페이지에만 적용합니다. 끄면 확인 창을 띄운 뒤 문서 전체를 바꿉니다. `group-type`이 `default`일 때 열립니다 |

| `group-type` 화면 값 | 저장 값 | 스토리보드 |
| - | - | - |
| `default` | `default` | 그룹마다 수량 입력과 삭제 버튼, 끝에 그룹 추가 버튼이 있습니다 |
| `composite` | `composition` | 그룹 추가, 삭제, 수량 입력이 없습니다. 조판용 그룹 설정(`options.composition`)과 함께 씁니다 |
| `package` | `package` | 그룹 추가가 없고 페이지마다 크기 버튼이 있습니다. 누르면 부모 사이트로 `request-page-size-change` 이벤트를 보냅니다 |

그룹 상품의 수량, 묶음 단위, 템플릿 구성은 [포토카드](/docs/products/photocard)에 있습니다.

새 페이지는 현재 페이지 바로 뒤에 들어갑니다. 표지와 반쪽 내지(왼쪽 면이나 오른쪽 면만 쓰는 페이지)에서는 추가, 삭제, 순서 바꾸기를 할 수 없습니다.

### 페이지 수 한도

페이징 규칙이 있으면 상품의 `min-page`, `max-page`는 쓰지 않습니다.

| 순서 | 페이징 규칙이 있을 때 | 페이징 규칙이 없을 때 |
| - | - | - |
| 1 | 띄우기 옵션 `max_page`, `min_page`에 `param-modifier`를 더한 값 | 띄우기 옵션 `max_page`, `min_page` |
| 2 | 페이징 규칙의 `max-spread`, `min-spread` | 상품의 `max-page`, `min-page` |

한도는 내지 수로 셉니다. 반쪽 내지도 1로 셉니다.

<Tip>
  `min-page`와 `max-page`의 기본값은 둘 다 `1`입니다. 페이징 규칙 없이 `multi-page`와 `page-menu`만 켜면 처음부터 추가 버튼이 꺼져 있습니다. 페이지를 늘리는 상품은 `max-page`부터 올리세요.
</Tip>

### 시작 장수를 정하는 띄우기 옵션

`num_page`는 새 프로젝트의 내지 수를 맞춥니다. 템플릿보다 많으면 일반 내지를 순서대로 복사해 뒤에 붙이고, 적으면 뒤에서부터 지웁니다. 페이징 규칙에 `param-modifier`가 있으면 그 값을 더한 수로 맞춥니다.

`10x3`처럼 `NxM` 형식도 받습니다. 내지를 N장으로 맞춘 뒤 N×M장으로 다시 맞추고, 그룹 스토리보드는 N을 한 묶음으로 봅니다. SDK의 `num_page` 타입은 `number`라서 이 형식을 쓰려면 타입 단언이 필요합니다.

<Warning>
  URL로 넘긴 `num_page`는 페이지 메뉴를 끄지 않습니다. `page-menu`가 켜져 있으면 사용자는 장수를 바꿀 수 있습니다. `option_string`에 `num_page=10`처럼 넣었을 때만 `page-menu`가 꺼집니다.
</Warning>

## 페이지 표시

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `page-shadow` | `pageShadow` | 꺼짐 | 편집 화면의 페이지 둘레에 그림자를 그립니다 |
| `no-border` | `pageNoBorder` | 꺼짐 | `page-shadow`가 꺼져 있을 때 페이지 테두리를 그리지 않습니다 |
| `force-border` | `pageForceBorder` | 꺼짐 | `page-shadow`가 꺼져 있을 때 회색 1px 테두리를 항상 그립니다. `no-border`보다 우선합니다 |
| `no-margin` | `noEditorMargin` | 꺼짐 | 캔버스와 페이지 사이 기본 여백(위아래 60px, 좌우 50px)을 없애 페이지를 화면에 꽉 차게 맞춥니다. 기존 모바일 UI와 신규 모바일 UI에도 적용합니다. 데스크톱의 탭 없는 화면(`ui_style`)에서는 무시합니다 |
| `page-mask` | `pageMaskMode` | `default` | 템플릿 `PageMask`(편집 화면에 보일 페이지 모양을 정하는 예약 개체) 바깥을 가리는 막의 불투명도입니다. 아래 표를 보세요 |
| `clip-control` | `clipControl` | `default` | 편집 화면에서 템플릿 `ClipPath`(콘텐츠를 그 안으로 잘라 내는 예약 패스)로 개체를 자르는 방식입니다. 아래 표를 보세요 |
| `guide-control` | `guideControl` | `default` | 편집 화면에서 가이드(인쇄되지 않는 안내 그림)를 보여 주는 때입니다. 아래 표를 보세요 |

세 항목이 모두 꺼져 있으면 페이지에 회색 1px 테두리를 그립니다. 배경이 없거나, 언더레이가 있거나, 스티컷 상품이면 테두리를 그리지 않습니다.

| `page-mask` | 편집 화면 |
| - | - |
| `default` | 마스크 바깥을 90% 불투명도로 가려 바깥 내용이 살짝 비칩니다 |
| `opaque` | 마스크 바깥을 완전히 가립니다. 페이지 밖으로 나간 개체도 보이지 않습니다 |
| `toggle` | 아무것도 선택하지 않았을 때는 완전히 가리고, 개체를 선택하면 살짝 비치게 합니다 |

| `clip-control` | 편집 화면 |
| - | - |
| `default` | 항상 `ClipPath` 안으로 자릅니다 |
| `none` | 자르지 않습니다 |
| `no-select` | 개체를 선택하면 자르기를 풀어 개체 전체를 보여 주고, 선택을 풀면 다시 자릅니다 |

| `guide-control` | 편집 화면 |
| - | - |
| `default` | 항상 보여 줍니다 |
| `none` | 보여 주지 않습니다 |
| `if-select` | 개체를 선택했을 때만 보여 줍니다 |
| `no-select` | 아무것도 선택하지 않았을 때만 보여 줍니다 |
| `conditional` | 가이드 개체의 `focus` 어노테이션을 따릅니다. `focus=true`는 선택했을 때만, `focus=false`는 선택하지 않았을 때만 보이고, 표시가 없는 가이드는 항상 보입니다 |

예를 들어 케이스 몸체 같은 가이드가 편집을 가린다면 `if-select`로 두어 개체를 선택해 위치를 맞출 때만 보이게 합니다. 반대로 완성 모습을 볼 때만 가이드가 필요하면 `no-select`로 둡니다.

`clip-control`과 `guide-control`은 화면 표시만 바꿉니다. 썸네일과 인쇄 파일은 바뀌지 않습니다. 썸네일의 가이드는 [썸네일, 미리보기, 색상](/docs/products/thumbnail-preview#썸네일)의 `tn-option`이 정합니다. `PageMask`, `ClipPath`를 만드는 방법은 [예약 개체 이름과 페이지 영역](/docs/templates/reserved-names#클리핑과-페이지-모양)에 있습니다.

## 페이징 규칙

포토북처럼 페이지 수에 따라 책등이 달라지는 상품은 사이즈 **Features**의 **paging-rule**을 `standard`로 두고 **standard option** 버튼으로 설정 창을 엽니다. 상품의 `grouping`이 켜져 있으면 이 칸이 보이지 않습니다. 설정 창은 다섯 부분입니다.

### Config: 스프레드 구성

새 프로젝트를 만들 때 템플릿에 적용합니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `no cover` | `no_cover` | 꺼짐 | 템플릿의 표지를 빼고 내지만으로 만듭니다. 표지가 둘인 템플릿이면 앞의 두 페이지를 뺍니다 |
| `cover index` | `cover_index` | `0` | 표지가 둘인 템플릿에서 남길 표지입니다. `0`은 첫 번째, `1`은 두 번째입니다. `no cover`를 켜면 사라집니다 |
| `First Spread` | `first_page` | `default` | 첫 내지 모양입니다. `default`는 템플릿 그대로, `full-side`(저장 값 `full`)는 양면 전체, `right-side`(`right`)는 오른쪽 면만 쓰고 왼쪽 반에 닿는 개체를 지웁니다 |
| `Last Spread` | `last_page` | `default` | 마지막 페이지 모양입니다. `full-side`(`full`)는 양면 전체, `left-side`(`left`)는 왼쪽 면만 쓰고 오른쪽 반에 닿는 개체를 지웁니다 |
| `Numbering` | `numbering` | `none` | `show`나 `hide`면 내지 아래쪽에 쪽 번호(9pt, 회색 K90, 인쇄됨)를 붙입니다. `show`는 켠 상태, `hide`는 끈 상태로 시작합니다. 사용자는 데스크톱 텍스트 탭 아래 **페이지 번호** 스위치로 바꿉니다 |

### Growth: 페이지를 늘리는 단위

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `delta-add` | `delta` | `1` | 한 번에 추가하고 삭제하는 내지 수입니다. 현재 페이지부터 그 수만큼 복사하거나 지웁니다. `0`이면 추가와 삭제가 일어나지 않습니다 |
| `min-spread` | `min` | `11` | 내지 수의 최솟값입니다 |
| `max-spread` | `max` | `50` | 내지 수의 최댓값입니다 |
| `param-modifier` | `mod_param` | `0` | 띄우기 옵션 `num_page`, `max_page`, `min_page`에 더하는 값입니다. 저장 결과 `contentPageCount`에서는 같은 값을 뺍니다 |

`param-modifier`는 쇼핑몰이 세는 장수와 편집기 내지 수가 다를 때 씁니다. 예를 들어 고정 내지 2장을 더 넣는 상품이면 `2`로 두고 쇼핑몰 장수를 그대로 넘깁니다.

`delta-add`가 2 이상이면 끝에서 `delta-add - 1`개 페이지에는 삭제 버튼이 나오지 않습니다. 한도에 가까우면 남은 수만큼만 추가하거나 지웁니다.

### Spine: 책등 두께 계산

`calc-type`이 `default`면 아래 식으로 책등 두께(mm)를 계산합니다.

```text theme={null}
책등 = base-thickness + ceil(max(0, n - base-n-spread) / per-spread) × spread-thickness
```

`n`은 **표지를 포함한 문서 전체 페이지 수**입니다. 표지 1장과 내지 20장이면 `n`은 21입니다. 내지 한도(`min-spread`, `max-spread`)와 세는 방법이 다르니 `base-n-spread`에 표지 수를 포함해 잡습니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `calc-type` | `calc_type` | `default` | `default`는 위 식, `manual`은 구간표입니다 |
| `base-thickness` | `base_thick` | `0` | 기준 두께(mm)입니다 |
| `base-n-spread` | `base_npage` | `0` | 기준 두께에 들어 있는 페이지 수입니다 |
| `per-spread` | `per_page` | `1` | 몇 페이지마다 두께를 더할지입니다. 1 이상이어야 합니다 |
| `spread-thickness` | `page_thick` | `1` | 한 번에 더할 두께(mm)입니다 |
| `mod` | `mod_type` | `none` | 계산 결과를 다듬는 방식입니다 |

| `mod` | 다듬는 방식 |
| - | - |
| `none` | 그대로 씁니다 |
| `bt-hard` | 10mm보다 얇으면 10mm로 올리고, 그 밖에는 0.5mm 단위로 반올림합니다 |
| `bt-soft` | 2mm보다 얇으면 2mm로 올립니다. 그 밖에는 소수부가 0.3 미만이면 버리고, 0.8 미만이면 .5로, 그 이상이면 올립니다 |

`manual`이면 `maunal-data` 칸(화면 이름 그대로입니다)에 구간표를 적습니다. 형식은 `시작-끝:두께`를 쉼표로 이은 것이고, 한 값이면 `시작:두께`로 씁니다. `11-20:8,21-30:10`은 `n`이 11~~20이면 8mm, 21~~30이면 10mm입니다. 어느 구간에도 없으면 0mm이고, 구간이 겹치면 뒤에 적은 값을 씁니다. `manual`에는 `mod`를 적용하지 않습니다.

편집기는 프로젝트를 만들 때, 다시 열 때, 페이지를 추가하거나 지울 때마다 지금 규칙으로 책등을 다시 계산합니다. 규칙을 고치면 기존 프로젝트도 다음에 열 때 바뀝니다. 책등이 바뀌면 표지 폭이 늘고, 책등 오른쪽 개체는 늘어난 만큼, 책등 위 개체는 절반만큼 옮겨집니다. 템플릿에서 `spine` 속성이 있는 개체는 책등 가운데에 맞춥니다.

### Title on Spine: 책등 제목

책등 제목은 템플릿에서 `spine` 속성을 단 글상자입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `min-title-thickness` | `min_title_thick` | `0` | 책등이 이 값(mm)보다 얇으면 책등 개체를 숨깁니다. `0`이면 숨기지 않습니다 |
| `limit-type` | `limit_type` | `none` | `default`면 책등 제목 글자 크기를 `책등 두께 - limit-margin` 이하로 줄입니다 |
| `limit-margin` | `limit_margin` | `1` | 위 계산의 여유(mm)입니다 |
| `prevent-margin` | `prevent_margin` | `0` | 파트너 설정 `no-text-on-spine`이 개체를 밀어낼 책등 범위를 양쪽으로 이만큼(mm) 넓힙니다 |
| `text-top` | `text_top_margin` | `0` | 세로로 돌린 책등 제목의 길이를 책등 두께에서 이만큼 줄이고 그만큼 옮깁니다 |

### Spine Test

`spread count to test`에 수를 넣으면 `result spine mm`에 결과가 나옵니다. 편집기와 같게 보려면 **표지를 포함한 전체 페이지 수**를 넣습니다.

<Warning>
  Spine Test는 `bt-soft`의 "2mm보다 얇으면 2mm" 규칙을 적용하지 않습니다. 2mm보다 얇은 결과는 편집기에서 2mm가 됩니다. `limit-margin` 목록의 `3.5`는 실제로 `2.5`로 저장됩니다.
</Warning>

## 책등과 관련된 다른 설정

| 설정 | 어디서 | 하는 일 |
| - | - | - |
| `alert-spine`(`alert_spine`) | [Customize 동작 설정](/docs/products/customize-config) | 글자가 아닌 개체를 선택했을 때 책등에 닿으면 경고합니다 |
| `no-text-on-spine`(`prevent_text_on_spine`) | 같은 곳 | 개체를 끌어 책등(양쪽 `prevent-margin` 포함)에 넣으면 책등 밖으로 밀어내고, 크기 조절은 원래대로 되돌립니다 |
| `options.paging` | 띄우기 옵션 | `{ standard: { spine: { page_thick: 0.2 } } }`처럼 주면 이 프로젝트의 `spread-thickness`를 바꿉니다. 프로젝트에 저장돼 다시 열어도 유지됩니다. 다른 키는 읽지 않습니다 |
| `option_string`의 `paging*growth_max=60` 같은 키 | 띄우기 옵션 | 페이징 규칙의 `growth`, `spine`, `config` 값을 이번 세션에 덮어씁니다 |
| `options.override.spine_mm` | 띄우기 옵션, edicus options | 열 때 책등을 이 값으로 고정합니다. 페이징 규칙이 있어도 열 때는 이 값이 이기지만, 페이지를 추가하거나 지우면 규칙으로 다시 계산합니다 |
| `options.spine_text` | 띄우기 옵션, edicus options | `override.spine_mm`으로 고정할 때 `min_title_thick`, `text_top_margin`을 정합니다. 페이징 규칙이 없으면 `limit_with_margin`, `limit_margin_mm`으로 글자 크기 제한도 정합니다 |
| `options.sizing.cover_spine_mm` | 띄우기 옵션 | 새 프로젝트의 표지 책등을 정합니다. `standard` 페이징 규칙이 있으면 바로 규칙 값으로 다시 계산되므로 페이징 규칙이 없는 상품에서만 씁니다 |

`options.override`와 `options.spine_text`를 사이즈 [사이즈 고급 옵션](/docs/products/size-options#edicus-options)에 넣으면 그 사이즈의 모든 프로젝트에 적용합니다.

## 책등 두께 확인

<Steps>
  <Step title="데스크톱 편집기를 엽니다" />

  <Step title="왼쪽 탭 아래 톱니바퀴 아이콘에 포인터를 올립니다" />

  <Step title="프로그램 정보를 누릅니다">
    문서에 표지가 있으면 정보 창에 `cover spine mm: 14.5`처럼 책등 두께(mm)가 나옵니다.
  </Step>
</Steps>

기존 모바일 UI와 신규 모바일 UI에는 이 메뉴가 없습니다. 연동 코드에서는 페이지를 추가하거나 지울 때 오는 `page-count-changed`([편집기 이벤트](/docs/sdk/events)) 이벤트의 `spine_mm`으로 확인합니다. 같은 이벤트의 `page_count`는 표지를 포함한 전체 페이지 수입니다.

## 됐는지 확인

<Check>
  Manager **Resource**에서 이 상품의 템플릿을 고르고 **Demo**로 엽니다. 스토리보드에서 페이지를 추가해 최대 장수에 닿으면 추가 버튼이 흐려지고, 톱니바퀴 메뉴 **프로그램 정보**의 `cover spine mm`이 전체 페이지 수로 계산한 **Spine Test** 결과와 같으면 됩니다. Demo는 저장과 사진 업로드가 안 되므로 사진을 넣은 결과와 생산 파일의 책등은 [테스트 주문과 렌더링](/docs/templates/test-render)의 **Test Order**로 확인합니다.
</Check>

<Note>
  `num_page`, `max_page`로 띄웠을 때의 동작과 `page-count-changed` 이벤트는 연동 담당자에게 확인을 부탁하세요.
</Note>

## 다음 단계

<Columns cols={2}>
  <Card title="포토카드" icon="clone" href="/docs/products/photocard">
    여러 페이지를 묶음으로 팔고 수량을 받습니다.
  </Card>

  <Card title="레이아웃과 배경" icon="table-cells-large" href="/docs/products/layout-background">
    레이아웃 탭과 배경 탭의 동작을 정합니다.
  </Card>
</Columns>


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