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

# 스마트폰 케이스 예제

> Guide, PageInfo, Sticker, Cell, Background 레이어로 사진을 넣는 케이스 템플릿 만들기

사용자가 사진을 넣어 꾸미는 스마트폰 케이스 템플릿을 만듭니다. 케이스 몸체와 광택 같은 화면용 효과는 인쇄하지 않고, 사진과 장식은 케이스 모양 안에서만 보이게 합니다.

## 배우는 것

* 인쇄하지 않는 목업을 디자인 위와 아래에 두는 방법
* 케이스 모양으로 편집 영역과 렌더링 영역을 정하는 방법
* 사진 칸을 고정하고 바탕을 케이스 모양으로 자르는 방법

## 준비할 것

이 문서는 가상의 기종 하나를 예로 듭니다. 실제 값은 생산 규격에 맞춥니다.

| 항목 | 예 |
| - | - |
| 완성 크기 | 77 × 160mm |
| 도련 | 상하좌우 2mm |
| `ps_code` | `77x160@PHONECASE` |
| 목업 이미지 | 광택, 음영, 케이스 몸체를 각각 배경이 투명한 PNG로 준비합니다. 세 이미지는 `Guide`, `Guide-1`, `Guide-2` 레이어에 하나씩 넣습니다 |
| 영역 | 케이스 외곽선과 카메라 구멍 모양, 생산 규격의 인쇄 영역 크기 |

## 레이어 구성

레이어 패널의 위에서 아래 순서입니다. 레이어 이름 열은 그대로 입력합니다.

| 레이어 이름(그대로 입력) | 넣는 것 |
| - | - |
| `Guide` | 광택 하이라이트 이미지 |
| `Guide-1@mix_blend=multiply` | 가장자리 음영 이미지 |
| `PageInfo` | `ClipPath`, `RenderBound` 개체 |
| `Sticker` | 사진 위에 올릴 장식 |
| `Cell@movable=false,unlockable=false,deletable=false` | 사진 칸 프레임 |
| `Sticker-1` | 사진 아래에 깔 장식 |
| `Guide-2@bottom=true` | 케이스 몸체 이미지 |
| `Background@clip=true` | 이름을 `none`으로 지은 사각형 |

InDesign은 같은 이름의 레이어를 허용하지 않으므로 같은 종류의 두 번째 레이어부터 `-1`, `-2` 같은 구분자를 붙입니다.

## 직접 해보기

<Steps>
  <Step title="상품과 사이즈를 준비합니다">
    Edicus Manager에서 기종별 사이즈를 만들고 `ps_code`(예: `77x160@PHONECASE`)를 확인합니다. 방법은 [상품과 ps\_code 만들기](/docs/products/create)에 있습니다.
  </Step>

  <Step title="문서 크기와 도련을 정합니다">
    단위를 밀리미터로 둔 상태에서 **파일** > **새로 만들기** > **문서**로 폭 77, 높이 160, 도련 상하좌우 2의 문서를 만듭니다. 페이지 크기와 도련을 더한 81 × 164mm가 템플릿 전체 크기입니다.
  </Step>

  <Step title="레이어를 만들고 개체를 넣습니다">
    위 표의 이름으로 레이어를 만들고 아래 "레이어별 설명"대로 개체를 넣습니다.
  </Step>

  <Step title="내보내고 올립니다">
    익스포터에서 `ps_code`를 지정해 내보내고 미리보기를 확인한 뒤 올립니다. 방법은 [템플릿 업로드와 수정](/docs/templates/upload)에 있습니다.
  </Step>

  <Step title="화면과 인쇄 결과를 확인합니다">
    Edicus Manager의 **Demo**로 화면 구성을, [테스트 주문과 렌더링](/docs/templates/test-render)의 Test Order로 사진과 인쇄 결과를 확인합니다.
  </Step>
</Steps>

## 레이어별 설명

### Guide: 광택

반투명한 하이라이트 이미지를 넣습니다. `Guide`는 레이어 순서와 관계없이 편집기에서 맨 위에 보이고, 선택되지 않으며, 인쇄되지 않습니다.

### Guide-1\@mix\_blend=multiply: 음영

케이스 가장자리의 음영과 굴곡을 넣습니다. 광택과 다른 혼합 모드를 쓰려고 레이어를 나눴습니다. `mix_blend=multiply`는 편집기 화면에서 아래 디자인과 곱하기로 섞어 보여 줍니다.

### PageInfo: 영역

