Skip to main content
사용자가 편집기를 열었을 때 어떤 탭이 보이는지는 상품 설정이 정합니다. 사진만 넣는 상품이면 사진 탭 하나로 충분하고, 자유롭게 꾸미는 상품이면 스티커와 텍스트 탭까지 엽니다. 이 페이지는 Edicus Manager 상품 설정의 탭 구성 그룹을 다룹니다.

​
배우는 것

  • 기본 탭과 추가 탭의 스위치가 편집기에서 무엇을 여는지
  • 데스크톱, 신규 모바일 UI, 기존 모바일 UI에서 탭이 어떻게 다르게 보이는지
  • 사이즈, 띄우기 옵션, 스티컷 설정이 탭을 바꾸는 순서

​
용어

  • 데스크톱: 띄우기 옵션 mobile을 주지 않았을 때의 화면입니다. 탭이 왼쪽에 세로로 놓입니다.
  • 기존 모바일 UI(mobile: true): 탭 대신 아이템 추가 패널의 버튼으로 기능을 엽니다.
  • 신규 모바일 UI(mobile: 'm2'): 탭이 아래쪽 막대에 놓입니다.
UI를 고르는 옵션은 띄우기 옵션에 있습니다.

​
기본 탭

기본 탭 줄입니다. 모두 켜고 끄는 스위치이고, 저장 키는 template_option 아래에 있습니다. 기본값은 Manager에서 새 상품을 만들 때의 값입니다.

​
추가 탭

추가 탭 줄입니다. 모두 기본값이 꺼짐입니다. tape option과 sizing option은 사이즈 고급 옵션에서 설정합니다.

​
custom-tab

custom-tab은 스위치만으로 화면을 만들지 않습니다. 화면에 놓을 라벨, 버튼, 선택 목록은 편집기를 띄울 때 options.custom_tab으로 넘깁니다. 스위치는 그 화면을 어디에 둘지 정합니다. ui_style에 hide-custom을 넣으면 스위치가 켜져 있어도 숨깁니다. 스위치를 켠 상품은 상품 변수가 바뀔 때마다 prod-var-changed 이벤트를 보냅니다. 편집기 이벤트를 보세요.
custom-tab을 켜고 options.custom_tab을 넘기지 않으면 신규 모바일 UI의 탭이 열리지 않고, 데스크톱에는 빈 패널만 남습니다. 둘을 함께 쓰세요.

​
var-tab

var-tab을 켜면 텍스트 그룹의 변수 줄(var-title, var command)이 열립니다. 탭 이름은 var-title에 적은 글자이고, 탭 안의 변경 사항 적용 버튼으로 묶어 둔 변수 개체의 색을 한 번에 바꿉니다. 데스크톱에만 있는 탭입니다. 설정 형식과 예제는 사진과 글자 편집 범위에 있습니다.

​
UI별 탭 순서

데스크톱은 왼쪽 탭을 아래 순서로 놓습니다. 꺼진 탭은 건너뜁니다.
  1. 크기, 사진, 템플릿, 레이아웃, 배경, 스티커, 도형, 텍스트, 이름 넣기, 마스크(화면 이름 사진틀), 컷아웃, QR코드
  2. 스티컷 상품의 모양컷 탭, 테이프 탭, 단체 탭(run_mode: 'vdp'), 변수 탭
  3. 플러그인 탭. 확장 설정을 보세요
  4. 설정 메뉴(톱니바퀴)
파트너 설정 layout-is-design을 켜면 레이아웃 탭 이름이 디자인으로 바뀝니다. Customize 동작 설정을 보세요. 신규 모바일 UI는 아래 탭 막대를 다음 순서로 만듭니다. 처음에는 아무 탭도 열지 않습니다.
  1. 스티컷 상품의 모양컷과 옵션, 크기(size-tab), 상품 옵션(custom-tab), 페이지(여러 페이지 상품), 달력 설정
  2. 사진, 텍스트, 디자인(layout-tab), 템플릿, 스티커, 도형, 배경, 마스크(화면 이름 사진틀), QR생성
