띄우기 옵션

띄우기 메서드에 줄 수 있는 옵션입니다. 자주 쓰는 것만 먼저 보시려면 편집기 띄우기를 보세요.

편집기 공통 옵션

createProject, openProject, recycleProject가 공통으로 받습니다. parent_element와 token을 빼면 모두 선택입니다. 선택 옵션은 값이 있을 때만 URL에 들어갑니다. false, 0, 빈 문자열처럼 falsy인 값도 넣지 않습니다. 예를 들어 no_update: false는 생략한 것과 같습니다.

필드	타입	설명
`parent_element`	`HTMLElement`	편집기 iframe이 들어갈 요소입니다. 필수입니다
`token`	`string`	서버에서 발급받은 토큰입니다. 필수입니다
`partner`	`string`	파트너 코드입니다. 편집기가 이 코드로 파트너 공통 설정을 읽습니다
`mobile`	`boolean \| 'm2'`	`false`는 PC UI, `true`는 기존 모바일 UI, `'m2'`는 신규 모바일 UI입니다
`div`	`string`	디비전 코드입니다. 생략하면 편집기가 `'host'`로 씁니다
`lang`	`'ko' \| 'en' \| 'ja'`	언어 코드입니다. 생략하면 편집기가 `'ko'`로 씁니다
`ui_locale`	`'ko' \| 'en' \| 'ja'`	화면 문구의 언어입니다. 생략하면 `lang` 값을, `lang`도 없으면 `'ko'`를 씁니다
`run_mode`	`'standard' \| 'preview' \| 'vdp'`	생략하거나 `'standard'`면 일반 편집입니다. `'preview'`는 사진인화 상품의 확인용 화면이고, `'vdp'`는 가변 데이터(단체 주문) 편집 모드입니다. 단체 탭이 열리며, 주문은 VDP 주문으로 넣습니다
`num_page`	`number`	포토북 내지 스프레드의 장수입니다. 없으면 사이즈 edicus options의 `params.num_page`를, 그것도 없으면 템플릿에 있는 그대로 만듭니다
`max_page`	`number`	내지 스프레드 장수 상한입니다. 기본적으로는 페이징 규칙에서 정합니다
`min_page`	`number`	내지 스프레드 장수 하한입니다
`no_update`	`boolean`	`true`면 저장 버튼이 나가기로 바뀌고, 누르면 저장 없이 `goto-cart`를 보냅니다
`cal_date`	`string`	달력 날짜 생성 커맨드입니다. 아래를 보세요
`private_css`	`string`	CSS 오버라이드 값입니다. URL이 아니라 지연 파라미터로 전달됩니다
`clear_src`	`'cell'`	템플릿을 읽을 때 사진 칸에 들어 있는 기본 사진을 비웁니다

그 밖의 공통 옵션

아래 옵션도 CommonLaunchOptions에 있습니다. SDK는 값을 그대로 URL 쿼리에 싣습니다.

