> ## 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.

# 레이아웃과 배경

> 레이아웃 탭의 후보, 디자인을 바꿀 때 옮기고 바꾸는 범위, layout-map, 배경 탭의 선택지

레이아웃 탭은 사용자가 편집하던 내용을 유지한 채 다른 디자인으로 갈아타게 해 줍니다. 이때 사진과 글자를 새 디자인으로 옮길지, 배경과 가이드까지 바꿀지는 상품 설정이 정합니다. 이 페이지는 **상품 설정**의 **레이아웃 · 배경** 그룹과 사이즈의 **layout-map**을 다룹니다.

## 배우는 것

* 레이아웃 탭에 보일 후보를 고르는 세 가지 방법
* 레이아웃을 바꿀 때 지우고, 옮기고, 남기는 범위
* 배경 탭의 선택지와 배경 제거, 배경 고정

## 레이아웃 후보

레이아웃 탭은 **탭 구성**의 `layout-tab`을 켜야 나옵니다. 후보는 아래 순서로 정해집니다.

| 조건 | 후보 |
| - | - |
| `use-template`이 켜짐 | 같은 `ps_code`에 붙은 공개(`public`) 템플릿 |
| `design-group`이 `none`이 아님 | 그 디자인 그룹의 디자인 리소스 |
| 둘 다 아님 | 같은 `ps_code`에 붙은 공개 레이아웃 리소스 |

후보는 리소스의 페이지 종류(`content`, `cover` 등)로 나뉘어 현재 페이지 종류에 맞는 것만 보입니다. 템플릿 후보는 표지에서도 `content` 템플릿을 보여 줍니다.

### 같은 상품의 템플릿을 레이아웃으로 쓰기

<Steps>
  <Step title="상품 설정에서 두 스위치를 켭니다">
    **탭 구성**의 `layout-tab`과 **레이아웃 적용 범위**의 `use-template`을 켜고 **Update**로 저장합니다.
  </Step>

  <Step title="Resource 화면에서 템플릿 하나를 고릅니다">
    상품의 템플릿 중 하나를 선택해야 오른쪽 위 **Utility**가 켜집니다.
  </Step>

  <Step title="Publish에서 공개로 바꿉니다">
    **Utility**를 누르고 왼쪽의 **Publish**를 고릅니다. 고른 템플릿과 같은 `ps_code`의 템플릿이 **Private Templates**와 **Public Templates**로 나뉘어 나옵니다. 공개할 템플릿을 선택하고 **Unlock**을 누르면 `public`이 됩니다. 되돌릴 때는 **Lock**을 누릅니다.
  </Step>
</Steps>

Resource 화면은 [리소스 관리](/docs/products/resources)에 있습니다.

### 뒷면 디자인을 레이아웃으로 고르게 하기

레이아웃은 지금 편집 중인 페이지에 레이아웃 리소스의 첫 페이지를 적용합니다. 이를 이용해 앞뒷면 상품에서 뒷면만 고르게 할 수 있습니다.

1. 템플릿을 앞면과 뒷면 2페이지로 만듭니다.
2. 뒷면용 디자인을 레이아웃 리소스로 올립니다. 사용자는 두 번째 페이지를 연 상태에서 레이아웃 탭으로 고릅니다.
3. 뒷면을 비워 둘 수 있게 빈 페이지 레이아웃도 하나 올립니다. 목록 맨 앞에 두려면 그 리소스의 제목을 `#top`으로 둡니다.

레이아웃 목록은 상품의 `ps_code`로 조회합니다. 사이즈가 여럿이면 사이즈마다 그 크기에 맞춘 레이아웃을 그 사이즈의 `ps_code`로 올립니다. 업로드 방법은 [템플릿 업로드와 수정](/docs/templates/upload)에 있습니다.

## 레이아웃 적용 범위

