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

# 파트너 공통 설정

> Customize와 Division에서 공통 문구, CSS, 플러그인, 외부 API를 설정하는 방법

**Customize**는 파트너의 편집기 설정을 **디비전**별로 저장하는 화면입니다. 상품마다 정하는 탭과 도구 설정과 함께 적용됩니다. 여러 사이트에 다른 문구와 스타일을 적용하려면 디비전을 나눕니다.

## 배우는 것

* 디비전을 만들고 편집기에 연결하는 방법
* 버튼, 안내 문구, CSS를 바꾸는 방법
* 공통 플러그인과 배경 제거 API를 연결하는 방법

<Note>
  2026년 10월 8일 Manager와 편집기 코드 기준입니다. **Customize**와 **Division** 메뉴는 파트너 관리자 계정(partner-admin)에 보입니다. 일부 항목은 계정 권한에 따라 보이지 않을 수 있습니다.
</Note>

## 디비전 선택과 저장

기본 디비전은 `host`입니다. 편집기는 띄우기 옵션 `partner`와 `div`로 설정을 선택합니다. `div`를 생략하면 `host`를 사용합니다.

<Steps>
  <Step title="디비전을 준비합니다">
    기본 설정만 사용한다면 `host`를 선택합니다. 별도 설정은 **Division > Add**에서 중복되지 않는 `divCode`, 표시 이름 `dpName`, 설명을 입력합니다. 생성 후에는 `divCode`를 바꿀 수 없습니다.
  </Step>

  <Step title="Customize에서 디비전을 선택합니다">
    왼쪽 목록에서 디비전을 선택합니다. **Config**, **Info**, **CSS**, **Plugins**, **APIs** 중 설정할 항목을 엽니다.
  </Step>

  <Step title="Update로 저장합니다">
    상단 **Update**를 누릅니다. 새 디비전은 편집기를 띄우기 전에 Customize에서 한 번 저장해야 편집기가 읽는 설정 파일이 생성됩니다. 설정 파일이 없는 디비전을 `div`로 넘기면 편집기가 로딩 화면에서 멈춥니다.
  </Step>

  <Step title="같은 디비전으로 편집기를 다시 띄웁니다">
    띄우기 옵션 `div`에 같은 `divCode`를 전달합니다. 이미 열린 편집기는 다시 띄워 새 설정을 읽습니다.
  </Step>
</Steps>

디비전은 [폰트](/docs/products/fonts) 선택에도 사용됩니다. 스티커 카테고리의 `hideDivFilter`에 지정한 디비전은 그 카테고리를 숨깁니다. `host`는 Manager에서 삭제할 수 없습니다.

## 공통 동작 (Config)

**System Settings**, **Asset Settings**, **Mobile Settings**의 전체 항목은 [Customize 동작 설정](/docs/products/customize-config)에 정리했습니다.

## 안내 문구 (Info)

**Default**에서 공통 문구를 입력합니다. **Add En**, **Add Ja**로 언어별 문구를 추가합니다. 언어는 띄우기 옵션 `ui_locale`, 없으면 `lang`, 둘 다 없으면 `ko`를 사용합니다.

언어별 설정이 존재하면 그 언어의 문구 묶음을 사용합니다. 그 안의 빈 항목은 편집기 기본 번역으로 돌아갑니다. **Default**의 같은 항목으로 채우지는 않습니다. 모바일 문구가 비어 있으면 선택한 언어 묶음의 공통 문구를 사용합니다.

아래 키는 `info` 안의 경로입니다. 기본값은 빈 문자열이며, `exit_icon`만 `default`입니다.