필드	타입	편집기에서 하는 일
`editor_type`	`string`	`'template'`이나 `'print'`로 화면 골격을 먼저 정합니다. 상품을 읽은 뒤에는 상품 설정의 편집기 종류로 다시 정하므로 보통은 줄 필요가 없습니다
`ui_style`	`string`	PC에서 `'tab-less'`(왼쪽 탭 없음), `'header-less'`(머리줄 없음), `'hide-custom'`을 알아봅니다. 기존 모바일 UI(`mobile: true`)는 `'mui-book'`, `'mui-single'`로 시작하는 값과 `'hide-custom'`을, 신규 모바일 UI(`mobile: 'm2'`)는 `'hide-custom'`만 알아봅니다. 여러 값을 함께 넣을 수 있습니다. SDK 타입에 있는 `'tab-top-less'`는 편집기가 알아보지 않습니다
`parent_type`	`string`	`'web_in_app'`이면 모바일 UI(기존과 신규)의 사진인화 편집기가 사진 추가 UI 대신 `request-photo-browse` 이벤트를 보냅니다
`env_mode`	`string`	아래 표의 값을 알아봅니다. 문자열에 그 값이 들어 있는지로 판단하므로 `'dev,restricted'`처럼 함께 넣을 수 있습니다
`edit_lock`	`string`	사용자가 바꿀 수 있는 범위를 좁힙니다. 아래 표를 보세요
`force_plugin`	`string`	값이 있으면 상품의 `global-plugin` 스위치를 켠 것과 같습니다. 플러그인을 보세요
`plugin_param`	`string`	플러그인 주소에 `info`로 붙습니다
`resapi_param`	`string`	파트너 리소스 API(Customize의 `custom_api`)를 쓸 때 카테고리와 리소스 조회 요청에 `user_param`으로 실립니다
`unlayers`	`string`	쉼표로 구분한 후가공 레이어 이름입니다. 프로젝트에 저장되고, 편집기 레이어 목록과 렌더링에서 그 레이어를 뺍니다. `White`를 넣으면 자동 화이트 레이어도 만들지 않습니다
`unit_page`	`number`	deprecated입니다. 페이지 그룹 한 묶음의 장수이며, `options.group.unit_page`가 있으면 그 값을 씁니다
`max_order`, `min_order`	`number`	편집기가 읽지 않습니다. 그룹 수량 한도는 `options.group`의 `max_order`, `min_order`로 정합니다
`edit_mode`	`string`	deprecated입니다. 편집기가 읽지 않습니다

타입에 적힌 값 말고 다른 문자열도 받습니다.

`env_mode` 값	동작
`dev`	Customize의 Development 자산 설정(`config.asset_dev`)과 플러그인의 `plugin-dev-url`을 씁니다. 파트너 리소스 API에는 `env_mode: 'dev'`로 요청합니다
`restricted`	데스크톱에서 프로모션 창을 표시하지 않습니다

`edit_lock` 값	동작
`edit-group`	페이지 그룹의 추가, 삭제, 수량 버튼을 숨깁니다
`edit-page`	페이지 추가와 삭제 메뉴를 숨깁니다
`set-strict-color`	`strict` 팔레트에서 캔버스의 색 선택 버튼을 숨깁니다
`tape-option`	패턴 탭에서 테이프 폭과 높이 선택을 잠급니다
`edit-custom-tab`	custom-tab 항목 중 잠글 수 있게 표시된 항목을 잠급니다
`lock-foil`	박 선택지를 문서에 이미 쓰인 박으로 좁힙니다
`no-font-preview`	글꼴 목록에 미리보기 이미지 대신 이름만 보입니다
`no-selection`	템플릿에 정의된 선택 영역을 고르는 캔버스 상자를 숨깁니다
`no-sizing`	크기 탭과 크기 창에서 크기를 바꾸지 못하게 합니다
`lock-all`	`edit-group`, `edit-page`, `set-strict-color`, `tape-option`, `edit-custom-tab`, `lock-foil`, `no-sizing`을 한꺼번에 켭니다

edit_lock도 문자열에 값이 들어 있는지로 판단하므로 'edit-group,edit-page'처럼 함께 넣습니다.

`cal_date` 형식

year-month 또는 year-month-this-prev-next 형태입니다.

값	결과
`'2019-1'`	2019년 1월부터 12개월 달력
`'2019-1-14-0-0'`	2019년 1월부터 14개월 달력
`'2019-1-12-1-1'`	2018년 12월부터 2020년 1월까지 14개월 달력. 권장하지 않습니다

지연 파라미터

URL에 싣지 않고, 띄우는 시점에 저장했다가 편집기가 요청하면 답하는 옵션입니다. 값이 크거나 URL에 넣기 곤란한 것들입니다. 다른 옵션과 같은 객체에 넣으면 됩니다.

