> ## 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 **상품 설정**의 **확장** 그룹을 줄 순서대로 다룹니다.

## 배우는 것

* 파트너 공통 플러그인과 상품 전용 플러그인의 차이
* 프로모션 창의 설정과 띄우기 옵션과의 우선순위
* 사용자 데이터가 저장 결과로 돌아오는 경로

UI 용어(데스크톱, 신규 모바일 UI, 기존 모바일 UI)는 [탭 구성](/docs/products/editor-tabs#용어)에 있습니다.

## 플러그인

**플러그인**은 Edicus 밖의 화면이나 코드를 편집기 안에서 여는 확장입니다. 파트너 전체에 공통으로 등록하는 플러그인과, 상품 하나에만 붙이는 플러그인이 있습니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `global-plugin` | `enablePlugin` | 꺼짐 | 파트너 설정 **Plugins**에 등록한 공통 플러그인을 이 상품에서 씁니다 |
| `local-plugin` | `localPlugin` | 꺼짐 | 이 상품 전용 플러그인 탭 하나를 붙입니다. 켜면 아래 세 항목이 열립니다 |
| `plugin option` | `pluginInfo` | 빈 값 | 상품 전용 플러그인의 주소와 아이콘입니다. 아래 표를 보세요 |
| `plugin-name` | `pluginInfo.name` | 빈 문자열 | 탭 아이콘 아래에 보일 이름입니다. 20자까지 넣습니다 |
| `dp-name i18n` | `pluginInfo.dpNameLn` | 없음 | 언어별 탭 이름입니다. 편집기 언어(`ui_locale`)의 이름이 있으면 그것을, 없으면 `plugin-name`을 씁니다 |

**plugin option**을 누르면 열리는 창의 항목입니다.

| 항목 | 저장 키 | 설명 |
| - | - | - |
| `plugin-url` | `pluginInfo.url` | 플러그인 주소입니다. 상품 전용 플러그인은 자바스크립트 모듈로 읽으므로 모듈 파일 주소를 넣습니다 |
| `plugin-dev-url` | `pluginInfo.dev_url` | 띄우기 옵션 `env_mode`에 `dev`를 넣어 띄웠을 때 `plugin-url` 대신 씁니다. 비워 두면 `plugin-url`을 씁니다 |
| `icon-url` | `pluginInfo.icon_url` | 탭이 선택되지 않았을 때의 아이콘 이미지 주소입니다 |
| `icon-url-active` | `pluginInfo.icon_url_active` | 탭이 선택됐을 때의 아이콘입니다. 비워 두면 `icon-url`을 씁니다 |

### global-plugin이 켜는 것

파트너 공통 플러그인은 [파트너 공통 설정](/docs/products/style)의 **Plugins**에서 등록합니다. 이 스위치를 켠 상품에서만 아래 위치에 나타납니다.

| 플러그인 유형 | 나타나는 곳 |
| - | - |
| 탭 플러그인 | 데스크톱 왼쪽 탭의 기본 탭 뒤, 기존 모바일 UI의 **아이템 추가** 패널 |
| 사진 소스 | 사진 탭의 사진 가져오기 목록 |
| 캔버스 버튼 | 데스크톱 캔버스 오른쪽 위 |
| 링크 | 기존 모바일 UI의 **아이템 추가** 패널 |

공통 플러그인 중 `force-global`을 켠 사진 소스와 캔버스 버튼, 안내(`guide`)와 상품 변경(`reform`) 플러그인은 이 스위치와 상관없이 나옵니다. 띄우기 옵션 `force_plugin`을 주면 이 스위치를 켠 것과 같습니다. 다만 기존 모바일 UI의 **아이템 추가** 패널은 `force_plugin`을 읽지 않습니다.

### local-plugin의 동작

상품 전용 플러그인은 파트너 공통 플러그인과 따로 동작합니다. `global-plugin`을 꺼도 나옵니다.

* 데스크톱에서는 플러그인 탭 중 맨 앞에 놓이고, 편집기가 이 탭을 처음 탭으로 엽니다.
* 편집기는 `plugin-url`을 자바스크립트 모듈로 불러와, 주소의 `class` 쿼리 값(없으면 `default`)과 이름이 같은 클래스를 만듭니다. 편집기가 모듈에 넘기는 인터페이스는 모양컷(스티컷) 연동용입니다. [스티컷 상품](/docs/products/sticut)을 보세요.
* 기존 모바일 UI와 신규 모바일 UI에는 탭으로 나오지 않습니다. 스티컷 상품에서 칼선을 만드는 모듈로만 씁니다. 아래 [스티컷 상품의 플러그인 연결](#스티컷-상품의-플러그인-연결)을 보세요.

`plugin-url`을 비워 두고 켜면 데스크톱 탭이 빈 채로 열립니다. 주소를 먼저 넣고 켜세요.

### 스티컷 상품의 플러그인 연결

키링, 등신대, 스마트톡 같은 [스티컷 상품](/docs/products/sticut)은 사용자가 그림을 올리고 칼선을 만드는 화면을 플러그인 모듈로 엽니다. 편집기에는 이 모듈을 대신하는 내장 화면이 없습니다. 플러그인 주소가 비어 있거나 연결된 플러그인이 없으면 편집기는 다른 주소를 쓰지 않고, 그림 올리기 화면이 열리지 않습니다. 멀티스티커(`multi-sticker`)에서 `sticut-tab`을 켠 데스크톱만 예외로 내장 탭을 씁니다.

<Steps>
  <Step title="스티컷 모듈 주소를 준비합니다">
    편집기 코드와 Manager에는 스티컷 모듈의 기본 주소가 들어 있지 않습니다. `plugin-url`과 파트너 공통 플러그인의 `url`은 둘 다 빈 칸으로 시작합니다. 모션원에서 받은 스티컷 모듈 주소를 그대로 씁니다. 데스크톱은 주소에 `sticut=true`가 들어 있는 플러그인 탭을 스티컷 탭으로 알아보므로, 받은 주소의 쿼리를 지우지 마세요.
  </Step>

  <Step title="둘 중 한 곳에 연결합니다">
    상품 하나에만 쓰려면 이 상품의 `local-plugin`을 켜고 **plugin option**의 `plugin-url`에 넣습니다. 여러 상품에 같이 쓰려면 [파트너 공통 설정](/docs/products/style)의 **Plugins**에 `tab-embeded` 유형, `module` 실행 방식으로 등록하고 이 상품의 `global-plugin`을 켭니다.
  </Step>

  <Step title="UI별로 확인합니다">
    데스크톱은 스티컷 페이지에서 플러그인 탭이 열립니다. 기존 모바일 UI와 신규 모바일 UI는 탭 없이, 스티컷 상품을 열 때 첫 번째 탭 플러그인(`local-plugin`이 있으면 그것)을 모듈로 불러옵니다.
  </Step>
</Steps>

기존 모바일 UI와 신규 모바일 UI는 `global-plugin` 스위치를 보지 않고 파트너 공통 탭 플러그인도 그대로 씁니다. 공통 플러그인 목록의 첫 탭 플러그인이 스티컷 모듈이 아니면 모바일에서 엉뚱한 모듈을 불러오므로, 스티컷 상품에는 `local-plugin`으로 연결하는 편이 안전합니다.

### 플러그인 주소에 붙는 값

편집기는 플러그인 주소 뒤에 `div`, `lang`, `ui_locale`, `ps_code`, `project_id`, `mobile`을 붙입니다. 띄우기 옵션 `plugin_param`을 주면 `info`로, 신규 모바일 UI면 `m2=true`도 붙입니다. 플러그인이 보내는 이벤트는 [편집기 이벤트](/docs/sdk/events)에 있습니다.

### 사이즈와 띄우기 옵션으로 바꾸기

* 사이즈의 product override에서 **Global Plugin**, **Local Plugin**을 사이즈마다 켜고 끕니다. [사이즈 고급 옵션](/docs/products/size-options#product-override)을 보세요.
* 사이즈의 `edicus options`에 `plugin_info`를 넣으면 `plugin option`의 같은 이름 필드를 덮어씁니다. `plugins`를 넣으면 공통 플러그인 목록에 덧붙입니다.
* 띄우기 옵션 `options.plugins`도 공통 플러그인 목록에 덧붙입니다. [띄우기 옵션](/docs/reference/launch-options#options-키)을 보세요.

## 프로모션

**프로모션**은 편집기 위에 이벤트나 안내 페이지를 띄우는 창입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `enable-promo` | `enablePromo` | 꺼짐 | 상품의 프로모션 창을 씁니다. 켜면 **promo setting**이 열립니다 |
| `promo setting` | `promoInfo` | 아래 표 | 창의 종류, 크기, 주소입니다 |

**promo setting**을 누르면 열리는 창의 항목입니다. 처음 열면 아래 기본값으로 채웁니다.

| 항목 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| Launch Type | `type` | `default` | `default`는 편집기 안에 창을 띄웁니다. `external`은 창 대신 버튼만 두고, 누르면 내 페이지에 `promo-external-report`를 보냅니다 |
| preferred-width, preferred-height | `preferredWidth`, `preferredHeight` | `300`, `400` | 데스크톱 창의 크기(px)입니다 |
| open at launch | `opened` | 켜짐 | 편집기를 연 직후 창을 펼친 상태로 시작합니다 |
| enable on mobile | `mobile` | 켜짐 | 기존 모바일 UI와 신규 모바일 UI에서도 창을 씁니다. 꺼져 있으면 모바일에는 `external`일 때만 버튼이 나옵니다 |
| url | `url` | 빈 문자열 | 창에 띄울 주소입니다. 리소스 URI(`gcs://`)도 받습니다 |
| mobile-url | `mobile_url` | 빈 문자열 | 기존 모바일 UI와 신규 모바일 UI에서 `enable on mobile`이 켜져 있을 때 `url` 대신 씁니다. 비워 두면 `url`을 씁니다 |

**Add En**, **Add Ja**로 언어별 `url`과 `mobile-url`을 따로 넣을 수 있습니다(`promoInfo.ln`). 편집기 언어(`ui_locale`)가 맞는 항목이 있으면 그 주소를 씁니다. 언어별 항목을 쓰면 모바일에서도 그 항목의 `url`을 엽니다.

### UI별 동작

| UI | `default` | `external` |
| - | - | - |
| 데스크톱 | 캔버스 오른쪽에 접었다 펼 수 있는 창을 둡니다. `open at launch`가 켜져 있으면 펼친 채로 시작합니다 | 버튼만 두고, 누르면 `promo-external-report`를 보냅니다 |
| 기존 모바일 UI, 신규 모바일 UI | 헤더의 안내 버튼으로 전체 화면 창을 엽니다. `open at launch`가 켜져 있으면 편집기를 다 연 직후 창을 띄웁니다. 주소가 `.jpg`나 `.png`로 끝나면 이미지로 보여 줍니다 | 헤더 버튼을 누르면 이벤트를 보냅니다. `open at launch`가 켜져 있으면 편집기를 연 직후에도 한 번 보냅니다 |

파트너 설정 `can-skip-promo`를 켜면 모바일 시작 창에 **하루 동안 보지 않기**가 생깁니다. [Customize 동작 설정](/docs/products/customize-config)을 보세요. `env_mode`에 `restricted`를 넣어 띄우면 데스크톱에서 프로모션을 표시하지 않습니다.

### 우선순위

편집기는 아래 순서로 처음 찾은 설정 하나만 씁니다.

1. 띄우기 옵션 `options.promo`. 필드 이름은 `promoInfo`와 같습니다.
2. `option_string`의 `promo`. `promo=url:<인코딩한 주소>;width:300;height:400` 형식이고, 상품의 `promoInfo`를 대신합니다. 종류는 `default`, 모바일 사용과 시작 시 열기는 켜짐, `mobile-url`은 `url`과 같게 채웁니다.
3. 상품의 `promoInfo`. `enable-promo`가 켜져 있어야 합니다. `option_string`의 `promo_url`은 이 주소만 바꾸고, `promo_url=none`이면 이 설정을 지웁니다.
4. 사이즈 `edicus options`의 `promo`.

편집기를 연 뒤에는 `request-feature` 커맨드의 `promo-window`로 창을 새로 띄울 수 있습니다. [편집기 커맨드](/docs/sdk/commands)를 보세요.

## 보관함 유지

신규 모바일 UI의 사진 탭에서 사진을 골라 사진 칸을 추가할 때, 추가한 사진 칸을 바로 선택할지 정합니다. 선택하면 사진 탭이 닫히고 사진 칸 도구로 넘어갑니다. 선택하지 않으면 사진 탭이 남아 사진을 이어서 넣을 수 있습니다. 데스크톱과 기존 모바일 UI에는 영향이 없습니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `keep-imgpool-mode` | `keepPhotoBrowseValue` | `default` | `default`는 아래 스위치를 따릅니다. `over-1`~~`over-5`는 현재 페이지의 사진 칸이 1~~5개보다 많아지면 선택하지 않습니다 |
| `keep-imgpool` | `keepPhotoBrowse` | 꺼짐 | `keep-imgpool-mode`가 `default`일 때만 열립니다. 켜면 추가한 사진 칸을 선택하지 않습니다 |

## 사용자 데이터

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `user data` | `userData` | 빈 문자열 | 상품마다 내 서비스에서 쓸 값을 넣는 자리입니다. 형식은 자유입니다 |

저장 키는 `template_option` 아래가 아니라 상품 바로 아래의 `userData`입니다. 편집기는 이 값을 해석하지 않습니다. 저장이 끝나면 `save-doc-report`(`status: 'end'`)의 `docInfo.userData`로 그대로 돌려줍니다. `goto-cart`가 `report`일 때 보내는 `doc-report`에도 들어 있습니다. 상품 코드마다 내 쪽 데이터베이스를 따로 조회하지 않아도 저장 결과에서 바로 상품별 값을 꺼낼 수 있습니다.

값은 UTF-8 기준 65,535바이트까지 저장합니다. 한글은 한 글자가 3바이트라 약 21,845자입니다. 이보다 크면 상품 저장이 거부됩니다.

<Warning>
  사용자 데이터는 Edicus Manager에서 고치세요. 리소스 API의 상품 userdata 엔드포인트로 바꾼 값은 편집기가 먼저 읽는 상품 정보 사본에 반영되지 않아, `docInfo.userData`가 예전 값으로 남을 수 있습니다.
</Warning>

## 됐는지 확인

<Check>
  **Update**로 저장한 뒤 Manager **Resource**에서 이 상품의 템플릿을 고르고 **Demo**로 여세요. 상품 전용 플러그인을 붙였다면 그 탭이 처음 열리고, 프로모션을 켰다면 창이나 버튼이 보이면 됩니다. 스티컷 플러그인처럼 사진을 올려야 하는 확인은 [테스트 주문과 렌더링](/docs/templates/test-render)의 **Test Order**로 하세요.
</Check>

<Note>
  사용자 데이터가 `save-doc-report`의 `docInfo.userData`로 오는지, `external` 프로모션 버튼이 `promo-external-report`를 보내는지는 내 서비스 코드에서만 볼 수 있습니다. 연동 담당자에게 확인을 부탁하세요.
</Note>

## 다음 단계

<Columns cols={2}>
  <Card title="파트너 공통 설정" icon="palette" href="/docs/products/style">
    파트너 공통 플러그인과 안내 문구를 등록합니다.
  </Card>

  <Card title="편집기 이벤트" icon="bolt" href="/docs/sdk/events">
    플러그인과 프로모션이 보내는 이벤트를 봅니다.
  </Card>
</Columns>


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