# 통 이미지로 메시지 디자인 만들기-슬라이드인

## **슬라이드 인: 통이미지**

* 사전에 준비된 배너 이미지가 있는 경우 이미지를 불러올 수 있습니다.
* 모바일 유형도 동일한 방식으로 진행할 수 있습니다.

{% hint style="success" %}
가이드 라인에서 사용한 이미지 사이즈는 \[슬라이드 인]에서 가장 많이 사용되고 있는 사이즈로 \
'가로 : 250px X 세로 350px' 입니다.
{% endhint %}

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

<br>

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

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

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

**뷰 컴포넌트**

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

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

**상세설정 > 모양**

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

* 불러올 이미지의 사이즈인 '가로 : 250px X 세로 350px'에 맞게 여백 공간이 보이지 않도록 body 사이즈를 조정합니다.

### **2. 이미지 불러오기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/oy11wuq3wd/1687420977849/12-a.gif" alt=""><figcaption></figcaption></figure>

* 상세설정 > 배경 이미지 > Layer > \[이미지 업로드] 버튼을 클릭하여 '더블 클릭 or 파일 드래그 앤 드롭'하여 이미지 파일을 추가합니다.

**더블 클릭으로 이미지 불러오는 방법**

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

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/7egd6h1qhq/1606186697513/image.png" alt=""><figcaption></figcaption></figure>

**파일을 드래그 앤 드롭하여 이미지 불러오는 방법**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/7egd6h1qhq/1606186898281/image.png" alt=""><figcaption></figcaption></figure>

### **3. 불러온 이미지 조정**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/e63v6g03de/1687421188050/7.png" alt=""><figcaption></figcaption></figure>

* 불러온 이미지 그대로 저장해도 되지만 이미지 설정 값을 조정하면 이미지 크기에 약간의 오차가 발생해도 메시지 디자인을 최적화 할 수 있습니다.

{% hint style="success" %}
<권장 설정 값>\
▪ 반복 : no-repeat\
▪ 위치 : center-center\
▪ 사이즈 : contain
{% endhint %}

### **+ 추가 필요 작업**

* 고객을 유도하고자 하는 특정 페이지로 링크를 설정하고 싶다면 메시지 영역 전체에 링크 블록을 추가하는 작업을 진행해 주세요.

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

1. 블록추가 > 링크 블록 > \[블록]을 드래그 앤 드롭하여 디자인 영역으로 옮깁니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/e63v6g03de/1687422460682/6.png" alt=""><figcaption></figcaption></figure>

2. 추가된 링크 블록을 확인할 수 있습니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/e63v6g03de/1687422756698/7.png" alt=""><figcaption></figcaption></figure>

3. 추가된 링크 영역의 사이즈를 메시지 전체 영역 사이즈에 맞게 수정합니다.

### **4. 저장**

***

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

👉 [에디터 시작하기](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)