> ## 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` 아래에 있습니다.
* 기본값은 Edicus Manager에서 새 상품을 만들 때의 값입니다.
* 편집기 UI는 네 가지입니다. **데스크톱**, `mobile: true`로 띄우는 **기존 모바일 UI**, `mobile: 'm2'`로 띄우는 **신규 모바일 UI**, 그리고 lite 편집기([용어집](/docs/reference/glossary#lite-편집기))입니다. 설명에 UI 이름이 없으면 해당 기능이 있는 모든 UI에 적용됩니다.
* lite 편집기는 이 페이지의 항목 중 `import-svg`만 읽습니다.
* 도구를 숨겨도 템플릿에 이미 저장된 효과나 서식은 지우지 않습니다.

## 사진 칸

**셀 · 이미지** 그룹의 **사진 칸** 줄입니다. 사진 칸은 템플릿에서 사진이 들어가는 틀입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `replace-cell` | `replaceCellUI` | 켜짐 | 데스크톱 사진 칸 툴바에 **이동** 버튼을 보여 줍니다. 누르면 사진을 다른 칸으로 끌어 **교체하기**나 **복제하기**를 하고, **셔플**과 **모든 사진틀에 복제**를 쓸 수 있습니다. 모바일 UI에는 이 기능이 없습니다 |
| `crop-cell` | `cropCellUI` | 켜짐 | 사진 칸의 **자르기**를 엽니다. 툴바 버튼과 더블클릭(모바일은 두 번 탭)으로 자르기 화면에 들어갑니다. 끄면 칸 안의 사진 위치와 크기를 바꿀 수 없습니다 |
| `static-cell` | `staticCellUI` | 꺼짐 | 사진 칸을 고정합니다. 칸을 옮기거나 크기를 바꾸거나 잠금을 풀 수 없고, 삭제하면 칸은 남고 사진만 지워집니다. 데스크톱 툴바의 순서, 잠금, 복제, 삭제 버튼이 사라지고, 페이지 빈 곳에 사진을 놓아 새 칸을 만들 수 없습니다. 기존 모바일 UI에서 사진을 누르면 새 칸 대신 선택한 칸, 첫 빈 칸, 첫 칸 순서로 넣습니다 |
| `correct-cell` | `correctCellUI` | 꺼짐 | 템플릿으로 새 프로젝트를 만들 때 사진 없는 칸의 회전을 바로잡습니다. 90도와 270도는 가로세로를 바꾸고 0도로, 180도는 0도로 만듭니다. 사각형이 아닌 마스크가 있는 칸은 건드리지 않습니다 |
| `confirm-drop` | `confirmDrop` | 꺼짐 | 데스크톱에서 사진이 든 칸에 사진을 끌어 놓으면 **추가**와 **교체** 중 고르게 묻습니다. **추가**는 페이지 가운데에 새 사진 칸을 만듭니다 |
| `free-crop` | `freeCrop` | 꺼짐 | 자르기에서 사진이 칸 전체를 덮어야 한다는 제한을 풉니다. 사진을 칸보다 작게 줄이거나 빈틈이 생기게 옮길 수 있습니다. 썸네일도 빈틈을 그대로 보여 줍니다 |
| `crop-scale` | `cropScaleUI` | 꺼짐 | 데스크톱 자르기 툴바에 **여백** 슬라이더를 보여 줍니다. 칸 안의 사진을 0\~50% 줄여 사진 둘레에 여백을 둡니다 |
| `keep-AR` | `keepCellAR` | 꺼짐 | 사진 칸의 가로세로 비율을 지킵니다. 크기 조절 핸들이 비율을 유지하고, 사진을 넣으면 칸을 그 사진의 비율로 바꿔 사진이 잘리지 않습니다. 사진을 90도 돌리면 칸의 가로세로도 바뀝니다. 데스크톱에서 Delete 키는 사진과 칸을 함께 지웁니다 |
| `no-browse` | `noCellBrowse` | 꺼짐 | 데스크톱 사진 탭의 **사진 가져오기** 버튼을 숨깁니다. 사진 칸 툴바의 **사진** 버튼과 기존 모바일 UI와 신규 모바일 UI의 사진 추가 버튼은 그대로입니다 |
| `spawn-size` | `cellSpawnSize` | `default` | 새 사진 칸의 처음 크기입니다. 아래 표를 보세요 |

| `spawn-size` | 새 사진 칸 |
| - | - |
| `default` | 페이지 작업 영역의 절반 안에 사진 비율대로 만듭니다 |
| `render-size` | 페이지의 출력 영역 전체 크기로 만듭니다. `keep-AR`도 켜면 사진 비율을 지키며 출력 영역을 덮는 크기로 만듭니다 |

`static-cell`과 `no-browse`는 [사이즈 고급 옵션](/docs/products/size-options#product-override)의 product override(`Static Cell`, `No Cell Browse`)에서 사이즈마다 바꿀 수 있습니다. 띄울 때 `option_string`에 `static_cell=true`나 `static_cell=false`를 주면 `static-cell`을 덮어씁니다.

<Tip>
  칸마다 이동, 삭제, 잠금 해제를 막으려면 상품 전체를 고정하는 대신 템플릿의 레이어 이름을 쓰세요. [어노테이션](/docs/templates/annotations)에 방법이 있습니다.
</Tip>

## 사진 보정

**셀 · 이미지** 그룹의 **사진 보정** 줄입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `adjust-cell` | `adjustCellUI` | 꺼짐 | 사진 칸에 **보정** 도구를 엽니다. **밝기**와 **대비**를 -100\~100으로 조절합니다. 상품 문서에 이 키가 아예 없으면 편집기는 켜짐으로 봅니다 |
| `effect-cell` | `effectCellUI` | 꺼짐 | 사진 칸에 **필터** 도구를 엽니다. none, b\&w, sepia, xpro, vintage, winter, creamy, brannan, faded 중 고릅니다. 신규 모바일 UI는 `adjust-cell`과 함께 하나의 **보정** 창에 탭으로 보여 줍니다 |
| `border-cell` | `borderCellUI` | 꺼짐 | 사진 칸에 **테두리** 도구를 엽니다. 두께(0~~5mm), 코너(0~~10mm), 테두리 색을 고릅니다. 박 기능을 쓰는 상품의 데스크톱 툴바에서는 보이지 않습니다 |
| `no-shadow` | `borderCellNoShadow` | 켜짐 | 테두리 도구에서 **그림자**(없음, 안쪽, 바깥쪽, 양쪽)와 **음영**을 뺍니다. `border-cell`을 켜야 열립니다. 기존 모바일 UI는 이 값을 보지 않고 그림자 도구를 보여 줍니다 |
| `empty-first` | `emptyCellFirst` | 꺼짐 | 기존 모바일 UI에서 사진 탭의 사진을 누르면 새 사진 칸을 만들지 않고 선택한 칸, 첫 빈 칸, 첫 칸 순서로 넣습니다. 다른 UI는 이 값을 읽지 않습니다 |
| `base-brightness` | `baseBrightness` | `0` | 사진 칸에 사진을 넣을 때 맞출 밝기입니다. -100\~100의 백분율입니다 |
| `base-contrast` | `baseContrast` | `0` | 사진 칸에 사진을 넣을 때 맞출 대비입니다. -100\~100의 백분율입니다 |
| `base-filter` | `baseFilter` | 없음 | 사진을 넣을 때와 새 사진 칸을 만들 때 걸 필터입니다. Manager에서는 `bw`(흑백)와 `sepia`만 고를 수 있습니다 |

기본 밝기와 대비는 기존 사진 칸에 사진을 넣거나 칸을 비울 때 적용합니다. 사진을 놓아 새 사진 칸이 생길 때는 필터만 적용하고 밝기와 대비는 0입니다.

## 사진 보관함

사진 탭에 올린 사진 목록을 Edicus에서는 사진 보관함이라고 부릅니다. **셀 · 이미지** 그룹의 **사진 보관함** 줄입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `with-filter` | `imgpoolFilter` | 꺼짐 | 사진 탭에 **전체 사진보기**, **사용된 사진보기**, **미사용 사진보기** 필터를 보여 줍니다 |
| `auto-import` | `autoImport` | 꺼짐 | 데스크톱과 신규 모바일 사진 탭에 **사진 자동 넣기**(신규 모바일은 **자동배치**)를 보여 줍니다. **등록순으로 넣기**, **시간순으로 넣기**, **랜덤하게 넣기** 중 고릅니다. 기존 모바일 UI는 이 값과 관계없이 버튼을 보여 줍니다 |
| `import-mode` | `autoImportMode` | `default` | 자동 넣기에서 사진이 칸보다 적을 때의 처리입니다. 아래 표를 보세요. `auto-import`를 켜야 열립니다 |
| `clear-pool` | `clearPool` | 꺼짐 | 사진 탭 메뉴에 **사진 목록 비우기**를 넣고, 이미 쓴 사진도 목록에서 지울 수 있게 합니다. 데스크톱은 이 메뉴가 `with-filter` 줄에 붙으므로 둘을 함께 켭니다. 신규 모바일 UI는 이 값을 읽지 않습니다 |
| `pre-crop` | `preCropUI` | 꺼짐 | 데스크톱 사진 탭의 썸네일에 자르기 단추를 보여 줍니다. 영역을 정하고 **자르기**를 누르면 잘린 사본이 사진 목록에 새로 올라갑니다. 파트너 권한에 따라 잠금으로 표시될 수 있습니다 |
| `photo-select` | `photoSelect` | 꺼짐 | 기존 모바일 UI 사진 탭에 **선택**과 **자동채우기** 버튼을 보여 줍니다. 여러 장을 골라 한 번에 칸에 넣습니다 |
| `import-svg` | `importSVG` | 꺼짐 | SVG 파일을 사진으로 올릴 수 있게 합니다. 데스크톱과 lite 편집기의 파일 선택 창이 SVG를 받습니다. SVG 사진은 저해상도 검사에서 빠집니다 |
| `prefer-alpha` | `preferAlpha` | 꺼짐 | 데스크톱 사진 탭의 파일 선택 창에서 PNG만 고르게 합니다. `import-svg`도 켜면 SVG도 받습니다. 기존 모바일 UI와 신규 모바일 UI에는 적용하지 않습니다 |
| `item-type` | `photoItemType` | `default` | 데스크톱 사진 탭에서 끌어 놓은 사진의 종류입니다. `default`와 `photo`는 사진 칸, `sticker`는 스티커 개체로 들어갑니다. `sticker`로 두면 사진 칸 위에 놓아도 칸에 들어가지 않습니다 |
| `photo-mode` | `photoTabMode` | `default` | 편집기는 이 값을 읽지 않습니다. `album-set`으로 바꿔도 사진 탭은 그대로입니다 |

| `import-mode` | 사진이 칸보다 적을 때 |
| - | - |
| `default` | 있는 사진만큼만 넣고 나머지 칸은 그대로 둡니다 |
| `fill-if-less` | 사진을 반복해 모든 칸을 채웁니다 |
| `ask-fill-if-less` | 사진을 반복해 채울지 사용자에게 묻습니다 |
| `external` | 기존 모바일 UI에서 여러 장을 고르고 **자동채우기**를 누르면 편집기가 사진을 넣지 않고 `request-auto-import` 이벤트로 고른 사진을 부모 페이지에 보냅니다. 다른 경우에는 `default`와 같습니다 |

자동 넣기는 문서의 모든 사진 칸에 페이지 순서대로, 페이지 안에서는 위에서 아래, 왼쪽에서 오른쪽 순서로 사진을 넣습니다. 이미 사진이 든 칸도 바뀝니다. 템플릿에서 자동 넣기 제외로 표시한 칸은 건너뜁니다.

<Note>
  사진이 인쇄 크기에 비해 작으면 편집기가 저해상도 경고를 띄웁니다. 기준은 사이즈의 `low-dpi`입니다. [사이즈와 페이지 정보](/docs/products/sizes#기본-정보-basic)의 기본 정보를 보세요.
</Note>

## 글자 서식

**텍스트** 그룹의 **글자 서식** 줄입니다. 저장 키는 모두 `template_option.textOption` 아래에 있습니다. 끈 항목은 글상자와 패스 글자의 도구에서 사라집니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `font-color` | `fontColor` | 켜짐 | 글자색 |
| `opacity` | `opacity` | 켜짐 | 글자 투명도. [편집기 동작](/docs/products/editor-behavior) 그룹의 `opacity-ui`도 켜져 있어야 보입니다 |
| `font-family` | `fontFamily` | 켜짐 | 글꼴 |
| `font-size` | `fontSize` | 켜짐 | 글자 크기 |
| `align` | `align` | 켜짐 | 가로 정렬 |
| `line-height` | `lineHeight` | 켜짐 | 줄 간격. 책등 글자에는 보이지 않습니다 |
| `letter-scale` | `letterScale` | 켜짐 | 장평(글자 폭 비율) |
| `letter-space` | `letterSpace` | 켜짐 | 자간 |
| `vertical-align` | `verticalAlign` | 꺼짐 | 세로 정렬. 기존 모바일 UI에는 없고, 책등 글자에는 보이지 않습니다 |
| `fit-to-height` | `fitToContentHeight` | 꺼짐 | 글상자 높이를 내용에 맞추는 도구. 기존 모바일 UI에는 없고, 책등 글자에는 보이지 않습니다 |

글꼴 목록은 상품의 **기본 정보**에 있는 `font-class`가 정합니다. [폰트](/docs/products/fonts)를 보세요.

## 글자 효과

**텍스트** 그룹의 **글자 효과** 줄입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `text-on-path` | `textOnPath` | 꺼짐 | 데스크톱 텍스트 탭에 패스를 따라 흐르는 글자를 추가하는 기능을 엽니다 |
| `stroke` | `textOption.stroke` | 꺼짐 | 글자 외곽선. 데스크톱과 신규 모바일 UI에 있습니다 |
| `gradation` | `textOption.gradation` | 꺼짐 | 글자 그라데이션. 데스크톱에만 있습니다 |
| `shadow` | `textOption.shadow` | 꺼짐 | 글자 그림자. 데스크톱과 신규 모바일 UI에 있습니다 |
| `adjust-spine` | `textOption.spineOffset` | 꺼짐 | 데스크톱에서 책등 글자를 선택하면 책등 안 위치를 옮기는 도구를 보여 줍니다 |
| `modal-vdp` | `textOption.modalVDP` | 꺼짐 | 편집기는 이 값을 읽지 않습니다 |

`stroke`는 [사이즈 고급 옵션](/docs/products/size-options#product-override)의 product override(`Text Stroke`)에서 사이즈마다 바꿀 수 있습니다.

## 이름 넣기

**텍스트** 그룹의 **이름 넣기** 줄입니다. **탭 구성**의 `name-tab`을 켜야 열립니다. 이름 넣기 탭은 템플릿에서 변수 이름이 붙은 글상자를 입력 칸으로 보여 주고, 같은 변수의 글자를 함께 바꿉니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `force-shrink` | `nameForceShrink` | 꺼짐 | 이름을 입력하고 **변경 사항 적용**(신규 모바일 UI는 입력 창의 **적용**)을 누르면 각 문단이 글상자 안에서 한 줄이 되도록 글자를 줄입니다. 데스크톱 이름 탭과 신규 모바일 이름 입력 창에 적용합니다 |

## 변수

**텍스트** 그룹의 **변수** 줄입니다. **탭 구성**의 `var-tab`을 켜야 열립니다. 변수 탭은 데스크톱에만 있으며, 현재 페이지 오버레이에 있는 변수 개체의 색을 묶어서 바꿉니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `var-title` | `varTitle` | 빈 문자열 | 변수 탭 버튼에 보일 이름입니다 |
| `var command` | `varItems` | 빈 문자열 | 색 입력 항목을 정의하는 JSON 배열 문자열입니다 |

항목마다 `title`은 화면에 보일 이름, `vars`는 묶을 변수 ID 배열입니다.

```json theme={null}
[
  { "title": "제목 색상", "vars": ["title", "subtitle"] },
  { "title": "배경 도형 색상", "vars": ["backgroundShape"] }
]
```

* 페이지에 그 변수 ID를 가진 오버레이 개체가 있는 항목만 보입니다.
* 처음 색은 첫 번째로 찾은 개체에서 읽습니다. 글상자면 글자색, 패스 도형이면 채우기색입니다.
* **변경 사항 적용**을 누르면 묶인 글상자와 패스 글자의 글자색, 패스 도형의 채우기색을 바꿉니다.
* `var-tab`을 켰다면 값을 비워 두지 마세요. 편집기가 JSON으로 읽으므로 항목이 없을 때도 `[]`를 넣습니다.

변수 이름을 템플릿에 붙이는 방법은 [변수와 데이터 병합](/docs/templates/variables)에 있습니다.

## 됐는지 확인

<Check>
  상품을 **Update**로 저장한 뒤 Manager **Resource**에서 이 상품의 템플릿을 고르고 **Demo**로 엽니다. 사진 칸과 글상자를 선택했을 때 켠 도구만 보이고, 사진 탭에 켠 버튼만 보이면 됩니다. Demo에서는 저장과 사진 업로드를 할 수 없으므로, 자동 넣기나 `confirm-drop`처럼 사진이 필요한 확인은 [테스트 주문과 렌더링](/docs/templates/test-render)의 **Test Order**로 합니다.
</Check>

<Tip>
  모바일 화면도 같은 방법으로 봅니다. **Resource** 화면 위쪽의 `{ divCode,lang,ui_locale,... }` 설정 버튼을 눌러 **platform**을 `mobile`(기존 모바일 UI)이나 `mobile-v2`(신규 모바일 UI)로 바꾼 뒤 **Demo**로 엽니다.
</Tip>

## 다음 단계

<Columns cols={2}>
  <Card title="자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어" icon="shapes" href="/docs/products/assets">
    스티커, 도형, 컷아웃, 패턴, 박, 레이어를 정합니다.
  </Card>

  <Card title="썸네일, 미리보기, 색상" icon="eye" href="/docs/products/thumbnail-preview">
    썸네일과 미리보기, 출력 색상을 정합니다.
  </Card>
</Columns>


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