> ## 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에서 탭이 어떻게 다르게 보이는지
* 사이즈, 띄우기 옵션, 스티컷 설정이 탭을 바꾸는 순서

## 용어

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

UI를 고르는 옵션은 [띄우기 옵션](/docs/reference/launch-options)에 있습니다.

## 기본 탭

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

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `photo-tab` | `photoTab` | 켜짐 | **사진** 탭입니다. 사진을 올리고 사진 칸에 넣는 사진 보관함을 엽니다 |
| `template-tab` | `templateTab` | 꺼짐 | **템플릿** 탭입니다. 같은 사이즈의 다른 템플릿으로 바꿉니다. 바꿀 때 사진 칸에 넣은 사진은 새 템플릿의 사진 칸으로 순서대로 옮겨 담습니다 |
| `bg-tab` | `backgroundTab` | 켜짐 | **배경** 탭입니다. 배경 색과 배경 이미지를 고릅니다. 세부 범위는 [레이아웃과 배경](/docs/products/layout-background)에서 정합니다 |
| `layout-tab` | `layoutTab` | 켜짐 | **레이아웃** 탭입니다. 페이지의 사진 칸 배치를 바꿉니다. 켜면 레이아웃 그룹의 설정 줄이 열립니다 |
| `sticker-tab` | `stickerTab` | 켜짐 | **스티커** 탭입니다. 스티커와 색을 바꿀 수 있는 클립아트를 넣습니다. `shape-tab`이 꺼져 있으면 도형도 이 탭 안에서 고릅니다 |
| `mask-tab` | `maskTab` | 꺼짐 | 사진 칸의 모양 틀을 고르는 탭입니다. 데스크톱 탭 이름은 **사진틀**로 표시됩니다 |
| `text-tab` | `textTab` | 꺼짐 | **텍스트** 탭입니다. 글상자와 패스 글자를 추가합니다 |

## 추가 탭

