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

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

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

{% 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. 저장**

***

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

👉 [에디터 시작하기](/old-admin/onsite/guide/editor/getting-started.md)

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

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

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

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

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

📌 [CTA 버튼 사용 TIP](/old-admin/onsite/guide/editor/cta-tip.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.groobee.ai/old-admin/onsite/guide/editor/slide-in.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.