필드	설명
`ddp_block`	편집기가 문서를 연 직후 차례로 실행할 문서 조작 명령 묶음(`{ commands: [{ action, target, data }] }`)입니다. 페이지 추가, 데이터 행 적용 같은 조작을 띄울 때 한 번에 적용합니다. 띄운 뒤에는 편집기 커맨드의 `execute-ddp-block`으로 같은 묶음을 보냅니다
`options`	편집기 추가 설정 객체입니다. 아래 options 키를 보세요
`option_string`	상품 설정 일부를 이 프로젝트에 한해 바꾸는 문자열입니다. 아래 option_string을 보세요
`private_css`	CSS 문자열입니다. 파트너 공통 설정의 CSS 뒤에 붙어 같은 선택자면 이 값이 이깁니다
`data_row`	TnView와 Preview의 첫 렌더에 반영할 VDP 행입니다
`zoom`	TnView와 Preview의 줌 옵션입니다

지연 파라미터가 있으면 편집기가 그 값을 요청할 때까지 기다리라는 wait_* 플래그가 URL에 붙습니다. 대부분 원래 옵션 이름을 따릅니다(private_css → wait_private_css). SDK는 어느 세션에서든 편집기가 요청한 이름에 답합니다. 다만 URL에 붙는 플래그는 띄우는 메서드마다 다릅니다.

띄우는 메서드	붙을 수 있는 플래그
편집기 계열 (`createProject`, `openProject`, `recycleProject`와 experimental `reformProject`, `fitProject`)	`wait_ddp`, `wait_private_css`, `wait_options`, `wait_option_string`
TnView (`openTnview`, `createTnview`, `showTnview`)와 Preview (`openPreview`)	`wait_options`, `wait_data_row`, `wait_zoom`

그래서 편집기 계열에 data_row를 주거나 TnView에 ddp_block을 줘도 플래그가 붙지 않습니다.

ddp_block만 예외입니다. 플래그 이름이 wait_ddp_block이 아니라 wait_ddp로 축약돼 있습니다.

options 키

편집기 계열이 읽는 options의 키입니다. 각 키의 필드는 설명 페이지에 있습니다. 표에 없는 키는 공개 연동 대상이 아닙니다. 같은 이름의 키를 사이즈 edicus options에도 둘 수 있습니다. 둘 다 있으면 아래 합치는 방식을 따릅니다. “키 단위”는 객체의 맨 위 키끼리 합치고 겹치는 키는 띄우기 옵션이 이긴다는 뜻입니다. 안쪽 객체는 합치지 않고 통째로 바뀝니다.

키	하는 일	사이즈 edicus options와 합치는 방식	설명 페이지
`group`	페이지 그룹 규칙	키 단위. `option_string`의 `group_*`가 그 위를 덮어씁니다	포토카드
`palette`	팔레트와 박 선택지	키 단위	팔레트
`promo`	프로모션 창	띄우기 옵션이 있으면 사이즈 값과 상품 설정을 쓰지 않습니다	프로모션
`plugins`	플러그인 목록	파트너 공통 플러그인 뒤에 붙고, 사이즈의 `plugins`가 그 뒤에 붙습니다	플러그인
`custom_tab`	custom-tab 화면 구성	띄우기 옵션에만 있습니다	custom-tab
`tn_upload`	썸네일 옵션과 업로드 버튼	띄우기 옵션에만 있습니다	썸네일, 미리보기, 색상
`paging`	책등 두께 계산값	띄우기 옵션에만 있습니다. 프로젝트에 저장됩니다	페이지와 책등
`override`	책등 폭 고정과 사이즈 설정 덮어쓰기	키 단위	edicus options
`material`	소재 입히기	사이즈의 material option과 키 단위	material option
`sizing`	새 프로젝트의 페이지 크기	띄우기 옵션이 있으면 사이즈 값을 쓰지 않습니다. `option_string`의 `sizing_*`가 그 위를 덮어씁니다	아래
`calendar`	달력 개월 수	키 단위	달력
`spine_text`	책등 글자 규칙	키 단위	페이지와 책등
`background`	배경 투명 허용과 초기 투명	키 단위	edicus options
`asset`	자산 탭의 묶음과 처음 열 카테고리	키 단위	스티커
`filter`	새 프로젝트에 넣을 템플릿 페이지 거르기	키 단위	edicus options
`composition`	`composite` 그룹의 대지와 여백	키 단위. `option_string`의 `composition_*`가 그 위를 덮어씁니다	페이지와 책등