케이스 외곽은 포함하고 카메라 돌출부는 뺀 복합 패스를 그려 이름을 `ClipPath`로 짓습니다. 복합 패스는 외곽 도형 위에 카메라 자리 도형을 겹쳐 둘 다 선택한 뒤 **창** > **개체 및 레이아웃** > **패스파인더**의 **빼기**를 누르거나, **개체** > **패스** > **복합 패스 만들기**로 만듭니다. 스티커, 글자, 사진이 이 모양 안에서만 보이고, 렌더링 결과도 이 모양으로 잘립니다.

사각형을 생산 규격의 인쇄 영역과 같게 그려 이름을 `RenderBound`로 짓습니다. 렌더링은 이 사각형 크기로 나옵니다. `RenderBound`가 없으면 도련을 포함한 페이지 전체를 렌더링합니다. 두 개체는 회전하지 않은 상태로 그립니다. 회전값은 무시됩니다.

### Sticker와 Sticker-1: 장식

장식 일부는 사진 위에, 일부는 사진 아래에 보이도록 `Sticker` 레이어를 둘로 나눠 `Cell`의 위와 아래에 둡니다. 편집기는 레이어 패널 순서대로 개체를 쌓습니다. 그룹 하나가 스티커 하나가 됩니다.

### Cell: 고정한 사진 칸

사진 칸 프레임은 `ClipPath`를 다 덮는 크기로 그립니다. 사진은 `ClipPath` 모양으로 잘려 보입니다.

`movable=false`는 이동을, `unlockable=false`는 자물쇠 버튼으로 이동 잠금을 푸는 것을, `deletable=false`는 삭제를 막습니다. 이동만 막으면 사용자가 자물쇠 버튼으로 잠금을 풀 수 있으므로, 이동을 완전히 막으려면 `unlockable=false`를 함께 씁니다. 사진을 넣고 바꾸는 것은 그대로 됩니다.

### Guide-2\@bottom=true: 케이스 몸체

케이스 몸체 그림을 넣습니다. 몸체는 모든 디자인보다 아래에 있어야 하는데 `Guide`는 기본적으로 맨 위에 그려지므로 `bottom=true`로 맨 아래에 둡니다. 다른 가이드처럼 인쇄되지 않습니다.

### Background\@clip=true: 바탕

편집기의 바탕은 기본적으로 페이지 크기의 흰 사각형이고 `Guide-2@bottom=true`보다 위에 그려져 몸체를 가립니다. 바탕을 직접 정의해 이를 막습니다.

페이지를 다 덮는 사각형을 그려 이름을 `none`으로 짓습니다. `none`은 바탕을 그리지 않아 아래의 몸체가 보이고, 렌더링에서도 빠집니다. `clip=true`는 사용자가 배경 탭에서 색을 고르면 `ClipPath` 안쪽만 칠해지게 합니다.

## 상품 설정

| 설정 | 이 예제에서 | 문서 |
| - | - | - |
| `bg-tab` | 배경 탭을 켜서 사용자가 케이스 안쪽 인쇄 바탕색을 바꿀 수 있게 합니다 | [탭 구성](/docs/products/editor-tabs) |
| `remove-bg` | 배경 탭에 **배경 제거** 버튼을 보여 고른 색을 지울 수 있게 합니다 | [레이아웃과 배경](/docs/products/layout-background) |
| `low-dpi` | 올린 사진의 저해상도 경고 기준을 상품에 맞게 조절합니다 | [사이즈와 페이지 정보](/docs/products/sizes) |

## 됐는지 확인

<Check>
  아래를 확인하면 완성입니다.

  * **Demo**에서 사진 칸이 움직이지 않고 자물쇠 버튼으로도 풀리지 않습니다.
  * **Demo**의 배경 탭에서 색을 고르면 케이스 모양 안쪽만 칠해집니다.
  * [테스트 주문과 렌더링](/docs/templates/test-render)의 Test Order에서 큰 사진을 넣어도 케이스 모양 밖과 카메라 자리로 나오지 않습니다.
  * 같은 테스트 렌더 결과에 광택, 음영, 몸체가 없고 `RenderBound` 크기로 나옵니다.
</Check>

## 다음 단계

<Columns cols={2}>
  <Card title="테스트 주문과 렌더링" icon="print" href="/docs/templates/test-render">
    인쇄 결과로 영역과 판을 확인합니다.
  </Card>

  <Card title="예약 개체 이름과 페이지 영역" icon="tag" href="/docs/templates/reserved-names">
    `ClipPath`, `RenderBound`, `none` 같은 개체 이름 전체입니다.
  </Card>
</Columns>


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