배우는 것
- 디비전을 만들고 편집기에 연결하는 방법
- 버튼, 안내 문구, CSS를 바꾸는 방법
- 공통 플러그인과 배경 제거 API를 연결하는 방법
2026년 10월 8일 Manager와 편집기 코드 기준입니다. Customize와 Division 메뉴는 파트너 관리자 계정(partner-admin)에 보입니다. 일부 항목은 계정 권한에 따라 보이지 않을 수 있습니다.
디비전 선택과 저장
기본 디비전은host입니다. 편집기는 띄우기 옵션 partner와 div로 설정을 선택합니다. div를 생략하면 host를 사용합니다.
1
디비전을 준비합니다
기본 설정만 사용한다면
host를 선택합니다. 별도 설정은 Division > Add에서 중복되지 않는 divCode, 표시 이름 dpName, 설명을 입력합니다. 생성 후에는 divCode를 바꿀 수 없습니다.2
Customize에서 디비전을 선택합니다
왼쪽 목록에서 디비전을 선택합니다. Config, Info, CSS, Plugins, APIs 중 설정할 항목을 엽니다.
3
Update로 저장합니다
상단 Update를 누릅니다. 새 디비전은 편집기를 띄우기 전에 Customize에서 한 번 저장해야 편집기가 읽는 설정 파일이 생성됩니다. 설정 파일이 없는 디비전을
div로 넘기면 편집기가 로딩 화면에서 멈춥니다.4
같은 디비전으로 편집기를 다시 띄웁니다
띄우기 옵션
div에 같은 divCode를 전달합니다. 이미 열린 편집기는 다시 띄워 새 설정을 읽습니다.hideDivFilter에 지정한 디비전은 그 카테고리를 숨깁니다. host는 Manager에서 삭제할 수 없습니다.
공통 동작 (Config)
System Settings, Asset Settings, Mobile Settings의 전체 항목은 Customize 동작 설정에 정리했습니다.안내 문구 (Info)
Default에서 공통 문구를 입력합니다. Add En, Add Ja로 언어별 문구를 추가합니다. 언어는 띄우기 옵션ui_locale, 없으면 lang, 둘 다 없으면 ko를 사용합니다.
언어별 설정이 존재하면 그 언어의 문구 묶음을 사용합니다. 그 안의 빈 항목은 편집기 기본 번역으로 돌아갑니다. Default의 같은 항목으로 채우지는 않습니다. 모바일 문구가 비어 있으면 선택한 언어 묶음의 공통 문구를 사용합니다.
아래 키는 info 안의 경로입니다. 기본값은 빈 문자열이며, exit_icon만 default입니다.
문구를 입력해도 경고 기능이 자동으로 켜지지는 않습니다. 편집기 동작과 사이즈와 페이지 정보를 같이 설정하세요.
exit-icon과 두 안내 URL은 Default 값을 직접 읽습니다. En, Ja에서 이 항목을 바꿔도 해당 화면에는 반영되지 않습니다.
스타일 (CSS)
CSS에서enable을 켜고 custom-css에 필요한 규칙을 입력한 뒤 Update를 누릅니다. edicus-reference-css는 선택자와 변수를 찾는 참고용입니다. 바꿀 부분만 복사하세요.
Customize CSS의
enable이 꺼져 있으면 private_css만 넣습니다. 같은 선택자와 우선순위라면 나중에 삽입된 쪽이 이기므로 사이즈 CSS, private_css, Customize CSS 순으로 우선합니다. 선택자의 구체성과 !important도 적용됩니다.
ui_style은 CSS 문자열이 아닙니다. 헤더나 탭을 숨기는 구성 옵션입니다. 값은 띄우기 옵션에 있습니다.
lite 편집기는
createLiteProject 같은 lite 계열 메서드로 띄우는 간소화 편집기입니다. lite 편집기는 Customize의 Config, Info, CSS, Plugins를 읽지 않습니다. lite 편집기의 div는 폰트 그룹 선택에만 쓰입니다. lite 편집기에 CSS를 적용하려면 private_css를 전달합니다.공통 플러그인 (Plugins)
Add Plugin으로 추가하고enable을 켭니다. Customize의 Update로 저장합니다. 디비전 목록에 띄우기 options.plugins와 사이즈 plugins를 이어 붙여 사용합니다.
기본 필드
유형별 연결 위치
reform은 활성화된 첫 항목을 사용하며 prod-filter를 적용하지 않습니다. guide와 reform은 상품의 공통 플러그인 스위치를 꺼도 각각의 연결 위치에서 사용할 수 있습니다.
실행 방식
external은 데스크톱 캔버스 오른쪽 버튼에 사용하세요. 탭은 이 값을 외부 이벤트 방식으로 처리하지 않고 iframe 경로로 들어갑니다.
플러그인 URL에는 div, lang, ui_locale, ps_code, project_id, mobile이 추가됩니다. 신규 모바일 UI는 m2=true도 추가됩니다. 호스트 메시지는 편집기 이벤트에 있습니다.
상품의 global-plugin은 공통 탭과 사진 소스 표시를 켜는 설정입니다. local-plugin은 상품에 직접 붙이는 별도 탭입니다. 확장 설정에서 설정합니다.
외부 API (APIs)
APIs는 스티컷용 사진의 배경 제거 기능을 연결합니다. Asset Settings의 커스텀 리소스 API와 독립된 설정입니다. 화면은 계정 권한에 따라 보이지 않을 수 있습니다.
상품의
template_option.apiInfo.cutoutSticut과 목록에서 처음 발견한 cutout 항목의 enable이 함께 켜져야 사진 탭에 배경 제거 가져오기가 표시됩니다. 업로드 파일 정보와 apiType을 배경 제거 처리에 전달합니다. 키 인코딩만으로 상품에 버튼이 생기지는 않습니다.
됐는지 확인
Edicus Manager의 Resource 화면에서 이 상품의 템플릿을 고릅니다. 템플릿 목록 위의
{ divCode,lang,ui_locale,... } 모양 버튼을 눌러 platform(desktop, mobile, mobile-v2)과 DivCode를 설정한 디비전으로 맞춥니다. Demo로 편집기를 띄워 바꾼 화면을 확인합니다. 사진 업로드와 저장, 종료까지 확인하려면 테스트 주문과 렌더링의 Test Order를 씁니다.실제 사이트에서의 확인은 연동 담당자에게 맡깁니다. 같은
partner와 div로 편집기를 새로 띄우고, 언어별 문구는 ui_locale을 바꾸어 확인합니다. external 플러그인과 parent:// 형식의 reform 플러그인은 호스트가 plugin-request-open, request-reform 이벤트를 처리해야 화면이 열립니다.다음 단계
Customize 동작 설정
시스템, 자산, 모바일 설정 전체를 봅니다.
폰트
디비전별 폰트 목록을 구성합니다.