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

# 편집기 동작

> 시작 상태, 도구 버튼, 편집 제한, 충돌 검사, 경고를 상품마다 정하는 방법

같은 템플릿이라도 상품에 따라 편집기가 다르게 움직여야 할 때가 있습니다. 명함은 실제 크기로 보여 주고, 스티커는 개체끼리 겹치지 않게 막고, 포토북은 재단선 경고를 보여 줍니다. 이 페이지는 Edicus Manager **상품 설정**의 **편집기 동작** 그룹을 줄 순서대로 다룹니다.

## 배우는 것

* 편집기가 처음 열릴 때의 탭, 배율, 눈금자를 정하는 방법
* 상단과 툴바의 버튼을 고르는 방법
* 템플릿 개체를 잠그고, 겹침과 재단 경고를 거는 방법

저장 키는 모두 `template_option` 아래에 있습니다. 기본값은 Manager에서 새 상품을 만들 때의 값입니다. 따로 적지 않은 항목은 데스크톱에만 적용합니다. UI 용어는 [탭 구성](/docs/products/editor-tabs#용어)에 있습니다.

## 시작 상태

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `initial-tab` | `initialTab` | `photo` | 처음 열 탭입니다. `photo`, `text`, `template`, `background`, `layout`, `sticker`, `mask`, `name`, `cutout`, `size` 중 고릅니다. 고른 탭이 꺼져 있으면 켜진 첫 탭을 엽니다 |
| `force-tab` | `forceInitialTab` | 꺼짐 | `size-tab`이 켜진 상품은 크기 탭을 먼저 엽니다. 켜면 크기 탭 대신 `initial-tab`을 엽니다 |
| `initial-zoom` | `initialZoom` | `fill` | 처음 확대 배율입니다. 아래를 보세요 |
| `initial-dp` | `initialDP` | `default` | 템플릿, 레이아웃, 배경 탭 목록의 썸네일 크기입니다. 아래를 보세요 |
| `thumbnail` | `thumbnailPage` | `front-page` | 저장할 때 만들 썸네일 페이지입니다. [썸네일, 미리보기, 색상](/docs/products/thumbnail-preview#썸네일)을 보세요 |
| `tn-option` | `thumbnailOption` | `none` | 썸네일에서 뺄 요소입니다. [썸네일, 미리보기, 색상](/docs/products/thumbnail-preview#썸네일)을 보세요 |
| `ruler-mode` | `rulerMode` | `none` | 캔버스 눈금자입니다. 아래를 보세요 |
| `tabless-asset` | `tablessAssetPosition` | `default` | 리소스 선택 창의 위치입니다. 아래를 보세요 |

처음 열리는 탭이 바뀌는 다른 조건은 [탭 구성](/docs/products/editor-tabs#처음-열리는-탭)에 있습니다. 기존 모바일 UI와 신규 모바일 UI는 `initial-tab`, `force-tab`, `initial-zoom`, `initial-dp`, `ruler-mode`를 읽지 않습니다.

**`initial-zoom`**: `fill`은 페이지를 화면에 맞춥니다. `50%`\~`300%`는 실제 크기를 100%로 보는 배율입니다. 화면에 맞춘 배율이 고른 값보다 클 때만 고른 값으로 엽니다. 명함처럼 작은 상품을 `100%`로 두면 실제 크기로 열리고, 화면보다 큰 상품은 그대로 화면에 맞춰 엽니다.

**`initial-dp`**: 목록 위의 썸네일 크기 버튼 셋 중 처음 고를 단계입니다. `default`는 중간 크기입니다. `max`는 템플릿, 레이아웃, 배경 탭을 가장 크게 엽니다. `min`은 레이아웃 탭만 가장 작게 엽니다.

**`ruler-mode`**: `none`은 눈금자를 쓰지 않습니다. `show`는 눈금자를 켜고 엽니다. `hide`는 끄고 엽니다. `show`와 `hide`는 설정 메뉴에 **눈금자 표시**를 넣어 사용자가 켜고 끌 수 있게 합니다. 띄우기 옵션 `option_string`의 `show_ruler=true`는 이 값을 `show`로 바꿉니다.

**`tabless-asset`**: 리소스 선택 창은 탭 없는 화면(`ui_style`의 `tab-less`)의 메뉴, 링크 플러그인, 첫 디자인 선택에서 열립니다. `default`는 화면 가운데의 큰 창으로 열고, 하나를 고르면 닫습니다. `right`는 오른쪽 좁은 패널로 엽니다. 템플릿, 레이아웃, 배경은 골라도 패널이 남아 여러 개를 바로 비교할 수 있습니다. 스티커, 도형, 사진 칸 모양 틀은 고르면 닫힙니다.

## 도구 버튼

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `revert-ui` | `revertUI` | 꺼짐 | 상단에 **초기화** 버튼을 둡니다. 누르면 확인 창을 띄운 뒤 프로젝트를 만들 때 쓴 템플릿을 다시 불러옵니다. 사진 칸에 넣은 사진은 순서대로 옮겨 담고 나머지 편집은 버립니다 |
| `save-ui` | `saveUI` | 꺼짐 | 상단에 **저장하기** 버튼을 둡니다. 저장할 것이 없으면 **저장됨**으로 바뀝니다. 아래 표를 보세요 |
| `preview-ui` | `previewUI` | 켜짐 | 상단에 **미리보기** 버튼을 둡니다. 모바일 미리보기 버튼은 미리보기 설정이 따로 정합니다 |
| `zoom-ui` | `zoomUI` | 켜짐 | 캔버스의 확대·축소 컨트롤(화면 맞춤, 빼기, 배율, 더하기)을 둡니다 |
| `opacity-ui` | `opacityUI` | 켜짐 | 스티커, 클립아트, 도형, 패턴, 글자의 **투명도** 조절을 둡니다. 글자는 텍스트 그룹의 `opacity`도 켜져 있어야 합니다. 사진 칸에는 없습니다. 모든 UI에 적용합니다 |
| `shortcut-ui` | `shortcutUI` | 켜짐 | 상단에 **단축키** 버튼을 둡니다. 편집기 언어가 한국어일 때만 보입니다 |
| `select-ui` | `selectUI` | 켜짐 | 영역 선택 막대를 둡니다. 아래를 보세요 |
| `simple-text-ui` | `simpleTextUI` | 꺼짐 | 텍스트 탭의 추가 버튼 셋(제목, 부제목, 본문)을 **텍스트 박스 추가** 하나로 줄입니다. 데스크톱과 기존 모바일 UI에 적용합니다 |
| `select-mode` | `selectMode` | `default` | `select-ui`를 켜야 열립니다. `default`는 고른 영역을 모든 페이지에 함께 적용하고, `page-each`는 페이지마다 따로 고르게 합니다 |
| `del-all-cell` | `deleteAllCell` | 꺼짐 | 사진 칸 툴바의 삭제 메뉴에 **현재 페이지의 모든 사진 삭제**와 **전체 페이지의 모든 사진 삭제**를 더합니다. 사진 칸은 남깁니다 |
| `export-tn` | `exportTn` | 꺼짐 | 상단에 **Export PNG** 버튼을 둡니다. 현재 페이지를 PNG 파일로 사용자 컴퓨터에 내려받고 `export-tn-report`를 보냅니다. 파트너 권한에 따라 잠금으로 표시될 수 있습니다 |

`save-ui`는 UI마다 다르게 동작합니다. 띄우기 옵션 `no_update`로 띄우면 데스크톱도 저장 버튼 대신 **나가기**를 둡니다.

| UI | 저장 버튼 |
| - | - |
| 데스크톱 | `save-ui`가 켜지면 둡니다. 버튼 문구는 [파트너 공통 설정](/docs/products/style)에서 바꿉니다 |
| 기존 모바일 UI | `save-ui`와 파트너 설정 Mobile Settings의 `save-ui`가 모두 켜져야 둡니다. [Customize 동작 설정](/docs/products/customize-config)을 보세요 |
| 신규 모바일 UI | 저장 버튼이 없습니다 |

**`select-ui`**: 템플릿에서 `Select` 레이어로 한 페이지에 여러 출력 영역을 정의하면, 캔버스 위에 영역 이름 버튼이 나옵니다. 사용자가 고른 영역이 그 페이지의 렌더 영역(생산 파일로 잘라 낼 범위, 템플릿의 `RenderBound`)이 됩니다. 템플릿에 `Select` 레이어가 없으면 이 스위치는 아무것도 바꾸지 않습니다. 일반 개체 선택과는 상관없습니다.

## 스토리보드 · 히스토리

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `storyboard` | `passiveSB` | 켜짐 | 편집기는 이 값을 읽지 않습니다. 스토리보드(아래쪽 페이지 목록)는 여러 페이지 상품이면 항상 나옵니다 |
| `history` | `historyUI` | 켜짐 | 상단에 **실행취소**와 **다시실행** 버튼을 둡니다. 탭 없는 화면에서는 메뉴 아래에 둡니다. 꺼도 `Ctrl+Z`, `Ctrl+Y`는 동작합니다. 기존 모바일 UI와 신규 모바일 UI의 버튼은 이 값과 상관없이 나옵니다 |
| `imagepool` | `imgpoolSB` | 꺼짐 | 편집기는 이 값을 읽지 않습니다 |
| `import-cell` | `importCellUI` | 켜짐 | 자산 그룹의 `as-cell`을 켠 상품에서 사진 칸 툴바의 **사진** 버튼을 둘지 정합니다. `as-cell`이 꺼진 상품은 이 값과 상관없이 버튼을 둡니다 |
| `tool-offset` | `toolbarOffset` | `0` | 편집기는 이 값을 읽지 않습니다 |
| `storyboard-fx` | `storyboardFX` | `none` | `book-paging`은 스토리보드 썸네일을 두 장씩 붙여 펼친 책처럼 보이게 간격을 바꿉니다. 페이지 구성은 바꾸지 않습니다 |

## 편집 제한

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `scale-font` | `scaleFont` | 꺼짐 | 템플릿의 페이지 크기와 사이즈의 페이지 크기가 다를 때, 세로 비율만큼 글자 크기, 외곽선 두께, 행간, 글상자 높이를 함께 바꿉니다. 끄면 글상자 위치만 맞추고 글자 크기는 그대로 둡니다. 책등 글자는 바꾸지 않습니다 |
| `simple-setting` | `simpleSetting` | 꺼짐 | 설정 메뉴(톱니바퀴)를 **스냅 활성화**, **얼굴위치 표시**, **단축키 모음**, **프로그램 정보**만 남깁니다. **절단선 표시**, **절단오차 경고**, **눈금자 표시**, **렌더영역 표시**가 빠지므로 사용자는 경고 표시를 끌 수 없습니다 |
| `inner-show` | `showTextMargin` | 꺼짐 | 캔버스에 안전선을 그립니다. 설정 메뉴의 **절단선 표시**가 켜져 있어야 보입니다 |
| `inner-all` | `innerMarginAll` | 꺼짐 | 안전선 경고의 대상입니다. 꺼짐은 선택한 글상자와 패스 글자만, 켜짐은 선택한 모든 개체를 검사합니다 |
| `goto-cart` | `gotoCart` | `defaut` | 완료 버튼의 동작입니다. 아래를 보세요 |
| `lock-item` | `lockTemplateItem` | `none` | 템플릿에 든 개체를 잠급니다. 아래를 보세요 |
| `force-movable-cell` | `forceMovableCell` | 꺼짐 | 템플릿이 사진 칸에 건 이동, 잠금 해제, 삭제 금지를 풀어 모든 사진 칸을 움직이고 지울 수 있게 합니다. 프로젝트를 만들 때 적용합니다 |

**`goto-cart`**: 새 상품의 저장값은 철자가 틀린 `defaut`입니다. 편집기는 `report`가 아닌 값을 모두 기본 동작으로 처리하므로 `default`와 같습니다.

| 값 | 완료 버튼을 눌렀을 때 |
| - | - |
| `default` | 아래 [경고](#경고)의 완료 전 검사를 거쳐 필요하면 저장한 뒤 `goto-cart`를 보냅니다 |
| `report` | 저장하지 않고 `doc-report`로 문서 정보를 보냅니다. 저장과 화면 이동은 내 페이지가 맡습니다 |

이벤트는 [편집기 이벤트](/docs/sdk/events)에 있습니다. 브라우저 뒤로가기로 저장하고 나가는 흐름은 `report`여도 저장 후 `goto-cart`를 보냅니다.

**`lock-item`**: 프로젝트를 만들 때와 레이아웃을 바꿀 때 템플릿 개체에 적용합니다. 배경은 잠그지 않습니다. 사용자가 나중에 넣은 개체도 잠그지 않습니다.

| 값 | 동작 |
| - | - |
| `none` | 잠그지 않습니다 |
| `static-all` | 모든 개체를 움직이지 못하게 합니다 |
| `disable-all` | 사진 칸은 움직이지 못하게 하고, 나머지 개체는 선택하지 못하게 합니다 |
| `static-all-mobile`, `disable-all-mobile` | 같은 동작을 기존 모바일 UI와 신규 모바일 UI에서만 합니다. 화면 이름은 `static-all-m`, `disable-all-m`입니다 |

개체 하나하나의 이동, 삭제, 잠금 해제 금지는 템플릿의 어노테이션(`movable`, `unlockable`, `deletable`)으로 정합니다. [어노테이션](/docs/templates/annotations#편집-제한)을 보세요. `force-movable-cell`은 사진 칸의 어노테이션보다 우선합니다.

## 충돌 검사

이 줄 전체가 파트너 권한에 따라 잠금으로 표시될 수 있습니다. 모든 UI에 적용합니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `collision-check` | `collisionCheck` | `none` | `default`면 편집할 때마다 개체끼리 겹치는지, 페이지 가장자리에 걸치는지 검사합니다 |
| `object-margin` | `collisionObjectMargin` | `1` | 개체 사이에 둘 최소 간격(mm)입니다. 이보다 가까우면 \*\*개체간 영역이 겹치지 않도록 편집해 주세요.\*\*를 띄웁니다 |
| `page-margin` | `collisionPageMargin` | `2` | 페이지 가장자리에서 안쪽으로 둘 여백(mm)입니다. 개체가 이 선에 걸치면 \*\*개체가 잘리지 않도록 편집영역 안으로 이동해 주세요.\*\*를 띄웁니다. 렌더 영역이 있는 페이지는 렌더 영역을 기준으로 합니다 |
| `prevent-exit` | `collisionPreventExit` | 꺼짐 | 겹침이 남아 있으면 완료 버튼에서 같은 문구를 띄우고 멈춥니다 |
| `mat-code` | `matCode` | `none` | 소재로 쓸 팔레트입니다. 아래를 보세요 |
| `overlay-stroke-mode` | `overlay_stroke_mode` | `default` | 오버레이(사용자 편집 개체 위에 덮이는 템플릿 개체) 도형의 외곽선 두께를 화면에서 `1px`이나 `2px`로 고정합니다. 확대해도 선 두께가 바뀌지 않습니다. `default`는 템플릿의 두께를 배율에 맞춰 그립니다 |

`object-margin`, `page-margin`, `prevent-exit`는 `collision-check`가 `default`일 때만 열립니다. 편집 중 경고는 설정 메뉴의 **절단오차 경고**가 켜져 있을 때 보입니다.

**`mat-code`**: 팔레트를 고르면 사이즈에 `material option`이 생깁니다. 사이즈에서 이 팔레트의 색이나 박 중 하나를 소재로 정하면, 편집기는 프로젝트를 만들 때 템플릿에서 변수 id가 `material`인 오버레이와 언더레이(사용자 편집 개체 아래에 깔리는 템플릿 개체) 개체를 그 소재로 칠하거나 숨깁니다. 팔레트에 소재를 정의하는 방법은 [팔레트](/docs/products/palettes)에, 사이즈 설정은 [사이즈 고급 옵션](/docs/products/size-options#material-option)에 있습니다.

## 경고

**경고 · 기타** 줄의 경고 항목입니다. 경고 영역의 폭은 이 줄이 아니라 사이즈의 페이지 정보가 정합니다. 재단 여백과 안전 여백은 [사이즈와 페이지 정보](/docs/products/sizes#페이지-정보)를 보세요. 경고 문구는 파트너 설정 Info에서 바꿀 수 있습니다. [파트너 공통 설정](/docs/products/style)을 보세요.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `no-cut-warn` | `noCutWarning` | 꺼짐 | 재단 경고를 모두 끕니다. 아래를 보세요 |
| `edge-cut-warn` | `edgeCutWarning` | 꺼짐 | 재단 여백 대신 페이지 가장자리를 기준으로 경고합니다. 재단 영역 표시와 빨간 경고 띠는 그리지 않고 경고 문구만 띄웁니다. 파트너 권한에 따라 잠금으로 표시될 수 있습니다 |
| `confirm-exit` | `confirmExit` | 꺼짐 | 완료 전 검사에서 막던 일부 경우를 확인 창으로 바꿉니다. 아래를 보세요 |
| `null-cell-text` | `emptyCellText` | 꺼짐 | 빈 사진 칸에 아이콘과 함께 **이곳에 사진을 넣으세요** 문구를 띄웁니다. 파트너 권한에 따라 잠금으로 표시될 수 있습니다 |
| `cut-warn-type` | `cutWarningType` | `default` | 편집 화면에 페이지 선과 재단선을 그립니다. `show-line`은 모든 페이지, `cover-show-line`은 표지에만 그립니다. `default`와 `none`은 그리지 않습니다 |

**`no-cut-warn`이 꺼져 있을 때**: 편집기는 기본으로 재단 영역을 표시합니다. 선택한 개체가 재단선에 걸치면 페이지 가장자리를 빨갛게 칠하고 \*\*중요한 내용은 재단선 안쪽에 배치해 주세요.\*\*를 띄웁니다. 글자가 안전선 밖으로 나가면 \*\*텍스트는 안전선 안쪽에 배치해 주세요.\*\*를, 책등 주변에 걸치면 책등 경고를 띄웁니다. 검사는 선택하거나 옮긴 개체에만 합니다. 사용자는 설정 메뉴의 **절단선 표시**와 **절단오차 경고**로 표시를 끌 수 있습니다.

**`no-cut-warn`을 켜면**: 위 표시와 문구를 모두 끕니다. 데스크톱, 두 모바일 UI, lite 편집기([용어집](/docs/reference/glossary#lite-편집기))에 모두 적용합니다. 템플릿이 한 페이지에 재단 영역을 여러 개 정의한 경우에는 영역 테두리만 남습니다.

**`confirm-exit`**: 아래 두 경우에 알림 대신 **취소**와 **편집종료**를 고르는 확인 창을 띄웁니다. **편집종료**를 고르면 다음 검사로 넘어가 저장합니다.

* 여러 장 상품의 주문 수량이 최소 수량보다 적을 때
* 멀티스티커(`multi-sticker`) 상품에 칼선이 하나도 없는 페이지가 있을 때

빈 사진 칸 확인 창은 이 값이 아니라 파트너 설정 `check-empty-cell`이 정합니다. [Customize 동작 설정](/docs/products/customize-config)을 보세요.

## 기타

**경고 · 기타** 줄의 나머지 항목입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `no-prod-name` | `noProdName` | 꺼짐 | 상단의 상품 이름을 숨깁니다. 신규 모바일 UI의 제목에는 영향을 주지 않습니다 |
| `no-face-center` | `noFaceCentering` | 꺼짐 | 사진을 넣을 때 얼굴을 찾아 가운데로 맞추는 자동 배치를 끄고 사진 가운데를 기준으로 넣습니다. 모든 UI에 적용합니다. 사이즈의 product override로 사이즈마다 바꿀 수 있습니다 |
| `no-tool-space` | `noToolSpace` | 꺼짐 | 글자 툴바의 오른쪽 공통 버튼을 오른쪽 끝으로 띄우지 않고 앞 도구 바로 뒤에 붙입니다 |
| `disable-rotate` | `disableRotate` | `none` | `all`이면 캔버스의 회전 손잡이를 모든 개체에서 숨깁니다. 모든 UI에 적용합니다 |
| `disable-orient` | `disableOrient` | `none` | `all`이면 모든 개체의 좌우·상하 대칭과 90도 회전 메뉴를 막습니다. 모든 UI에 적용합니다 |

개체 하나만 회전을 막으려면 템플릿 어노테이션 `rotate=false`를 쓰세요. [어노테이션](/docs/templates/annotations)을 보세요.

<Note>
  오래전에 만든 상품은 일부 키가 저장돼 있지 않을 수 있습니다. 편집기는 `opacityUI`, `zoomUI`, `previewUI`, `historyUI`, `importCellUI`가 없으면 켜짐으로, `rulerMode`가 없으면 `none`으로, `initialTab`이 없으면 `photo`로 채웁니다. `selectUI`, `saveUI`, `revertUI`는 없으면 꺼짐으로 다룹니다. `shortcutUI`는 없으면 켜짐으로 다룹니다.
</Note>

## 됐는지 확인

<Check>
  **Update**로 저장한 뒤 Manager **Resource**에서 이 상품의 템플릿을 고르고 **Demo**로 여세요. 상단 버튼이 고른 대로 보이고, 글자나 스티커를 재단선 밖으로 옮겼을 때 기대한 경고가 뜨면 됩니다. Demo는 저장 버튼 대신 **나가기**를 두고 사진 업로드를 막으므로, `save-ui` 확인과 사진을 넣거나 완료 버튼까지 눌러 봐야 하는 확인(`prevent-exit`, `confirm-exit`, `goto-cart`)은 [테스트 주문과 렌더링](/docs/templates/test-render)의 **Test Order**로 하세요.
</Check>

<Note>
  `goto-cart`를 `report`로 바꿨을 때 `doc-report`가 오는지는 내 서비스 화면에서만 볼 수 있습니다. 이벤트를 받는 방법은 [편집기 이벤트](/docs/sdk/events)에 있습니다.
</Note>

## 다음 단계

<Columns cols={2}>
  <Card title="탭 구성" icon="table-columns" href="/docs/products/editor-tabs">
    편집기에 보일 탭과 처음 열리는 탭을 정합니다.
  </Card>

  <Card title="확장 설정" icon="puzzle-piece" href="/docs/products/extensions">
    플러그인 탭, 프로모션 창, 사용자 데이터를 정합니다.
  </Card>
</Columns>


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