name-tab이 켜져 있으면 텍스트 자리에 이름 넣기 창이 대신 열립니다. 크기와 QR생성은 탭 대신 창으로 엽니다. cutout-tab, var-tab, tape-tab은 신규 모바일 UI에 나오지 않습니다. 기존 모바일 UI의 아이템 추가 패널에는 사진, 템플릿, 레이아웃, 배경, 텍스트, 스티커, 도형 버튼이 나옵니다. 도형 버튼은 shape-tab이나 sticker-tab 중 하나만 켜져도 나옵니다. mask-tab은 사진 칸 메뉴에 모양 틀 항목을 더합니다. cutout-tab, qrcode-tab, var-tab, tape-tab, size-tab은 버튼으로 나오지 않습니다.

​
탭 값이 바뀌는 순서

편집기는 아래 순서로 탭 값을 정합니다. 뒤 단계가 앞 단계를 덮어씁니다.
  1. 상품 설정: 이 페이지의 스위치 값입니다.
  2. 사이즈의 Tab Controls: 사이즈 고급 옵션의 product override에서 photo, template, background, layout, sticker, mask, text, name, size 탭을 사이즈마다 켜거나 끕니다.
  3. option_string: prodinfo_<저장 키>=<값> 형식으로 탭을 바꿀 수 있습니다. 예: prodinfo_photoTab=false. sizing_custom_max_size_mm을 주면 size-tab이 켜집니다.
  4. 스티컷 강제: sticut-mode가 keyhole, stand, talk이고 사이즈의 스티컷 설정에서 편집을 허용하면 사진 탭과 텍스트 탭을 켭니다. 뒷면을 자유 편집하는 설정이면 배경 탭도 켭니다. 스티컷 상품을 보세요.
  5. option_string의 bg_mode: none이면 배경 탭을 끄고, color나 user-image면 켭니다.
prodinfo_ 값을 true와 false로 읽는 탭은 photoTab, backgroundTab, stickerTab, shapeTab, textTab, maskTab 여섯 개뿐입니다. 다른 탭에 prodinfo_layoutTab=false처럼 주면 글자 false가 그대로 들어가 탭이 켜진 것으로 처리됩니다. 다른 탭은 Tab Controls로 바꾸세요.
저장된 프로젝트를 다시 열 때는 처음 만들 때 쓴 option_string이 이번에 넘긴 값보다 우선합니다.

​
처음 열리는 탭

데스크톱은 상품의 initial-tab을 기본으로 씁니다. 다만 아래 조건이 있으면 그 탭이 먼저 열립니다. 뒤에 적은 조건일수록 우선합니다. initial-tab과 force-tab의 설명은 편집기 동작에 있습니다. 모바일 UI는 initial-tab을 읽지 않습니다.

​
됐는지 확인

Update로 저장한 뒤 Manager Resource에서 이 상품의 템플릿을 고르고 Demo로 여세요. 데스크톱에서 켠 탭만 보이고 처음 열리는 탭이 위 표와 맞으면 됩니다.
모바일 탭도 Manager에서 볼 수 있습니다. Resource 화면 툴바의 { host,ko,ko,... }처럼 생긴 설정 버튼을 눌러 platform을 mobile(기존 모바일 UI)이나 mobile-v2(신규 모바일 UI)로 바꾼 뒤 Demo로 여세요. 같은 창의 ui-style을 tab-less로 바꾸면 데스크톱의 탭 없는 화면도 볼 수 있습니다. custom-tab은 띄우기 옵션 options.custom_tab이 있어야 내용이 채워지므로 내 서비스에서 띄워 확인합니다. 값의 모양은 options 키에 있습니다.

​
다음 단계

편집기 동작

시작 상태, 도구 버튼, 편집 제한, 경고를 정합니다.

확장 설정

플러그인 탭, 프로모션 창, 사용자 데이터를 정합니다.