| 화면 이름 | 저장 키 | 바뀌는 부분 |
| - | - | - |
| `registered-text` | `registered_text` | **프로그램 정보**의 등록 대상 이름 |
| `exit-title` | `exit_title` | 편집 종료 버튼 문구. 모바일에서는 Config의 `close-title`보다 우선합니다 |
| `exit-title-mobile` | `mobile.exit_title` | 모바일 종료 버튼 문구. 공통 `exit_title`보다 우선합니다 |
| `exit-icon` | `exit_icon` | 데스크톱 종료 아이콘. `default`는 기본 아이콘, `cart`는 장바구니 아이콘입니다 |
| `save-title` | `save_title` | 저장 버튼 문구 |
| `saved-title` | `saved_title` | 저장 완료 상태의 버튼 문구 |
| `image-full` | `image_full` | 사진인화의 이미지맞춤 옵션 이름 |
| `paper-full` | `paper_full` | 사진인화의 인화지맞춤 옵션 이름 |
| `cut-margin-warning-msg` | `cut_margin_warning_msg` | 재단 영역 충돌 경고 |
| `inner-margin-warning-msg` | `inner_margin_warning_msg` | 안전 영역 충돌 경고 |
| `miso-warning-msg` | `miso_collision_warning_msg` | 제본 안쪽 금지 영역 충돌 경고 |
| `page-side-block-msg` | `page_side_block_msg` | 분리 페이지의 편집 불가 반쪽에 덮어 표시하는 안내 |
| `preview-confirm-title` | `preview_confirm_title` | 주문 전 미리보기 확인 창 제목 |
| `preview-confirm-title-mobile` | `mobile.preview_confirm_title` | 모바일 미리보기 확인 창 제목 |
| `preview-confirm-desc` | `preview_confirm_desc` | 주문 전 미리보기 확인 창 설명 |
| `preview-confirm-desc-mobile` | `mobile.preview_confirm_desc` | 모바일 미리보기 확인 창 설명 |
| `empty-print-guide-url` | `d_empty_print_guide_url` | 데스크톱 사진인화에서 사진이 없을 때 표시하는 안내 페이지 URL |
| `empty-print-guide-url-mobile` | `m_empty_print_guide_url` | 모바일 사진인화에서 사진이 없을 때 표시하는 안내 페이지 URL |