**추가 탭** 줄입니다. 모두 기본값이 꺼짐입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `name-tab` | `nameTab` | 꺼짐 | 템플릿의 변수 글자를 채우는 **이름 넣기** 탭입니다. 데스크톱 탭 이름도 **텍스트**로 표시합니다. `text-tab`과 함께 켜면 데스크톱에 **텍스트** 탭이 두 개 나란히 나옵니다. 앞은 글상자 추가, 뒤는 이름 넣기입니다. 켜면 텍스트 그룹의 **이름 넣기** 줄이 열립니다 |
| `cutout-tab` | `cutoutTab` | 꺼짐 | **컷아웃** 탭입니다. 사진의 배경을 지운 이미지를 만듭니다. 자산 그룹의 `as-image`를 켜면 탭 이름이 **이미지**로 바뀝니다 |
| `custom-tab` | `customTab` | 꺼짐 | 띄우기 옵션 `options.custom_tab`으로 넘긴 상품 옵션 화면을 엽니다. 아래 [custom-tab](#custom-tab)을 보세요 |
| `qrcode-tab` | `codeTab` | 꺼짐 | **QR코드** 탭입니다. QR코드 스티커를 만듭니다. 캔버스에서 QR코드를 선택하면 이 탭으로 바뀝니다 |
| `var-tab` | `varTab` | 꺼짐 | 변수 개체의 색을 한꺼번에 바꾸는 데스크톱 탭입니다. 아래 [var-tab](#var-tab)을 보세요 |
| `tape-tab` | `tapeTab` | 꺼짐 | 마스킹테이프 상품의 **테이프** 탭입니다. 켜면 사이즈에 `tape option`이 생깁니다 |
| `size-tab` | `sizeTab` | 꺼짐 | 사용자가 상품 크기를 바꾸는 **크기** 탭입니다. 켜면 사이즈에 `sizing option`이 생깁니다. 데스크톱 캔버스 위에 작업 크기도 표시합니다 |
| `shape-tab` | `shapeTab` | 꺼짐 | **도형** 탭입니다. 켜면 도형이 스티커 탭에서 빠져 별도 탭으로 나옵니다 |

`tape option`과 `sizing option`은 [사이즈 고급 옵션](/docs/products/size-options#tape-option)에서 설정합니다.

### custom-tab

`custom-tab`은 스위치만으로 화면을 만들지 않습니다. 화면에 놓을 라벨, 버튼, 선택 목록은 편집기를 띄울 때 `options.custom_tab`으로 넘깁니다. 스위치는 그 화면을 어디에 둘지 정합니다.

| UI | 표시 위치 |
| - | - |
| 데스크톱 | `ui_style`에 `tab-less`를 넣어 띄운 탭 없는 화면에서만 오른쪽 패널로 보입니다. 일반 탭 화면에는 나오지 않습니다 |
| 신규 모바일 UI | 아래 탭 막대의 **상품 옵션** 탭입니다 |
| 기존 모바일 UI | **상품 옵션** 버튼으로 엽니다 |

`ui_style`에 `hide-custom`을 넣으면 스위치가 켜져 있어도 숨깁니다. 스위치를 켠 상품은 상품 변수가 바뀔 때마다 `prod-var-changed` 이벤트를 보냅니다. [편집기 이벤트](/docs/sdk/events)를 보세요.

<Warning>
  `custom-tab`을 켜고 `options.custom_tab`을 넘기지 않으면 신규 모바일 UI의 탭이 열리지 않고, 데스크톱에는 빈 패널만 남습니다. 둘을 함께 쓰세요.
</Warning>

### var-tab

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

## UI별 탭 순서

데스크톱은 왼쪽 탭을 아래 순서로 놓습니다. 꺼진 탭은 건너뜁니다.

1. 크기, 사진, 템플릿, 레이아웃, 배경, 스티커, 도형, 텍스트, 이름 넣기, 마스크(화면 이름 **사진틀**), 컷아웃, QR코드
2. 스티컷 상품의 모양컷 탭, 테이프 탭, 단체 탭(`run_mode: 'vdp'`), 변수 탭
3. 플러그인 탭. [확장 설정](/docs/products/extensions)을 보세요
4. 설정 메뉴(톱니바퀴)

파트너 설정 `layout-is-design`을 켜면 레이아웃 탭 이름이 **디자인**으로 바뀝니다. [Customize 동작 설정](/docs/products/customize-config)을 보세요.

신규 모바일 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**: [사이즈 고급 옵션](/docs/products/size-options#product-override)의 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`이고 사이즈의 스티컷 설정에서 편집을 허용하면 사진 탭과 텍스트 탭을 켭니다. 뒷면을 자유 편집하는 설정이면 배경 탭도 켭니다. [스티컷 상품](/docs/products/sticut)을 보세요.
5. **option\_string의 `bg_mode`**: `none`이면 배경 탭을 끄고, `color`나 `user-image`면 켭니다.

<Warning>
  `prodinfo_` 값을 `true`와 `false`로 읽는 탭은 `photoTab`, `backgroundTab`, `stickerTab`, `shapeTab`, `textTab`, `maskTab` 여섯 개뿐입니다. 다른 탭에 `prodinfo_layoutTab=false`처럼 주면 글자 `false`가 그대로 들어가 탭이 켜진 것으로 처리됩니다. 다른 탭은 Tab Controls로 바꾸세요.
</Warning>

저장된 프로젝트를 다시 열 때는 처음 만들 때 쓴 `option_string`이 이번에 넘긴 값보다 우선합니다.

## 처음 열리는 탭

데스크톱은 상품의 `initial-tab`을 기본으로 씁니다. 다만 아래 조건이 있으면 그 탭이 먼저 열립니다. 뒤에 적은 조건일수록 우선합니다.

| 조건 | 처음 열리는 탭 |
| - | - |
| `size-tab`이 켜져 있고 `force-tab`이 꺼져 있음 | 크기 탭 |
| `initial-tab`으로 고른 탭이 꺼져 있음 | 켜진 탭 중 순서상 첫 탭(사진, 템플릿, 레이아웃, 배경, 스티커 순) |
| 단체 주문(`run_mode: 'vdp'`)으로 띄움 | 단체 탭 |
| `tape-tab`이 켜져 있음 | 테이프 탭. 렌더 영역(생산 파일로 잘라 낼 범위) 표시도 함께 켭니다 |
| 멀티스티커(`multi-sticker`) 상품에서 `sticut-tab`이 켜져 있음 | 모양컷 탭 |
| 상품의 `local-plugin`이 켜져 있음 | 그 플러그인 탭 |

`initial-tab`과 `force-tab`의 설명은 [편집기 동작](/docs/products/editor-behavior#시작-상태)에 있습니다. 모바일 UI는 `initial-tab`을 읽지 않습니다.

## 됐는지 확인

<Check>
  **Update**로 저장한 뒤 Manager **Resource**에서 이 상품의 템플릿을 고르고 **Demo**로 여세요. 데스크톱에서 켠 탭만 보이고 처음 열리는 탭이 위 표와 맞으면 됩니다.
</Check>

<Note>
  모바일 탭도 Manager에서 볼 수 있습니다. **Resource** 화면 툴바의 `{ host,ko,ko,... }`처럼 생긴 설정 버튼을 눌러 **platform**을 `mobile`(기존 모바일 UI)이나 `mobile-v2`(신규 모바일 UI)로 바꾼 뒤 **Demo**로 여세요. 같은 창의 **ui-style**을 `tab-less`로 바꾸면 데스크톱의 탭 없는 화면도 볼 수 있습니다. `custom-tab`은 띄우기 옵션 `options.custom_tab`이 있어야 내용이 채워지므로 내 서비스에서 띄워 확인합니다. 값의 모양은 [options 키](/docs/reference/launch-options#options-키)에 있습니다.
</Note>

## 다음 단계

<Columns cols={2}>
  <Card title="편집기 동작" icon="sliders" href="/docs/products/editor-behavior">
    시작 상태, 도구 버튼, 편집 제한, 경고를 정합니다.
  </Card>

  <Card title="확장 설정" icon="puzzle-piece" href="/docs/products/extensions">
    플러그인 탭, 프로모션 창, 사용자 데이터를 정합니다.
  </Card>
</Columns>


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