# 배경없는 PNG 이미지로 메시지 디자인 만들기

## **PNG 이미지로 메시지 만들기**

일반적인 사각형 형태의 메시지 디자인이 아닌 투명한 배경 이미지를 사용한 아이콘 느낌의 메시지를 디자인 해보세요.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1605502812288/image.png" alt=""><figcaption></figcaption></figure>

### **1. GroobeeWrap 준비**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687413222898/2-a.gif" alt=""><figcaption></figcaption></figure>

* '빈 템플릿'을 사용하여 이미지를 넣을 수 있도록 기본 이미지를 삭제합니다.

\
**뷰 컴포넌트**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687413254527/3.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
요소를 넣기 위한 정확한 위치를 확인하기 위해 '뷰 컴포넌트'를 켜두시는 것을 권장합니다. 뷰 컴포넌트는 실제 사이트에서는 노출되지 않습니다.
{% endhint %}

**▪ 상세설정 > 모양 > 가로 크기 / 세로 크기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687413412184/1.png" alt=""><figcaption></figcaption></figure>

* 불러올 이미지의 사이즈에 맞춰 '가로 : 250px X 세로 350px'로 body 사이즈를 조정해 주세요.

\
\&#xNAN;**▪ 상세설정 > 꾸미기 > 배경색 > rgb(255,255,255,0)**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687414132063/2.png" alt=""><figcaption></figcaption></figure>

* 배경 색상을 투명으로 설정합니다.

{% hint style="success" %}
배경색을 투명으로 적용 후 작업시 body의 경계가 보이지 않아 반드시 '뷰 컴포넌트'를 설정하는 것을 권장합니다.
{% endhint %}

### **2. 블록 추가**

**▪ 블록추가 > 컬럼블록 > 1단 컬럼**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687414453631/9-a.gif" alt=""><figcaption></figcaption></figure>

* 위치 조정을 위해 이미지와 CTA 버튼이 들어갈 컬럼 블록을 추가해 줍니다.

### **3. 배경 없는 PNG 이미지 추가**

**▪ 블록추가 > 기본 블록 > 이미지**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687414502721/3.png" alt=""><figcaption></figcaption></figure>

* 배경이 투명한 PNG 이미지를 추가합니다.

### **4. CTA 버튼 추가**

**▪ 블록추가 > 링크 블록 > 버튼**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687414749868/10-a.gif" alt=""><figcaption></figcaption></figure>

* 링크 버튼을 드래그 앤 드롭하여 CTA 버튼을 추가합니다.

### **5. 버튼 설정**

**▪ 상세설정 > 모양 > 가로크기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687415517107/4.png" alt=""><figcaption></figcaption></figure>

**▪ 상세설정 > 꾸미기 > 배경색**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/5pagp2ir5x/1687415539097/5.png" alt=""><figcaption></figcaption></figure>

### **6. 저장**

***

## **💌 메시지 디자인 가이드**

👉 [에디터 시작하기](https://docs.groobee.ai/old-admin/onsite/guide/editor/getting-started)

👉 [그루비 제안 템플릿으로 메시지 디자인 만들기](https://docs.groobee.ai/old-admin/onsite/guide/editor/template)

👉 [통 이미지로 메시지 디자인 만들기 - 슬라이드인](https://docs.groobee.ai/old-admin/onsite/guide/editor/slide-in)

👉 [통 이미지로 메시지 디자인 만들기 - 플로팅 바](https://docs.groobee.ai/old-admin/onsite/guide/editor/floating-bar)

👉 [배경없는 PNG 이미지로 메시지 디자인 만들기](https://docs.groobee.ai/old-admin/onsite/guide/editor/png)

👉 [CTA 버튼을 삽입한 메시지 디자인 작성](https://docs.groobee.ai/old-admin/onsite/guide/editor/cta)

📌 [CTA 버튼 사용 TIP](https://docs.groobee.ai/old-admin/onsite/guide/editor/cta-tip)