# 미리캔버스 에디터 사용하기

미리캔버스 에디터를 통해 제작해야 하는 콘텐츠는 아래 사용 방법 확인 후 제출해 주세요.

# ✅ 에디터 사용 방법

**1. 미리캔버스에 접속 후 우측 상단 '디자인 만들기' 버튼을 선택해 주세요.**

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

**2. 좌측 탭에서 원하는 기능을 선택해서 사용합니다.**

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

> **TIP! **검색창에서 내 요소와 컬렉션 찾기

1. **_@닉네임_**을 검색하여 자신이 등록한 요소를 쉽게 찾으실 수 있습니다.

2. 디자인허브를 통해 확인할 수 있는 미리캔버스 요소 / 컬렉션 ID (예: 18575691)를 
2. **_idx:18575691_**로 검색할 수 있습니다.

직접 업로드하여 올리는 업로드 요소나 폰트가 포함되어 있는 콘텐츠는 제출할 수 없습니다.

반드시, 미리캔버스에 등록된 요소와 폰트를 사용해주세요.

**3. 제작자의 편의를 위해, '레이어' 기능을 사용하는 걸 권장하고 있습니다.**

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

미리캔버스 좌측 상단 메뉴를 통해 '레이어'를 온/오프 할 수 있습니다.

빠른 실행을 원하신다면 단축키 `Command(Ctrl) + Shift + Y`를 사용해 주세요.

1. **콘텐츠 만들기가 끝났다면, 주소창에서 디자인 주소 URL을 복사하여 디자인허브에 업로드 해주세요.**

📌 실시간 자동 저장되기 때문에 저장 버튼은 별도로 존재하지 않습니다.

# ✅ 요소 사용 방법

아래 요소 별 사용 방법을 꼭 숙지하신 뒤, 콘텐츠를 제작해 주세요.

> 미리캔버스 "요소" 탭에 있는 요소만을 사용하셔야 합니다.

직접 "업로드"한 콘텐츠 사용시, 디자인허브에 제출하실 수 없습니다.

### 1️⃣ 단색 배경 사용 방법

단색 배경을 사용하실 경우 '**배경색**' 기능을 사용해 주세요.

1. 배경으로 이동

2. '**배경색**' 클릭

3. 원하는 색상 클릭

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

> **꼭 읽어주세요.**

사각형 요소를 배치하여 배경으로 사용하실 경우 심사 과정에서 거부될 수 있습니다.

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

### 2️⃣ 타 포맷 요소 배경 사용 방법

'**배경**' 요소 외 다른 요소를 배경으로 사용하실 경우 '**배경으로 만들기**' 기능을 사용해 주세요.

1. 좌측 패널에서 원하는 라이브러리 클릭

2. 검색창에 찾는 요소 키워드 입력

3. 원하는 요소 선택 > 마우스 우클릭 > '배경으로 만들기' 클릭

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

💡 '사진, 배경 제거 사진, PNG 요소, 배경' 요소만 '배경으로 만들기' 기능을 사용할 수 있습니다.

### 3️⃣ 사진 요소 사용 방법

'**사진**' 요소는 단독으로 사용 불가합니다.

반드시 '**프레임**' 요소 안에 '**사진**'을 넣어주세요.

1. 원하는 '**사진**' 요소와 '**프레임**' 요소 불러오기

2. '**사진**'을 드래그앤드롭하여 '**프레임**' 안에 넣기

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

💡 '**프레임**' 요소는 **요소 > 프레임** 에서 사용하실 수 있습니다.

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

### 4️⃣ 핸들러 영역 조정

핸들러 영역이란, 사용자가 요소의 사이즈, 길이, 회전 등을 조절하기 위해 필요한 사각형 형태의 UI를 뜻합니다.

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

핸들러 영역이 넓을 수록 뒷 편의 요소 선택이 어려워져 사용성이 대폭 떨어지게 됩니다.

때문에 핸들러 영역, 또는 요소 크롭 상태가 적절한 요소만 디자인에 사용하실 수 있습니다.

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

핸들러 영역 조절 방법은 아래 내용을 참고해주세요.

1. 조절하려는 콘텐츠 더블클릭

2. 영역 조절

![Image](https://upload.cafenono.com/image/slashpageHome/20250520/145246_NIiWdzwALv9p5Z7iV3)

💡 '사진, 배경 제거 사진, PNG 요소, 배경' 콘텐츠는 미리캔버스 디자인 에디터 내에서 
자유롭게 핸들러 영역을 조절하실 수 있으나, 그 밖의 콘텐츠는 핸들러 영역 조절이 불가합니다.

> **꼭 읽어주세요.**

핸들러 영역이 조절되어있지 않은 콘텐츠 또는 요소 크롭이 적절하지 않은 콘텐츠를 사용해 디자인할 경우 심사 과정에서 거부될 수 있습니다.

# ✅ 텍스트 사용 방법

아래 텍스트 사용 방법을 꼭 숙지하신 뒤, 콘텐츠를 제작해 주세요.

### 1️⃣ 필터 기능으로 폰트 쉽게 찾기

미리캔버스에서는 약 1,000여종의 무/유료 폰트를 제공하고 있습니다.

때문에 원하는 폰트를 찾기 어려울 수 있습니다.

이 경우 '필터' 기능을 사용하면 원하는 폰트를 더 쉽고 편하게 찾을 수 있습니다.

### 2️⃣ 텍스트 레이어 순서 조정

텍스트 레이어는 꼭 최상단에 위치할 수 있도록 조정해 주세요.

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

또한, 텍스트끼리 그룹 생성은 불가합니다. 꼭 개별 레이어로 존재하도록 설정해 주세요.

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

> **꼭 읽어주세요.**

- 텍스트 레이어가 하단에 위치할 경우 사용성이 떨어져 심사 과정에서 거부될 수 있습니다.
- 단, 디자인이 별도로 필요한 경우에는 제외됩니다.

- 텍스트 그룹이 존재할 경우 심사 과정에서 거부될 수 있습니다.

### 3️⃣ 기타 참고 사항

디자인의 일관성, 사용성, 심미성을 위해 요소, 이미지, 텍스트 간의 적절한 간격과 정렬을 유지해 주세요.

텍스트 정렬은 텍스트 위치에 맞게 설정하시는 걸 권장합니다.

- 예) 텍스트의 위치가 좌측일 경우, 글자 좌측 정렬

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

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

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