`layout-tab`을 켜야 이 줄이 열립니다. 저장 키의 `layoutInfo.`는 `template_option.layoutInfo.`를 줄인 것입니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `use-template` | `layoutUseTemplate` | 꺼짐 | 같은 상품의 공개 템플릿을 후보로 씁니다 |
| `cell-only` | `layoutInfo.changeCellOnly` | 꺼짐 | 새 레이아웃이 사진 칸과 배경만으로 되어 있으면 지금 페이지의 사진 칸만 바꾸고 나머지 개체는 남깁니다. 다른 개체가 섞여 있으면 일반 교체로 처리합니다 |
| `apply-overlay` | `layoutInfo.changeOverlay` | 켜짐 | 새 레이아웃의 오버레이(가이드, 칼선 등 위에 덮는 개체)와 페이지 영역 개체(`PageMask` 페이지 모양, `ClipPath` 잘라 내기 경계, `RenderBound` 출력 영역)로 바꿉니다. 같은 후가공 레이어는 숨김과 출력 여부를 이어받습니다. 끄면 지금 오버레이를 남깁니다 |
| `apply-bg` | `layoutInfo.changeBackground` | 켜짐 | 새 레이아웃의 배경으로 바꿉니다. 끄면 지금 배경을 남깁니다 |
| `fill-bg` | `layoutInfo.fillBackground` | 켜짐 | 새 레이아웃에 배경이 없으면 `bg-value`로 배경을 만듭니다. `apply-bg`를 켜야 열립니다 |
| `bg-value` | `layoutInfo.fillBGValue` | `default` | 만들 배경입니다. 화면의 `white`(저장 값 `default`)는 흰색(CMYK 0,0,0,0), `none`은 배경 없음, `transparent`는 투명입니다 |
| `mobile-initial` | `layoutMobileOpen` | `none` | `tool`이면 새 프로젝트를 기존 모바일 UI(`mobile: true`)로 열 때 레이아웃 도구를 먼저 엽니다. 신규 모바일 UI(`mobile: 'm2'`)와 데스크톱에는 영향이 없습니다 |
| `page-filter` | `layoutPageFilter` | `none` | 아래 표를 보세요 |

| `page-filter` | 동작 |
| - | - |
| `none` | 지금 페이지에 새 레이아웃의 첫 페이지를 적용합니다 |
| `page-1` | 첫 번째 페이지를 편집할 때만 후보를 보여 줍니다. 다른 페이지에서는 목록이 비어 있습니다 |
| `all` | `use-template`이 켜져 있을 때 고른 템플릿의 각 페이지를 문서의 같은 순서 페이지에 한꺼번에 적용합니다. 두 문서의 페이지 수와 순서를 맞춰 준비합니다 |

## 레이아웃 전환 동작

`layout-tab`을 켜야 이 줄이 열립니다. 레이아웃을 바꾸면 지금 페이지의 개체는 기본적으로 모두 지워지고 새 레이아웃의 개체로 바뀝니다. 아래 항목이 그중 무엇을 옮기고 남길지 정합니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `design-group` | `layoutDesignGroup` | `none` | 후보로 쓸 디자인 그룹입니다. 그룹은 [스티커·패턴·디자인 관리](/docs/products/stickers)에서 만듭니다. `use-template`을 꺼야 열리고, 파트너 권한에 따라 잠금으로 표시될 수 있습니다 |
| `design-mode` | `layoutDesignMode` | `default` | 디자인을 페이지에 짝짓는 방식입니다. 아래 표를 보세요. `design-group`을 고르면 열립니다 |
| `initial-design` | `initialDesignSelect` | 꺼짐 | 데스크톱에서 새 프로젝트를 열 때 디자인 선택 창을 먼저 띄웁니다. `design-group`을 고르면 열립니다 |
| `keep-image` | `layoutInfo.keepDefaultImage` | 꺼짐 | 새 레이아웃의 사진 칸에 들어 있는 기본 이미지를 남깁니다. 끄면 비웁니다 |
| `ignore-guide` | `layoutInfo.ignoreGuide` | 꺼짐 | 새 레이아웃에서 후가공 레이어 오버레이만 가져오고 가이드는 지금 페이지 것을 남깁니다 |
| `transfer-text` | `layoutInfo.transferText` | 켜짐 | 변수 이름이 같은 글상자끼리 입력한 글자를 옮깁니다. 변수가 없는 글상자는 옮기지 않습니다 |
| `transfer-cell` | `layoutInfo.transferCell` | 켜짐 | 사진이 든 칸의 사진을 새 레이아웃의 사진 칸에 순서대로 옮깁니다. 새 칸이 적으면 남는 사진은 빠집니다 |
| `trx-cell-mode` | `layoutInfo.transferCellMode` | `default` | `preserve`면 사용자가 직접 추가한 사진 칸을 그 자리에 남기고, 템플릿 사진 칸의 사진은 옮기지 않습니다. `transfer-cell`을 켜야 열립니다 |
| `apply-sizing` | `layoutApplySizing` | 꺼짐 | 크기를 바꿀 수 있는 상품에서 지금 페이지의 크기 설정을 새 레이아웃에 적용합니다 |