`options.sizing`

createProject의 options로 템플릿의 페이지 사이즈를 바꿀 수 있습니다.

const session = edicus.createProject({
  parent_element: el,
  token,
  ps_code: '90x50@NAMECARD',
  template_uri: 'gcs://template/partners/<파트너 코드>/res/template/<템플릿 ID>.json',
  title: '내 명함',
  options: {
    sizing: { type: 'page', width_mm: 355, height_mm: 90 },
  },
})

필드	타입	설명
`type`	`string`	사이즈 변경 방식입니다. 현재 `'page'`만 쓸 수 있습니다
`width_mm`	`number`	대지 가로 크기입니다
`height_mm`	`number`	대지 세로 크기입니다
`cover_width_mm`	`number`	커버 대지 가로 크기입니다. 책등 사이즈를 제외한 값이어야 합니다. 커버가 있고 내지와 사이즈가 다를 때 씁니다
`cover_height_mm`	`number`	커버 대지 세로 크기입니다
`cover_spine_mm`	`number`	커버 책등 크기입니다. 템플릿의 책등 크기를 조절해야 할 때 씁니다

대지 크기는 재단 점 크기입니다.

option_string

option_string은 상품 설정 일부를 이 프로젝트에 한해 바꾸는 문자열입니다. options와 같은 지연 파라미터라 URL에 싣지 않고, 편집기가 요청할 때 SDK가 보냅니다.

형식

키=값 쌍을 &로 잇습니다. 값은 첫 = 뒤부터 다음 = 앞까지이므로 값에 =와 &를 넣을 수 없습니다.
편집기는 퍼센트 인코딩을 풀지 않고 값을 그대로 씁니다.
promo, sizing, single_strict_palette는 값 안에 항목:값을 ;로 이은 묶음을 받습니다. 예: promo=url:<인코딩한 주소>;width:300;height:400
묶음 값 안의 항목 값에는 :와 ;를 쓸 수 없습니다. 예외는 이름이 url인 항목으로, 어느 묶음에 있든 편집기가 퍼센트 인코딩을 풀어 씁니다. 주소는 encodeURIComponent로 인코딩해 넣습니다.
접두사가 붙은 키는 한 객체로 모입니다. prodinfo_<저장 키>는 상품 설정 값, sizing_<키>와 sizing*modify_<키>는 크기 설정, composition_<키>는 조판 그룹, sticut_<키>, sticut*stand_<키>, sticut*multi_sticut_stand_<키>는 스티컷 설정, paging*growth_<키>, paging*spine_<키>, paging*config_<키>는 페이징 규칙의 같은 키를 바꿉니다.

값 변환

편집기는 정해 둔 키만 숫자나 불리언으로 바꾸고, 나머지는 문자열 그대로 씁니다.