문구를 입력해도 경고 기능이 자동으로 켜지지는 않습니다. [편집기 동작](/docs/products/editor-behavior#경고)과 [사이즈와 페이지 정보](/docs/products/sizes#페이지-정보)를 같이 설정하세요.

`exit-icon`과 두 안내 URL은 **Default** 값을 직접 읽습니다. **En**, **Ja**에서 이 항목을 바꿔도 해당 화면에는 반영되지 않습니다.

## 스타일 (CSS)

**CSS**에서 `enable`을 켜고 **custom-css**에 필요한 규칙을 입력한 뒤 **Update**를 누릅니다. **edicus-reference-css**는 선택자와 변수를 찾는 참고용입니다. 바꿀 부분만 복사하세요.

| 설정 위치 | 저장 키 또는 옵션 | 범위 | 삽입 순서 |
| - | - | - | - |
| Customize **CSS** | `custom_css.enable`, `custom_css.css_text` | 디비전 전체 | 첫 번째 |
| 띄우기 옵션 | `private_css` | 이번 세션 | Customize CSS 뒤에 이어 붙입니다 |
| 사이즈의 **edicus options** | `css` | 해당 사이즈 | 상품을 읽은 뒤 별도 스타일로 추가합니다 |

Customize CSS의 `enable`이 꺼져 있으면 `private_css`만 넣습니다. 같은 선택자와 우선순위라면 나중에 삽입된 쪽이 이기므로 사이즈 CSS, `private_css`, Customize CSS 순으로 우선합니다. 선택자의 구체성과 `!important`도 적용됩니다.

`ui_style`은 CSS 문자열이 아닙니다. 헤더나 탭을 숨기는 구성 옵션입니다. 값은 [띄우기 옵션](/docs/reference/launch-options)에 있습니다.

<Note>
  lite 편집기는 `createLiteProject` 같은 lite 계열 메서드로 띄우는 간소화 편집기입니다. lite 편집기는 Customize의 Config, Info, CSS, Plugins를 읽지 않습니다. lite 편집기의 `div`는 폰트 그룹 선택에만 쓰입니다. lite 편집기에 CSS를 적용하려면 `private_css`를 전달합니다.
</Note>

## 공통 플러그인 (Plugins)

**Add Plugin**으로 추가하고 `enable`을 켭니다. Customize의 **Update**로 저장합니다. 디비전 목록에 띄우기 `options.plugins`와 사이즈 `plugins`를 이어 붙여 사용합니다.

### 기본 필드

| 화면 이름 | 저장 키 | 기본값 | 동작 |
| - | - | - | - |
| `enable` | `enable` | `false` | 꺼진 항목은 표시하지 않습니다 |
| `type` | `type` | `photo-src` | 아래 유형별 연결 위치를 선택합니다 |
| `embed-type` | `embedType` | `default` | iframe, 모듈, 호스트 위임 방식을 선택합니다 |
| `name`, **name i18n** | `name`, `nameLn` | 빈 이름, 빈 언어 목록 | 버튼과 탭 이름입니다. 데스크톱 캔버스 오른쪽 버튼은 공통 `name`을 직접 표시합니다 |
| `position` | `position` | `tab` | `tab` 또는 `top-right`를 선택합니다. `top-right`의 저장 값은 `canvas-top-right`입니다 |
| `force-global` | `forceGlobal` | `false` | 상품의 공통 플러그인이 꺼져도 데스크톱 사진 소스와 캔버스 오른쪽 버튼에 표시합니다. 탭 플러그인에는 적용되지 않습니다 |
| `prod-filter` | `useProdTarget` | `false` | 상품 코드 필터를 켭니다 |
| `prod-codes`, **Add Target** | `prodTargets` | 빈 목록 | 대상은 `ps_code`가 아닌 상품 코드 `prodCode`입니다 |
| `url`, `dev-url` | `option.url`, `option.dev_url` | 빈 문자열 | 실행 주소입니다. 개발 환경에서는 비어 있지 않은 `dev_url`을 우선합니다 |
| `icon-url` | `option.icon_url` | 빈 문자열 | 탭이나 캔버스 버튼의 아이콘 URL |
| `margin-w`, `margin-h` | `option.wMargin`, `option.hMargin` | 각각 `30` | 팝업의 가로·세로 여백입니다. 창 크기는 편집기 영역에서 양쪽 여백을 뺀 값입니다 |
| `use-mobile` | `mobile` | `false` | 모바일 사진 소스 목록에도 표시합니다. 모든 유형에 공통인 표시 스위치는 아닙니다 |
| `param` | `param` | 빈 문자열 | 외부 호출과 플러그인 처리에 쓰는 문자열입니다. `external` 이벤트 정보에도 전달됩니다 |
| `link-guide` | `linkGuide` | `false` | 데스크톱 리소스 목록 팝업에 안내 링크를 추가합니다 |
| `link-guide-name`, `link-guide-url` | `option.guide_name`, `option.guide_url` | 빈 문자열 | 안내 링크 이름과 URL |

### 유형별 연결 위치

| `type` 값 | 동작 |
| - | - |
| `tab-embeded` | 데스크톱 도구 탭과 기존 모바일의 추가 도구에 연결합니다. 신규 모바일 UI는 스티컷 옵션 탭에서만 씁니다. 철자는 `embeded` 그대로 저장합니다 |
| `photo-src` | 사진 가져오기 목록에 외부 소스를 추가하고 팝업으로 엽니다. 모바일은 `use-mobile`이 필요합니다 |
| `cutout-src` | 이 유형을 여는 일반 도구 버튼은 구현되어 있지 않습니다. 저장만으로 컷아웃 탭이 추가되지는 않습니다 |
| `text-content` | 전용 일반 도구 버튼은 없습니다. 데스크톱의 `canvas-top-right`에 배치하면 공통 캔버스 버튼으로 열 수 있습니다 |
| `guide` | 데스크톱에서 프로젝트를 읽은 뒤 대상 상품에 맞는 첫 안내 팝업을 자동으로 엽니다 |
| `link` | 데스크톱 캔버스 오른쪽 버튼에서 리소스 URI의 목록을 엽니다. 기존 모바일에서는 추가 도구에 표시하며 스티커 카테고리 이동에 사용합니다 |
| `reform` | 데스크톱 상단에 상품 변경 버튼을 추가합니다. `parent://` URL이면 호스트에 `request-reform`을 보냅니다. 그 외 URL은 팝업으로 엽니다 |

`reform`은 활성화된 첫 항목을 사용하며 `prod-filter`를 적용하지 않습니다. `guide`와 `reform`은 상품의 공통 플러그인 스위치를 꺼도 각각의 연결 위치에서 사용할 수 있습니다.

### 실행 방식

| `embedType` | 동작 |
| - | - |
| `default` | URL을 iframe으로 엽니다 |
| `module` | 탭 플러그인을 JavaScript 모듈로 읽습니다. 모듈의 편집기 인터페이스 구현이 필요합니다 |
| `external` | 데스크톱의 `canvas-top-right` 버튼 클릭 시 호스트에 `plugin-request-open`을 보냅니다. 호스트가 화면을 열어야 합니다 |

`external`은 데스크톱 캔버스 오른쪽 버튼에 사용하세요. 탭은 이 값을 외부 이벤트 방식으로 처리하지 않고 iframe 경로로 들어갑니다.

플러그인 URL에는 `div`, `lang`, `ui_locale`, `ps_code`, `project_id`, `mobile`이 추가됩니다. 신규 모바일 UI는 `m2=true`도 추가됩니다. 호스트 메시지는 [편집기 이벤트](/docs/sdk/events)에 있습니다.

상품의 `global-plugin`은 공통 탭과 사진 소스 표시를 켜는 설정입니다. `local-plugin`은 상품에 직접 붙이는 별도 탭입니다. [확장 설정](/docs/products/extensions)에서 설정합니다.

## 외부 API (APIs)

**APIs**는 스티컷용 사진의 배경 제거 기능을 연결합니다. **Asset Settings**의 커스텀 리소스 API와 독립된 설정입니다. 화면은 계정 권한에 따라 보이지 않을 수 있습니다.

| 화면 이름 | 저장 키 | 값과 동작 |
| - | - | - |
| `enable` | `enable` | 배경 제거 연결 활성화 |
| `category` | `apiCategory` | 현재 선택지는 `cutout`입니다 |
| `type` | `apiType` | 현재 선택지는 `cutout-method-1`입니다. 배경 제거 요청에 처리 방식으로 전달합니다 |
| `api-key` | `apiKey` | **Encode**에 입력할 외부 서비스 키입니다. 편집기 배포 파일에서는 원문 키를 제거합니다 |
| `encoded-api-key` | `encodedApiKey` | **Encode** 결과입니다. 현재 편집기의 배경 제거 요청은 이 필드를 전송하지 않습니다 |

상품의 `template_option.apiInfo.cutoutSticut`과 목록에서 처음 발견한 `cutout` 항목의 `enable`이 함께 켜져야 사진 탭에 배경 제거 가져오기가 표시됩니다. 업로드 파일 정보와 `apiType`을 배경 제거 처리에 전달합니다. 키 인코딩만으로 상품에 버튼이 생기지는 않습니다.

## 됐는지 확인

<Check>
  Edicus Manager의 **Resource** 화면에서 이 상품의 템플릿을 고릅니다. 템플릿 목록 위의 `{ divCode,lang,ui_locale,... }` 모양 버튼을 눌러 **platform**(desktop, mobile, mobile-v2)과 **DivCode**를 설정한 디비전으로 맞춥니다. **Demo**로 편집기를 띄워 바꾼 화면을 확인합니다. 사진 업로드와 저장, 종료까지 확인하려면 [테스트 주문과 렌더링](/docs/templates/test-render)의 **Test Order**를 씁니다.
</Check>

<Note>
  실제 사이트에서의 확인은 연동 담당자에게 맡깁니다. 같은 `partner`와 `div`로 편집기를 새로 띄우고, 언어별 문구는 `ui_locale`을 바꾸어 확인합니다. `external` 플러그인과 `parent://` 형식의 `reform` 플러그인은 호스트가 `plugin-request-open`, `request-reform` 이벤트를 처리해야 화면이 열립니다.
</Note>

## 다음 단계

<Columns cols={2}>
  <Card title="Customize 동작 설정" icon="sliders" href="/docs/products/customize-config">시스템, 자산, 모바일 설정 전체를 봅니다.</Card>
  <Card title="폰트" icon="font" href="/docs/products/fonts">디비전별 폰트 목록을 구성합니다.</Card>
</Columns>


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