| `design-mode` | 짝짓는 방식 |
| - | - |
| `default` | 사이즈 `layout-map`의 페이지 종류 행에 적힌 리소스 종류를 보여 줍니다 |
| `simple` | 그룹 안의 모든 디자인을 모든 페이지에 보여 줍니다. 사이즈의 `layout-map` 칸이 사라집니다 |
| `page-index` | `layout-map`의 `#1`, `#2` 행처럼 페이지 순서로 짝짓습니다. 그룹 상품이면 그룹 안의 순서입니다 |

글상자 변수 이름을 붙이는 방법은 [변수와 데이터 병합](/docs/templates/variables)에 있습니다. 스티컷 개체는 레이아웃을 바꿔도 남습니다.

## layout-map

사이즈 **Features**의 `layout-map`을 `standard`로 두고 **standard option**을 누르면 **Layout Page Type Map** 창이 열립니다. `layout-tab`이 켜져 있고 `design-mode`가 `simple`이 아닐 때 보입니다.

| 칸 | 저장 키 | 설명 |
| - | - | - |
| `page type` | `rows[].type` | 문서의 페이지 종류(`cover`, `content` 등)나 `#1`, `#2` 같은 페이지 순서입니다 |
| `resource query type` | `rows[].value` | 그 페이지에 보여 줄 디자인 리소스의 페이지 종류입니다. 쉼표로 여러 개를 적습니다 |
| `position-hint` | `positionHint` | 새 레이아웃을 페이지에 맞출 때의 위치입니다. 아래를 보세요 |
| **Reserve Doc Hint** | `preserveDocHint` | 켜짐(기본)이면 템플릿에 적힌 위치를 우선하고, 끄면 `position-hint`를 우선합니다 |

**Add Row**로 행을 늘립니다. 두 칸 중 하나라도 비어 있는 행은 무시합니다. 행 매핑은 디자인 그룹 후보에만 쓰입니다.

`layout-map`이 `standard`이면 어떤 후보든 레이아웃을 바꿀 때 새 레이아웃을 지금 페이지 크기에 맞춰 비율대로 줄이거나 늘립니다. 남는 공간의 위치는 `position-hint`가 정합니다. 형식은 `가로/세로`이고 가로는 `left`, `center`, `right`, 세로는 `top`, `center`, `bottom`입니다. 비우거나 `default`면 가운데입니다. `skip-fitting`이면 맞추지 않습니다. 템플릿 쪽 위치는 `PageInfo` 레이어의 `PositionHint=left/top` 개체로 적습니다.

## 배경

`bg-tab`을 켜야 이 줄이 열립니다.