변환	대상 키
정수	`num_page`, `low_dpi`, `order_count`, `set_order_count`, `group_unit`, `group_count`
실수	`cut_margin`, `border_size_mm`, `page_width`, `page_height`, `position_margin`, `label_outline`, `label_height`, `title_font_size`, `number_font_size`, 그리고 `sizing_`, `composition_`, `sticut_`, `paging*` 키 중 mm 값과 수치 값
불리언	`show_ruler`, `show_date`, `show_item_size`, `static_cell`, `white_select`, `transparent_bg`, `double_page`, `maximize_size`, `group_hide_count`, `group_fill_page`, `prodinfo_` 뒤의 `photoTab`, `backgroundTab`, `stickerTab`, `shapeTab`, `textTab`, `maskTab`, `freeCrop`, `staticCellUI`, `stickerAsCell`, `previewUI`, `keepPhotoBrowse`, `keepPhotoBrowseValue`, 그리고 `sizing_`, `sticut_`, `paging*` 키 중 스위치 값(`sizing_enable_sizing` 등)

불리언은 정확히 true일 때만 참입니다. 1이나 TRUE는 거짓입니다. 방향별 테두리 border_left_mm, border_top_mm, border_right_mm, border_bottom_mm은 변환 대상이 아니어서 문자열 그대로 들어갑니다.

group_hide_total_count는 불리언 변환 대상이 아닙니다. false도 비어 있지 않은 문자열이라 값과 상관없이 켜집니다. 끄려면 키를 빼세요.

prodinfo_keepPhotoBrowseValue는 쓰지 마세요. 이 값은 default나 over-3 같은 문자열이어야 하는데, option_string은 불리언으로 바꿔 넣으므로 상품 설정의 keep-imgpool-mode가 깨집니다.

적용 시점과 저장

편집기는 상품 설정과 사이즈의 product override를 읽은 뒤 option_string을 적용합니다. 다른 층과의 우선순위는 상품 설정 한눈에 보기에 있습니다.
새 프로젝트를 만들 때 받은 option_string은 프로젝트 문서에 저장됩니다.
저장된 프로젝트를 다시 열 때는 문서에 저장된 option_string을 쓰고, 이번에 넘긴 값은 무시합니다. 문서에 저장된 값이 없을 때만 이번 값을 씁니다.
pscode와 template_uri 키를 주면 createProject의 ps_code, template_uri 대신 이 값으로 프로젝트를 만듭니다. ui_style, num_page, cal_date 키는 같은 이름의 띄우기 옵션을 대신합니다.

예시

const option_string = [
  'num_page=10',
  'show_ruler=true',
  'low_dpi=150',
  'prodinfo_photoTab=false',
  'sizing_custom_max_size_mm=200',
  `promo=url:${encodeURIComponent('https://example.com/promo')};width:300;height:400`,
].join('&')

edicus.createProject({ parent_element: el, token, ps_code, template_uri, title, option_string })

키별 설명

키	설명
`prodinfo_<저장 키>`, `bg_mode`	탭 구성
`num_page`, `paging*growth_<키>` 등	페이지와 책등
`group_unit`, `group_count`, `group_hide_count`, `group_hide_total_count`, `group_fill_page`	포토카드
`editor_title`, `low_dpi`, `cut_margin`	사이즈와 페이지 정보
`file_3d`, `sizing_<키>`	사이즈 고급 옵션
`promo`, `promo_url`	프로모션
`show_ruler`	편집기 동작
`static_cell`	사진과 글자 편집 범위
`bg_remove`, `bg_fix_remove`	레이아웃과 배경
`white_select`, `prodinfo_stickerAsCell`	자산
`paper_type`, `border_type`, `border_size_mm`, `show_date`, `order_count`	사진인화
`render_file_style`	렌더 출력 옵션
`show_item_size`	`true`면 상품의 `show-item-size`를 켭니다. 개체를 고르면 크기(mm)가 보입니다. `false`는 아무것도 바꾸지 않습니다
`double_page`	`true`면 여러 페이지를 허용하고 상품의 `double-side`를 켭니다. 스토리보드 번호가 앞면, 뒷면으로 표시됩니다
`transparent_bg`	`true`면 배경 투명을 허용하고 처음부터 투명으로 엽니다(`options.background`의 `can_transparent`, `set_transparent`)
`sticut_<키>`, `maximize_size`	스티컷
`cal_date`	달력

