# 확장형 요소 가이드

# 확장형 요소란?

### '이 부분만 늘려서 사용하고 싶은데 사이즈를 조절하니 형태가 깨지네..'

디자인하다 이런 고민해보신 적 있으신가요?

기본형의 SVG 요소는 가로세로 사이즈를 조절하면 형태가 일그러져 사용이 어렵다는 불편함이 있습니다.

그러나, **확장형 요소는 말 그대로 특정 부분만 형태가 깨지지 않도록 사이즈 조절, 즉 확장하여 사용할 수 있는 요소입니다.**

기본 **SVG 요소**와 동일하게 제작 및 업로드한 뒤, 메타데이터 입력 과정에서 '**크기조정 타입**'을 설정하여 

기본형 또는 확장형 중 원하는 형태로 등록할 수 있습니다.

[Video](https://vz-127031db-d43.b-cdn.net/406ccbd0-b263-46ca-a555-42350488d22b/playlist.m3u8)

좌측: 일반 SVG 요소 / 우측: 확장형 SVG 요소

연필, 말풍선, 메모지, 상자, 깃발 등과 같이 일부분을 확장형으로 형태 변환하여 사용하기 용이한 SVG 요소는

제출 과정에서 '크기조정 타입'을 '확장형'으로 선택하여 등록하길 추천드립니다.

확장형에 대해 아직 감이 오지 않으셨다면?

다음의 링크를 클릭하여, 직접 확장형 요소를 사용해 보실 수 있습니다.

[확장형 요소 체험하러 가기](https://www.miricanvas.com/v/14rhdr0)

> 디자인허브에서는 **Adobe 프로그램** 사용을 권장하고 있습니다.

그 외 다른 디자인 프로그램을 사용할 경우, 기술상의 도움을 드리기 어려운 점 참고 부탁드립니다.

확장형 요소는 별도의 신규 콘텐츠 타입이 아닌, 

기본 SVG 요소에서 '크기조정 타입'을 '확장형'으로 선택하여 등록할 수 있습니다.

SVG 요소 제작 가이드는 다음을 참고해 주세요.

[파일 규격 확인하기](https://slashpage.com/designhub-guide/3p4kj92ynppxkm57q1x8)

[SVG 요소 제작 가이드 보러가기](https://slashpage.com/designhub-guide/7vgjr4m1nqqkk2dwpy86)

# 📌 확장형 설정 방법

확장형은 파일 업로드 후 메타데이터 입력 단계에서 설정하게 됩니다.

**콘텐츠 업로드 > 제출 예정 > 우측 메타데이터 패널 > 크기조정 타입** 에서 '**확장형**'을 선택하여 설정할 수 있습니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20250612/092311_qVUydifVxU86kMdJuR?q=80&s=1280x180&t=outside&f=webp)

> 확장 가능 영역이 존재하지 않을 경우 확장형으로 등록이 불가합니다.

이러한 요소는 아쉽지만 **크기조정 타입 > 기본형**을 선택하여 제출해 주시기 바랍니다.

## 1️⃣ 확장 방향

### **1. 가로 확장**

**좌우 방향**으로 요소 크기를 늘릴 경우,

설정한 확장 영역이 형태를 유지한 채로

늘어나게 됩니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20250616/160437_XYZryyQz4OdEIkj0om?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20250616/160716_ohXFgSraKvgasSXWFm?q=80&s=1280x180&t=outside&f=webp)

### **2. 세로 확장**

**상하 방향**으로 요소 크기를 늘릴 경우,

설정한 확장 영역이 형태를 유지한 채로

늘어나게 됩니다.

### 3. 가로+세로 확장

**상하좌우 모든 방향**으로 요소 크기를 

늘릴 경우, 설정한 확장 영역이 형태를 

유지한 채로 늘어나게 됩니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20250616/160851_vABa5DCtQPp6VNYCmD?q=80&s=1280x180&t=outside&f=webp)

## 2️⃣ 확장 영역 설정

확장형 설정에 들어가 확장 영역을 지정할 수 있습니다.

[Video](https://vz-127031db-d43.b-cdn.net/0942a764-42fc-4488-859a-13848b64b15e/playlist.m3u8)

확장형 설정 예시

① 영역 설정 시 파란색 영역은 '**고정 영역**'으로, 확장되지 않는 영역을 의미합니다. 

부적절한 위치로 영역이 설정될 경우 '가이드선을 조정하여 고정 영역을 변경해 주세요.' 메세지가 노출되며, 

설정이 불가합니다. 이 경우 고정 영역을 올바른 위치로 조정해 주세요.

② 영역 설정 시 '미리보기'를 통해 확장됐을 때의 형태를 미리 확인할 수 있습니다.

**잘못된 영역 설정으로 인해 불완전한 형태로 확장될 경우, 심사 과정에서 거부될 수 있습니다.**

따라서, 확장 시 요소 형태가 일그러지지 않는지 미리 확인하여 주시기 바랍니다.

> 디자인허브에서는 **Adobe 프로그램** 사용을 권장하고 있습니다.

그 외 다른 디자인 프로그램을 사용할 경우, 기술상의 도움을 드리기 어려운 점 참고 부탁드립니다.

# ⛔️ 확장형 요소로 제출 불가한 대표적인 사례

다음과 같은 형태로 제작된 콘텐츠는 확장형 요소로 등록이 불가합니다.

## 1️⃣ 곡선으로 제작된 경우

![Image](https://upload.cafenono.com/image/slashpageHome/20250611/164122_eb0SaXYmKOfVGVDvcZ?q=80&s=1280x180&t=outside&f=webp)

앵커포인트(Anchor Point)끼리 연결된 하나의 선(Path)에 곡률이 적용된 경우, **확장 구간**으로 지정이 불가합니다.

직선으로 구성된 경우에 한해 확장 구간으로 지정할 수 있습니다.

![녹색: 확장 구간 설정 가능 영역 / 적색: 확장 구간 설정 불가 영역](https://upload.cafenono.com/image/slashpageHome/20250611/165037_8idxGre7QryzgZtnlD?q=80&s=1280x180&t=outside&f=webp)

## 2️⃣ 오브젝트에 회전값이 포함된 경우

특정 오브젝트에 회전/기울기를 적용된 경우, 확장형 요소로 등록이 불가합니다.

확장형 요소로 등록하기 위해 반드시 회전/기울기를 reset해 주시기 바랍니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20250611/170119_4PBw6KrbN8UAGEJN5m?q=80&s=1280x180&t=outside&f=webp)

**오브젝트 선택 > 우클릭 > Transform > Reset Bounding Box** 를 클릭하여,

테두리 상자(Bounding Box)를 재설정할 수 있습니다.

> **주의사항**

'Reset Bounding Box'를 하더라도 간헐적으로 디자인허브 업로드가 불가할 수 있습니다.

번거로우시겠지만, 최초 콘텐츠 제작 시 오브젝트를 회전/기울지 않도록 작업하시길 권장드립니다.

## 3️⃣ 면 처리가 누락된 경우 & 획(stroke)이 포함된 경우

모든 디자인은 면으로만 구성되어있어야 하며, 획(stroke)이 설정되지 않은 형태로 제작되어야 합니다.

![위쪽부터 면 처리가 누락된 부적절 요소, 면 처리는 됐으나 획이 포함된 부적절 요소, 면 처리 획 미포함 모두 충족한 올바른 요소](https://upload.cafenono.com/image/slashpageHome/20250611/172214_vxFZRffeD0fBQIbuwT?q=80&s=1280x180&t=outside&f=webp)

**오브젝트 선택 > 상단 Type 메뉴 > Create Outlines** 를 클릭하여, 텍스트 오브젝트를 면 처리할 수 있습니다.

한편, 선(Path) 오브젝트의 경우, **오브젝트 선택 > 상단 Object 메뉴 > Path > Outline Stroke** 를 클릭하여, 
면 처리할 수 있습니다.

> 위 작업이 어려울 경우, 해당 요소는 'SVG 요소'로 등록이 불가하며, 

**반드시 'PNG 요소'로 제출해 주시기 바랍니다.**

## 4️⃣ 그라데이션 색상이 포함된 경우

![Image](https://upload.cafenono.com/image/slashpageHome/20250616/162809_ADviaVow4QuIavwTr4?q=80&s=1280x180&t=outside&f=webp)

'SVG 요소' 제작 시 반드시** 단색**만 사용해 주셔야 합니다.

그라데이션 색상이 포함된 경우, 'SVG 요소'로 등록이 불가하며, **반드시 'PNG 요소'로 제출해 주시기 바랍니다.**

### ⚠️ 업로드 전, 모든 가이드를 충분히 숙지해 주세요.

_가이드 미숙지로 인해 발생하는 문제는 기여자 본인에게 책임이 있음에 유의해 주세요._

For the site tree, see the [root Markdown](https://slashpage.com/designhub-guide.md).