| 화면 이름 | 저장 키 | 기본값 | 설명 |
| - | - | - | - |
| `initial-bg` | `initialBG` | `color` | 배경 탭을 열었을 때 처음 보일 하위 탭입니다. `color`, `image`, `pattern` 중 고릅니다 |
| `user-image` | `bgUserImage` | 꺼짐 | 사용자가 자기 사진을 배경으로 올리게 합니다 |
| `use-image` | `bgImage` | 켜짐 | 배경 이미지 리소스 목록을 보여 줍니다 |
| `use-pattern` | `bgPattern` | 꺼짐 | 배경 패턴 목록을 보여 줍니다 |
| `pattern-group` | `patternGroup` | `default` | 보여 줄 패턴 그룹입니다. 그룹은 [스티커·패턴·디자인 관리](/docs/products/stickers)에서 만듭니다. `use-pattern`을 켜야 열립니다 |
| `remove-bg` | `bgRemove` | 꺼짐 | 배경 탭에 **배경 제거** 버튼을 보여 줍니다. 페이지 배경을 지우는 버튼이며 사진 누끼 기능과는 다릅니다 |
| `remove-value` | `bgRemoveValue` | `none` | 배경 제거 후 값입니다. `none`은 배경 없음, `white`는 흰색, `transparent`는 투명입니다. `remove-bg`를 켜야 열립니다 |
| `fix-bg` | `bgFix` | 꺼짐 | 템플릿을 불러올 때 모든 페이지 배경을 `fix-bg-value`로 바꿉니다. 템플릿 배경에 `fix_bg=false`가 있으면 건너뜁니다. 저장된 프로젝트를 다시 열 때는 적용하지 않습니다 |
| `fix-bg-value` | `bgFixValue` | `transparent` | 바꿀 값입니다. `none`, `white`(CMYK 0,0,0,0), `transparent`입니다. `fix-bg`를 켜야 열립니다 |
| `force-clip` | `bgForceClip` | 꺼짐 | 편집기는 이 값을 읽지 않습니다 |

`remove-bg`, `remove-value`, `fix-bg`, `fix-bg-value`, `bg-value`는 사이즈의 [사이즈 고급 옵션](/docs/products/size-options#product-override)에서 사이즈마다 바꿀 수 있습니다. `option_string`의 `bg_mode`, `bg_remove`, `bg_fix_remove`도 이 값을 덮어씁니다.

### 이름이 비슷한 세 기능

| 기능 | 무엇을 지우나 | 어디서 정하나 |
| - | - | - |
| 배경 탭의 **배경 제거** | 페이지 배경을 `remove-value` 값으로 바꿉니다 | 이 페이지의 `remove-bg` |
| 사진 배경 지우기(컷아웃) | 사용자 사진에서 피사체만 남깁니다 | [자산: 스티커, 도형, 컷아웃, 패턴, 박, 레이어](/docs/products/assets#컷아웃) |
| 템플릿 `Background` 개체 이름 `none`, `transparent` | 템플릿의 바탕을 처음부터 없음이나 투명으로 둡니다 | [예약 개체 이름과 페이지 영역](/docs/templates/reserved-names) |

### 템플릿 쪽에서 배경 다루기

배경이 상품 모양을 따라야 하는 상품(예: 스마트폰 케이스)은 템플릿에서도 준비가 필요합니다.

* 편집기의 기본 배경은 대지 크기의 흰 사각형입니다.
* `Background@clip=true` 레이어를 두면 배경이 템플릿의 `ClipPath` 안으로 잘립니다.
* `Background` 레이어의 사각형 이름을 `none`으로 두면 흰 사각형이 표시되지 않습니다. 이때는 배경 탭을 끄는 것이 자연스럽습니다.
* `Background` 개체는 대지 전체를 덮도록 만듭니다.

예약 이름은 [예약 개체 이름과 페이지 영역](/docs/templates/reserved-names)에 있습니다.

## 됐는지 확인

<Check>
  Manager **Resource**에서 템플릿을 고르고 **Demo**로 열어 레이아웃 탭에 기대한 후보가 보이는지, 다른 디자인을 골랐을 때 배경과 가이드가 설정대로 바뀌는지 봅니다. Demo는 사진을 올릴 수 없으므로 사진과 글자를 옮기는 동작은 [테스트 주문과 렌더링](/docs/templates/test-render)의 **Test Order**에서 사진과 글자를 넣은 뒤 레이아웃을 바꿔 확인합니다.
</Check>

## 다음 단계

<Columns cols={2}>
  <Card title="사진과 글자" icon="image" href="/docs/products/photo-text">
    사진 칸과 글자 서식에서 허용할 기능을 고릅니다.
  </Card>

  <Card title="썸네일, 미리보기, 색상" icon="eye" href="/docs/products/thumbnail-preview">
    썸네일과 미리보기, 색상 모드를 정합니다.
  </Card>
</Columns>


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