TnView와 Preview 공통 옵션

parent_element와 token은 필수입니다. 편집기 공통 옵션은 받지 않습니다.

필드	타입	기본값	설명
`div`	`string`	`'host'`	디비전 코드입니다. 생략하면 SDK가 기본값을 채워 넣습니다
`lang`	`'ko' \| 'en' \| 'ja'`	`'ko'`	언어 코드입니다. 생략하면 SDK가 기본값을 채워 넣습니다
`npage`	`number \| 'auto'`	`1`	한 화면에 보여줄 페이지 수입니다
`flow`	`'horizontal' \| 'vertical' \| \`grid:$“	`'horizontal'`	페이지 배치 방향입니다. `grid:312`처럼 썸네일 크기를 함께 지정할 수 있습니다
`data_row`	`unknown`		첫 렌더에 반영할 VDP 행입니다. 지연 파라미터입니다
`zoom`	`{ method?: string; maxScale?: number }`		줌 옵션입니다. 다른 필드도 받습니다. 지연 파라미터입니다
`options`	`Record<string, unknown>`		추가 설정입니다. 지연 파라미터입니다

TnView의 세 메서드는 rotate?: boolean과 show3d?: boolean도 받습니다. 둘 다 명시적으로 지정했을 때만 URL에 실립니다. openTnview는 project_id가 필수이고 ps_code가 선택입니다. createTnview와 showTnview는 ps_code와 template_uri가 필수입니다. Preview는 project_id와 partner와 uid가 추가로 필수입니다. ps_code는 선택이고, mode?: string(기본값 'default')을 받습니다.

편집기의 num_page와 TnView, Preview의 npage는 다른 개념입니다. num_page는 포토북 내지 스프레드 장수이고, npage는 한 화면에 보여줄 페이지 수입니다.

experimental 메서드

v2 표면에 있던 메서드 일부가 v2와 같은 동작으로 구현돼 있습니다. 옵션 타입이 느슨하고(ExperimentalLaunchOptions), 안정 계약으로 보장하지 않습니다. 새 연동에는 정식 메서드를 쓰세요. SDK가 확인하는 필수 옵션은 parent_element와 token뿐입니다. 메서드가 실제로 쓰는 다른 값(ps_code, project_id 등)이 빠져도 예외를 던지지 않고, v2처럼 URL에 undefined라는 글자가 그대로 들어갈 수 있습니다.

메서드	반환
`reformProject`, `fitProject`	`EditorSession`
`showGallery`	`TnViewSession`
`createLiteProject`, `openLiteProject`, `showLiteEditor`, `showTest`, `openPortal`	`ExperimentalSession`

ExperimentalSession은 이벤트와 커맨드에 타입이 없는 세션입니다. 주고받는 메시지를 Record<string, unknown>으로만 다룹니다.

시작하기

개념

편집기 SDK

서버 연동

레퍼런스

편집기 공통 옵션

그 밖의 공통 옵션

`cal_date` 형식

지연 파라미터

options 키

`options.sizing`

option_string

형식

값 변환

적용 시점과 저장

예시

키별 설명

TnView와 Preview 공통 옵션

experimental 메서드

다음 단계

편집기 띄우기

상품 설정 한눈에 보기

​편집기 공통 옵션

​그 밖의 공통 옵션

​cal_date 형식

​지연 파라미터

​options 키

​options.sizing

​option_string

​형식

​값 변환

​적용 시점과 저장

​예시

​키별 설명

​TnView와 Preview 공통 옵션

​experimental 메서드

​다음 단계

편집기 띄우기

상품 설정 한눈에 보기

편집기 공통 옵션

그 밖의 공통 옵션

`cal_date` 형식

지연 파라미터

options 키

`options.sizing`

option_string

형식

값 변환

적용 시점과 저장

예시

키별 설명

TnView와 Preview 공통 옵션

experimental 메서드

다음 단계